Skip to content

Commit 757fd07

Browse files
geolffreymgeolffreym
authored
Merge pull request #802 from WatchItDev/next
Next
2 parents aad9a9c + 92e4994 commit 757fd07

30 files changed

Lines changed: 18092 additions & 24804 deletions

‎index.html‎

Lines changed: 80 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,87 @@
7474
.w3a-parent-container #w3a-modal {
7575
background-color: rgba(0,0,0,0.4);
7676
}
77+
78+
:root {
79+
--color-a: #4a34b8;
80+
--color-b: #946ec8;
81+
--color-c: #ed541d;
82+
--color-d: #24879a;
83+
}
84+
85+
#splash {
86+
position: fixed;
87+
inset: 0;
88+
display: flex;
89+
flex-direction: column;
90+
align-items: center;
91+
justify-content: center;
92+
background: #1e1f22;
93+
overflow: hidden;
94+
}
95+
96+
#splash img {
97+
z-index: 10;
98+
width: clamp(104px, calc(18vw * 0.8), 160px);
99+
height: auto;
100+
transform-origin: center;
101+
will-change: transform, filter;
102+
animation: pulseScale 1.8s ease-in-out infinite;
103+
}
104+
105+
@keyframes pulseScale {
106+
0%, 100% { transform: scale(1); }
107+
50% { transform: scale(1.1); }
108+
}
109+
110+
#splash::before,
111+
#splash::after {
112+
content: "";
113+
position: absolute;
114+
width: 240px;
115+
height: 240px;
116+
border-radius: 50%;
117+
filter: blur(100px);
118+
opacity: 0.7;
119+
mix-blend-mode: screen;
120+
animation: orbit 14s linear infinite;
121+
}
122+
123+
#splash::before {
124+
background: var(--color-a);
125+
animation-delay: -3s;
126+
}
127+
128+
#splash::after {
129+
background: var(--color-c);
130+
animation-direction: reverse;
131+
}
132+
133+
@keyframes orbit {
134+
0% { transform: translate(-150%, -80%) scale(0.8); }
135+
25% { transform: translate(60%, -120%) scale(1.1); }
136+
50% { transform: translate(120%, 60%) scale(0.9); }
137+
75% { transform: translate(-80%, 120%) scale(1.2); }
138+
100% { transform: translate(-150%, -80%) scale(0.8); }
139+
}
77140
</style>
78141
</head>
79-
<body>
80-
<div id="root"></div>
81-
<script type="module" src="./src/index.tsx"></script>
142+
<body style="margin: 0">
143+
<div id="splash">
144+
<img src="/assets/white_logo.png" alt="Watchit logo">
145+
</div>
146+
147+
<div id="root" style="opacity:0"></div>
148+
149+
<script type="module" src="/src/index.tsx"></script>
150+
<script>
151+
function showApp() {
152+
const root = document.getElementById('root');
153+
document.getElementById('splash')?.remove();
154+
root.style.opacity = '1';
155+
window.removeEventListener('app:ready', showApp);
156+
}
157+
window.addEventListener('app:ready', showApp);
158+
</script>
82159
</body>
83160
</html>

0 commit comments

Comments
 (0)