summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--StoneIsland/www/css/account.css119
-rw-r--r--StoneIsland/www/css/index.css1
-rw-r--r--StoneIsland/www/css/nav.css4
-rw-r--r--StoneIsland/www/index.html49
4 files changed, 145 insertions, 28 deletions
diff --git a/StoneIsland/www/css/account.css b/StoneIsland/www/css/account.css
index 8d26ce1e..95e37c52 100644
--- a/StoneIsland/www/css/account.css
+++ b/StoneIsland/www/css/account.css
@@ -55,14 +55,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;
@@ -122,9 +122,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 {
@@ -138,13 +140,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 {
@@ -190,14 +195,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 {
@@ -224,6 +229,92 @@ flex: 1;
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 0b6ebe85..5fa264e9 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 6b0b1770..93c3b662 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -226,12 +226,20 @@
<div id="login">
<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>
@@ -241,15 +249,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>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-14 15:20:59 +0000