-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
151 lines (139 loc) · 8.44 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iCodeThis.com daily challenge</title>
<link rel="stylesheet" href="styles.css" class="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body class="bg-[#262847] flex items-center justify-center min-h-screen">
<div class="bg-[#303057] shadow-[0px_12px_15px_10px_rgba(34,35,69,0.57)] text-[#b8b9dd] w-full md:w-[554px] rounded-md overflow-hidden relative mr-2 ml-2">
<svg xmlns="http://www.w3.org/2000/svg" class="absolute transition-all duration-150 ease-in cursor-pointer top-6 right-6 hover:stroke-white" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#515374" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>
<h1 class="bg-[#2b2c50] px-12 py-10 font-semibold text-2xl flex items-center justify-start gap-4">
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block" width="32" height="32" viewBox="0 0 24 24" stroke-width="2" stroke="#515374" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
<path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
<path d="M16 5l3 3" />
</svg>
<span>Edit Your Account</span>
</h1>
<div class="px-12 py-14">
<label for="name">
<span class="tracking-[0.25rem] font-semibold block cursor-pointer">NAME</span>
<input type="text" name="name" id="name" class="w-full p-4 bg-transparent placeholder:text-[#8182a8] border border-[#4a4a75] mt-2 mb-6 outline-[#747ad1] font-semibold" placeholder="Your Full Name Here" value="Neluttu" />
</label>
<label for="email">
<span class="tracking-[0.25rem] font-semibold block cursor-pointer">EMAIL</span>
<input type="text" name="email" id="email" class="w-full p-4 bg-transparent placeholder:text-[#8182a8] border border-[#4a4a75] mt-2 mb-6 outline-[#747ad1] font-semibold" placeholder="Your Email Address Here" / value="neluttu@icodethis.com">
</label>
<span class="tracking-[0.25rem] font-semibold block cursor-pointer">DATE OF BIRTH</span>
<div class="flex items-center justify-center w-full gap-4 m-auto">
<select onchange="verificaSelectiile()" id="day" class="w-full p-4 bg-transparent placeholder:text-[#8182a8] border border-[#4a4a75] mt-2 mb-6 outline-[#747ad1] font-semibold">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option selected>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>32</option>
<option>31</option>
</select>
<select onchange="verificaSelectiile()" id="month" class="w-full p-4 bg-transparent placeholder:text-[#8182a8] border border-[#4a4a75] mt-2 mb-6 outline-[#747ad1] font-semibold">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6" selected>June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select onchange="verificaSelectiile()" id="year" class="w-full p-4 bg-transparent placeholder:text-[#8182a8] border border-[#4a4a75] mt-2 mb-6 outline-[#747ad1] font-semibold">
</select>
<script>
var selectAni = document.getElementById("year");
var anCurent = new Date().getFullYear();
for (var an = 1940; an <= anCurent; an++) {
var option = document.createElement("option");
option.value = an;
option.text = an;
if (an === 1983) option.selected = true;
selectAni.appendChild(option);
}
</script>
</div>
<span id="varsta" class="mt-3 font-semibold">40 years, 0 months and 1 days old.</span>
<script>
var selectZiua = document.getElementById("day");
var selectLuna = document.getElementById("month");
var selectAnul = document.getElementById("year");
var spanVarsta = document.getElementById("varsta");
function verificaSelectiile() {
if (selectZiua.value && selectLuna.value && selectAnul.value) {
calculVarsta();
} else
spanVarsta.textContent = "";
}
function calculVarsta() {
var ziuaSelectata = selectZiua.value;
var lunaSelectata = selectLuna.value;
var anulSelectat = selectAnul.value;
var dataNasterii = new Date(anulSelectat, lunaSelectata - 1, ziuaSelectata);
var dataCurenta = new Date();
var varstaAni = dataCurenta.getFullYear() - dataNasterii.getFullYear();
var varstaLuni = dataCurenta.getMonth() - dataNasterii.getMonth();
var varstaZile = dataCurenta.getDate() - dataNasterii.getDate();
if (varstaLuni < 0 || (varstaLuni === 0 && varstaZile < 0)) {
varstaAni--;
}
spanVarsta.textContent = varstaAni + " years, " + varstaLuni + " months and " + varstaZile + " days old.";
}
</script>
</div>
<div class="flex items-center justify-evenly w-full gap-6 bg-[#2b2c50] pt-8 pb-8 px-10">
<button class="bg-[#34355b] text-[#dcddff] font-semibold text-xl w-full py-4 rounded-md hover:bg-[#242546] transition-all duration-150 ease-in">Cancel</button>
<button class="bg-[#f27363] text-[#dcddff] font-semibold text-xl w-full py-4 rounded-md hover:bg-[#f93f28] transition-all duration-150 ease-in">Save</button>
</div>
</div>
</body>
</html>