-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
217 lines (215 loc) · 9.9 KB
/
index.html
File metadata and controls
217 lines (215 loc) · 9.9 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/icon.png" />
<link rel="stylesheet" href="/src/style.css" />
<title>Modularity at the Next Level</title>
</head>
<body class="loading">
<div class="section" id="section-1">
<div class="title-container">
<div class="title">Modularity at the Next Level</div>
<div class="subtitle">A Modular Computer Design Concept</div>
</div>
</div>
<div class="section" id="section-2">
<div class="title-container">
<div class="title">Projector<span class="space"></span>Block</div>
<div class="details-button">
Take a closer look
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 12.5093 17.5529"
class="details-button-icon"
>
<g>
<rect height="17.5529" opacity="0" width="12.5093" x="0" y="0" />
<path
d="M12.5093 8.77158C12.5031 8.37216 12.3588 8.03887 12.0366 7.72645L4.52897 0.371912C4.27244 0.12205 3.97065 0 3.60184 0C2.874 0 2.28152 0.579605 2.28152 1.31101C2.28152 1.67005 2.42886 2.00335 2.6938 2.26873L9.37463 8.76847L2.6938 15.2744C2.43197 15.5367 2.28152 15.8664 2.28152 16.2353C2.28152 16.9635 2.874 17.5463 3.60184 17.5463C3.96444 17.5463 4.27244 17.4242 4.52897 17.1677L12.0366 9.8167C12.3619 9.49762 12.5093 9.16788 12.5093 8.77158Z"
/>
</g>
</svg>
</div>
</div>
</div>
<div class="section" id="section-3">
<div class="title-container">
<div class="title">CPU<span class="space"></span>Block</div>
<div class="details-button">
Take a closer look
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 12.5093 17.5529"
class="details-button-icon"
>
<g>
<rect height="17.5529" opacity="0" width="12.5093" x="0" y="0" />
<path
d="M12.5093 8.77158C12.5031 8.37216 12.3588 8.03887 12.0366 7.72645L4.52897 0.371912C4.27244 0.12205 3.97065 0 3.60184 0C2.874 0 2.28152 0.579605 2.28152 1.31101C2.28152 1.67005 2.42886 2.00335 2.6938 2.26873L9.37463 8.76847L2.6938 15.2744C2.43197 15.5367 2.28152 15.8664 2.28152 16.2353C2.28152 16.9635 2.874 17.5463 3.60184 17.5463C3.96444 17.5463 4.27244 17.4242 4.52897 17.1677L12.0366 9.8167C12.3619 9.49762 12.5093 9.16788 12.5093 8.77158Z"
/>
</g>
</svg>
</div>
</div>
</div>
<div class="section" id="section-4">
<div class="title-container">
<div class="title">Storage<span class="space"></span>Block</div>
<div class="details-button">
Take a closer look
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 12.5093 17.5529"
class="details-button-icon"
>
<g>
<rect height="17.5529" opacity="0" width="12.5093" x="0" y="0" />
<path
d="M12.5093 8.77158C12.5031 8.37216 12.3588 8.03887 12.0366 7.72645L4.52897 0.371912C4.27244 0.12205 3.97065 0 3.60184 0C2.874 0 2.28152 0.579605 2.28152 1.31101C2.28152 1.67005 2.42886 2.00335 2.6938 2.26873L9.37463 8.76847L2.6938 15.2744C2.43197 15.5367 2.28152 15.8664 2.28152 16.2353C2.28152 16.9635 2.874 17.5463 3.60184 17.5463C3.96444 17.5463 4.27244 17.4242 4.52897 17.1677L12.0366 9.8167C12.3619 9.49762 12.5093 9.16788 12.5093 8.77158Z"
/>
</g>
</svg>
</div>
</div>
</div>
<div class="section" id="section-5">
<div class="title-container">
<div class="title">Memory<span class="space"></span>Block</div>
<div class="details-button">
Take a closer look
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 12.5093 17.5529"
class="details-button-icon"
>
<g>
<rect height="17.5529" opacity="0" width="12.5093" x="0" y="0" />
<path
d="M12.5093 8.77158C12.5031 8.37216 12.3588 8.03887 12.0366 7.72645L4.52897 0.371912C4.27244 0.12205 3.97065 0 3.60184 0C2.874 0 2.28152 0.579605 2.28152 1.31101C2.28152 1.67005 2.42886 2.00335 2.6938 2.26873L9.37463 8.76847L2.6938 15.2744C2.43197 15.5367 2.28152 15.8664 2.28152 16.2353C2.28152 16.9635 2.874 17.5463 3.60184 17.5463C3.96444 17.5463 4.27244 17.4242 4.52897 17.1677L12.0366 9.8167C12.3619 9.49762 12.5093 9.16788 12.5093 8.77158Z"
/>
</g>
</svg>
</div>
</div>
</div>
<div class="section" id="section-6">
<div class="title-container">
<div class="title">Speaker<span class="space"></span>Block</div>
<div class="details-button">
Take a closer look
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 12.5093 17.5529"
class="details-button-icon"
>
<g>
<rect height="17.5529" opacity="0" width="12.5093" x="0" y="0" />
<path
d="M12.5093 8.77158C12.5031 8.37216 12.3588 8.03887 12.0366 7.72645L4.52897 0.371912C4.27244 0.12205 3.97065 0 3.60184 0C2.874 0 2.28152 0.579605 2.28152 1.31101C2.28152 1.67005 2.42886 2.00335 2.6938 2.26873L9.37463 8.76847L2.6938 15.2744C2.43197 15.5367 2.28152 15.8664 2.28152 16.2353C2.28152 16.9635 2.874 17.5463 3.60184 17.5463C3.96444 17.5463 4.27244 17.4242 4.52897 17.1677L12.0366 9.8167C12.3619 9.49762 12.5093 9.16788 12.5093 8.77158Z"
/>
</g>
</svg>
</div>
</div>
</div>
<div class="section" id="section-7">
<div class="about-container">
<div class="about-text">
Product Concept Designed by Charles Zhang <br />
Check out my blog at
<a href="https://inthecreat.ing">inthecreat.ing</a>
</div>
</div>
</div>
<div class="pan-text">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 22.214 20.0696"
class="pan-text-icon"
>
<g>
<rect height="20.0696" opacity="0" width="22.214" x="0" y="0" />
<path
d="M2.63774 15.5524L3.81938 17.5787L10.9239 14.0045L18.0284 17.5787L19.2198 15.5524L12.1104 11.9733L12.1104 3.56018L9.74711 3.56018L9.74711 11.9733ZM0.13774 17.2614C-0.223588 18.0963 0.142623 18.736 1.04106 18.8385L5.10844 19.3024C6.34868 19.4537 7.0518 18.5797 6.41704 17.486L3.99516 13.2819C3.38481 12.2125 2.26176 12.3785 1.77836 13.5065ZM21.7149 17.2614L20.0791 13.5065C19.5909 12.3785 18.4727 12.2125 17.8575 13.2819L15.4307 17.486C14.8008 18.5797 15.5088 19.4537 16.7442 19.3024L20.8116 18.8385C21.7051 18.736 22.0762 18.0963 21.7149 17.2614ZM10.0059 0.557252L7.57915 3.83362C6.84184 4.82971 7.252 5.88928 8.49711 5.88928L13.336 5.88928C14.6006 5.88928 15.0108 4.85413 14.2588 3.8385L11.8272 0.55237C11.2754-0.184935 10.5528-0.184935 10.0059 0.557252Z"
/>
</g>
</svg>
Pan to Look Around
</div>
<div id="three-container"></div>
<div class="back-button">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 13.6914 17.8906"
class="back-button-icon"
>
<g>
<rect height="17.8906" opacity="0" width="13.6914" x="0" y="0" />
<path
d="M0 8.94043C0 9.42383 0.170898 9.81934 0.576172 10.2148L7.95898 17.4414C8.25684 17.7441 8.61328 17.8857 9.03809 17.8857C9.90723 17.8857 10.6152 17.1875 10.6152 16.333C10.6152 15.8984 10.4297 15.5029 10.1074 15.1855L3.67188 8.93555L10.1074 2.69531C10.4346 2.37305 10.6152 1.97754 10.6152 1.55273C10.6152 0.693359 9.90723 0 9.03809 0C8.6084 0 8.25684 0.141602 7.95898 0.439453L0.576172 7.66602C0.175781 8.05664 0.00488281 8.45215 0 8.94043Z"
/>
</g>
</svg>
Back
</div>
<div class="details-contents">
<div class="details-content details-content-projector">
<h2>Projector Block</h2>
<p>
The Projector Block features a laser projector that can project images
up to the equavalent of a 50-inch screen.
</p>
</div>
<div class="details-content details-content-cpu">
<h2>CPU Block</h2>
<p>
The CPU Block is the core of the computer. It is equipped with a CPU
chip up to 48 cores and 32GB of internal RAM.
</p>
</div>
<div class="details-content details-content-storage">
<h2>Storage Block</h2>
<p>
The Storage Block contains a 1-4TB Solid State Drive (SSD). It can
also be used as a standalone portable SSD when detached.
</p>
</div>
<div class="details-content details-content-memory">
<h2>Memory Block</h2>
<p>
The Memory Block contains up to 128GB of extra RAM in addition to the
internal RAM of the CPU Unit.
</p>
</div>
<div class="details-content details-content-speaker">
<h2>Speaker Block</h2>
<p>
The Speaker Block features a dual driver speaker system to deliver a
clear and powerful audio experience.
</p>
</div>
</div>
<div class="loading-screen" id="loading-screen">
<div class="loading-screen-text">
Loading... <span class="loading-screen-progress">0%</span>
</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>