Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Capabilities Showcase</title> | |
| <!-- Font Awesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* --- CSS VARIABLES & THEME --- */ | |
| :root { | |
| --primary: #6366f1; | |
| --primary-hover: #4f46e5; | |
| --secondary: #ec4899; | |
| --bg-dark: #0f172a; | |
| --bg-card: rgba(30, 41, 59, 0.7); | |
| --text-main: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --glass-border: 1px solid rgba(255, 255, 255, 0.1); | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); | |
| } | |
| /* --- RESET & BASE STYLES --- */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| background-color: var(--bg-dark); | |
| color: var(--text-main); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 40%), | |
| radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 40%); | |
| } | |
| a { text-decoration: none; color: inherit; } | |
| ul { list-style: none; } | |
| /* --- LAYOUT UTILITIES --- */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| .section-title { | |
| text-align: center; | |
| font-size: clamp(2rem, 5vw, 3rem); | |
| margin-bottom: 1rem; | |
| background: linear-gradient(to right, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| font-weight: 800; | |
| } | |
| .section-subtitle { | |
| text-align: center; | |
| color: var(--text-muted); | |
| margin-bottom: 4rem; | |
| max-width: 600px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| /* --- HEADER & NAV --- */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| z-index: 1000; | |
| padding: 1rem 0; | |
| background: rgba(15, 23, 42, 0.8); | |
| backdrop-filter: blur(12px); | |
| border-bottom: var(--glass-border); | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .logo i { | |
| color: var(--primary); | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| font-weight: 500; | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -5px; | |
| left: 0; | |
| background: var(--primary); | |
| transition: var(--transition); | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .anycoder-link { | |
| font-size: 0.85rem; | |
| background: rgba(255,255,255,0.05); | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| border: var(--glass-border); | |
| transition: var(--transition); | |
| } | |
| .anycoder-link:hover { | |
| background: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| /* --- HERO SECTION --- */ | |
| #hero { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| padding-top: 80px; /* Offset for fixed header */ | |
| } | |
| .hero-content h1 { | |
| font-size: clamp(3rem, 8vw, 5rem); | |
| line-height: 1.1; | |
| margin-bottom: 1.5rem; | |
| font-weight: 800; | |
| } | |
| .hero-content h1 span { | |
| display: block; | |
| background: linear-gradient(135deg, #fff 0%, var(--text-muted) 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .hero-content p { | |
| font-size: 1.25rem; | |
| color: var(--text-muted); | |
| margin-bottom: 2.5rem; | |
| max-width: 700px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .cta-group { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| } | |
| .btn { | |
| padding: 1rem 2rem; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| border: none; | |
| font-size: 1rem; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(to right, var(--primary), var(--secondary)); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| border: 2px solid rgba(255,255,255,0.2); | |
| color: var(--text-main); | |
| } | |
| .btn-outline:hover { | |
| border-color: var(--text-main); | |
| background: rgba(255,255,255,0.05); | |
| } | |
| /* --- FEATURES GRID --- */ | |
| #features { | |
| padding: 6rem 0; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .card { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(10px); | |
| border: var(--glass-border); | |
| padding: 2.5rem; | |
| border-radius: 20px; | |
| transition: var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card:hover { | |
| transform: translateY(-10px); | |
| border-color: var(--primary); | |
| box-shadow: var(--shadow); | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: linear-gradient(to right, var(--primary), var(--secondary)); | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform 0.4s ease; | |
| } | |
| .card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .card-icon { | |
| font-size: 2.5rem; | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| } | |
| .card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .card p { | |
| color: var(--text-muted); | |
| } | |
| /* --- INTERACTIVE DEMO SECTION --- */ | |
| #interactive { | |
| padding: 6rem 0; | |
| background: rgba(0,0,0,0.2); | |
| } | |
| .demo-container { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 3rem; | |
| align-items: center; | |
| background: var(--bg-card); | |
| border: var(--glass-border); | |
| border-radius: 24px; | |
| padding: 3rem; | |
| } | |
| .demo-controls h3 { | |
| margin-bottom: 1.5rem; | |
| } | |
| .control-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .control-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| } | |
| .input-wrapper { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| input[type="text"] { | |
| width: 100%; | |
| padding: 0.8rem; | |
| border-radius: 8px; | |
| border: 1px solid rgba(255,255,255,0.2); | |
| background: rgba(0,0,0,0.3); | |
| color: white; | |
| font-family: inherit; | |
| } | |
| input[type="range"] { | |
| width: 100%; | |
| accent-color: var(--primary); | |
| } | |
| input[type="color"] { | |
| border: none; | |
| width: 50px; | |
| height: 50px; | |
| cursor: pointer; | |
| background: none; | |
| } | |
| .demo-preview { | |
| background: rgba(0,0,0,0.3); | |
| border-radius: 16px; | |
| height: 400px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 2px dashed rgba(255,255,255,0.1); | |
| position: relative; | |
| } | |
| .preview-box { | |
| padding: 2rem 3rem; | |
| border-radius: 12px; | |
| transition: all 0.2s ease; | |
| text-align: center; | |
| box-shadow: 0 20px 50px rgba(0,0,0,0.5); | |
| } | |
| /* Responsive adjustments for demo */ | |
| @media (max-width: 768px) { | |
| .demo-container { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* --- FOOTER --- */ | |
| footer { | |
| padding: 3rem 0; | |
| text-align: center; | |
| border-top: var(--glass-border); | |
| margin-top: 4rem; | |
| } | |
| .social-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .social-links a { | |
| font-size: 1.5rem; | |
| color: var(--text-muted); | |
| transition: var(--transition); | |
| } | |
| .social-links a:hover { | |
| color: var(--primary); | |
| transform: translateY(-3px); | |
| } | |
| /* --- ANIMATIONS --- */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .fade-in { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: opacity 0.6s ease-out, transform 0.6s ease-out; | |
| } | |
| .fade-in.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="container"> | |
| <nav> | |
| <div class="logo"> | |
| <i class="fa-solid fa-robot"></i> | |
| <span>FrontEnd AI</span> | |
| </div> | |
| <div class="nav-links"> | |
| <a href="#features">Skills</a> | |
| <a href="#interactive">Demo</a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square"></i> | |
| </a> | |
| </div> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="hero"> | |
| <div class="container hero-content"> | |
| <h1> | |
| <span>Modern Web Design</span> | |
| <span>Automated Intelligence</span> | |
| </h1> | |
| <p> | |
| I generate clean, semantic HTML, advanced CSS, and interactive JavaScript. | |
| Responsive, accessible, and styled to perfection without external frameworks. | |
| </p> | |
| <div class="cta-group"> | |
| <a href="#features" class="btn btn-primary"> | |
| <i class="fa-solid fa-layer-group"></i> Explore Capabilities | |
| </a> | |
| <a href="#interactive" class="btn btn-outline"> | |
| <i class="fa-solid fa-code"></i> Live Demo | |
| </a> | |
| </div> | |
| <!-- Decorative animated element --> | |
| <div style="margin-top: 4rem;" class="floating"> | |
| <i class="fa-solid fa-microchip" style="font-size: 3rem; color: var(--secondary); opacity: 0.8;"></i> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features"> | |
| <div class="container"> | |
| <h2 class="section-title fade-in">What I Can Do</h2> | |
| <p class="section-subtitle fade-in">Leveraging modern web standards to build robust interfaces.</p> | |
| <div class="features-grid"> | |
| <!-- Card 1 --> | |
| <article class="card fade-in"> | |
| <div class="card-icon"><i class="fa-brands fa-html5"></i></div> | |
| <h3>Semantic HTML5</h3> | |
| <p>Building the skeleton of the web with proper accessibility (a11y) in mind. Using correct tags like <nav>, <article>, and <section> for better SEO and screen reader support.</p> | |
| </article> | |
| <!-- Card 2 --> | |
| <article class="card fade-in"> | |
| <div class="card-icon"><i class="fa-brands fa-css3-alt"></i></div> | |
| <h3>Modern CSS3</h3> | |
| <p>Mastering Flexbox, Grid, CSS Variables, and Animations. Creating glassmorphism effects, responsive layouts, and complex visual structures without preprocessors.</p> | |
| </article> | |
| <!-- Card 3 --> | |
| <article class="card fade-in"> | |
| <div class="card-icon"><i class="fa-brands fa-js"></i></div> | |
| <h3>Vanilla JavaScript</h3> | |
| <p>Writing clean, performant logic. DOM manipulation, event handling, Fetch API for data, and interactive state management without relying on heavy libraries like jQuery.</p> | |
| </article> | |
| <!-- Card 4 --> | |
| <article class="card fade-in"> | |
| <div class="card-icon"><i class="fa-solid fa-mobile-screen"></i></div> | |
| <h3>Responsive Design</h3> | |
| <p>Mobile-first approach. Using media queries, fluid typography (clamp), and relative units to ensure the application looks perfect on phones, tablets, and 4k desktops.</p> | |
| </article> | |
| <!-- Card 5 --> | |
| <article class="card fade-in"> | |
| <div class="card-icon"><i class="fa-solid fa-universal-access"></i></div> | |
| <h3>Accessibility</h3> | |
| <p>Ensuring high contrast, focus states, and ARIA labels where necessary. Making the web usable for everyone, regardless of their ability or technology.</p> | |
| </article> | |
| <!-- Card 6 --> | |
| <article class="card fade-in"> | |
| <div class="card-icon"><i class="fa-solid fa-palette"></i></div> | |
| <h3>UI/UX Principles</h3> | |
| <p>Understanding spacing, hierarchy, and color theory. Creating intuitive user flows and polished visual feedback for interactions.</p> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive Demo Section --> | |
| <section id="interactive"> | |
| <div class="container"> | |
| <h2 class="section-title fade-in">Interactive Playground</h2> | |
| <p class="section-subtitle fade-in">See the code in action. Use the controls to manipulate the DOM in real-time.</p> | |
| <div class="demo-container fade-in"> | |
| <!-- Controls --> | |
| <div class="demo-controls"> | |
| <h3>Configuration</h3> | |
| <div class="control-group"> | |
| <label>Box Content</label> | |
| <div class="input-wrapper"> | |
| <i class="fa-solid fa-font" style="color: var(--text-muted)"></i> | |
| <input type="text" id="textInput" placeholder="Type something..." value="Hello World"> | |
| </div> | |
| </div> | |
| <div class="control-group"> | |
| <label>Border Radius (Roundness)</label> | |
| <div class="input-wrapper"> | |
| <i class="fa-solid fa-vector-square" style="color: var(--text-muted)"></i> | |
| <input type="range" id="radiusInput" min="0" max="50" value="12"> | |
| </div> | |
| </div> | |
| <div class="control-group"> | |
| <label>Background Color</label> | |
| <div class="input-wrapper"> | |
| <i class="fa-solid fa-eye-dropper" style="color: var(--text-muted)"></i> | |
| <input type="color" id="colorInput" value="#6366f1"> | |
| <span id="colorValue" style="font-family: monospace; color: var(--text-muted);">#6366f1</span> | |
| </div> | |
| </div> | |
| <div class="control-group"> | |
| <label>Scale (Size)</label> | |
| <div class="input-wrapper"> | |
| <i class="fa-solid fa-up-right-and-down-left-from-center" style="color: var(--text-muted)"></i> | |
| <input type="range" id="scaleInput" min="0.5" max="1.5" step="0.1" value="1"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Live Preview --> | |
| <div class="demo-preview"> | |
| <div id="liveBox" class="preview-box"> | |
| Hello World | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="social-links"> | |
| <a href="#"><i class="fa-brands fa-github"></i></a> | |
| <a href="#"><i class="fa-brands fa-twitter"></i></a> | |
| <a href="#"><i class="fa-brands fa-linkedin"></i></a> | |
| </div> | |
| <p style="color: var(--text-muted); font-size: 0.9rem;"> | |
| © 2023 AI Front-End Generator. Built with Semantic HTML5, CSS3, & Vanilla JS. | |
| </p> | |
| </div> | |
| </footer> | |
| <!-- JavaScript Logic --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // --- 1. Interactive Demo Logic --- | |
| const textInput = document.getElementById('textInput'); | |
| const radiusInput = document.getElementById('radiusInput'); | |
| const colorInput = document.getElementById('colorInput'); | |
| const scaleInput = document.getElementById('scaleInput'); | |
| const colorValue = document.getElementById('colorValue'); | |
| const liveBox = document.getElementById('liveBox'); | |
| // Event Listeners for real-time updates | |
| textInput.addEventListener('input', (e) => { | |
| liveBox.textContent = e.target.value || ' '; | |
| }); | |
| radiusInput.addEventListener('input', (e) => { | |
| liveBox.style.borderRadius = `${e.target.value}px`; | |
| }); | |
| colorInput.addEventListener('input', (e) => { | |
| const color = e.target.value; | |
| liveBox.style.backgroundColor = color; | |
| // Calculate luminance to decide text color (black or white) | |
| const r = parseInt(color.substr(1,2), 16); | |
| const g = parseInt(color.substr(3,2), 16); | |
| const b = parseInt(color.substr(5,2), 16); | |
| const yiq = ((r*299)+(g*587)+(b*114))/1000; | |
| liveBox.style.color = (yiq >= 128) ? '#000' : '#fff'; | |
| colorValue.textContent = color; | |
| }); | |
| scaleInput.addEventListener('input', (e) => { | |
| liveBox.style.transform = `scale(${e.target.value})`; | |
| }); | |
| // --- 2. Scroll Animations (Intersection Observer) --- | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: "0px 0px -50px 0px" | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| observer.unobserve(entry.target); // Only animate once | |
| } | |
| }); | |
| }, observerOptions); | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| fadeElements.forEach(el => observer.observe(el)); | |
| // --- 3. Smooth Scroll for Nav Links --- | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if(targetElement){ | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, // Offset for sticky header | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |