summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--StoneIsland/www/css/account.css95
-rw-r--r--StoneIsland/www/index.html253
2 files changed, 218 insertions, 130 deletions
diff --git a/StoneIsland/www/css/account.css b/StoneIsland/www/css/account.css
index ad7819bb..8d26ce1e 100644
--- a/StoneIsland/www/css/account.css
+++ b/StoneIsland/www/css/account.css
@@ -55,7 +55,7 @@ form {
form h2 {
text-align: center;
margin: 0;
- padding: 28px 10px 8px 10px;
+ padding: 24px 10px 8px 10px;
font-size: 14px;
color: #000;
letter-spacing: 1px;
@@ -69,7 +69,7 @@ input {
color:#000;
letter-spacing:1px;
text-transform:uppercase;
- height:37px;
+ height:35px;
text-align:center;
margin: 0px auto;
display:block;
@@ -87,7 +87,7 @@ input {
overflow: auto;
}
-.half-input input {
+.half-input input, .half-input select {
position: relative;
margin: 0;
border:none;
@@ -100,51 +100,44 @@ input {
border-right: 1px solid #a9a9a9;
}
-#newsletter {
+.toggle-container {
margin: 0px auto;
display: table;
- margin-top: 28px;
+ margin-top: 10px;
width: calc(100vw - 10px);
box-sizing: border-box;
- padding:15px;
+ padding:10px 18px 2px;
font-size:14px;
}
-#newsletter .caption {
-display:table-cell;
+.toggle-row {
+ display:block;
+ padding-bottom:16px;
+}
+
+.toggle-container .caption {
+ display:table-cell;
vertical-align:middle;
width:100%;
}
-#newsletter .toggle {
-display:table-cell;
+.toggle-container .toggle {
+ display:table-cell;
vertical-align:middle;
-
-text-align:right
+ text-align:right
}
-#newsletter h3 {
-margin:0;
+.toggle-container h3 {
+ margin:0;
}
-#newsletter-info {
- margin: 0px auto;
- display: table;
- padding-top: 18px;
- width: calc(100vw - 10px);
- box-sizing: border-box;
- font-size:13px;
- letter-spacing:0.5px;
- text-align:center;
-}
-
-input#switch {
+input.switch {
max-height: 0;
max-width: 0;
opacity: 0;
}
-input#switch + label {
+input.switch + label {
display: inline-block;
position: relative;
box-shadow: inset 0 0 0px 1px rgba(0,0,0,.7);
@@ -154,7 +147,7 @@ input#switch + label {
border-radius: 15px;
}
-input#switch + label:before {
+input.switch + label:before {
content: "";
position: absolute;
display: block;
@@ -169,7 +162,7 @@ input#switch + label:before {
transition: .25s ease-in-out;
}
-input#switch + label:after {
+input.switch + label:after {
content: "";
position: absolute;
display: block;
@@ -185,12 +178,52 @@ input#switch + label:after {
transition: .25s ease-in-out;
}
-input#switch:checked + label:before {
+input.switch:checked + label:before {
width: 50px;
background: #136f11;
}
-input#switch:checked + label:after {
+input.switch:checked + label:after {
left: 20px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.7);
}
+
+.container {
+ position:absolute;
+ height:calc(100% - 88px);
+ width:100vw;
+ box-sizing:border-box;
+ display: flex;
+ flex-direction: column;
+ margin:0;
+ left:0;right:0;
+ top:48px;
+}
+
+.container-row {
+ box-sizing:border-box;
+}
+
+.container-fill {
+flex: 1;
+ align-items: center;
+ justify-content: center;
+ position:relative;
+}
+
+
+.container-message {
+ font-size:12px;
+ letter-spacing:0.5px;
+ text-align:center;
+ position:absolute;
+ top:50%;
+ left:50%;
+ width:100%;
+ -webkit-transform: translateX(-50%) translateY(-50%);
+ transform: translateX(-50%) translateY(-50%);
+}
+
+.alert-notice {
+ color:red!important
+}
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 5e6e6302..ec40ff95 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -225,72 +225,116 @@
<span class="msg"></span>
</form>
</div>
-
+
<div id="profile">
<h1>PROFILE</h1>
<form>
- <input type="text" name="Name" placeholder="FIRST NAME" required>
- <input type="text" name="Surname" placeholder="LAST NAME" required>
- <input type="email" name="Email" placeholder="EMAIL ADDRESS" required>
- <!--
- <select name="Gender">
- <option value="M">Male</option>
- <option value="F">Female</option>
- </select>
- -->
- <div class="half-input">
- <input type="text" name="Zip" placeholder="ZIP" required>
- <div id="country-wrapper">
- <div id="country-select">
- <input type="text" name="Country" placeholder="UNITED STATES" required>
+ <div class="container">
+ <div class="container-row">
+ <input type="text" name="Name" placeholder="FIRST NAME" required>
+ <input type="text" name="Surname" placeholder="LAST NAME" required>
+ <input type="email" name="Email" placeholder="EMAIL ADDRESS" required>
+ <div class="half-input">
+ <input type="text" name="Zip" placeholder="ZIP" required>
+ <div id="country-wrapper">
+ <div id="country-select">
+ <input type="text" name="Country" placeholder="UNITED STATES" required>
+ </div>
+ </div>
+ </div>
+ <h2>CHANGE PASSWORD</h2>
+ <input type="password" name="CurrentPassword" placeholder="CURRENT PASSWORD" required>
+ <input type="password" name="NewPassword" placeholder="NEW PASSWORD (7 CHARACTERS OR MORE)" required>
+ <div class="toggle-container">
+ <div class="caption">
+ <h3>Newsletter</h3>
+ Receive Stone Island Newsletter
+ </div>
+ <div class="toggle">
+ <input type="checkbox" id="receive-newsletter" name="switch" class="switch">
+ <label for="receive-newsletter"></label>
+ </div>
</div>
</div>
- </div>
-
- <h2>CHANGE PASSWORD</h2>
- <input type="password" name="CurrentPassword" placeholder="CURRENT PASSWORD" required>
- <input type="password" name="NewPassword" placeholder="NEW PASSWORD (7 CHARACTERS OR MORE)" required>
- <span class="msg"></span>
- <div id="newsletter">
- <div class="caption">
- <h3>Newsletter</h3>
- Receive Stone Island Newsletter
- </div>
- <div class="toggle">
- <div class="toggle-switch">
- <input type="checkbox" name="switch" id="switch">
- <label for="switch"></label>
+ <div class="container-fill">
+ <div class="container-message">
+ <!-- addClass ".alert-notice" to make the
+ error message text red in the span below -->
+ <span class="msg">
+ * Your personal and payment<br>
+ information will always remain private
+ </span>
</div>
- </div>
- </div>
- <div id="newsletter-info">
- * Your personal and payment<br>
- information will always remain private
+ </div>
</div>
- </form>
+ </form>
</div>
+
<div id="shipping">
<h1>SHIPPING</h1>
<form>
- <div class="address"></div>
- <span class="msg"></span>
+ <div class="container">
+ <div class="container-row">
+ <div class="address"></div>
+ </div>
+ <div class="container-fill">
+ <div class="container-message">
+ <span class="msg">
+ * Your personal and payment<br>
+ information will always remain private
+ </span>
+ </div>
+ </div>
+ </div>
</form>
</div>
<div id="payment">
<h1>PAYMENT</h1>
<form>
- <div class="cc"></div>
- <div class="address"></div>
- <span class="msg"></span>
+ <div class="container">
+ <div class="container-row">
+ <div class="cc"></div>
+ <div class="address"></div>
+ </div>
+ <div class="container-fill">
+ <div class="container-message">
+ <span class="msg">
+ * Your personal and payment<br>
+ information will always remain private
+ </span>
+ </div>
+ </div>
+ </div>
</form>
</div>
<div id="settings">
<div class="scroll">
<h1>NOTIFICATIONS</h1>
- <div class="content">TURN ON / OFF NOTIFICATIONS</div>
+ <div class="toggle-container">
+ <div class="toggle-row">
+ <div class="caption">
+ <h3>Store</h3>
+ Receive notifications for Store
+ </div>
+ <div class="toggle">
+ <input type="checkbox" id="store-notifications" name="switch" class="switch">
+ <label for="store-notifications"></label>
+ </div>
+ </div>
+ <div class="toggle-row">
+ <div class="caption">
+ <h3>Hub</h3>
+ Receive notifications for Hub
+ </div>
+ <div class="toggle">
+ <input type="checkbox" id="hub-notifications" name="switch" class="switch">
+ <label for="hub-notifications"></label>
+ </div>
+ </div>
+ </div>
</div>
</div>
@@ -396,8 +440,10 @@
<script type="text/html" id="creditcard_template">
<input type="text" name="CC" placeholder="CREDIT CARD NUMBER" required>
+ <div class="half-input">
<input type="text" name="EXP" placeholder="EXPIRATION DATE" required>
<input type="text" name="CVV" placeholder="SECURITY CODE" required>
+ </div>
<span class="address"></span>
</script>
@@ -406,63 +452,72 @@
<input type="text" name="Surname" placeholder="Last Name">
<input type="text" name="Address1" placeholder="Address Line 1">
<input type="text" name="Address2" placeholder="Address Line 2">
- <input type="number" name="Zip" placeholder="Zip">
- <span class="country">United States</span>
- <input type="text" name="City" placeholder="City">
- <select id="state" name="state" required>
- <option value="">State</option>
- <option value="AL">Alabama</option>
- <option value="AK">Alaska</option>
- <option value="AZ">Arizona</option>
- <option value="AR">Arkansas</option>
- <option value="CA">California</option>
- <option value="CO">Colorado</option>
- <option value="CT">Connecticut</option>
- <option value="DE">Delaware</option>
- <option value="DC">District Of Columbia</option>
- <option value="FL">Florida</option>
- <option value="GA">Georgia</option>
- <option value="HI">Hawaii</option>
- <option value="ID">Idaho</option>
- <option value="IL">Illinois</option>
- <option value="IN">Indiana</option>
- <option value="IA">Iowa</option>
- <option value="KS">Kansas</option>
- <option value="KY">Kentucky</option>
- <option value="LA">Louisiana</option>
- <option value="ME">Maine</option>
- <option value="MD">Maryland</option>
- <option value="MA">Massachusetts</option>
- <option value="MI">Michigan</option>
- <option value="MN">Minnesota</option>
- <option value="MS">Mississippi</option>
- <option value="MO">Missouri</option>
- <option value="MT">Montana</option>
- <option value="NE">Nebraska</option>
- <option value="NV">Nevada</option>
- <option value="NH">New Hampshire</option>
- <option value="NJ">New Jersey</option>
- <option value="NM">New Mexico</option>
- <option value="NY">New York</option>
- <option value="NC">North Carolina</option>
- <option value="ND">North Dakota</option>
- <option value="OH">Ohio</option>
- <option value="OK">Oklahoma</option>
- <option value="OR">Oregon</option>
- <option value="PA">Pennsylvania</option>
- <option value="RI">Rhode Island</option>
- <option value="SC">South Carolina</option>
- <option value="SD">South Dakota</option>
- <option value="TN">Tennessee</option>
- <option value="TX">Texas</option>
- <option value="UT">Utah</option>
- <option value="VT">Vermont</option>
- <option value="VA">Virginia</option>
- <option value="WA">Washington</option>
- <option value="WV">West Virginia</option>
- <option value="WI">Wisconsin</option>
- <option value="WY">Wyoming</option>
- </select>
+ <div class="half-input">
+ <input type="text" name="City" placeholder="City">
+ <select id="state" name="State" required>
+ <option value="">State</option>
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="DC">District Of Columbia</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+
+ <div class="half-input">
+ <input type="text" name="Zip" placeholder="ZIP" required>
+ <div id="country-wrapper">
+ <div id="country-select">
+ <input type="text" name="Country" placeholder="UNITED STATES" required>
+ </div>
+ </div>
+ </div>
<input type="number" name="Phone" placeholder="Phone Number">
</script>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 23:08:28 +0000