Merge branch 'master' of github.com:okfocus/stone-island

3 files changed, 350 insertions, 86 deletions

diff --git a/StoneIsland/www/css/account.css b/StoneIsland/www/css/account.css
index a6bfe4fd..8d26ce1e 100644
--- a/StoneIsland/www/css/account.css
+++ b/StoneIsland/www/css/account.css
@@ -46,4 +46,184 @@
 .settings #settings { display: block }
 #settings {
   display: none;
-}
\ No newline at end of file
+}
+
+form {
+  margin-top:20px;
+}
+
+form h2 {
+  text-align: center;
+  margin: 0;
+  padding: 24px 10px 8px 10px;
+  font-size: 14px;
+  color: #000;
+  letter-spacing: 1px;
+  font-weight: bold;
+}
+
+input {
+  font-family:pfd, sans-serif;
+  font-size:14px;
+  outline:none!important;
+  color:#000;
+  letter-spacing:1px;
+  text-transform:uppercase;
+  height:35px;
+  text-align:center;
+  margin: 0px auto;
+  display:block;
+  margin-top:4px;
+  width: calc(100vw - 10px);
+  border:1px solid #a9a9a9;
+}
+
+.half-input {
+  margin: 0px auto;
+  display: block;
+  margin-top: 4px;
+  width: calc(100vw - 10px);
+  border: 1px solid #a9a9a9;
+  overflow: auto;
+}
+
+.half-input input, .half-input select {
+  position: relative;
+  margin: 0;
+  border:none;
+  box-sizing: border-box;
+  float: left;
+  width: 50%;   
+}
+
+.half-input > input:first-child {
+  border-right: 1px solid #a9a9a9;
+}
+
+.toggle-container {
+  margin: 0px auto;
+  display: table;
+  margin-top: 10px;
+  width: calc(100vw - 10px);
+  box-sizing: border-box;
+  padding:10px 18px 2px;
+  font-size:14px;
+}
+
+.toggle-row {
+  display:block;
+  padding-bottom:16px;
+}
+
+.toggle-container .caption {
+  display:table-cell;
+  vertical-align:middle;
+  width:100%;
+}
+
+.toggle-container .toggle {
+  display:table-cell;
+  vertical-align:middle;
+  text-align:right
+}
+
+.toggle-container h3 {
+  margin:0;
+}
+
+input.switch {
+  max-height: 0;
+  max-width: 0;
+  opacity: 0;
+}
+
+input.switch + label {
+  display: inline-block;
+  position: relative;
+  box-shadow: inset 0 0 0px 1px rgba(0,0,0,.7);
+  text-indent: -5000px;
+  height: 30px;
+  width: 50px;
+  border-radius: 15px;
+}
+
+input.switch + label:before {
+  content: "";
+  position: absolute;
+  display: block;
+  height: 30px;
+  width: 30px;
+  top: 0;
+  left: 0;
+  border-radius: 15px;
+  background: rgba(19, 191, 17, 0);
+  -moz-transition: .25s ease-in-out;
+  -webkit-transition: .25s ease-in-out;
+  transition: .25s ease-in-out;
+}
+
+input.switch + label:after {
+  content: "";
+  position: absolute;
+  display: block;
+  height: 30px;
+  width: 30px;
+  top: 0;
+  left: 0px;
+  border-radius: 15px;
+  background: white;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,.7);
+  -moz-transition: .25s ease-in-out;
+  -webkit-transition: .25s ease-in-out;
+  transition: .25s ease-in-out;
+}
+
+input.switch:checked + label:before {
+  width: 50px;
+  background: #136f11;
+}
+
+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/css/nav.css b/StoneIsland/www/css/nav.css
index 07f62657..0b6ebe85 100644
--- a/StoneIsland/www/css/nav.css
+++ b/StoneIsland/www/css/nav.css
@@ -19,8 +19,8 @@
 }
 .ios #nav,
 .ios #content {
-  top: 20px;
-  height: -webkit-calc(100% - 20px);
+  top: 8px;
+  height: -webkit-calc(100% - 10px);
 }
 .nav #nav {
   -webkit-transform: translateZ(0) translateX(0);
@@ -148,9 +148,9 @@
   background-position: center center;
   position: absolute;
   background-size: contain;
-  width: 80px; height: 38px;
-  left: 50%; top: 2px;
-  margin-left: -40px;
+  width: 120px; height: 40px;
+  left: 50%; top: -4px;
+  margin-left: -60px;
 }
 #header .burger {
   display: inline-block;
@@ -178,6 +178,8 @@
   padding: 10px 0;
   color: #bbb;
   float: left;
+  font-size:14px;
+  font-weight:bold;
 }
 #footer .ok {
   color: #000;
@@ -246,10 +248,10 @@
 h1 {
   text-align: center;
   margin: 0;
-  padding: 15px 10px 10px 10px;
+  padding: 16px 10px 12px 10px;
   border-bottom: 1px solid #000;
-  font-size: 18px;
+  font-size: 14px;
   color: #000;
-  letter-spacing: 2px;
-  font-weight: 100;
+  letter-spacing: 1px;
+  font-weight: bold;
 }
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 76498e58..6b0b1770 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -252,45 +252,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>
-      <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>
-    </form>
+      <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 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>
+    </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 +467,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 +479,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>