PageSourceSearch

https://earnest-strudel-ea27a0.netlify.app/

html earnest-strudel-ea27a0.netlify.app collected 2026-10-03 10:40:26 UTC 21,310 bytes, 363 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" class="scroll-smooth">
3<head>
4    <meta charset="UTF-8">
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=343d7545-1eae-4c44-a3f3-4c02222263b7
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <title>SoulMC | Public Minecraft Server</title>
10    
10<script src="https://cdn.tailwindcss.com"></script>
10
11    
11<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
11
12    <link rel="preconnect" href="https://fonts.googleapis.com">
13    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
15    <style>
16        :root {
17            --bg: #0a0612;  
18            --accent: #a855f7;
19            --accent-secondary: #7c3aed;
20            --card: #140b22;
21        }
22
23        body {
24            font-family: 'Inter', sans-serif;
25            background-color: var(--bg);
26            color: white;
27            margin: 0;
28            overflow-x: hidden;
29        }
30
31        .font-serif {
32            font-family: 'Playfair Display', serif;
33        }
34
35        /* Reveal Animation Styles */
36        .reveal {
37            opacity: 0;
38            transform: translateY(30px);
39            transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
40        }
41
42        .reveal.active {
43            opacity: 1;
44            transform: translateY(0);
45        }
46
47        /* Custom Floating Animations */
48        @keyframes float-hand-left {
49            0%, 100% { transform: translateY(0) rotate(0); }
50            50% { transform: translateY(-20px) rotate(2deg); }
51        }
52
53        @keyframes float-hand-right {
54            0%, 100% { transform: translateY(0) rotate(0); }
55            50% { transform: translateY(20px) rotate(-2deg); }
56        }
57
58        .animate-float-left {
59            animation: float-hand-left 12s ease-in-out infinite;
60        }
61
62        .animate-float-right {
63            animation: float-hand-right 14s ease-in-out infinite;
64        }
65
66        /* Noise Texture Overlay */
67        .noise-overlay {
68            position: fixed;
69            inset: 0;
70            z-index: 50;
71            pointer-events: none;
72            opacity: 0.05;
73            mix-blend-mode: overlay;
74            background-image: url("https://grainy-gradients.vercel.app/noise.svg");
75        }
76
77        /* Parallax Container Effect */
78        .parallax-card-up {
79            transform: translateY(var(--scroll-offset-up, 0px));
80        }
81
82        .parallax-card-down {
83            transform: translateY(var(--scroll-offset-down, 0px));
84        }
85    </style>
86</head>
87<body>
88    <div id="top" class="min-h-screen bg-[#0a0612] selection:bg-[#a855f7] selection:text-white">
89        <!-- Global Noise Overlay -->
90        <div class="noise-overlay"></div>
91
92        <!-- Navigation -->
93        <nav id="main-nav" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 py-8">
94            <div class="container mx-auto px-6 flex items-center justify-between">
95                <a href="#top" id="nav-logo-link" class="text-2xl font-bold tracking-tighter font-serif">
96                    <span style="background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Soul MC.</span>
97                </a>
98                
99                <div class="hidden md:flex items-center space-x-8">
100                    <a href="#mission" id="nav-mission-link" class="text-sm text-gray-400 hover:text-[#c084fc] transition-colors duration-300">Mission</a>
101                    <a href="#features" id="nav-features-link" class="text-sm text-gray-400 hover:text-[#c084fc] transition-colors duration-300">Features We Provide</a>
102                    <a href="#contact" id="nav-contact-link" class="text-sm text-gray-400 hover:text-[#c084fc] transition-colors duration-300">Contact Us</a>
103                </div>
104
105                <a href="#contact" id="nav-cta-link" class="inline-flex items-center justify-center px-8 py-3 rounded-full text-base font-medium bg-gradient-to-r from-[#a855f7] to-[#7c3aed] text-white hover:scale-105 hover:shadow-[0_0_30px_rgba(168,85,247,0.5)] transition-all duration-300">
106                    Connect Now
107                </a>
108            </div>
109        </nav>
110
111        <!-- Hero Section -->
112        <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-32 pb-20 bg-[#0a0612]">
113            <!-- Background Atmosphere -->
114            <div class="absolute inset-0 z-0 pointer-events-none select-none">
115                <div class="absolute top-0 left-0 w-full h-full opacity-60 mix-blend-screen">
116                    <img src="https://media.discordapp.net/attachments/1521411734978433145/1521798983641464883/content.png?ex=6a46253f&is=6a44d3bf&hm=81fc517d66e3b333483d85fb5b04fccfe2e16db7d81d966a56aa521e99bf3310&=&format=webp&quality=lossless&width=472&height=315" alt="Atmosphere" class="w-full h-full object-cover object-center opacity-80">
117                </div>
118                <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[#0a0612] z-10"></div>
119                <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-[#a855f7]/20 rounded-full blur-3xl"></div>
120                <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-[#7c3aed]/20 rounded-full blur-3xl"></div>
121            </div>
122
123            <!-- Floating Surrealist Elements -->
124            <div class="absolute -left-[10%] top-[-10%] md:left-[-5%] md:top-[-15%] w-[50vw] md:w-[40vw] max-w-[800px] z-10 pointer-events-none mix-blend-hard-light opacity-80 animate-float-left">
125                 <img src="https://media.discordapp.net/attachments/1521411734978433145/1521801598861578250/content.png?ex=6a4627ae&is=6a44d62e&hm=662f206e990d873f001cb8f708f0fd4c2ae65505e8fe927ecf42de3d9ae0e3e0&=&format=webp&quality=lossless&width=796&height=531" alt="Hand Reaching" class="w-full h-auto object-contain">
126            </div>
127
128            <div class="absolute -right-[50%] bottom-[-40%] md:right-[-5%] md:bottom-[-5%] w-[45vw] md:w-[35vw] max-w-[700px] z-10 pointer-events-none mix-blend-hard-light opacity-80 animate-float-right">
129                 <img src="https://media.discordapp.net/attachments/1521411734978433145/1521802897942122699/content.png?ex=6a4628e4&is=6a44d764&hm=443368ceb19ea6a7573b0c931db5edb9880be27eb1906948399d5fe4c55d0e00&=&format=webp&quality=lossless&width=796&height=531" alt="Hand Receiving" class="w-full h-auto object-contain">
130            </div>
131
132            <!-- Hero Content -->
133            <div class="container mx-auto px-6 relative z-20 text-center flex flex-col items-center justify-center h-full">
134                <div id="hero-content-wrapper" class="max-w-4xl mx-auto">
135                    <div class="reveal">
136                        <h1 class="text-5xl md:text-7xl font-medium leading-[1.1] tracking-tighter mb-6 font-serif">
137                             <span style="background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Soul MC.</span> <br />
138                            <span class="italic font-light text-white/80"> Minecraft Public Server</span>
139                        </h1>
140                    </div>
141                    
142                    <div class="reveal" style="transition-delay: 200ms;">
143                        <p class="text-base md:text-lg text-white/70 max-w-lg mx-auto mb-16 font-light tracking-wide leading-relaxed">
144                             A Minecraft Public Server where players can connect and play together.
145                        </p>
146                    </div>
147
148                    <div class="reveal flex flex-col items-center gap-6" style="transition-delay: 400ms;">
149                        <div class="relative group cursor-pointer">
150                           <div class="absolute inset-0 bg-[#a855f7]/20 blur-xl rounded-full opacity-0 group-hover:opacity-50 transition-opacity duration-500"></div>
151                           <div class="relative border border-[#a855f7]/30 bg-[#a855f7]/10 backdrop-blur-sm px-6 py-2 rounded-full flex items-center gap-3 text-xs md:text-sm text-[#c084fc] uppercase tracking-widest hover:bg-[#a855f7]/20 transition-colors duration-300">
152                             <span>Connect Now</span>
153                           </div>
154                        </div>
155                        
156                        <div class="flex items-center gap-4 text-[10px] md:text-xs text-white/40 uppercase tracking-widest mt-8 font-mono">
157                           <span id="current-time">11:11 PM</span>
158                           <span class="w-px h-3 bg-white/20"></span>
159                           <span>Pakistan Timezone</span>
160                        </div>
161                    </div>
162                </div>
163            </div>
164        </section>
165
166        <!-- Mission Section -->
167        <section id="mission" class="py-32 relative">
168            <div class="container mx-auto px-6">
169                <div class="max-w-4xl mx-auto text-center reveal">
170                    <h2 class="text-3xl md:text-5xl lg:text-6xl leading-tight text-white/90 mb-12 font-serif">
171                        <span style="background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Mission</span>
172                    </h2>
173                    <p class="text-xl md:text-2xl text-gray-500 leading-relaxed font-light">
174                        To provide a Minecraft Public Server where players can connect and play together.
175                    </p>
176                </div>
177
178                <!-- Logo Grid -->
179                <div class="mt-32 grid grid-cols-2 md:grid-cols-4 gap-8 items-center justify-items-center opacity-40 hover:opacity-100 transition-all duration-500">
180                    <div class="reveal font-bold text-xl tracking-widest text-[#c084fc]">LIFESTEAL</div>
181                    <div class="reveal font-bold text-xl tracking-widest" style="transition-delay: 100ms;">24/7</div>
182                    <div class="reveal font-bold text-xl tracking-widest text-[#c084fc]" style="transition-delay: 200ms;">Free</div>
183                    <div class="reveal font-bold text-xl tracking-widest" style="transition-delay: 300ms;">Public</div>
184                </div>
185            </div>
186        </section>
187
188        <!-- Features Section -->
189        <section id="features" class="py-40 relative overflow-hidden">
190            <div class="container mx-auto px-6 relative z-10">
191                <div class="reveal mb-32">
192                    <h2 class="text-5xl md:text-7xl text-center font-serif">
193                        Features  <br />
194                        <span class="italic" style="background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">We Provide</span>
195                    </h2>
196                </div>
197
198                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
199                    <!-- Card 1 - Purple Gradient -->
200                    <div class="parallax-card-down">
201                        <div class="reveal bg-gradient-to-br from-[#a855f7] to-[#7c3aed] rounded-3xl p-8 md:p-12 aspect-[4/5] flex flex-col justify-between shadow-2xl hover:shadow-[0_20px_50px_rgba(168,85,247,0.3)] transition-all duration-500 group cursor-pointer">
202                            <div class="flex justify-between items-start">
203                                <div class="w-12 h-12 rounded-full bg-black/10 flex items-center justify-center group-hover:rotate-45 transition-transform duration-500">
204                                    <iconify-icon icon="lucide:star" class="text-white text-2xl"></iconify-icon>
205                                </div>
206                                <span class="text-white font-medium text-sm border border-white/20 px-3 py-1 rounded-full">01</span>
207                            </div>
208                            
209                            <div>
210                                <h3 class="text-4xl md:text-5xl text-white mb-4 leading-none tracking-tight font-serif">
211                                    24/7 <br />Support
212                                </h3>
213                                <p class="text-white/80 text-lg leading-snug">
214                                    We are always available to help you with any questions or issues you may have.
215                                </p>
216                            </div>
217                            
218                            <div class="w-full h-px bg-white/10 mt-8"></div>
219                        </div>
220                    </div>
221
222                    <!-- Card 2 - Dark Purple -->
223                    <div class="parallax-card-up md:mt-24">
224                        <div class="reveal bg-[#1f1235] border border-[#a855f7]/20 rounded-3xl p-8 md:p-12 aspect-[4/5] flex flex-col justify-between shadow-2xl group cursor-pointer hover:border-[#a855f7]/50 transition-all duration-500" style="transition-delay: 150ms;">
225                            <div class="flex justify-between items-start">
226                                <div class="w-12 h-12 rounded-full bg-[#a85
2265f7]/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
227                                   <iconify-icon icon="lucide:arrow-right" class="text-[#a855f7] text-2xl -rotate-45"></iconify-icon>
228                                </div>
229                                <span class="text-[#c084fc] font-medium text-sm border border-[#a855f7]/20 px-3 py-1 rounded-full">02</span>
230                            </div>
231                            
232                            <div>
233                                <h3 class="text-4xl md:text-5xl text-white mb-4 leading-none tracking-tight font-serif">
234                                    Best <br />AntiCheat
235                                </h3>
236                                <p class="text-gray-400 text-lg leading-snug">
237                                    We use the latest anti-cheat software to protect your server from cheaters.
238                                </p>
239                            </div>
240                            
241                            <div class="w-full h-px bg-white/10 mt-8"></div>
242                        </div>
243                    </div>
244                </div>
245            </div>
246            
247            <!-- Background Pattern - Purple -->
248            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] opacity-10 pointer-events-none"
249                 style="background-image: radial-gradient(circle, #a855f7 1px, transparent 1px); background-size: 40px 40px;">
250            </div>
251        </section>
252
253        <!-- Contact Section -->
254        <section id="contact" class="py-32 relative">
255            <div class="container mx-auto px-6">
256                <div class="max-w-4xl mx-auto text-center reveal">
257                    <h2 class="text-3xl md:text-5xl lg:text-6xl leading-tight text-white/90 mb-12 font-serif">
258                        <span style="background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Contact Us</span>
259                    </h2>
260                    <p class="text-xl md:text-2xl text-gray-500 leading-relaxed font-light mb-12">
261                        Join our Discord server or follow us on social media!
262                    </p>
263                    <div class="flex flex-wrap justify-center gap-6">
264                        <a href="#" class="inline-flex items-center justify-center px-8 py-4 rounded-full text-lg font-medium bg-gradient-to-r from-[#a855f7] to-[#7c3aed] text-white hover:scale-105 hover:shadow-[0_0_30px_rgba(168,85,247,0.5)] transition-all duration-300">
265                            <iconify-icon icon="mdi:discord" class="mr-2 text-2xl"></iconify-icon>
266                            Discord
267                        </a>
268                        <a href="#" class="inline-flex items-center justify-center px-8 py-4 rounded-full text-lg font-medium border border-[#a855f7]/30 bg-[#a855f7]/10 text-[#c084fc] hover:bg-[#a855f7]/20 transition-all duration-300">
269                            <iconify-icon icon="mdi:twitter" class="mr-2 text-2xl"></iconify-icon>
270                            Twitter
271                        </a>
272                    </div>
273                </div>
274            </div>
275        </section>
276
277        <!-- Footer -->
278        <footer class="py-20 border-t border-[#a855f7]/20 bg-[#0a0612] relative overflow-hidden">
279            <div class="container mx-auto px-6 relative z-10">
280                <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-12">
281                    <div class="w-full md:w-auto">
282                        <h2 class="text-[10vw] leading-[0.8] tracking-tighter text-[#a855f7]/10 font-bold select-none pointer-events-none">
283                            SOULMC
284                        </h2>
285                    </div>
286                    
287                    <div class="flex flex-col gap-8 text-right">
288                        <div class="flex flex-col gap-4 text-gray-400">
289                            <a href="#" id="footer-discord-link" class="hover:text-[#c084fc] transition-colors">Discord</a>
290                            <a href="#" id="footer-tw-link" class="hover:text-[#c084fc] transition-colors">Twitter</a>
291                        </div>
292                        <p class="text-sm text-gray-600">© 2024 SoulMC.sbs All rights reserved.</p>
293                    </div>
294                </div>
295            </div>
296        </footer>
297    </div>
298
299    
299<script>
300        // 1. Reveal Elements on Scroll using Intersection Observer
301        const revealObserver = new IntersectionObserver((entries) => {
302            entries.forEach(entry => {
303                if (entry.isIntersecting) {
304                    entry.target.classList.add('active');
305                }
306            });
307        }, {
308            threshold: 0.1,
309            rootMargin: '0px 0px -50px 0px'
310        });
311
312        document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
313
314        // 2. Navbar Scroll Effect
315        const nav = document.getElementById('main-nav');
316        window.addEventListener('scroll', () => {
317            if (window.scrollY > 50) {
318                nav.classList.add('py-4', 'bg-[#0a0612]/80', 'backdrop-blur-md', 'border-b', 'border-[#a855f7]/20');
319                nav.classList.remove('py-8', 'bg-transparent');
320            } else {
321                nav.classList.remove('py-4', 'bg-[#0a0612]/80', 'backdrop-blur-md', 'border-b', 'border-[#a855f7]/20');
322                nav.classList.add('py-8', 'bg-transparent');
323            }
324        });
325
326        // 3. Simple Parallax Logic
327        window.addEventListener('scroll', () => {
328            const scrolled = window.scrollY;
329            // Move cards in opposite directions slightly for depth
330            document.querySelectorAll('.parallax-card-up').forEach(el => {
331                el.style.setProperty('--scroll-offset-up', `${scrolled * -0.05}px`);
332            });
333            document.querySelectorAll('.parallax-card-down').forEach(el => {
334                el.style.setProperty('--scroll-offset-down', `${scrolled * 0.05}px`);
335            });
336        });
337
338        // 4. Update Time Clock
339        function updateTime() {
340            const clockEl = document.getElementById('current-time');
341            const now = new Date();
342            let hours = now.getHours();
343            const minutes = now.getMinutes().toString().padStart(2, '0');
344            const ampm = hours >= 12 ? 'PM' : 'AM';
345            hours = hours % 12;
346            hours = hours ? hours : 12; // the hour '0' should be '12'
347            clockEl.textContent = `${hours}:${minutes} ${ampm}`;
348        }
349        setInterval(updateTime, 60000);
350        updateTime();
351
352        // 5. Hero Content Parallax
353        const heroWrapper = document.getElementById('hero-content-wrapper');
354        window.addEventListener('scroll', () => {
355            const scrolled = window.scrollY;
356            if (scrolled < 1000) {
357                heroWrapper.style.transform = `translateY(${scrolled * 0.4}px)`;
358                heroWrapper.style.opacity = Math.max(0, 1 - scrolled / 600);
359            }
360        });
361    </script>
361
362</body>
363</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.