-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
407 lines (384 loc) · 20.4 KB
/
Copy pathindex.html
File metadata and controls
407 lines (384 loc) · 20.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
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
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/png" href="0/k.png" />
<link rel="stylesheet" href="globalAsset.css">
<meta name='color-scheme' content='only light'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gravity Hub — О проекте</title>
<style>
article:not(:last-child) /* Сам не помню,
где я выставлял отступ после абзаца, пускай будет
так. Потом перепишу в globalAsset.css, мб */ {
margin-bottom: 10px;
}
.oldLoader::after {
content: "";
position: absolute;
inset: 0;
background: #1FE942;
opacity: 0.2;
mix-blend-mode: soft-light;
mask: url("0/j.png") center/cover no-repeat;
}
.background-canvas::after {
content: "";
position: absolute;
inset: 0;
background: #00F33F;
opacity: 0;
transition: opacity 1s ease-out;
mix-blend-mode: color;
}
.background-canvas.patched::after {
opacity: 1;
}
/* Черт-и-что ниже и в JS представляет собой
костыльную, недостойную внимания и в то же
время единственную подходящую механику
анимирования заглавной страницы форума.
Дай Балтин, у нас появится кто поопытнее меня в CSS & JS*/
.afterIntro {
opacity: 0;
transition: opacity 1s ease;
transform: translateZ(0);
display: flex;
flex-direction: column;
align-items: center;
}
.afterIntro.shown {
opacity: 1; /* да нуу нааафиг */
}
.project-card.fixed /* тот же самый, но фиксированный */ {
position: fixed;
top: 50%;
left: 50%;
width: 90vw;
transform: translate(-50%, -50%);
z-index: 2;
}
.project-card {
display: flex;
width: 90vw;
border-radius: var(--border-radius);
overflow: hidden;
z-index: 2;
margin-bottom: 10%;
}
.project-card img {
display: block;
width: 100%;
height: auto;
}
.project-card.ongoing {
transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.project-card.f {
position: relative;
top: auto;
left: auto;
transform: none;
}
.project-title {
width: 60vw;
align-self: center;
margin: 0 auto;
}
.project-title img {
width: 100%;
height: 100%;
}
h4 {
position: relative;
top: 2px;
height: 0;
display: inline;
font-family: Gratis;
font-weight: 5;
letter-spacing: 1.5px;
background-image: linear-gradient(to bottom, #7DFFCD, #38FF96);
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}
figure {
filter: drop-shadow(0 4px 15px #00000099);
margin: 10px 0;
width: 80vw;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
figure img {
border-radius: var(--border-radius);
width: 100%;
height: 100%;
}
figcaption {
font-size: 14px;
font-family: CCUltimatum;
text-align: center;
padding: 3px 0 5px 0;
background: #EEFFEE11;
width: 95%;
border-radius: 0 0 5px 5px;
opacity: 0.8;
mix-blend-mode: screen;
}
.others {
margin-top: 5px;
margin-bottom: 5px;
position: relative;
display: block;
background: linear-gradient(to right, #B6FFE055 2px, transparent 3px);
}
.others li {
list-style-type: none;
margin-left: 20px;
text-indent: 20px;
margin-bottom: 10px;
}
.unavailable {
font-style: italic;
font-weight: 300;
opacity: 0.6;
}
.content-card.patch {
display: flex;
flex-flow: column wrap;
align-items: left;
}
.subbanner {
margin: 2px 0;
align-self: center;
display: block;
width: 80%;
height: auto;
}
.subbanner img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<!-- Фон -->
<div class="background-canvas patched">
<div class="bg-shape shape-1 patched"></div>
<div class="bg-shape shape-2 patched"></div>
<div class="bg-shape shape-3 patched"></div>
</div>
<button class="menu-toggle" onclick="toggleMenu()" aria-label="Открыть меню">
<svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
</button>
<div class="oldLoader"> </div> <!--загрузсие-->
<div class="wrapper">
<!-- вм -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<h2>GRAVITY HUB</h2>
</div>
<nav>
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="nav-link active">
<span class="nav-icon">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>
</span>
<span class="title">О проекте</span>
</a>
</li>
<li class="nav-item">
<a href="people.html" class="nav-link">
<span class="nav-icon">
<svg width="800px" height="800px" viewBox="0 0 24 24"><g id="GravityHub-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="User" transform="translate(-384, -48)" fill-rule="nonzero"><g id="verifZ" transform="translate(384, 48)"><path d="M24,0 L24,24 L0,24 L0,0 L24,0 Z M12.5934901,23.257841 L12.5819402,23.2595131 L12.5108777,23.2950439 L12.4918791,23.2987469 L12.4918791,23.2987469 L12.4767152,23.2950439 L12.4056548,23.2595131 C12.3958229,23.2563662 12.3870493,23.2590235 12.3821421,23.2649074 L12.3780323,23.275831 L12.360941,23.7031097 L12.3658947,23.7234994 L12.3769048,23.7357139 L12.4804777,23.8096931 L12.4953491,23.8136134 L12.4953491,23.8136134 L12.5071152,23.8096931 L12.6106902,23.7357139 L12.6232938,23.7196733 L12.6232938,23.7196733 L12.6266527,23.7031097 L12.609561,23.275831 C12.6075724,23.2657013 12.6010112,23.2592993 12.5934901,23.257841 L12.5934901,23.257841 Z M12.8583906,23.1452862 L12.8445485,23.1473072 L12.6598443,23.2396597 L12.6498822,23.2499052 L12.6498822,23.2499052 L12.6471943,23.2611114 L12.6650943,23.6906389 L12.6699349,23.7034178 L12.6699349,23.7034178 L12.678386,23.7104931 L12.8793402,23.8032389 C12.8914285,23.8068999 12.9022333,23.8029875 12.9078286,23.7952264 L12.9118235,23.7811639 L12.8776777,23.1665331 C12.8752882,23.1545897 12.8674102,23.1470016 12.8583906,23.1452862 L12.8583906,23.1452862 Z M12.1430473,23.1473072 C12.1332178,23.1423925 12.1221763,23.1452606 12.1156365,23.1525954 L12.1099173,23.1665331 L12.0757714,23.7811639 C12.0751323,23.7926639 12.0828099,23.8018602 12.0926481,23.8045676 L12.108256,23.8032389 L12.3092106,23.7104931 L12.3186497,23.7024347 L12.3186497,23.7024347 L12.3225043,23.6906389 L12.340401,23.2611114 L12.337245,23.2485176 L12.337245,23.2485176 L12.3277531,23.2396597 L12.1430473,23.1473072 Z" id="MingCute" fill-rule="nonzero"></path><path d="M16,14 C18.7614,14 21,16.2386 21,19 L21,20 C21,21.1046 20.1046,22 19,22 L5,22 C3.89543,22 3,21.1046 3,20 L3,19 C3,16.2386 5.23858,14 8,14 L16,14 Z M21.4141,9.08134 C21.8047,8.69082 22.4378,8.69082 22.8284,9.08134 C23.1888615,9.44182923 23.2165893,10.0090309 22.9115834,10.4013771 L22.8284,10.4956 L19.9999,13.324 C19.6394385,13.6844615 19.0721793,13.7121893 18.6799027,13.4071834 L18.5857,13.324 L17.1715,11.9098 C16.781,11.5192 16.781,10.8861 17.1715,10.4956 C17.5319615,10.1350462 18.0992207,10.1073112 18.4914973,10.4123953 L18.5857,10.4956 L19.2928,11.2027 L21.4141,9.08134 Z M12,2 C14.7614,2 17,4.23858 17,7 C17,9.76142 14.7614,12 12,12 C9.23858,12 7,9.76142 7,7 C7,4.23858 9.23858,2 12,2 Z" id="GravityHub-2" fill="currentColor"></path></g></g></g></svg> </span>
<span class="title">Гордость сообщества</span>
</a>
</li>
<li class="nav-item">
<a href="rulestate.html" class="nav-link">
<span class="nav-icon">
<svg width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M0 .5A.5.5 0 0 1 .5 0h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 0 .5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-13 2A.5.5 0 0 1 .5 2h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-13 2A.5.5 0 0 1 .5 4h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-13 2A.5.5 0 0 1 .5 6h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-13 2A.5.5 0 0 1 .5 8h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-13 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-13 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m-13 2a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5m13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/></svg>
</span>
<span class="title">Регламент и партнёрство</span>
</a>
</li>
<li class="nav-item">
<a href="info.html" class="nav-link">
<span class="nav-icon">
<svg width="16px" height="16px" viewBox="0 0 22 22"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Dribbble-Light-Preview" transform="translate(-141, -8079)" fill="currentColor"><g id="icons" transform="translate(56, 160)"><path d="M97,7933 L92,7933 C91.448,7933 91,7932.552 91,7932 L91,7926 C91,7925.448 91.448,7925 92,7925 L96,7925 C96.552,7925 97,7925.448 97,7926 L97,7933 Z M97,7923 L91,7923 C89.896,7923 89,7923.895 89,7925 L89,7933 C89,7934.105 89.896,7935 91,7935 L101,7935 C102.104,7935 103,7934.105 103,7933 L103,7921 C103,7919.895 102.104,7919 101,7919 L87,7919 C85.896,7919 85,7919.895 85,7921 L85,7937 C85,7938.105 85.896,7939 87,7939 L102,7939 C102.552,7939 103,7938.552 103,7938 C103,7937.448 102.552,7937 102,7937 L88,7937 C87.448,7937 87,7936.552 87,7936 L87,7922 C87,7921.448 87.448,7921 88,7921 L100,7921 C100.552,7921 101,7921.448 101,7922 L101,7932 C101,7932.552 100.552,7933 100,7933 L99,7933 L99,7925 C99,7923.895 98.104,7923 97,7923 L97,7923 Z" id="at_sign"></path></g></g></g></svg>
</span>
<span class="title">Контакты и АП</span>
</a>
</li>
</ul>
</nav>
</aside>
<div class="loadPatch">
<div class="overlay" id="overlay" onclick="toggleMenu()"></div>
<!--КОНТЕНТ -->
<main class="main-content">
<div class="afterIntro">
<div class="project-title"><img src="0/l.png" alt="GRAVITY HUB"></div>
</div>
<div class="project-card"><img src="0/g.webp"></div>
<div class="afterIntro">
<div class="content-card">
<article>
<p><h4>GRAVITY HUB</h4> — дружное исследовательское сообщество, открывающее вид на горизонт колоритного геймдева области <b>мобильных физических песочниц</b>.</p>
</article>
<article>
<p>Жанр, проекты на основе которого существуют в <b>гораздо большем</b> количестве, чем можно найти при сёрфинге на скромных платформах вроде Google Play, считается <b>универсальным</b> и <b>оригинальным</b>. Например, во всем известном<span class="inline wide"><span class="wrap"><img src="0/y.png" alt="Hypper"></span></span>изначально сочетаются созидание, перестрелки и гонки, однако образ игры <b>полностью</b> зависит от игрока: по его желанию в понятие <i>«песочница»</i> получится <b>дополнительно уместить</b> головоломку, стратегию, ролевую игру или любой другой вид развлечения.</p>
<p>Отсюда можно установить, что жанр песочниц сочетает в себе свойства почти всех остальных, при этом оставаясь <b>независимым и оригинальным</b>. В то же время стиль одних таких проектов бывает весьма <b>схожим</b> с видом и функционалом других <i>(ведь именно <b>игроки TUB</b> назвали упомянутый Hypper <b>продолжением</b> запылившейся со временем песочницы!)</i>. Исследование взаимно подобных песочниц подтолкнуло любительское сообщество к <b>масштабным поискам</b> и анализу <b>ранее не известных многим</b> проектов творческого жанра, и именно этот общий интерес позволил ꗈ 𝗚𝗿𝝰𝘃𝗶𝘁𝘆 𝗛𝞄𝗯 ꗈ обрести заслуженный статус <b>крупного исслледовательского форума</b>.</p>
</article>
</div>
<figure>
<img src="0/aj.jpg">
<figcaption>CHax 2 — одна из первых. Найдена в зарубежном сегменте геймдева и изученная сообществом</figcaption>
</figure>
<div class="content-card">
<article>
<p>ꗈ 𝗚𝗿𝝰𝘃𝗶𝘁𝘆 𝗛𝞄𝗯 ꗈ не просто так назван «форумом», а не каким-нибудь «специализированным ресурсом». Впоследствии <b>активной коммуникации</b> с игроками и разработчиками самых разных проектов и сообществ, у нашего <b>форума</b> появилось гораздо больше целей, престижно достигаемых <b><i>Детективами</i></b>, коими называют <b>каждого</b> активного члена нашего уютного сообщества.</p>
</article>
<h3>Наши задачи:</h3>
<ul class="others">
<li><span class="inline"><img src="0/u.png"></span> <b>Находить</b> песочницы, имена которых редко упоминались на каких-либо платформах.</li>
<li><span class="inline"><img src="0/w.png"></span> <b>Изучать</b> уникальные особенности и нюансы существующих проектов этого жанра.</li>
<li><span class="inline"><img src="0/v.png"></span> <b>Расследовать</b> связи между песочницами и познавать их корни.</li>
<li><span class="inline"><img src="0/t.png"></span> <b>Узнавать</b> интересные факты о карьерах разработчиков физических песочниц, их личностях и занимательном прошлом.</li>
</ul>
</div>
<figure>
<img src="0/ai.png">
<figcaption>А это — Hypper Sandbox диковинной и отныне полностью рабочей версии 0.0.3</figcaption>
</figure>
<div class="content-card patch">
<article>
<p>В то же время состав ꗈ 𝗚𝗿𝝰𝘃𝗶𝘁𝘆 𝗛𝞄𝗯 ꗈ служит Детективам <b>по-родному уютным</b> коллективом. Помимо того, что на самом форуме со временем образовалась неповторимая атмосфера, Детективы делятся опытом и разделяют уют <b>с другими сообществами</b>.</p>
<p>Именно благодаря дружеской коммуникации с самыми разными творческими комьюнити ꗈ 𝗚𝗿𝝰𝘃𝗶𝘁𝘆 𝗛𝞄𝗯 ꗈ удовлетворяет интересы практически каждого участника. Здесь — разработчики, художники, механики разных песочниц и просто замечательные собеседники, чем и гордится как стафф проекта, так и любой другой активный участник.</p>
</article>
<div class="subbanner"><img src="0/al.png"></div>
</div>
<figure>
<img src="0/ak.jpg">
<figcaption>Рендер и сама работа: ASP-7760 // Постобработка: WindStorm</figcaption>
</figure>
<div class="content-card">
<article>
<h3>Наши проекты:</h3>
<ul class="others">
<li><span class="unavailable">Здесь нам хорошо пригодился бы опытный пацак с мастерским владением анимацией ссылок! Только КЦ у нас нет, но жёлтые штаны в «Гордости сообщества» — обеспечим...</span></li>
</ul>
</article>
</div>
</div>
</main>
</div>
</div> <!-- отбраковщик -->
<!-- сноска -->
<div class="project-footer">
<span class="nospace">ꗈ 𝗚𝗿𝝰𝘃𝗶𝘁𝘆 𝗛𝞄𝗯 ꗈ</span> ⚎ © 2026
</div>
<script>
// inner
// Менюш
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('overlay');
function toggleMenu() {
const isOpen = sidebar.classList.contains('open');
if (!isOpen) {
sidebar.classList.add('open');
document.body.classList.add('menu-open');
overlay.classList.add('active');
sidebar.classList.add('animating');
} else {
sidebar.classList.remove('open');
document.body.classList.remove('menu-open');
overlay.classList.remove('active');
}
}
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.style.cursor = 'pointer';
link.addEventListener('click', (e) => {
if (link.getAttribute('href') === '#') {
e.preventDefault(); // gundone
}
if (window.innerWidth <= 1024) {
toggleMenu();
}
});
});
sidebar.addEventListener('animationend', (e) => {
if (e.animationName === 'scan') {
sidebar.classList.remove('animating');
}
});
// фича под esc, это мне уже нейросеть подарила
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && sidebar.classList.contains('open')) {
toggleMenu();
}});
// Ибо нету ничерта:
// function fontsize() {
// let parent = document.querySelector('.main-content');
// let text = document.querySelector('.main-content h1');
// let w = parent.offsetWidth;
// text.style.fontSize = w/8 + "px";
// }
// window.onload = fontsize;
// window.onresize = fontsize;
window.addEventListener('load', function () {
setTimeout(() => {
document.querySelector('.loadPatch').classList.add('done');
const bashka = document.querySelector('.oldLoader');
bashka.classList.add('done');
// Этот черт перехватывает href
setTimeout(()=>bashka.remove(),1000);
// ! external-ға релатед
const toWorkWith = document.querySelector(".project-card");
toWorkWith.classList.add("fixed");
callTheIntroducer();
}, 1000);
});
// external
function moveBanner(banner, content) {
const fixedpos = banner.getBoundingClientRect();
banner.classList.remove("fixed");
banner.classList.add("f");
const relpos = banner.getBoundingClientRect();
const dx = fixedpos.left - relpos.left;
const dy = fixedpos.top - relpos.top;
banner.style.transform = `translate(${dx}px, ${dy}px)`;
banner.offsetHeight;
banner.classList.add("ongoing");
requestAnimationFrame(() => {
banner.style.transform = "translate(0, 0)";
content.forEach(contItem => {
contItem.classList.add("shown");
});
});
banner.addEventListener("transitionend", () => {
banner.style.transform = "";
banner.classList.remove("ongoing");
document.body.style.overflow = "";
}, {once: true});
}
function callTheIntroducer() {
const toWorkWith2 = document.querySelector(".project-card");
const introContent = document.querySelectorAll(".afterIntro");
const deb = 4400
//const deb = 0
document.body.style.overflow = "hidden";
setTimeout(() => {
moveBanner(toWorkWith2, introContent);
}, deb); // длительность визуала
setTimeout(() => {
document.querySelector(".background-canvas").classList.remove("patched");
}, 6100);
}
</script>
</body>
</html>