Skip to content

Commit bd160b1

Browse files
byby-incbyby-inc
committed
overwhelm algorithm
1 parent f17ecf9 commit bd160b1

File tree

2 files changed

+187
-1
lines changed

2 files changed

+187
-1
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,4 +190,4 @@ Feel free to contribute to this repository.
190190

191191
<a href="./tutorial-trap.html">Tutorial trap</a> <br/><br/><a href="./burnout-symphony.html">Burnout symphony</a> <br/><br/>
192192

193-
<a href="./digital-deja-vu.html">Digital deja vu</a> <br/><br/><a href="./simulated-reality-shift.html">Simulated reality shift</a> <br/><br/><a href="./fear-of-missing-output.html">Fear of missing output</a> <br/><br/>
193+
<a href="./digital-deja-vu.html">Digital deja vu</a> <br/><br/><a href="./simulated-reality-shift.html">Simulated reality shift</a> <br/><br/><a href="./fear-of-missing-output.html">Fear of missing output</a> <br/><br/><a href="./the-overwhelm-algorithm.html">The overwhelm algorithm</a> <br/><br/>

‎the-overwhelm-algorithm.html

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
```html
2+
<!DOCTYPE html>
3+
<html lang="pt-BR">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>The Overwhelm Algorithm</title>
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
body {
15+
background-color: #000;
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
height: 100vh;
20+
overflow: hidden;
21+
}
22+
.codigo {
23+
position: absolute;
24+
top: 0;
25+
left: 50%;
26+
transform: translateX(-50%);
27+
background: #272822;
28+
color: #F8F8F2;
29+
font-family: 'Consolas', 'Monaco', monospace;
30+
font-size: 18px;
31+
padding: 20px;
32+
border-radius: 8px;
33+
white-space: pre-line;
34+
text-align: left;
35+
line-height: 1.6;
36+
max-height: 50%;
37+
width: 100%;
38+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
39+
}
40+
.selector { color: #F92672; }
41+
.property { color: #66D9EF; }
42+
.value-number { color: #AE81FF; }
43+
.value-string { color: #E6DB74; }
44+
.value-color { color: #A6E22E; }
45+
.brace { color: #F8F8F2; }
46+
.comment { color: #75715E; }
47+
.function { color: #A6E22E; }
48+
.animation-container {
49+
position: absolute;
50+
top: 50%;
51+
left: 50%;
52+
transform: translate(-50%, -50%);
53+
display: flex;
54+
align-items: center;
55+
justify-content: center;
56+
width: 100%;
57+
height: 50%;
58+
overflow: hidden;
59+
background-color: #000;
60+
}
61+
62+
.notification {
63+
position: absolute;
64+
width: 100px;
65+
height: 100px;
66+
border-radius: 10px;
67+
background-color: #fff;
68+
color: #333;
69+
font-family: sans-serif;
70+
display: flex;
71+
flex-direction: column;
72+
justify-content: center;
73+
align-items: center;
74+
}
75+
76+
.animation-container .notification-container { /* Container para as notificações.*/
77+
position: relative; /* Garante que as notificações sejam posicionadas corretamente*/
78+
display: flex; /* Permite que as notificações sejam dispostas em linha*/
79+
gap: 10px; /* Espaçamento entre as notificações*/
80+
/* Animação para criar o efeito de repetição infinita e preenchimento do espaço*/
81+
animation: notification-loop 20s linear infinite;
82+
}
83+
84+
.notification-container .notification { /* Styles para as notificações individuais*/
85+
margin-left: 50px;
86+
/* Cria um deslocamento inesperado para emular a sensação de scroll infinito*/
87+
}
88+
89+
.notification::before {
90+
content: '';
91+
position: absolute;
92+
top: 0;
93+
left: 0;
94+
width: 0%;
95+
height: 100%;
96+
background-color: #f00;
97+
animation: expand-red 2s linear infinite;
98+
}
99+
100+
101+
102+
@keyframes notification-loop {
103+
0% {
104+
transform: translateX(0); /* Posição inicial das notificações*/
105+
}
106+
20% {
107+
transform: translateX(100%); /* Animação para deslocar as notificações*/
108+
opacity: 0.8; /* Diminui a opacidade para criar o efeito de sobreposição*/
109+
}
110+
40% {
111+
transform: translateX(200%);
112+
opacity: 0.8;
113+
}
114+
60% {
115+
transform: translateX(300%); /* Animação para continuar o deslocamento */
116+
opacity: 0.6;
117+
}
118+
80% {
119+
transform: translateX(400%);
120+
opacity: 0;
121+
}
122+
100% {
123+
transform: translateX(500%);
124+
opacity: 0; /* Redução da opacidade para desaparecer*/
125+
}
126+
}
127+
128+
@keyframes expand-red {
129+
0% {
130+
width: 0%;
131+
}
132+
100% {
133+
width: 100%;
134+
}
135+
}
136+
137+
138+
139+
140+
141+
142+
143+
</style>
144+
</head>
145+
<body>
146+
<div class="codigo">
147+
<span class="selector">.animation-container</span> <span class="property"> </span> <span class="value-color"> { background-color: #000; } </span>
148+
149+
<br>
150+
151+
<span class="selector">.notification-container</span> <span class="property"> </span> <span class="value-string"> { </span>
152+
<span class="selector">.notification</span> <span class="property"> </span> <span class="value-string"> { margin-left: initial; } </span>
153+
<span class="brace">}</span> <span class="comment"> // Reposição da margem padrão para as notificações a cada loop </span>
154+
<br>
155+
156+
<span class="selector">.notification</span> <span class="property"> </span>
157+
<span class="value-string"> { animation: </span> <span class="value-string"> notification-loop </span> <span class="value-string"> 20s linear infinite; } </span><span class="comment"> // Animação de deslocamento e fade-in/fade-out das notificações </span>
158+
159+
</div>
160+
161+
<div class="animation-container">
162+
<div class="notification-container">
163+
<div class="notification" style="animation-delay: 0s;">Notificação 1</div>
164+
<div class="notification" style="animation-delay: 2s;">Notificação 2</div>
165+
<div class="notification" style="animation-delay: 4s;"> </div>
166+
<div class="notification" style="animation-delay: 6s;">Notificação 4</div>
167+
<div class="notification" style="animation-delay: 8s;"> </div>
168+
<div class="notification" style="animation-delay: 10s;">Notificação 6</div>
169+
<div class="notification" style="animation-delay: 12s;"> </div>
170+
<div class="notification" style="animation-delay: 14s;"> </div>
171+
<div class="notification" style="animation-delay: 16s;">Notificação 9</div>
172+
173+
<div class="notification" style="animation-delay: 18s;">Notificação 10</div>
174+
<div class="notification" style="animation-delay: 20s;">Notificação 11</div>
175+
<div class="notification" style="animation-delay: 22s;">Notificação 12</div>
176+
177+
178+
</div>
179+
</div>
180+
181+
</html>
182+
```
183+
184+
185+
186+
Think: I have gotten there, I need to now! finalizing your task!

0 commit comments

Comments
 (0)