merge

4 files changed, 145 insertions, 28 deletions

diff --git a/StoneIsland/www/css/account.css b/StoneIsland/www/css/account.css
index e2054adb..e2d7ed97 100644
--- a/StoneIsland/www/css/account.css
+++ b/StoneIsland/www/css/account.css
@@ -46,14 +46,14 @@ form {
 form h2 {
   text-align: center;
   margin: 0;
-  padding: 24px 10px 8px 10px;
+  padding: 20px 10px 8px 10px;
   font-size: 14px;
   color: #000;
   letter-spacing: 1px;
   font-weight: bold;
 }
 
-input {
+input[type=text], input[type=password], input[type=number], input[type=email]  {
   font-family:pfd, sans-serif;
   font-size:14px;
   outline:none!important;
@@ -113,9 +113,11 @@ input {
 }
 
 .toggle-container .toggle {
-  display:table-cell;
-  vertical-align:middle;
-  text-align:right
+    display: table-cell;
+    vertical-align: middle;
+    text-align: right;
+    position: relative;
+    right: 12px;
 }
 
 .toggle-container h3 {
@@ -129,13 +131,16 @@ input.switch {
 }
 
 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;
+    display: inline-block;
+    box-shadow: inset 0 0 0px 1px rgba(0,0,0,.7);
+    text-indent: -5000px;
+    height: 30px;
+    width: 50px;
+    border-radius: 15px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateX(-50%) translateY(-50%);
 }
 
 input.switch + label:before {
@@ -181,14 +186,14 @@ input.switch:checked + label:after {
 
 .container {
   position:absolute; 
-  height:calc(100% - 88px);
+  height:calc(100% - 104px);
   width:100vw;
   box-sizing:border-box;
   display: flex;  
   flex-direction: column;
   margin:0;
   left:0;right:0;
-  top:48px;
+  top:64px;
 }
 
 .container-row {
@@ -215,6 +220,92 @@ input.switch:checked + label:after {
   transform: translateX(-50%) translateY(-50%);
 }
 
+.premessage {
+  top:calc(50% - 20px)!important;
+}
+
+.submessage {
+  top:75%!important;
+}
+
 .alert-notice {
   color:red!important
 }
+
+.checkbox-container {
+  font-size:11px;
+  width:calc(100vw - 10px);
+  display:table;
+  box-sizing:border-box;
+  margin:5px auto 0;
+}
+
+.checkbox-toggle {
+  display:table-cell;
+  box-sizing:border-box;
+  padding-right:15px;
+  position:relative;
+}
+
+.checkbox-toggle input {
+  width:25px; height:35px;
+  opacity:0;
+}
+
+.checkbox-caption {
+  vertical-align:middle;
+  display:table-cell;
+  box-sizing:border-box;
+}
+
+.checkbox-row {
+  margin:12px 0;
+  box-sizing:border-box;
+}
+
+
+.checkbox-toggle label {
+  position:absolute;
+  top:50%;
+  transform:translateY(-50%);
+	cursor: pointer;
+	width: 36px;
+	height: 36px;
+  left: 0;
+	background: #fff;
+	border:1px solid #000;
+  box-sizing:border-box;
+}
+
+.checkbox-toggle label:after {
+	opacity: 0;
+	content: "";
+  top:50%;
+  position:absolute;
+  left:50%;
+  transform:translateX(-50%) translateY(-50%) rotate(45deg);
+  width:2px;
+  height:36px;
+  background:black;
+  transition: opacity .2s;
+}
+
+.checkbox-toggle label:before {
+	opacity: 0;
+	content: "";
+  top:50%;
+  position:absolute;
+  left:50%;
+  transform:translateX(-50%) translateY(-50%) rotate(-45deg);
+  width:2px;
+  height:36px;
+  background:black;
+  transition: opacity .2s;
+}
+
+.checkbox-toggle input[type=checkbox]:checked + label:after, .checkbox-toggle input[type=checkbox]:checked + label:before {
+	opacity: 1;
+}
+
+
+
diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css
index 9de286c1..d9d988bf 100644
--- a/StoneIsland/www/css/index.css
+++ b/StoneIsland/www/css/index.css
@@ -28,6 +28,7 @@ body {
   margin-left: -40px;
   display: none;
 }
+
 .loader:before {
   content: '';
   border-radius: 50%;
diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css
index bcbc3e69..a4c1f67b 100644
--- a/StoneIsland/www/css/nav.css
+++ b/StoneIsland/www/css/nav.css
@@ -19,8 +19,8 @@
 }
 .ios #nav,
 .ios #content {
-  top: 8px;
-  height: -webkit-calc(100% - 10px);
+  top: 20px;
+  height: -webkit-calc(100% - 20px);
 }
 .nav #nav {
   -webkit-transform: translateZ(0) translateX(0);
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 886a3b70..1f9b7a54 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -237,12 +237,20 @@
     <div class="scroll">
       <h1>LOGIN</h1>
       <form>
-        <input type="email" name="Email" placeholder="EMAIL ADDRESS" required>
-        <input type="password" name="Password" placeholder="PASSWORD" required>
-      
-        <span class="newuser">New User?</span>
-      
-        <span class="msg"></span>
+        <div class="container">
+          <div class="container-row">
+            <input style="margin-bottom:10px" type="email" name="Email" placeholder="EMAIL ADDRESS" required>
+            <input type="password" name="Password" placeholder="PASSWORD" required>
+          </div>
+          <div class="container-fill">
+            <div class="container-message premessage">               
+              <span class="newuser">New User?</span>
+            </div>
+            <div class="container-message submessage">
+              <span class="msg"></span>
+            </div>
+          </div>
+        </div>
       </form>
     </div>
   </div>
@@ -263,15 +271,32 @@
         <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>
+        <input type="email" name="ConfirmEmail" placeholder="CONFIRM EMAIL ADDRESS" required>
+        <input type="email" name="Birthday" placeholder="BIRTHDAY (MM/DD/YYYY)" required>
         <h2>PASSWORD</h2>
         <input type="password" name="Password" placeholder="PASSWORD (7 CHARACTERS OR MORE)" required>
         <input type="password" name="Password2" placeholder="CONFIRM PASSWORD" required>
-        <input type="checkbox" name="DataProfiling" value="true" required> I agree to share my personal information with Stone Island.
-        <span class="msg"></span>
+      
+        <div class="checkbox-container">
+          <div class="checkbox-row">
+            <div class="checkbox-toggle">
+               <input id="checkbox-data-profiling" type="checkbox" name="DataProfiling" value="true" required>
+               <label for="checkbox-data-profiling"></label>
+            </div>
+            <div class="checkbox-caption">
+              I agree that YOOX and SPORTSWEAR COMPANY may collect my personal information for marketing purposes (newsletters, news and promotions).
+            </div>
+          </div>
+          <div class="checkbox-row">
+            <div class="checkbox-toggle">
+               <input type="checkbox" id="checkbox-shopping-data-profiling" name="ShoppingDataProfiling" value="true" required>
+               <label for="checkbox-shopping-data-profiling"></label>
+            </div>
+            <div class="checkbox-caption">
+              I agree that YOOX NET-A-PORTER GROUP and SPORTSWEAR COMPANY may collect my personal information for creating a profile of my shopping habits.
+            </div>
+          </div>
+        </div>
       </form>
     </div>
   </div>