Skip to content

Commit a7e4300

Browse files
spanelwebspanelweb
authored
Create index.html
1 parent 3f73fae commit a7e4300

1 file changed

Lines changed: 339 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 339 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,339 @@
1+
<!DOCTYPE html>
2+
<html lang="id">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<title>sPanel - Platform Pembelajaran Web Statik Serverless</title>
8+
<meta name="description" content="sPanel merupakan sebuah platform web statik yang dirancang khusus untuk lingkungan pembelajaran pembuatan dan publikasi website dengan workflow menyerupai cPanel versi klone murni bertenaga Firebase.">
9+
<meta name="keywords" content="sPanel, cPanel clone, web statik, pembelajaran website, firebase serverless, belajar coding, hosting gratis, github pages, sPanel official">
10+
<meta name="author" content="sPanel Team">
11+
<meta name="robots" content="index, follow">
12+
13+
<meta property="og:type" content="website">
14+
<meta property="og:url" content="https://spanel-web.github.io/">
15+
<meta property="og:title" content="sPanel - Platform Pembelajaran Web Statik Serverless">
16+
<meta property="og:description" content="Workflow menyerupai cPanel bertenaga penuh secara serverless di atas arsitektur Firebase.">
17+
<meta property="og:image" content="https://spanel-web.github.io/favicon.ico">
18+
19+
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
20+
21+
<link rel="preconnect" href="https://fonts.googleapis.com">
22+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
23+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
24+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
25+
26+
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
27+
28+
<style>
29+
:root {
30+
--bg-color: #0f172a;
31+
--card-bg: #1e293b;
32+
--accent-color: #38bdf8;
33+
--text-main: #f8fafc;
34+
--text-muted: #94a3b8;
35+
--gradient: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%);
36+
}
37+
38+
* {
39+
margin: 0;
40+
padding: 0;
41+
box-sizing: border-box;
42+
font-family: 'Poppins', sans-serif;
43+
}
44+
45+
body {
46+
background-color: var(--bg-color);
47+
color: var(--text-main);
48+
overflow-x: hidden;
49+
line-height: 1.6;
50+
}
51+
52+
.container {
53+
max-width: 800px;
54+
margin: 0 auto;
55+
padding: 40px 20px;
56+
}
57+
58+
/* Hero Section */
59+
header {
60+
text-align: center;
61+
margin-bottom: 50px;
62+
}
63+
64+
.profile-img-container {
65+
position: relative;
66+
width: 150px;
67+
height: 150px;
68+
margin: 0 auto 25px;
69+
}
70+
71+
.profile-img {
72+
width: 100%;
73+
height: 100%;
74+
border-radius: 50%;
75+
object-fit: cover;
76+
border: 4px solid var(--accent-color);
77+
box-shadow: 0 0 25px rgba(56, 189, 248, 0.4);
78+
transition: transform 0.5s ease;
79+
}
80+
81+
.profile-img:hover {
82+
transform: scale(1.05) rotate(5deg);
83+
}
84+
85+
h1 {
86+
font-size: 2.5rem;
87+
font-weight: 700;
88+
margin-bottom: 15px;
89+
background: var(--gradient);
90+
-webkit-background-clip: text;
91+
-webkit-text-fill-color: transparent;
92+
}
93+
94+
.description {
95+
color: var(--text-muted);
96+
font-size: 1.1rem;
97+
max-width: 650px;
98+
margin: 0 auto;
99+
text-align: center;
100+
}
101+
102+
/* Sections Grid/Style */
103+
section {
104+
background: var(--card-bg);
105+
border-radius: 20px;
106+
padding: 30px;
107+
margin-bottom: 30px;
108+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
109+
border: 1px solid rgba(255, 255, 255, 0.05);
110+
transition: transform 0.3s ease, box-shadow 0.3s ease;
111+
}
112+
113+
section:hover {
114+
transform: translateY(-5px);
115+
box-shadow: 0 15px 35px rgba(56, 189, 248, 0.1);
116+
}
117+
118+
h2 {
119+
font-size: 1.4rem;
120+
margin-bottom: 20px;
121+
text-align: center;
122+
position: relative;
123+
text-transform: uppercase;
124+
letter-spacing: 1px;
125+
color: var(--accent-color);
126+
}
127+
128+
/* Icons List Grid */
129+
.icon-grid {
130+
display: flex;
131+
justify-content: center;
132+
gap: 35px;
133+
flex-wrap: wrap;
134+
}
135+
136+
.icon-item {
137+
display: flex;
138+
flex-direction: column;
139+
align-items: center;
140+
gap: 8px;
141+
transition: transform 0.3s ease;
142+
}
143+
144+
.icon-item:hover {
145+
transform: translateY(-8px);
146+
}
147+
148+
.icon-item i {
149+
font-size: 3rem;
150+
}
151+
152+
.icon-item span {
153+
font-size: 0.9rem;
154+
color: var(--text-muted);
155+
font-weight: 600;
156+
}
157+
158+
/* Brand Colors */
159+
.fa-html5 { color: #e34c26; }
160+
.fa-css3-alt { color: #264de4; }
161+
.fa-square-js { color: #f7df1e; }
162+
.fa-fire { color: #ffa611; } /* Firebase Icon representation */
163+
164+
/* Social Media Icons */
165+
.social-grid a {
166+
text-decoration: none;
167+
color: var(--text-main);
168+
transition: transform 0.3s ease, color 0.3s ease;
169+
}
170+
171+
.fa-facebook:hover { color: #1877f2; }
172+
.fa-instagram:hover { color: #e1306c; }
173+
.fa-tiktok:hover { color: #000000; }
174+
.fa-youtube:hover { color: #ff0000; }
175+
176+
/* Donation QR Section */
177+
.donation-container {
178+
display: flex;
179+
flex-direction: column;
180+
align-items: center;
181+
text-align: center;
182+
}
183+
184+
.qr-card {
185+
background: #ffffff;
186+
padding: 15px;
187+
border-radius: 15px;
188+
display: inline-block;
189+
margin-top: 15px;
190+
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
191+
transform-style: preserve-3d;
192+
transform: perspective(1000px);
193+
}
194+
195+
.qr-card canvas {
196+
display: block;
197+
}
198+
199+
.donation-text {
200+
margin-bottom: 10px;
201+
font-size: 1rem;
202+
color: var(--text-muted);
203+
}
204+
205+
/* Footer */
206+
footer {
207+
text-align: center;
208+
padding-top: 20px;
209+
color: var(--text-muted);
210+
font-size: 0.9rem;
211+
border-top: 1px solid rgba(255, 255, 255, 0.05);
212+
margin-top: 50px;
213+
}
214+
215+
footer a {
216+
color: var(--accent-color);
217+
text-decoration: none;
218+
}
219+
220+
/* Responsive Design */
221+
@media (max-width: 600px) {
222+
h1 { font-size: 2rem; }
223+
.description { font-size: 1rem; }
224+
.icon-grid { gap: 20px; }
225+
.icon-item i { font-size: 2.5rem; }
226+
}
227+
</style>
228+
</head>
229+
<body>
230+
231+
<div class="container">
232+
233+
<header data-aos="fade-down" data-aos-duration="1000">
234+
<div class="profile-img-container">
235+
<img src="profile.jpg" alt="sPanel Logo / Profile" class="profile-img" onerror="this.src='https://picsum.photos/150'">
236+
</div>
237+
<h1>sPanel</h1>
238+
<p class="description">
239+
sPanel merupakan sebuah platform web statik yang dirancang khusus untuk lingkungan pembelajaran pembuatan dan publikasi website. Memiliki workflow yang menyerupai cPanel versi klone murni namun ditenagai penuh secara serverless di atas arsitektur Firebase.
240+
</p>
241+
</header>
242+
243+
<section data-aos="fade-up" data-aos-duration="800">
244+
<h2>Bahasa Pemrograman</h2>
245+
<div class="icon-grid">
246+
<div class="icon-item">
247+
<i class="fa-brands fa-html5"></i>
248+
<span>HTML5</span>
249+
</div>
250+
<div class="icon-item">
251+
<i class="fa-brands fa-css3-alt"></i>
252+
<span>CSS3</span>
253+
</div>
254+
<div class="icon-item">
255+
<i class="fa-brands fa-square-js"></i>
256+
<span>JavaScript</span>
257+
</div>
258+
</div>
259+
</section>
260+
261+
<section data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
262+
<h2>Ekstensi</h2>
263+
<div class="icon-grid">
264+
<div class="icon-item">
265+
<i class="fa-solid fa-fire"></i>
266+
<span>Firebase</span>
267+
</div>
268+
</div>
269+
</section>
270+
271+
<section data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
272+
<h2>Media Sosial</h2>
273+
<div class="icon-grid social-grid">
274+
<a href="https://spanel.official/facebook" target="_blank" class="icon-item" aria-label="Facebook">
275+
<i class="fa-brands fa-facebook"></i>
276+
<span>Facebook</span>
277+
</a>
278+
<a href="https://spanel.official/instagram" target="_blank" class="icon-item" aria-label="Instagram">
279+
<i class="fa-brands fa-instagram"></i>
280+
<span>Instagram</span>
281+
</a>
282+
<a href="https://spanel.official/tiktok" target="_blank" class="icon-item" aria-label="TikTok">
283+
<i class="fa-brands fa-tiktok"></i>
284+
<span>TikTok</span>
285+
</a>
286+
<a href="https://spanel.official/youtube" target="_blank" class="icon-item" aria-label="YouTube">
287+
<i class="fa-brands fa-youtube"></i>
288+
<span>YouTube</span>
289+
</a>
290+
</div>
291+
</section>
292+
293+
<section data-aos="fade-up" data-aos-duration="800" data-aos-delay="300">
294+
<h2>Donasi</h2>
295+
<div class="donation-container">
296+
<p class="donation-text">Dukung pengembangan sPanel melalui Scan QR Code DANA di bawah ini:</p>
297+
<div class="qr-card" id="tilt-qr">
298+
<div id="qrcode"></div>
299+
</div>
300+
</div>
301+
</section>
302+
303+
<footer data-aos="fade-in" data-aos-duration="1200">
304+
<p>&copy; 2026 <a href="https://spanel-web.github.io">sPanel Official</a>. All Rights Reserved.</p>
305+
</footer>
306+
307+
</div>
308+
309+
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
310+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.1/vanilla-tilt.min.js"></script>
311+
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
312+
313+
<script>
314+
// 1. Inisialisasi Animasi Scroll (AOS)
315+
AOS.init({
316+
once: true // Animasi hanya berjalan sekali saat di-scroll
317+
});
318+
319+
// 2. Generator QR Code Otomatis Berdasarkan Link Dana
320+
const danaLink = "https://link.dana.id/minta?full_url=https://qr.dana.id/v1/281012012024061008694840";
321+
new QRCode(document.getElementById("qrcode"), {
322+
text: danaLink,
323+
width: 180,
324+
height: 180,
325+
colorDark : "#0f172a",
326+
colorLight : "#ffffff",
327+
correctLevel : QRCode.CorrectLevel.H
328+
});
329+
330+
// 3. Efek 3D Tilt Pada Kartu QR Code
331+
VanillaTilt.init(document.querySelector("#tilt-qr"), {
332+
max: 25,
333+
speed: 400,
334+
glare: true,
335+
"max-glare": 0.3,
336+
});
337+
</script>
338+
</body>
339+
</html>

0 commit comments

Comments
 (0)