-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
189 lines (178 loc) · 12.4 KB
/
Copy pathindex.html
File metadata and controls
189 lines (178 loc) · 12.4 KB
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
<!DOCTYPE html> <!--< Lasses Virtual Operating System >-->
<html lang="en"> <!--< Lasse Lauwerys © 2023 >-->
<head> <!--< 17/12/2023 >-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>LVOS</title>
<link rel="stylesheet" href="./Styles/windows.css">
<link rel="stylesheet" href="./Styles/ProvisionedApps.css">
<link rel="stylesheet" href="./Styles/desktop.css">
<link rel="stylesheet" href="./Styles/general.css">
<link rel="stylesheet" href="./Styles/themes.css">
<link rel="stylesheet" href="./Styles/Mica.css">
<link rel="manifest" href="./manifest.json">
<script src="./Scripts/physics.js" defer></script>
<script src="./Scripts/youtube.js" defer></script>
<script src="./Scripts/messenger.js" defer></script>
<script src="./Scripts/CustomPrototypes.js" defer></script>
<script src="./Scripts/Reflector.js" defer></script>
<script src="./Scripts/WindowManager.js" defer></script>
<script src="./Scripts/DesktopManager.js" defer></script>
<script src="./Scripts/Settings.js" defer></script>
<script src="./Scripts/ProvisionedApps.js" defer></script> <!-- The script order is very important here! -->
<script src="./Scripts/Console.js" defer></script>
<script src="./Scripts/FileSystem.js" defer></script>
<!-- Discord embed info -->
<meta property="og:site_name" content="LVOS" />
<meta property="og:title" content="Virtual Operating System" />
<meta property="og:description" content="Little Web OS with a couple apps to play around on." />
<!-- <meta property="og:image" content="https://yourwebsite.com" /> -->
<meta name="theme-color" content="#43b581" />
</head>
<body class="blur glass">
<header></header>
<main>
<section id="desktop">
<section id="windows">
<!-- <iframe src="./Applications/FrostedColours/index.html" id="wallpaper" frameborder="0"></iframe> -->
<div id="wallpaper">
<iframe src="./Applications/FrostedColours/index.html" frameborder="0"></iframe>
<!-- <img src="file:///C:\Users\Lasse\Documents\Projects\LVOS\Applications\GeodeWeb\StellarVeryLight.png" class="backdrop" alt="" srcset=""> -->
</div>
<section>
<form action="" id="applist"></form>
</section>
<article class="folder-content">
</article>
<!-- <article id="dockcontaner">
</article> -->
<section id="dock">
<section id="reflection"></section>
</section>
<section id="dockapplist"></section>
<template><!-- Template of my semantic and minimal structure used to create floating dialogs. I used the information provided by Visual Studio Code to determine what tags fit the purpose best. I hope this makes it as semantically correct as possible while excluding excessive divs and other tags. -->
<div class="window">
<content class=""><!-- Visual Sudio 2013 suggested me to use content instead here to make it semantic. This places the dialog inside the shadow DOM. I don't know if it's proper HTML 5 or HTML 4 but I used it so I'm keeping it the way it is for now. -->
<!-- I was forced to add this extra wrapping article to work around a bug in EdgeHTML 18 that causes the backdrop filter to shift by the amount of pixels the box-shadow blur size has minus the top and left value. I don't know if it's a known bug but the browser is no longer officially supported. I will be adding this tag anyways but it's not necessary for functionality of the application. -->
<header><!-- This header identifies the most near ancestor (dialog). In the header are the title and the navigation buttons. -->
<h1></h1><!-- Title of the window and also identifier of the header and dialog. -->
<section><!-- Section used for thematic grouping of content. The grouping is necessary to keep the buttons together without needing extra unstable css tricks. -->
<button disabled>🡕</button>
<button disabled>❐</button>
<button disabled>✕</button><!-- The navigation button styling is completely taken care of by css. -->
</section><!-- This is the 5th? revision of my semantic floating dialog scheme. -->
</header>
<article><!-- The article tag is used for an interactive widget, which can range from a hard-coded app to an iframe containing an external website. -->
<!-- This is the client area! Here the application itself should be placed. -->
</article><!-- Adding a wrapper aound this allows the corners inside the window to be rounded too, in a similar way done on Windows 11. We can do it without wrapping with overflow hidden but that results in the scroll bars being rendered over top which looks ugly. Rounded corners also appear to break the experimental blur support on EdgeHTML 18 when a scrollbar appears as the blur layer then gets rendered to the screen after the border causing it to show a jagged inside lining of the quarter circle. I can't find any mentions of the bug online as it's a weird edge case (pun intended). Turns out, Edge Legacy is not the only browser that has problems here. Chrome has a very similar bug but it disappears upon resize (tested in Chrome 118), that would mean Edge Chromium, Opera, Brave and all other Chromium browsers likely have this weird effect too. I will thus not be implementing this! -->
<!-- This is the non-client area! -->
</content><!-- This unnecessary wrapping that is only here for EdgeHTML and WebView 1 compatibility. -->
<span class="backdrop-clip">
<div class="backdrop-filter"></div>
</span>
<!-- This is also the non-client area. Primarily reserved for the borders. -->
</div>
</template><!-- The client area in graphical user interface design refers to the area of the window where the user's content should be placed. The non-client area is for managing the window itself. -->
<div class="window" id="console">
<content>
<header>
<h1>Console</h1>
<section>
<button disabled>🡕</button>
<button disabled>❐</button>
<button disabled>✕</button>
</section>
</header>
<article>
<form action="">
<input type="text" name="input" id="stdin">
<output name="stdout" id="stdout"></output>
</form>
</article>
</content>
</div>
<dialog class="window" id="browser">
<content>
<header>
<h1>Browser</h1>
<section>
<button disabled>🡕</button>
<button disabled>❐</button>
<button disabled>✕</button>
</section>
</header>
<article class="client">
<form action="" id="browserform">
<label for="browseraddress"></label>
<input type="text" name="address" id="browseraddress"><!-- We can also do type="url" but I want to allow lazy url typing and /*let*/var JS take care of the rest. -->
<button type="submit">Go</button>
</form>
<iframe src="https://example.com"></iframe>
</article>
</content>
</dialog>
</section>
<section id="metro">
<article id="metrobody"></article>
<aside id="metroapplist"></aside>
</section>
</section>
<aside id="charms">
<h1>Settings</h1>
<form id="settings">
<label for="theme">Theme: </label>
<select name="theme" id="theme">
<option value="square">Square</option>
<option value="normal" selected>Normal</option>
<option value="round">Rounded</option>
</select>
<label for="color">Color: </label>
<input type="color" name="color" id="color">
<input type="button" id="resetcolor" value="Reset color">
<label for="accent">Accent color: </label>
<input type="color" name="accent" id="accent">
<input type="button" id="resetaccent" value="Reset accent">
<label for="border">Border size: </label>
<input type="range" value="0" min="0" max="50" step="0.01" name="borderslider" id="border">
<label for="blurtoggle">Blur: <input type="checkbox" id="blurtoggle" value="toggleblur"></label>
<label for="reflectiontoggle">Reflections: <input type="checkbox" id="reflectiontoggle" value="togglereflections"></label>
<input type="file" name="wallpaper" id="wallpaper">
</form>
</aside>
<section id="overlay" class=""></section>
<svg width="0" height="0">
<filter id="firefox-glass-simple">
<feTurbulence id="noise" type="fractalNoise" result="noise" numOctaves="2" seed="69" baseFrequency="0.01 0.01"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" xChannelSelector="R" yChannelSelector="G" scale="100"></feDisplacementMap>
</filter>
</svg>
<svg class="filter" xmlns="http://www.w3.org/2000/svg" style="touch-action: none;">
<defs style="touch-action: none;">
<filter id="glass" color-interpolation-filters="sRGB" style="touch-action: none;">
<feTurbulence id="noise" type="fractalNoise" result="map" numOctaves="2" seed="69" baseFrequency="0.01 0.01"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="map" id="redchannel" xChannelSelector="R" yChannelSelector="B" result="dispRed" scale="30" style="touch-action: none;"></feDisplacementMap>
<feColorMatrix in="dispRed" type="matrix" values="1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0" result="red" style="touch-action: none;"></feColorMatrix>
<feDisplacementMap in="SourceGraphic" in2="map" id="greenchannel" xChannelSelector="R" yChannelSelector="B" result="dispGreen" scale="60" style="touch-action: none;"></feDisplacementMap>
<feColorMatrix in="dispGreen" type="matrix" values="0 0 0 0 0
0 1 0 0 0
0 0 0 0 0
0 0 0 1 0" result="green" style="touch-action: none;"></feColorMatrix>
<feDisplacementMap in="SourceGraphic" in2="map" id="bluechannel" xChannelSelector="R" yChannelSelector="B" result="dispBlue" scale="80" style="touch-action: none;"></feDisplacementMap>
<feColorMatrix in="dispBlue" type="matrix" values="0 0 0 0 0
0 0 0 0 0
0 0 1 0 0
0 0 0 1 0" result="blue" style="touch-action: none;"></feColorMatrix>
<feBlend in="red" in2="green" mode="screen" result="rg" style="touch-action: none;"></feBlend>
<feBlend in="rg" in2="blue" mode="screen" result="output" style="touch-action: none;"></feBlend>
<feGaussianBlur in="output" stdDeviation="0" style="touch-action: none;"></feGaussianBlur>
</filter>
</defs>
</svg>
</main>
<footer>2023/24 © Lasse Lauwerys</footer>
</body>
</html>