Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>2opFreecloudVNC - Free Cloud VNC Services</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #06d6a0; | |
| --accent: #f59e0b; | |
| --dark: #1e293b; | |
| --light: #f8fafc; | |
| --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --grid-color: rgba(99, 102, 241, 0.1); | |
| } | |
| body { | |
| background-color: var(--dark); | |
| color: var(--light); | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| position: relative; | |
| } | |
| /* Animated Grid Background */ | |
| .grid-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.5; | |
| background-image: | |
| linear-gradient(var(--grid-color) 1px, transparent 1px), | |
| linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| animation: gridMove 20s linear infinite; | |
| } | |
| @keyframes gridMove { | |
| 0% { | |
| transform: translate(0, 0); | |
| } | |
| 100% { | |
| transform: translate(50px, 50px); | |
| } | |
| } | |
| /* Header Styles */ | |
| header { | |
| background: rgba(30, 41, 59, 0.8); | |
| backdrop-filter: blur(10px); | |
| padding: 1rem 2rem; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .nav-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--light); | |
| } | |
| .logo i { | |
| color: var(--secondary); | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| color: var(--light); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: color 0.3s; | |
| position: relative; | |
| } | |
| .nav-links a:hover { | |
| color: var(--secondary); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--secondary); | |
| transition: width 0.3s; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .anycoder-link { | |
| color: var(--accent); | |
| text-decoration: none; | |
| font-size: 0.8rem; | |
| opacity: 0.8; | |
| transition: opacity 0.3s; | |
| } | |
| .anycoder-link:hover { | |
| opacity: 1; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding: 5rem 2rem; | |
| text-align: center; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .hero h1 { | |
| font-size: 3.5rem; | |
| margin-bottom: 1rem; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| animation: fadeIn 1s ease-out; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| max-width: 700px; | |
| margin: 0 auto 2rem; | |
| color: #cbd5e1; | |
| animation: fadeIn 1.5s ease-out; | |
| } | |
| .hero-btns { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| animation: fadeIn 2s ease-out; | |
| } | |
| .btn { | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: all 0.3s; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .btn-primary { | |
| background: var(--primary); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); | |
| } | |
| .btn-primary:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--light); | |
| border: 2px solid var(--secondary); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--secondary); | |
| color: var(--dark); | |
| transform: translateY(-3px); | |
| } | |
| /* Features Section */ | |
| .features { | |
| padding: 5rem 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| font-size: 2.5rem; | |
| position: relative; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 100px; | |
| height: 4px; | |
| background: var(--gradient); | |
| border-radius: 2px; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .feature-card { | |
| background: rgba(30, 41, 59, 0.7); | |
| border-radius: 15px; | |
| padding: 2rem; | |
| text-align: center; | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .feature-icon { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| color: var(--secondary); | |
| } | |
| .feature-card h3 { | |
| margin-bottom: 1rem; | |
| font-size: 1.5rem; | |
| } | |
| .feature-card p { | |
| color: #cbd5e1; | |
| } | |
| /* Subscription Section */ | |
| .subscription { | |
| padding: 5rem 2rem; | |
| text-align: center; | |
| background: rgba(30, 41, 59, 0.5); | |
| margin: 2rem 0; | |
| } | |
| .subscription-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .subscription h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .subscription p { | |
| font-size: 1.2rem; | |
| margin-bottom: 2rem; | |
| color: #cbd5e1; | |
| } | |
| .channel-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| background: #ff0000; | |
| color: white; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 50px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.3s; | |
| margin-bottom: 2rem; | |
| } | |
| .channel-link:hover { | |
| background: #cc0000; | |
| transform: translateY(-3px); | |
| } | |
| .access-form { | |
| background: rgba(30, 41, 59, 0.7); | |
| padding: 2rem; | |
| border-radius: 15px; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| text-align: left; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| } | |
| .form-group input { | |
| width: 100%; | |
| padding: 0.8rem; | |
| border-radius: 8px; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| background: rgba(15, 23, 42, 0.8); | |
| color: white; | |
| font-size: 1rem; | |
| } | |
| .form-group input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| /* Footer */ | |
| footer { | |
| background: rgba(15, 23, 42, 0.9); | |
| padding: 3rem 2rem; | |
| text-align: center; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .footer-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| .footer-links a { | |
| color: #cbd5e1; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .footer-links a:hover { | |
| color: var(--secondary); | |
| } | |
| .copyright { | |
| color: #94a3b8; | |
| font-size: 0.9rem; | |
| } | |
| /* Animations */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease-out; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| /* Floating Elements */ | |
| .floating { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: var(--gradient); | |
| opacity: 0.1; | |
| filter: blur(40px); | |
| z-index: -1; | |
| } | |
| .floating-1 { | |
| width: 300px; | |
| height: 300px; | |
| top: 10%; | |
| left: 10%; | |
| animation: float 15s infinite ease-in-out; | |
| } | |
| .floating-2 { | |
| width: 200px; | |
| height: 200px; | |
| top: 60%; | |
| right: 10%; | |
| animation: float 12s infinite ease-in-out reverse; | |
| } | |
| .floating-3 { | |
| width: 150px; | |
| height: 150px; | |
| bottom: 20%; | |
| left: 20%; | |
| animation: float 10s infinite ease-in-out; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0) rotate(0deg); | |
| } | |
| 33% { | |
| transform: translateY(-20px) rotate(120deg); | |
| } | |
| 66% { | |
| transform: translateY(20px) rotate(240deg); | |
| } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .hero p { | |
| font-size: 1rem; | |
| } | |
| .section-title { | |
| font-size: 2rem; | |
| } | |
| .features-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Animated Grid Background --> | |
| <div class="grid-bg"></div> | |
| <!-- Floating Elements --> | |
| <div class="floating floating-1"></div> | |
| <div class="floating floating-2"></div> | |
| <div class="floating floating-3"></div> | |
| <!-- Header --> | |
| <header> | |
| <div class="nav-container"> | |
| <div class="logo"> | |
| <i class="fas fa-cloud"></i> | |
| <span>2opFreecloudVNC</span> | |
| </div> | |
| <div class="nav-links"> | |
| <a href="#home">Home</a> | |
| <a href="#features">Features</a> | |
| <a href="#access">Access</a> | |
| <a href="#about">About</a> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <h1 class="fade-in">Free Cloud VNC Services</h1> | |
| <p class="fade-in">Access powerful virtual machines and cloud environments completely free. Experience the best of Kasm and LinuxZoo with our premium VNC services.</p> | |
| <div class="hero-btns"> | |
| <a href="#access" class="btn btn-primary pulse"> | |
| <i class="fas fa-rocket"></i> Get Started | |
| </a> | |
| <a href="#features" class="btn btn-secondary"> | |
| <i class="fas fa-info-circle"></i> Learn More | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features" id="features"> | |
| <h2 class="section-title">Our Features</h2> | |
| <div class="features-grid"> | |
| <div class="feature-card fade-in"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-desktop"></i> | |
| </div> | |
| <h3>Full VNC Access</h3> | |
| <p>Get complete remote desktop access to powerful virtual machines with high-performance capabilities.</p> | |
| </div> | |
| <div class="feature-card fade-in"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-server"></i> | |
| </div> | |
| <h3>Cloud Environments</h3> | |
| <p>Access various cloud-based development environments and testing platforms without any cost.</p> | |
| </div> | |
| <div class="feature-card fade-in"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <h3>High Performance</h3> | |
| <p>Experience lightning-fast performance with our optimized virtual machine configurations.</p> | |
| </div> | |
| <div class="feature-card fade-in"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3>Secure & Private</h3> | |
| <p>Your sessions are completely isolated and secured with enterprise-grade privacy measures.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Subscription Section --> | |
| <section class="subscription" id="access"> | |
| <div class="subscription-content"> | |
| <h2 class="section-title">Get Access Now</h2> | |
| <p>To access our premium VNC services, you must first subscribe to our YouTube channel</p> | |
| <a href="https://www.youtube.com/@Creativecanvas_Umar" target="_blank" class="channel-link"> | |
| <i class="fab fa-youtube"></i> Subscribe to Creative Canvas Umar | |
| </a> | |
| <div class="access-form fade-in"> | |
| <h3>Access Request Form</h3> | |
| <p style="margin-bottom: 1.5rem; color: #94a3b8;">After subscribing, fill this form to get your access credentials</p> | |
| <form id="accessForm"> | |
| <div class="form-group"> | |
| <label for="name">Full Name</label> | |
| <input type="text" id="name" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email Address</label> | |
| <input type="email" id="email" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="youtube">YouTube Channel Username</label> | |
| <input type="text" id="youtube" required> | |
| </div> | |
| <button type="submit" class="btn btn-primary" style="width: 100%;"> | |
| <i class="fas fa-key"></i> Request Access | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-content"> | |
| <div class="footer-links"> | |
| <a href="#home">Home</a> | |
| <a href="#features">Features</a> | |
| <a href="#access">Access</a> | |
| <a href="#about">About</a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder">Built with anycoder</a> | |
| </div> | |
| <p class="copyright">© 2023 2opFreecloudVNC. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Form submission handler | |
| document.getElementById('accessForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const name = document.getElementById('name').value; | |
| const email = document.getElementById('email').value; | |
| const youtube = document.getElementById('youtube').value; | |
| // In a real application, this would send data to a server | |
| alert(`Thank you ${name}! Your access request has been received. We'll verify your YouTube subscription and send credentials to ${email} within 24 hours.`); | |
| // Reset form | |
| this.reset(); | |
| }); | |
| // Add scroll animations | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const fadeElements = document.querySelectorAll('.feature-card, .access-form'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.animation = 'fadeIn 1s ease-out forwards'; | |
| } | |
| }, { threshold: 0.1 }); | |
| fadeElements.forEach(el => { | |
| observer.observe(el); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |