-
Notifications
You must be signed in to change notification settings - Fork 39
/
index.html
197 lines (174 loc) · 9.49 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Windows 10 Pro Emulator</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="manifest" href="manifest.webmanifest" />
<!-- ios support -->
<link rel="apple-touch-icon" href="./imgs/logo/icon-192x192.png" />
<link rel="apple-touch-icon" href="./imgs/logo/icon-256x256.png" />
<link rel="apple-touch-icon" href="./imgs/logo/icon-384x384.png" />
<link rel="apple-touch-icon" href="./imgs/logo/icon-512x512.png" />
<link rel="icon" sizes="512x512" href="./imgs/windows.svg">
<meta name="apple-mobile-web-app-status-bar" content="#4a90e2" />
<meta name="theme-color" content="#4a90e2" />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<link rel='stylesheet' type='text/css' media='screen' href='css/main.css'>
</head>
<body>
<article class="fill-if-mobile">
<p>Only available <span>on PC.</span>
💛</p>
</article>
<section class="options">
<ul class="view-options-list">
<li class="list-element">New <img src="imgs/right-arrow-new.svg" alt=""></li>
</ul>
<ul class="view-options-sublist">
<li class="sublist-element" onclick="createTextfile()">Create New File</li>
</ul>
</section>
<main>
<article class="taskbar">
<section class="expand-apps">
<div id="1" ondrop="drop(event)" ondragover="allowDrop(event)">
<a class="link-to-page">
<img src="./imgs/apps/[removal.ai]_tmp-60d72cc48e6d1_EUZTXT.png" alt="recycle bin" />
<p>Recycle bin</p>
</a>
</div>
<div id="2" draggable="true" ondragstart="drag(event)">
<a draggable="false" class="link-to-page" href="https://sunkanmi.hashnode.dev/" rel=”noreferrer”>
<img draggable="false" src="./imgs/apps/brand-icon.png" alt="hashnode logo" />
<p>Hashnode</p>
</a>
</div>
<div id="3" draggable="true" ondragstart="drag(event)">
<a draggable="false" class="link-to-page" href="https://www.microsoft.com/en-us/edge"
rel=”noreferrer”>
<img draggable="false" src="./imgs/apps/edge.svg" alt="edge logo" />
<p>Microsoft Edge</p>
</a>
</div>
<div id="4" draggable="true" ondragstart="drag(event)">
<a draggable="false" class="link-to-page" href="https://www.google.com/chrome/" rel=”noreferrer”>
<img draggable="false" src="./imgs/apps/chrome.svg" alt="chrome logo" />
<p>Chrome</p>
</a>
</div>
<div id="5" draggable="true" ondragstart="drag(event)">
<a draggable="false" class="link-to-page" href="https://www.mozilla.org/en-US/firefox/new/"
rel=”noreferrer”>
<img draggable="false" src="./imgs/apps/firefox.svg" alt="firefox logo" />
<p>Firefox</p>
</a>
</div>
</section>
</article>
</main>
<footer>
<section onclick="openMenu()" class="taskbar-hover windows-hover">
<svg id="windows-icon" viewBox="0 0 150 150" width="150px" height="150px">
<g id="surface1062591">
<path
d="M 59.554688 23.28125 L 14.554688 30.03125 C 13.085938 30.253906 12 31.515625 12 33 L 12 69 C 12 70.660156 13.34375 72 15 72 L 60 72 C 61.65625 72 63 70.660156 63 69 L 63 26.25 C 63 25.378906 62.617188 24.550781 61.957031 23.976562 C 61.296875 23.410156 60.417969 23.164062 59.554688 23.28125 Z M 136.957031 12.726562 C 136.296875 12.160156 135.421875 11.914062 134.554688 12.03125 L 71.554688 21.484375 C 70.085938 21.703125 69 22.964844 69 24.449219 L 69 69 C 69 70.660156 70.34375 72 72 72 L 135 72 C 136.65625 72 138 70.660156 138 69 L 138 15 C 138 14.128906 137.617188 13.300781 136.957031 12.726562 Z M 60 78 L 15 78 C 13.34375 78 12 79.339844 12 81 L 12 117 C 12 118.484375 13.085938 119.746094 14.554688 119.96875 L 59.554688 126.71875 C 59.707031 126.738281 59.851562 126.75 60 126.75 C 60.714844 126.75 61.410156 126.496094 61.957031 126.023438 C 62.617188 125.449219 63 124.621094 63 123.75 L 63 81 C 63 79.339844 61.65625 78 60 78 Z M 135 78 L 72 78 C 70.34375 78 69 79.339844 69 81 L 69 125.550781 C 69 127.035156 70.085938 128.296875 71.554688 128.515625 L 134.554688 137.96875 C 134.703125 137.988281 134.851562 138 135 138 C 135.714844 138 136.410156 137.746094 136.957031 137.273438 C 137.617188 136.699219 138 135.871094 138 135 L 138 81 C 138 79.339844 136.65625 78 135 78 Z M 135 78 " />
</g>
</svg>
</section>
<article class="open-windows-menu">
<section class="left-panel">
<section class="start left-panel-hover">
<img src="./imgs/windows-menu/icons8-menu.svg" alt="start" />
<p>Start</p>
</section>
<section class="details">
<section class="left-bottom-panel left-panel-hover">
<img src="./imgs/windows-menu/me-compressed.jpg" alt="profile">
<p>Olasunkanmi Fafowora</p>
</section>
<section class="left-bottom-panel left-panel-hover">
<img src="./imgs/windows-menu/document.svg" alt="documents">
<p>Documents</p>
</section>
<section class="left-bottom-panel left-panel-hover">
<img src="./imgs/windows-menu/picture.svg" alt="pictures">
<p>Pictures</p>
</section>
<section class="left-bottom-panel left-panel-hover">
<img src="./imgs/windows-menu/settings.svg" alt="settings">
<p>Settings</p>
</section>
<section class="left-bottom-panel left-panel-hover">
<img src="./imgs/windows-menu/power-button.svg" alt="power">
<p>Power</p>
</section>
</section>
</section>
<section class="middle-panel">
</section>
<section class="right-panel">
</section>
</article>
<section class="search-apps">
<img src="./imgs/icons8-search.svg" alt="search icon" />
<label for="search-bar">Search bar, type here to search</label>
<input type="text" id="search-bar" placeholder="Type here to search" />
</section>
<section class="cortana-section taskbar-hover">
<img id="cortana" src="./imgs/icons8-microsoft-cortana.svg" alt="cortana" />
</section>
<section class="pinned-apps">
<div class="taskbar-app taskbar-hover">
<img src="./imgs/apps/brand-icon.png" alt="hashnode logo" />
</div>
<div class="taskbar-app taskbar-hover">
<img src="./imgs/apps/chrome.svg" alt="chrome logo" />
</div>
<div class="taskbar-app taskbar-hover">
<img src="./imgs/apps/firefox.svg" alt="firefox logo" />
</div>
</section>
<section class="weather-update taskbar-hover">
<img src="./imgs/cloudy.svg" alt="weather logo" />
</section>
<article class="small-taskbar-info">
<span id="expand-other-apps" class="taskbar-hover">
<img src="./imgs/right-arrow.svg" />
</span>
<section class="other-apps">
<img class="taskbar-hover" src="./imgs/xampp-seeklogo.com.svg" />
<img class="taskbar-hover" src="./imgs/nvidia.svg" />
<img class="taskbar-hover" src="./imgs/shield.svg" />
</section>
<section class="shown-apps">
<div class="image-container taskbar-hover">
<img class="taskbar-hover" src="./imgs/battery.svg" />
</div>
<div class="image-container taskbar-hover">
<img class="taskbar-hover" src="./imgs/wifi-signal.svg" />
</div>
<div class="image-container taskbar-hover">
<img class="taskbar-hover" src="./imgs/mouse.svg" />
</div>
</section>
<section class="date-section taskbar-hover">
<time id="hours-minutes" datetime=""></time>
<time id="current-date" datetime=""></time>
</section>
<section class="notifications-bar taskbar-hover">
<img src="./imgs/icons8-topic-push-notification-96.png" alt="" />
</section>
<section class="show-desktop taskbar-hover">
<hr />
</section>
</article>
</footer>
<script src='./js/main.js'></script>
<script src='./js/drag-and-drop.js'></script>
<script src='./js/indexDB.js'></script>
</body>
</html>