socketlike.github.io/preview.html at main · Socketlike/socketlike.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="/favicon.png">
	<meta name="color-scheme" content="dark">
	<link rel="stylesheet" href="/src/style.css">
	<title>dEstinyOS「PREVIEW」</title>
</head>

<body class="override" style="
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 9fr 1fr;
">
	<div id="overlay"></div>

	<div id="workspace" style="
		display: flex;
		gap: 16px;
		padding: 16px;
	">
		<style>
			.item {
				width: 80px;
				height: 120px;
				display: grid;
				grid-template-rows: 4fr 2fr;
			}

			.item:hover {
				outline: 1px solid white;
			}
		</style>

		<div class="item">
			<img alt="item icon" style="text-align: center; align-content: center; background-color: black;">
			<span style="font-size: 14px; text-align: center; align-content: center;">item name</span>
		</div>

		<div class="item">
			<img alt="item icon" style="text-align: center; align-content: center; background-color: black;">
			<span style="font-size: 14px; text-align: center; align-content: center;">item name</span>
		</div>
	</div>

	<div id="taskbar" style="
		border: 1px solid white;
		margin: 8px;
		display: grid;
		grid-template-rows: 1fr;
		grid-template-columns: 1fr 9fr;
		align-items: center;
		background-color: black;
	">
		<div id="super" title="the launcher menu button you usually see on taskbars" style="
			padding: 0 8px;
			border-right: 1px solid white;
			text-align: center;
		">
			super menu
		</div>
	</div>

	<div style="
		position: absolute;
		color: #ffffff20;
		bottom: calc(10%);
		left: 8px;
		line-height: 1.5em;
		user-select: none;
		z-index: -9999;
	">
		dEstinyOS PREVIEW /////////////////<br>
		NOTHING IS CONCRETE. EXPECT CHANGES.
	</div>

	<div class="dialog" style="
		position: absolute;
		top: 8px;
		right: 8px;
	">
		nothing is functional just yet.<br><br>

		i'm sure this looks really bad on mobile,<br>
		but i don't wanna look. i'm scared.
	</div>

	<div class="bgm-container" style="bottom: calc(9%)">
		<svg
			class="play-button paused"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 24 24"
			fill="currentColor"
		>
			<path d="M14,19H18V5H14M6,19H10V5H6V19Z" />
		</svg>
		<div class="name" style="display: inline-block; line-height: 1em; vertical-align: center;">
			new technology<br>
			<span style="font-size: 12px;">(demo)</span>
		</div>
		<svg
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 24 24"
			fill="currentColor"
			style="margin-right: 6px"
		>
			<path d="M21,3V15.5A3.5,3.5 0 0,1 17.5,19A3.5,3.5 0 0,1 14,15.5A3.5,3.5 0 0,1 17.5,12C18.04,12 18.55,12.12 19,12.34V6.47L9,8.6V17.5A3.5,3.5 0 0,1 5.5,21A3.5,3.5 0 0,1 2,17.5A3.5,3.5 0 0,1 5.5,14C6.04,14 6.55,14.12 7,14.34V6L21,3Z" />
		</svg>
		<audio name="player" autoplay loop>
			<source src="/resources/new technology demo.ogg">
		</audio>

		<script id="269e041b-b89f-4c59-b7c1-0284f417294f">
			const self = document.getElementById("269e041b-b89f-4c59-b7c1-0284f417294f")
			const playButton = self.parentElement.querySelector('.play-button')
			const player = self.parentElement.children.player

			player.volume = 0.75

			if (player.paused)
				playButton.classList.toggle('paused', true)

			player.addEventListener('playing', ev => {
				playButton.classList.toggle('paused', false)
			})

			player.addEventListener('pause', ev => {
				playButton.classList.toggle('paused', true)
			})

			player.addEventListener('canplaythrough', ev => {
				player.play()
			})

			playButton.addEventListener('click', ev => {
				if (player.paused)
					player.play()
				else
					player.pause()
			})
		</script>
	</div>
</body>
</html>