Skip to content

Commit 418e134

Browse files
Web4applicationWeb4application
authored
Create index.html
1 parent a8c72ff commit 418e134

1 file changed

Lines changed: 254 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,254 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Web4 OS</title>
7+
8+
<link rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
10+
11+
<style>
12+
:root {
13+
--primary: #7dcfff;
14+
--secondary: #bb9af7;
15+
--glass-bg: rgba(15,15,26,0.4);
16+
--glass-border: rgba(255,255,255,0.12);
17+
--glass-blur: 16px;
18+
}
19+
20+
html { scroll-behavior: smooth; }
21+
22+
body {
23+
margin: 0;
24+
background: #050508;
25+
font-family: system-ui, sans-serif;
26+
color: #fff;
27+
overflow-x: hidden;
28+
}
29+
30+
/* NAVBAR */
31+
.navbar {
32+
position: fixed;
33+
top: 20px;
34+
left: 50%;
35+
transform: translateX(-50%);
36+
width: 90%;
37+
max-width: 1200px;
38+
padding: 15px 30px;
39+
background: var(--glass-bg);
40+
backdrop-filter: blur(var(--glass-blur));
41+
border: 1px solid var(--glass-border);
42+
border-radius: 20px;
43+
display: flex;
44+
justify-content: space-between;
45+
z-index: 100;
46+
}
47+
48+
.nav-links a {
49+
color: white;
50+
text-decoration: none;
51+
margin-left: 20px;
52+
opacity: 0.7;
53+
transition: .3s;
54+
}
55+
.nav-links a:hover {
56+
opacity: 1;
57+
color: var(--primary);
58+
}
59+
60+
/* GRID */
61+
.dashboard {
62+
display: grid;
63+
grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
64+
gap: 25px;
65+
width: 90%;
66+
max-width: 1200px;
67+
margin: 150px auto 120px auto;
68+
}
69+
70+
/* GLASS PANEL */
71+
.glass-panel {
72+
padding: 40px;
73+
border-radius: 30px;
74+
background: var(--glass-bg);
75+
backdrop-filter: blur(var(--glass-blur));
76+
border: 1px solid var(--glass-border);
77+
transition: .3s;
78+
}
79+
.glass-panel:hover {
80+
border-color: var(--primary);
81+
box-shadow: 0 0 20px rgba(125,207,255,0.3);
82+
}
83+
84+
.card-icon {
85+
font-size: 2.2rem;
86+
margin-bottom: 20px;
87+
background: linear-gradient(135deg,var(--primary),var(--secondary));
88+
-webkit-background-clip: text;
89+
-webkit-text-fill-color: transparent;
90+
}
91+
92+
.badge {
93+
display:inline-block;
94+
padding:6px 12px;
95+
border-radius:100px;
96+
font-size:11px;
97+
text-transform:uppercase;
98+
border:1px solid var(--glass-border);
99+
margin-bottom:1rem;
100+
color:var(--primary);
101+
}
102+
103+
h1,h2 { margin:0 0 1rem 0; }
104+
105+
p { color:rgba(255,255,255,0.6); }
106+
107+
.btn-primary {
108+
background: linear-gradient(135deg,var(--primary),var(--secondary));
109+
border:none;
110+
padding:14px;
111+
border-radius:12px;
112+
font-weight:bold;
113+
cursor:pointer;
114+
width:100%;
115+
}
116+
117+
/* NEWS BAR */
118+
.news-bar {
119+
position: fixed;
120+
bottom: 0;
121+
width: 100%;
122+
background: var(--glass-bg);
123+
backdrop-filter: blur(var(--glass-blur));
124+
border-top: 1px solid var(--glass-border);
125+
padding: 10px 0;
126+
overflow: hidden;
127+
}
128+
.ticker-text {
129+
display:inline-block;
130+
padding-left:100%;
131+
white-space:nowrap;
132+
animation:scroll 35s linear infinite;
133+
}
134+
@keyframes scroll {
135+
from { transform: translateX(0); }
136+
to { transform: translateX(-100%); }
137+
}
138+
.news-bar:hover .ticker-text {
139+
animation-play-state: paused;
140+
}
141+
142+
/* CURSOR GLOW */
143+
#glow-cursor {
144+
position: fixed;
145+
width: 500px;
146+
height: 500px;
147+
background: radial-gradient(circle, rgba(125,207,255,0.1) 0%, transparent 70%);
148+
border-radius: 50%;
149+
pointer-events:none;
150+
transform:translate(-50%,-50%);
151+
}
152+
</style>
153+
</head>
154+
155+
<body>
156+
157+
<nav class="navbar">
158+
<div style="font-weight:800;">WEB4</div>
159+
<div class="nav-links">
160+
<a href="#">Home</a>
161+
<a href="#projects">Projects</a>
162+
<a href="#news">News</a>
163+
<a href="https://github.com" target="_blank">GitHub</a>
164+
</div>
165+
</nav>
166+
167+
<!-- DASHBOARD -->
168+
<section id="projects" class="dashboard">
169+
170+
<div class="glass-panel">
171+
<i class="fa-solid fa-microchip card-icon"></i>
172+
<span class="badge">System Online</span>
173+
<h1>Core Engine</h1>
174+
<p>Processing environment active.</p>
175+
</div>
176+
177+
<div class="glass-panel">
178+
<i class="fa-solid fa-code card-icon"></i>
179+
<span class="badge">Dev Ready</span>
180+
<h2>Development Node</h2>
181+
<p>Workspace compiled successfully.</p>
182+
</div>
183+
184+
<div class="glass-panel">
185+
<i class="fa-solid fa-cloud-arrow-up card-icon"></i>
186+
<span class="badge">Deployment</span>
187+
<h2>Cloud Sync</h2>
188+
<p>Infrastructure connected.</p>
189+
</div>
190+
191+
</section>
192+
193+
<!-- NEWS SECTION -->
194+
<section id="news" class="dashboard">
195+
<div class="glass-panel">
196+
<i class="fa-solid fa-newspaper card-icon"></i>
197+
<span class="badge">Live Feed</span>
198+
<h2>Global Tech Intelligence</h2>
199+
<div id="news-preview" style="font-size:0.9rem; opacity:0.8;">
200+
Loading headlines...
201+
</div>
202+
</div>
203+
</section>
204+
205+
<!-- TICKER -->
206+
<div class="news-bar">
207+
<div class="ticker-text" id="ticker-content">
208+
Connecting to global servers...
209+
</div>
210+
</div>
211+
212+
<div id="glow-cursor"></div>
213+
214+
<script>
215+
const glow = document.getElementById('glow-cursor');
216+
window.addEventListener('mousemove', e => {
217+
glow.style.left = e.clientX + "px";
218+
glow.style.top = e.clientY + "px";
219+
});
220+
221+
async function fetchNews() {
222+
const ticker = document.getElementById('ticker-content');
223+
const preview = document.getElementById('news-preview');
224+
225+
const rssUrl = 'https://www.theverge.com/rss/index.xml';
226+
const apiUrl = `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(rssUrl)}`;
227+
228+
try {
229+
const res = await fetch(apiUrl);
230+
const data = await res.json();
231+
232+
if(data.status === "ok") {
233+
const headlines = data.items.map(item =>
234+
`[ ${item.pubDate.split(" ")[0]} ] ${item.title}`
235+
).join(" ••• ");
236+
237+
ticker.innerHTML = headlines + " ••• " + headlines;
238+
239+
preview.innerHTML = data.items.slice(0,5)
240+
.map(item => `<div>• ${item.title}</div>`)
241+
.join("");
242+
}
243+
} catch {
244+
ticker.innerHTML = "[ ERROR ] News sync failed.";
245+
preview.innerHTML = "Unable to load headlines.";
246+
}
247+
}
248+
249+
fetchNews();
250+
setInterval(fetchNews,600000);
251+
</script>
252+
[% embed https://pkgdown.r-lib.org/ %]
253+
</body>
254+
</html>

0 commit comments

Comments
 (0)