Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>What Can I Do? | Interactive Showcase</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* CSS Variables for theming */ | |
| :root { | |
| --primary-color: #4a6bff; | |
| --secondary-color: #f0f0ff; | |
| --accent-color: #ff6b6b; | |
| --dark-color: #2a2a2a; | |
| --light-color: #ffffff; | |
| --shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| --border-radius: 12px; | |
| --transition: all 0.3s ease; | |
| } | |
| /* Reset and base styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: var(--light-color); | |
| color: var(--dark-color); | |
| line-height: 1.6; | |
| } | |
| /* Header */ | |
| header { | |
| background-color: var(--light-color); | |
| box-shadow: var(--shadow); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .header-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| gap: 1.5rem; | |
| } | |
| nav a { | |
| text-decoration: none; | |
| color: var(--dark-color); | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| nav a:hover { | |
| color: var(--primary-color); | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| background: linear-gradient(135deg, var(--primary-color), #6a4aff); | |
| color: var(--light-color); | |
| text-align: center; | |
| padding: 4rem 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| max-width: 800px; | |
| margin: 0 auto 2rem; | |
| } | |
| .cta-button { | |
| display: inline-block; | |
| background-color: var(--light-color); | |
| color: var(--primary-color); | |
| padding: 0.8rem 1.5rem; | |
| border-radius: var(--border-radius); | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: var(--transition); | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: var(--shadow); | |
| } | |
| /* Features Grid */ | |
| .features { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 1rem; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .feature-card { | |
| background-color: var(--light-color); | |
| border-radius: var(--border-radius); | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| text-align: center; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); | |
| } | |
| .feature-icon { | |
| font-size: 3rem; | |
| color: var(--primary-color); | |
| margin-bottom: 1rem; | |
| } | |
| .feature-card h3 { | |
| margin-bottom: 1rem; | |
| color: var(--primary-color); | |
| } | |
| /* Interactive Demo */ | |
| .demo-section { | |
| background-color: var(--secondary-color); | |
| padding: 3rem 1rem; | |
| text-align: center; | |
| } | |
| .demo-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .demo-button { | |
| background-color: var(--primary-color); | |
| color: var(--light-color); | |
| border: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: var(--border-radius); | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| margin: 0.5rem; | |
| } | |
| .demo-button:hover { | |
| background-color: #3a5bef; | |
| transform: scale(1.05); | |
| } | |
| .demo-output { | |
| margin-top: 2rem; | |
| padding: 1.5rem; | |
| background-color: var(--light-color); | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| min-height: 100px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 1.2rem; | |
| } | |
| /* Footer */ | |
| footer { | |
| background-color: var(--dark-color); | |
| color: var(--light-color); | |
| text-align: center; | |
| padding: 2rem 1rem; | |
| margin-top: 2rem; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .footer-links a { | |
| color: var(--light-color); | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .footer-links a:hover { | |
| color: var(--primary-color); | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .header-container { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| nav ul { | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .hero h1 { | |
| font-size: 2rem; | |
| } | |
| .hero p { | |
| font-size: 1rem; | |
| } | |
| } | |
| /* Built with anycoder */ | |
| .built-with { | |
| position: fixed; | |
| bottom: 1rem; | |
| right: 1rem; | |
| background-color: var(--light-color); | |
| padding: 0.5rem 1rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| font-size: 0.9rem; | |
| z-index: 1000; | |
| } | |
| .built-with a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-weight: 600; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="header-container"> | |
| <a href="#" class="logo">AnyCoder</a> | |
| <nav> | |
| <ul> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#demo">Demo</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <section class="hero"> | |
| <h1>What Can I Do?</h1> | |
| <p>Explore the possibilities of modern web development with HTML, CSS, and JavaScript. This interactive showcase demonstrates responsive design, animations, and dynamic content.</p> | |
| <a href="#demo" class="cta-button">Try the Demo</a> | |
| </section> | |
| <section class="features" id="features"> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3>Responsive Design</h3> | |
| <p>Adapts seamlessly to any screen size, from mobile to desktop, using modern CSS techniques like Flexbox and Grid.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-paint-brush"></i> | |
| </div> | |
| <h3>Modern Styling</h3> | |
| <p>Utilizes CSS variables, custom properties, and advanced selectors for maintainable and scalable styles.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <h3>Interactive Elements</h3> | |
| <p>JavaScript-powered interactions that respond to user input, creating engaging and dynamic experiences.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="demo-section" id="demo"> | |
| <div class="demo-container"> | |
| <h2>Interactive Demo</h2> | |
| <p>Click the buttons below to see dynamic content in action!</p> | |
| <button class="demo-button" onclick="showDemo('hello')">Say Hello</button> | |
| <button class="demo-button" onclick="showDemo('time')">Show Time</button> | |
| <button class="demo-button" onclick="showDemo('random')">Random Number</button> | |
| <div class="demo-output" id="demoOutput"> | |
| Click a button to see the magic! | |
| </div> | |
| </div> | |
| </section> | |
| <footer id="about"> | |
| <div class="footer-links"> | |
| <a href="#features">Features</a> | |
| <a href="#demo">Demo</a> | |
| <a href="#about">About</a> | |
| <a href="#contact">Contact</a> | |
| </div> | |
| <p>© 2023 AnyCoder. All rights reserved.</p> | |
| </footer> | |
| <div class="built-with"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| <script> | |
| function showDemo(type) { | |
| const output = document.getElementById('demoOutput'); | |
| let content = ''; | |
| switch(type) { | |
| case 'hello': | |
| content = 'Hello, World! 🌍'; | |
| break; | |
| case 'time': | |
| const now = new Date(); | |
| content = `Current time: ${now.toLocaleTimeString()}`; | |
| break; | |
| case 'random': | |
| const randomNum = Math.floor(Math.random() * 100) + 1; | |
| content = `Random number: ${randomNum}`; | |
| break; | |
| default: | |
| content = 'Click a button to see the magic!'; | |
| } | |
| output.textContent = content; | |
| output.style.animation = 'none'; | |
| void output.offsetWidth; // Trigger reflow | |
| output.style.animation = 'fadeIn 0.5s ease'; | |
| } | |
| // Add animation to demo output | |
| const style = document.createElement('style'); | |
| style.textContent = ` | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| </script> | |
| </body> | |
| </html> |