-
Notifications
You must be signed in to change notification settings - Fork 23
/
index.html
281 lines (275 loc) · 21.2 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<!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">
<meta name="og:title" content="Windows 11 Clone, with HTML, CSS, JS - by Laaouatni" />
<meta name="og:description" content="Windows 11 Clone, with HTML, CSS, JS - by Laaouatni Anas" />
<meta name="og:image" content="https://avatars.githubusercontent.com/u/87947051?v=4" />
<title>Windows 11 Clone, with HTML, CSS, JS - by Laaouatni</title>
<link rel="shortcut icon" href="https://avatars.githubusercontent.com/u/87947051?v=4" />
<link rel="stylesheet" href="./style.css">
<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=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<script type="text/javascript" src="./script.js" defer></script>
</head>
<body>
<!-- barra di navigazion in basso -->
<nav>
<div id="nav-container">
<div id="first-container">
<!-- windows 11 logo -->
<div id="windows-div" title="start">
<svg id="windows-logo" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" width="58" height="58" version="1.1" viewBox="0 0 48.745 48.747"><g fill="#0078d4"><rect x="2.2848e-15" y="-.00011033" width="23.105" height="23.105"/><rect x="25.64" y="-.00011033" width="23.105" height="23.105"/><rect x="2.2848e-15" y="25.642" width="23.105" height="23.105"/><rect x="25.64" y="25.642" width="23.105" height="23.105"/></g></svg>
</div>
<!-- search icon -->
<div id="search-div" title="cerca"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magnifying-glass" class="svg-inline--fa fa-magnifying-glass" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"></path></svg></div>
<!-- windows 11 widget -->
<div id="widget-div" title="widget"><img src="./images/w11-widget-icon.png" alt=""></div>
</div>
<div id="second-container">
<div id="sistema-info">
<!-- wifi -->
<div title="Local-WiFi"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="wifi" class="svg-inline--fa fa-wifi" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M319.1 351.1c-35.35 0-64 28.66-64 64.01s28.66 64.01 64 64.01c35.34 0 64-28.66 64-64.01S355.3 351.1 319.1 351.1zM320 191.1c-70.25 0-137.9 25.6-190.5 72.03C116.3 275.7 115 295.9 126.7 309.2C138.5 322.4 158.7 323.7 171.9 312C212.8 275.9 265.4 256 320 256s107.3 19.88 148.1 56C474.2 317.4 481.8 320 489.3 320c8.844 0 17.66-3.656 24-10.81C525 295.9 523.8 275.7 510.5 264C457.9 217.6 390.3 191.1 320 191.1zM630.2 156.7C546.3 76.28 436.2 32 320 32S93.69 76.28 9.844 156.7c-12.75 12.25-13.16 32.5-.9375 45.25c12.22 12.78 32.47 13.12 45.25 .9375C125.1 133.1 220.4 96 320 96s193.1 37.97 265.8 106.9C592.1 208.8 600 211.8 608 211.8c8.406 0 16.81-3.281 23.09-9.844C643.3 189.2 642.9 168.1 630.2 156.7z"></path></svg></div>
<!-- vulume -->
<div title="Audio Disattivato"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="volume-xmark" class="svg-inline--fa fa-volume-xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M301.2 34.85c-11.5-5.188-25.02-3.122-34.44 5.253L131.8 160H48c-26.51 0-48 21.49-48 47.1v95.1c0 26.51 21.49 47.1 48 47.1h83.84l134.9 119.9c5.984 5.312 13.58 8.094 21.26 8.094c4.438 0 8.972-.9375 13.17-2.844c11.5-5.156 18.82-16.56 18.82-29.16V64C319.1 51.41 312.7 40 301.2 34.85zM513.9 255.1l47.03-47.03c9.375-9.375 9.375-24.56 0-33.94s-24.56-9.375-33.94 0L480 222.1L432.1 175c-9.375-9.375-24.56-9.375-33.94 0s-9.375 24.56 0 33.94l47.03 47.03l-47.03 47.03c-9.375 9.375-9.375 24.56 0 33.94c9.373 9.373 24.56 9.381 33.94 0L480 289.9l47.03 47.03c9.373 9.373 24.56 9.381 33.94 0c9.375-9.375 9.375-24.56 0-33.94L513.9 255.1z"></path></svg></div>
<!-- battery -->
<div title="Batteria Scarica"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="battery-quarter" class="svg-inline--fa fa-battery-quarter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M192 192H96v128h96V192zM544 192V160c0-35.35-28.65-64-64-64H64C28.65 96 0 124.7 0 160v192c0 35.35 28.65 64 64 64h416c35.35 0 64-28.65 64-64v-32c17.67 0 32-14.33 32-32V224C576 206.3 561.7 192 544 192zM480 352H64V160h416V352z"></path></svg></div>
</div>
<div id="sistema-data">
<div id="orario-data">12:00</div>
<div id="calendario-data" title="dataCalendario">30/12/2021</div>
</div>
</div>
</div>
</nav>
<!-- start section, che si apre con il buttone windows tramite javascript -->
<section id="w11-start-section" class="">
<div class="input-div-start"><input type="text" id="cerca-input-start" placeholder="scrivi qui il testo da cercare"></div>
<div class="padding-start">
<div id="apps-container">
<div class="app-container-header">
<span>Aggiunto</span>
<div>
<span>Tutte le app</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg>
</div>
</div>
<div id="second-app-container">
<!-- 1 LINEA ORRIZONTALE -->
<div class="app-icon"><img src="./images/edge-icon.png" alt="edge icon">
<span>Edge</span>
</div>
<div class="app-icon"><img src="./images/word-icon.png" alt="word icon"><span>Word</span></div>
<div class="app-icon"><img src="./images/excel-icon.png" alt="excel icon"><span>Excel</span></div>
<div class="app-icon"><img src="./images/powerpoint-icon.png" alt="powerpoint icon"><span>Powerpoint</span></div>
<div class="app-icon"><img src="./images/ms-office.ico" alt="office icon microsoft"><span>Office</span></div>
<div class="app-icon"><img src="./images/outlook-icon.png" alt="outlook icon"><span>Posta</span></div>
<!-- 2 LINEA ORRIZONTALE -->
<div class="app-icon"><img src="./images/calendar-icon.png" alt="calendar icon"><span>Calendario</span></div>
<div class="app-icon"><img src="./images/ms-store-icon.png" alt="microsoft store icon"><span>Microsoft Store</span></div>
<div class="app-icon"><img src="./images/ms-foto-icon.ico" alt="galleria icon by microsoft 11"><span>Foto</span></div>
<div class="app-icon"><img src="./images/ms-video-icon.ico" alt="microsoft video icon by microsoft"><span>Film & TV</span></div>
<div class="app-icon"><img src="./images/Paint-2D.ico" alt="paint 2d icon by microsoft"><span>Paint</span></div>
<div class="app-icon"><img src="./images/Paint-3D.ico" alt="paint 2d icon by microsoft"><span>Paint 3D</span></div>
<!-- 3 LINEA ORRIZONTALE -->
<div class="app-icon"><img src="./images/Whiteboard.ico" alt="whiteboard icon by microsoft"><span>WhiteBoard</span></div>
<div class="app-icon"><img src="./images/ms-impostazioni-icon.ico" alt="impostazioni icon by microsoft"><span>Impostazioni</span></div>
<div class="app-icon"><img src="./images/ms-skype.ico" alt="skype icon by microsoft"><span>Skype</span></div>
<div class="app-icon"><img src="./images/vs-code.ico" alt="vs code icon by microsoft"><span>VS code</span></div>
<div class="app-icon"><img src="./images/vs-normal.ico" alt="visual Studio normal icon by microsoft"><span>Visual Studio</span></div>
<div class="app-icon"><img src="./images/ms-file-explorer.ico" alt="file Explorer icon by microsoft"><span>Esplora File</span></div>
</div>
</div>
<!-- la parte dove ci sono le CARTELLE -->
<div id="article-div">
<div class="app-container-header">
<span>Articoli consigliati</span>
<div>
<span>Altro</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg>
</div>
</div>
<div id="article-container">
<!-- 1 LINEA ORIZZONTALE -->
<div>
<div><img src="./images/Photos-folder.ico" alt="folder microsoft"></div>
<div>
<div>Nome Cartella</div>
<div>30 minuti fa</div>
</div>
</div>
<div>
<div><img src="./images/Photos-folder.ico" alt="folder microsoft"></div>
<div>
<div>Nome Cartella</div>
<div>30 minuti fa</div>
</div>
</div>
<!-- 2 LINEA ORIZZONTALE -->
<div>
<div><img src="./images/Photos-folder.ico" alt="folder microsoft"></div>
<div>
<div>Nome Cartella</div>
<div>30 minuti fa</div>
</div>
</div>
<div>
<div><img src="./images/Photos-folder.ico" alt="folder microsoft"></div>
<div>
<div>Nome Cartella</div>
<div>30 minuti fa</div>
</div>
</div>
<!-- 3 LINEA ORIZZONTALE -->
<div>
<div><img src="./images/Photos-folder.ico" alt="folder microsoft"></div>
<div>
<div>Nome Cartella</div>
<div>30 minuti fa</div>
</div>
</div>
<div>
<div><img src="./images/Photos-folder.ico" alt="folder microsoft"></div>
<div>
<div>Nome Cartella</div>
<div>30 minuti fa</div>
</div>
</div>
</div>
</div>
</div>
<!-- la parte più in basso della START section (buttone spegni e nome utente) -->
<div id="footer-start-section">
<div class="nome-utente-start-section">
<!-- icona UTENTE -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M12 2C6.579 2 2 6.579 2 12s4.579 10 10 10 10-4.579 10-10S17.421 2 12 2zm0 5c1.727 0 3 1.272 3 3s-1.273 3-3 3c-1.726 0-3-1.272-3-3s1.274-3 3-3zm-5.106 9.772c.897-1.32 2.393-2.2 4.106-2.2h2c1.714 0 3.209.88 4.106 2.2C15.828 18.14 14.015 19 12 19s-3.828-.86-5.106-2.228z"></path></svg>
<span>Laaouatni.</span>
</div>
<div class="spegni-pc-start-section">
<!-- icona SPEGNI -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M12 21c4.411 0 8-3.589 8-8 0-3.35-2.072-6.221-5-7.411v2.223A6 6 0 0 1 18 13c0 3.309-2.691 6-6 6s-6-2.691-6-6a5.999 5.999 0 0 1 3-5.188V5.589C6.072 6.779 4 9.65 4 13c0 4.411 3.589 8 8 8z"></path><path d="M11 2h2v10h-2z"></path></svg>
</div>
</div>
<!-- ricerca content -->
<div id="search-content" class="">
<div class="coming-soon-tab">coming soon...</div>
</div>
</section>
<section id="widget-section" class="">
<div style="grid-area: meteo;" id="meteo-widget">
<div class="widget-header-card">
<span>METEO</span>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ellipsis-vertical" class="svg-inline--fa fa-ellipsis-vertical" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path fill="currentColor" d="M64 360C94.93 360 120 385.1 120 416C120 446.9 94.93 472 64 472C33.07 472 8 446.9 8 416C8 385.1 33.07 360 64 360zM64 200C94.93 200 120 225.1 120 256C120 286.9 94.93 312 64 312C33.07 312 8 286.9 8 256C8 225.1 33.07 200 64 200zM64 152C33.07 152 8 126.9 8 96C8 65.07 33.07 40 64 40C94.93 40 120 65.07 120 96C120 126.9 94.93 152 64 152z"></path></svg>
</div>
<div class="content-widget">
<div class="sole-meteo"></div>
<div class="temperatura-container">
<span>20</span>
<span>°C</span>
</div>
</div>
<a class="btn-meteo-widget" href="https://weather.com/it-IT/tempo/oggi/l/62aee98dba8cc9c051a3753c27e85efd93f931abdd92a0010ab567ecfeb93d64" target="_blank">più dettagli</a>
</div>
<div style="grid-area: calendario;">
<div class="widget-header-card">
<span>Calendario</span>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ellipsis-vertical" class="svg-inline--fa fa-ellipsis-vertical" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path fill="currentColor" d="M64 360C94.93 360 120 385.1 120 416C120 446.9 94.93 472 64 472C33.07 472 8 446.9 8 416C8 385.1 33.07 360 64 360zM64 200C94.93 200 120 225.1 120 256C120 286.9 94.93 312 64 312C33.07 312 8 286.9 8 256C8 225.1 33.07 200 64 200zM64 152C33.07 152 8 126.9 8 96C8 65.07 33.07 40 64 40C94.93 40 120 65.07 120 96C120 126.9 94.93 152 64 152z"></path></svg>
</div>
<div class="coming-soon-widget">coming soon...</div>
</div>
<div style="grid-area: galleria;">
<div class="widget-header-card">
<span>Galleria</span>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ellipsis-vertical" class="svg-inline--fa fa-ellipsis-vertical" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path fill="currentColor" d="M64 360C94.93 360 120 385.1 120 416C120 446.9 94.93 472 64 472C33.07 472 8 446.9 8 416C8 385.1 33.07 360 64 360zM64 200C94.93 200 120 225.1 120 256C120 286.9 94.93 312 64 312C33.07 312 8 286.9 8 256C8 225.1 33.07 200 64 200zM64 152C33.07 152 8 126.9 8 96C8 65.07 33.07 40 64 40C94.93 40 120 65.07 120 96C120 126.9 94.93 152 64 152z"></path></svg>
</div>
<div class="coming-soon-widget">coming soon...</div>
</div>
<div style="grid-area: video;">
<div class="widget-header-card">
<span>Video</span>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ellipsis-vertical" class="svg-inline--fa fa-ellipsis-vertical" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path fill="currentColor" d="M64 360C94.93 360 120 385.1 120 416C120 446.9 94.93 472 64 472C33.07 472 8 446.9 8 416C8 385.1 33.07 360 64 360zM64 200C94.93 200 120 225.1 120 256C120 286.9 94.93 312 64 312C33.07 312 8 286.9 8 256C8 225.1 33.07 200 64 200zM64 152C33.07 152 8 126.9 8 96C8 65.07 33.07 40 64 40C94.93 40 120 65.07 120 96C120 126.9 94.93 152 64 152z"></path></svg>
</div>
<div class="coming-soon-widget">coming soon...</div>
</div>
<div style="grid-area: todo;">
<div class="widget-header-card">
<span>Todo</span>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ellipsis-vertical" class="svg-inline--fa fa-ellipsis-vertical" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path fill="currentColor" d="M64 360C94.93 360 120 385.1 120 416C120 446.9 94.93 472 64 472C33.07 472 8 446.9 8 416C8 385.1 33.07 360 64 360zM64 200C94.93 200 120 225.1 120 256C120 286.9 94.93 312 64 312C33.07 312 8 286.9 8 256C8 225.1 33.07 200 64 200zM64 152C33.07 152 8 126.9 8 96C8 65.07 33.07 40 64 40C94.93 40 120 65.07 120 96C120 126.9 94.93 152 64 152z"></path></svg>
</div>
<div class="coming-soon-widget">coming soon...</div>
</div>
</section>
<section id="notification-section">
<div>coming soon...</div>
</section>
<div class="extra">
<!-- VIDEO animazione Iniziale Sfondo -->
<video autoplay muted id="myVideo">
<source src="./images/video-1dark.mp4" type="video/mp4">
</video>
<section id="not-mobile-friendly">
<div id="titolo-errore">
Dispositivo NON Sopportato.
</div>
<div id="dettagli-errore">
<!-- spiegazione iniziale -->
<div>
<span>Apri da PC a Schermo Intero "<u><kbd>F11</kbd></u>"</span>,
<span>oppure usa "<u><kbd>CTRL</kbd> <kbd>-</kbd></u>" per zoom out</span>
</div>
<!-- errore in width -->
<div id="width-errore">
<span id="width-spiegazione">width: small</span>
<span id="width-attuale">undefined.</span>
</div>
<!-- errore in height -->
<div id="height-errore">
<span id="height-spiegazione">height: small</span>
<span id="height-attuale">undefined.</span>
</div>
</div>
</section>
<section id="spegni-section" class="">
<div>
<div style="--i: 1;"></div>
<div style="--i: 2;"></div>
<div style="--i: 3;"></div>
<div style="--i: 4;"></div>
<div style="--i: 5;"></div>
</div>
</section>
<div class="windows-tab">
<div class="tab-content">
<div class="topnavbar-tab">
<div class="nome-tab">coming soon...</div>
<div class="top-left-menu-tab">
<!-- meno -->
<div>
<svg id="min-icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="minus" class="svg-inline--fa fa-minus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z"></path></svg>
</div>
<!-- quadrato -->
<div>
<svg id="max-icon" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" class="svg-inline--fa fa-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M384 31.1H64c-35.35 0-64 28.65-64 63.1v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64v-320C448 60.65 419.3 31.1 384 31.1zM400 416c0 8.822-7.178 16-16 16H64c-8.822 0-16-7.178-16-16V96c0-8.822 7.178-16 16-16h320c8.822 0 16 7.178 16 16V416z"></path></svg>
</div>
<!-- per -->
<div>
<svg id="close-icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="xmark" class="svg-inline--fa fa-xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"></path></svg>
</div>
</div>
</div>
<div class="coming-soon-tab">
<span class="coming-soon-span">
coming soon...
</span>
<img id="tab-image" src="" alt="">
</div>
</div>
</div>
</div>
<!-- SelectionDrag Div con Javascript -->
<div id="div"></div>
</body>
</html>