Skip to content

Commit 3686a86

Browse files
Web4applicationWeb4application
authored
Update index.html
1 parent fff5490 commit 3686a86

1 file changed

Lines changed: 25 additions & 62 deletions

File tree

‎index.html‎

Lines changed: 25 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html><!-- fastht.ml
1+
<!DOCTYPE html> <!-- fastht.ml -->
22
<html lang="en">
33
<head>
44
<link rel="stylesheet" href="https://cdnjs.cloudflare.com">
@@ -28,13 +28,11 @@
2828
z-index: 100;
2929
overflow: hidden; /* Hides text outside the bar */
3030
}
31-
3231
/* The Ticker Wrapper */
3332
.ticker-wrapper {
3433
display: flex;
3534
white-space: nowrap;
3635
}
37-
3836
/* The Scrolling Animation */
3937
.ticker-text {
4038
display: inline-block;
@@ -44,17 +42,14 @@
4442
font-weight: 500;
4543
color: rgba(255, 255, 255, 0.8);
4644
}
47-
4845
.ticker-text span {
4946
margin-right: 50px;
5047
color: var(--primary);
5148
}
52-
5349
@keyframes scroll-news {
5450
from { transform: translateX(0); }
5551
to { transform: translateX(-100%); }
5652
}
57-
5853
/* Pause on hover so users can read */
5954
.news-bar:hover .ticker-text {
6055
animation-play-state: paused;
@@ -67,7 +62,6 @@
6762
-webkit-text-fill-color: transparent;
6863
transition: 0.3s ease;
6964
}
70-
7165
/* This triggers the Font Awesome "beat" animation on hover */
7266
.glass-panel:hover .card-icon {
7367
filter: drop-shadow(0 0 10px var(--primary));
@@ -89,7 +83,6 @@
8983
align-items: center;
9084
z-index: 100;
9185
}
92-
9386
.nav-links a {
9487
color: white;
9588
text-decoration: none;
@@ -98,9 +91,7 @@
9891
opacity: 0.7;
9992
transition: 0.3s;
10093
}
101-
10294
.nav-links a:hover { opacity: 1; color: var(--primary); }
103-
10495
/* Project Grid */
10596
.dashboard {
10697
display: grid;
@@ -111,7 +102,6 @@
111102
margin-top: 100px; /* Space for navbar */
112103
z-index: 10;
113104
}
114-
115105
/* Adjusting the glass-panel for grid use */
116106
.glass-panel {
117107
width: auto; /* Remove fixed width */
@@ -120,17 +110,14 @@
120110
.glass-panel:hover {
121111
/* Changes the border to your primary blue */
122112
border-color: var(--primary);
123-
124113
/* Adds a soft outer glow and a subtle inner blue tint */
125114
box-shadow:
126115
0 25px 50px -12px rgba(0, 0, 0, 0.7),
127116
0 0 20px rgba(125, 207, 255, 0.2),
128117
inset 0 0 20px rgba(125, 207, 255, 0.1);
129-
130118
/* Makes the background slightly more solid blue */
131119
background: rgba(125, 207, 255, 0.05);
132120
}
133-
134121
/* This makes the heading change color when the card is hovered */
135122
.glass-panel:hover h1, .glass-panel:hover h2 {
136123
background: linear-gradient(to bottom, var(--primary), var(--secondary));
@@ -146,8 +133,7 @@
146133
--glass-glow: rgba(255, 255, 255, 0.05);
147134
--glass-blur: 16px;
148135
}
149-
150-
body {
136+
:body {
151137
margin: 0;
152138
height: 100vh;
153139
width: 100vw;
@@ -159,7 +145,6 @@
159145
justify-content: center;
160146
overflow: hidden;
161147
}
162-
163148
.mesh-gradient {
164149
position: fixed;
165150
inset: 0;
@@ -171,7 +156,6 @@
171156
background-size: 200% 200%;
172157
animation: mesh-flow 15s ease infinite alternate;
173158
}
174-
175159
.noise-overlay {
176160
position: fixed;
177161
inset: 0;
@@ -180,13 +164,11 @@
180164
pointer-events: none;
181165
background-image: url('https://grainy-gradients.vercel.app');
182166
}
183-
184167
@keyframes mesh-flow {
185168
0% { background-position: 0% 0%; }
186169
100% { background-position: 20% 20%; }
187170
}
188-
189-
#glow-cursor {
171+
:glow-cursor {
190172
position: fixed;
191173
width: 700px;
192174
height: 700px;
@@ -197,12 +179,10 @@
197179
z-index: 0;
198180
will-change: transform;
199181
}
200-
201182
.glass-container {
202183
perspective: 1000px;
203184
z-index: 10;
204185
}
205-
206186
.glass-panel {
207187
width: 400px;
208188
padding: 40px;
@@ -215,18 +195,16 @@
215195
transform-style: preserve-3d;
216196
transition: transform 0.1s ease-out;
217197
}
218-
219198
.glass-content {
220199
transform: translateZ(50px);
221200
<div class="glass-content">
222201
<i class="fa-solid fa-microchip card-icon"></i> <!-- The Icon -->
223202
<span class="badge">System Online</span>
224-
<h1>Hello World!</h1>
203+
<h1>Hello World!</h1>
225204
...
226-
</div>
227-
}
228-
229-
.badge {
205+
</div>
206+
}
207+
.badge {
230208
display: inline-block;
231209
background: rgba(255,255,255,0.05);
232210
padding: 6px 12px;
@@ -239,7 +217,6 @@ <h1>Hello World!</h1>
239217
margin-bottom: 1.5rem;
240218
color: var(--primary);
241219
}
242-
243220
h1 {
244221
font-size: 2.2rem;
245222
margin: 0 0 1rem 0;
@@ -248,13 +225,11 @@ <h1>Hello World!</h1>
248225
-webkit-background-clip: text;
249226
-webkit-text-fill-color: transparent;
250227
}
251-
252228
p {
253229
color: rgba(255, 255, 255, 0.6);
254230
line-height: 1.6;
255231
margin-bottom: 2rem;
256232
}
257-
258233
.btn-primary {
259234
background: linear-gradient(135deg, var(--primary), var(--secondary));
260235
color: #000;
@@ -268,24 +243,21 @@ <h1>Hello World!</h1>
268243
box-shadow: 0 10px 25px rgba(125, 207, 255, 0.2);
269244
transition: transform 0.2s, box-shadow 0.2s;
270245
}
271-
272246
.btn-primary:hover {
273247
transform: scale(1.02);
274248
box-shadow: 0 15px 30px rgba(125, 207, 255, 0.4);
275249
}
276250
</style>
277-
</head>
278-
<body>
279-
<nav class="navbar">
251+
<body>
252+
<nav class="navbar">
280253
<div class="logo" style="font-weight: 800; letter-spacing: 2px;">WEB4</div>
281254
<div class="nav-links">
282255
<a href="#home">Home</a>
283256
<a href="#projects">Projects</a>
284257
<a href="https://github.com" target="_blank">GitHub</a>
285258
</div>
286-
</nav>
287-
288-
<div class="dashboard">
259+
</nav>
260+
<div class="dashboard">
289261
<!-- Main Welcome Card -->
290262
<div class="glass-panel" id="tilt-card">
291263
<div class="glass-content">
@@ -295,7 +267,6 @@ <h1>Hello World!</h1>
295267
<button class="btn-primary">Get Started</button>
296268
</div>
297269
</div>
298-
299270
<!-- Project Card 1 -->
300271
<div class="glass-panel">
301272
<div class="glass-content">
@@ -308,7 +279,6 @@ <h2>Web Application</h2>
308279
<div class="mesh-gradient"></div>
309280
<div class="noise-overlay"></div>
310281
<div id="glow-cursor"></div>
311-
312282
<div class="glass-container">
313283
<div class="glass-panel" id="tilt-card">
314284
<div class="glass-content">
@@ -317,28 +287,24 @@ <h1>Hello World!</h1>
317287
<p>My website is officially live. Built with interactive 3D parallax and dynamic lighting.</p>
318288
<button class="btn-primary" onclick="window.open('https://github.com')">View My GitHub</button>
319289
</div>
320-
</div>
321-
</div>
322-
<div class="news-bar" id="live-news-bar">
290+
<div class="news-bar" id="live-news-bar">
323291
<div class="ticker-wrapper">
324292
<div class="ticker-text" id="ticker-content">
325293
Fetching latest intelligence... <span>[ CONNECTING ]</span>
326294
Establishing secure uplink... <span>[ STATUS ]</span>
327295
Syncing with global servers...
328296
</div>
329297
</div>
330-
</div>
298+
</div>
331299
<script>
332300
const glow = document.getElementById('glow-cursor');
333301
const card = document.getElementById('tilt-card');
334-
335302
window.addEventListener('mousemove', (e) => {
336303
glow.animate({
337304
left: `${e.clientX}px`,
338305
top: `${e.clientY}px`
339306
}, { duration: 800, fill: "forwards" });
340307
});
341-
342308
card.addEventListener('mousemove', (e) => {
343309
const rect = card.getBoundingClientRect();
344310
const x = e.clientX - rect.left;
@@ -349,12 +315,10 @@ <h1>Hello World!</h1>
349315
const rotateY = (x - centerX) / 15;
350316
card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;
351317
});
352-
353318
card.addEventListener('mouseleave', () => {
354319
card.style.transform = `rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;
355320
card.style.transition = "transform 0.5s ease";
356321
});
357-
358322
card.addEventListener('mouseenter', () => {
359323
card.style.transition = "none";
360324
});
@@ -363,29 +327,28 @@ <h1>Hello World!</h1>
363327
// Using rss2json to convert the RSS feed to a format JS can read
364328
const rssUrl = 'https://www.theverge.com';
365329
const apiUrl = `https://api.rss2json.com{encodeURIComponent(rssUrl)}`;
366-
367330
try {
368331
const response = await fetch(apiUrl);
369332
const data = await response.json();
370-
371333
if (data.status === 'ok') {
372334
// Join the news titles with your styled spans
373335
const headlines = data.items.map(item =>
374336
`<span>[ ${item.pubDate.split(' ')[0]} ]</span> ${item.title.toUpperCase()}`
375-
).join(' ••• ');
376-
337+
).join(' ••• ');
377338
ticker.innerHTML = headlines + " ••• " + headlines; // Double it for a smooth loop
378339
}
379340
} catch (error) {
380341
ticker.innerHTML = "<span>[ ERROR ]</span> Failed to sync live news. Operating in offline mode.";
381342
console.error('News Fetch Error:', error);
382343
}
383-
}
384-
385-
// Run the fetch when the page loads
386-
fetchNews();
387-
// Refresh every 10 minutes
388-
setInterval(fetchNews, 600000);
389-
</script>
390-
</body>
391-
</html>
344+
}
345+
// Run the fetch when the page loads
346+
fetchNews();
347+
// Refresh every 10 minutes
348+
setInterval(fetchNews, 600000);
349+
<p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
350+
</footer>
351+
</div>
352+
<script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
353+
</body>
354+
</html>

0 commit comments

Comments
 (0)