Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Skymeilin Profile Viewer</title> | |
| <!-- Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet"> | |
| <style> | |
| /* --- MODERN CSS VARIABLES & RESET --- */ | |
| :root { | |
| --bg-dark: #0f172a; | |
| --bg-card: rgba(30, 41, 59, 0.7); | |
| --text-main: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --accent: #38bdf8; /* Sky Blue */ | |
| --accent-glow: rgba(56, 189, 248, 0.4); | |
| --gradient-1: #0f172a; | |
| --gradient-2: #1e293b; | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| --font-main: 'Inter', sans-serif; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: box-sizing; | |
| } | |
| body { | |
| background-color: var(--bg-dark); | |
| background-image: | |
| radial-gradient(at 0% 0%, rgba(56, 189, 248, 0.15) 0%, transparent 50%), | |
| radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.15) 0%, transparent 50%), | |
| radial-gradient(at 100% 100%, rgba(56, 189, 248, 0.1) 0%, transparent 50%); | |
| color: var(--text-main); | |
| font-family: var(--font-main); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| } | |
| /* --- UTILITIES & ANIMATIONS --- */ | |
| .container { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| a { text-decoration: none; color: inherit; transition: 0.3s; } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| @keyframes pulse-glow { | |
| 0% { box-shadow: 0 0 10px var(--accent-glow); } | |
| 50% { box-shadow: 0 0 25px var(--accent-glow); } | |
| 100% { box-shadow: 0 0 10px var(--accent-glow); } | |
| } | |
| /* --- HEADER --- */ | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px 0; | |
| border-bottom: 1px solid var(--glass-border); | |
| margin-bottom: 40px; | |
| } | |
| .brand { | |
| font-weight: 800; | |
| font-size: 1.5rem; | |
| letter-spacing: -1px; | |
| background: linear-gradient(to right, #fff, var(--accent)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .anycoder-link { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| background: var(--bg-card); | |
| padding: 8px 16px; | |
| border-radius: 8px; | |
| border: 1px solid var(--glass-border); | |
| } | |
| .anycoder-link:hover { | |
| color: var(--accent); | |
| border-color: var(--accent); | |
| } | |
| /* --- HERO SECTION --- */ | |
| .hero { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 40px; | |
| align-items: center; | |
| text-align: center; | |
| margin-bottom: 60px; | |
| } | |
| .avatar-container { | |
| position: relative; | |
| width: 180px; | |
| height: 180px; | |
| margin: 0 auto 20px; | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .avatar-img { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| border: 2px solid var(--accent); | |
| padding: 5px; | |
| background: var(--bg-dark); | |
| object-fit: cover; | |
| animation: pulse-glow 3s infinite; | |
| } | |
| .status-badge { | |
| position: absolute; | |
| bottom: 15px; | |
| right: 15px; | |
| background: #22c55e; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| border: 2px solid var(--bg-dark); | |
| box-shadow: 0 0 10px #22c55e; | |
| } | |
| .hero-title { | |
| font-size: 3rem; | |
| font-weight: 800; | |
| margin-bottom: 10px; | |
| line-height: 1.1; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.2rem; | |
| color: var(--accent); | |
| margin-bottom: 20px; | |
| font-weight: 500; | |
| } | |
| .typing-container { | |
| font-family: 'Courier New', monospace; | |
| color: var(--text-muted); | |
| margin-bottom: 30px; | |
| height: 20px; | |
| overflow: hidden; | |
| } | |
| /* --- GRID LAYOUT --- */ | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr; | |
| gap: 30px; | |
| } | |
| /* --- CARDS --- */ | |
| .card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 16px; | |
| padding: 30px; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| backdrop-filter: blur(10px); | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5); | |
| border-color: var(--accent); | |
| } | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| border-bottom: 1px solid var(--glass-border); | |
| padding-bottom: 15px; | |
| } | |
| .card-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--accent); | |
| color: #000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 10px; | |
| margin-right: 15px; | |
| font-size: 1.2rem; | |
| } | |
| .card-title { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| } | |
| /* --- SOCIALS --- */ | |
| .social-list { | |
| display: flex; | |
| gap: 15px; | |
| justify-content: center; | |
| margin-top: 20px; | |
| } | |
| .social-btn { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 12px; | |
| background: rgba(255,255,255,0.05); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| color: var(--text-muted); | |
| transition: 0.3s; | |
| } | |
| .social-btn:hover { | |
| background: var(--accent); | |
| color: #fff; | |
| transform: scale(1.1); | |
| } | |
| /* --- STATS --- */ | |
| .stat-row { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 15px; | |
| font-size: 0.95rem; | |
| } | |
| .stat-label { color: var(--text-muted); } | |
| .stat-value { font-weight: 600; color: var(--text-main); } | |
| /* --- TAGS --- */ | |
| .tags-container { | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .tag { | |
| padding: 6px 12px; | |
| background: rgba(56, 189, 248, 0.1); | |
| border: 1px solid rgba(56, 189, 248, 0.2); | |
| border-radius: 6px; | |
| font-size: 0.85rem; | |
| color: var(--accent); | |
| } | |
| /* --- RESPONSIVE --- */ | |
| @media (max-width: 768px) { | |
| .dashboard-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .hero-title { font-size: 2.2rem; } | |
| .avatar-container { width: 140px; height: 140px; } | |
| } | |
| /* --- FOOTER --- */ | |
| footer { | |
| text-align: center; | |
| padding: 40px 0; | |
| color: var(--text-muted); | |
| font-size: 0.8rem; | |
| border-top: 1px solid var(--glass-border); | |
| margin-top: 40px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Header --> | |
| <header> | |
| <div class="brand"> | |
| <i class="fa-solid fa-cloud"></i> SKYMEILIN | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link"> | |
| Built with anycoder <i class="fa-solid fa-arrow-right"></i> | |
| </a> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="avatar-container"> | |
| <!-- Using a high quality placeholder matching the 'Sky' theme since we don't have the direct MD5 hash --> | |
| <img src="https://ui-avatars.com/180?name=Sky&background=0f172a&color=38bdf8" alt="Skymeilin Avatar" class="avatar-img"> | |
| <div class="status-badge"></div> | |
| </div> | |
| <div class="hero-content"> | |
| <h1 class="hero-title">Hello, I'm Skymeilin</div> | |
| <div class="hero-subtitle">Digital Creator & Developer</div> | |
| <div class="typing-container"> | |
| <span id="typing-text"></span> | |
| </div> | |
| <div class="social-list"> | |
| <a href="#" class="social-btn"><i class="fa-brands fa-twitter"></i></a> | |
| <a href="#" class="social-btn"><i class="fa-brands fa-github"></i></a> | |
| <a href="#" class="social-btn"><i class="fa-brands fa-instagram"></i></a> | |
| <a href="#" class="social-btn"><i class="fa-brands fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dashboard Grid --> | |
| <div class="dashboard-grid"> | |
| <!-- Main Content (Bio/About) --> | |
| <main> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div class="card-icon"><i class="fa-solid fa-user"></i></div> | |
| <div class="card-title">Profile Overview</div> | |
| </div> | |
| <p style="color: var(--text-muted);"> | |
| Skymeilin is a passionate developer and creative thinker. Focused on building scalable web applications and exploring the intersection of design and code. This profile represents a digital identity curated for the modern web. | |
| </p> | |
| <br> | |
| <h3 style="margin-bottom: 10px; font-size: 1rem;">Tech Stack</h3> | |
| <div class="tags-container"> | |
| <span class="tag">HTML5</span> | |
| <span class="tag">CSS3</span> | |
| <span class="tag">JavaScript</span> | |
| <span class="tag">React</span> | |
| <span class="tag">Node.js</span> | |
| <span class="tag">UI Design</span> | |
| </div> | |
| </div> | |
| <div class="card" style="margin-top: 30px;"> | |
| <div class="card-header"> | |
| <div class="card-icon"><i class="fa-solid fa-briefcase"></i></div> | |
| <div class="card-title">Recent Activity</div> | |
| </div> | |
| <div class="stat-row"> | |
| <span class="stat-label">Latest Project</span> | |
| <span class="stat-value">Web UI Generator</span> | |
| </div> | |
| <div class="stat-row"> | |
| <span class="stat-label">Status</span> | |
| <span class="stat-value" style="color: var(--accent);">Active</span> | |
| </div> | |
| <div class="stat-row"> | |
| <span class="stat-label">Location</span> | |
| <span class="stat-value">Remote / Cloud</span> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Sidebar (Stats/Links) --> | |
| <aside> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div class="card-icon"><i class="fa-solid fa-chart-pie"></i></div> | |
| <div class="card-title">Analytics</div> | |
| </div> | |
| <div class="stat-row"> | |
| <span class="stat-label">Profile Views</span> | |
| <span class="stat-value">1,245</span> | |
| </div> | |
| <div class="stat-row"> | |
| <span class="stat-label">Avatar Score</span> | |
| <span class="stat-value">98/100</span> | |
| </div> | |
| <div class="stat-row"> | |
| <span class="stat-label">Member Since</span> | |
| <span class="stat-value">2023</span> | |
| </div> | |
| </div> | |
| <div class="card" style="margin-top: 30px; text-align: center;"> | |
| <div class="card-header" style="justify-content: center;"> | |
| <div class="card-title">Contact</div> | |
| </div> | |
| <button style="width: 100%; padding: 12px; background: var(--accent); border: none; border-radius: 8px; color: #fff; font-weight: 600; cursor: pointer; transition: 0.3s;"> | |
| Message Me | |
| </button> | |
| </div> | |
| </aside> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>© 2023 Skymeilin Profile. Generated by AnyCoder.</p> | |
| </footer> | |
| <script> | |
| // --- JS Logic for Typing Effect --- | |
| const textToType = "Building the future, one pixel at a time."; | |
| const typingElement = document.getElementById('typing-text'); | |
| let i = 0; | |
| function typeWriter() { | |
| if (i < textToType.length) { | |
| typingElement.innerHTML += textToType.charAt(i); | |
| i++; | |
| setTimeout(typeWriter, 50); | |
| } | |
| } | |
| // Start typing effect on load | |
| window.onload = typeWriter; | |
| // --- Interactive Button Logic --- | |
| const contactBtn = document.querySelector('button'); | |
| contactBtn.addEventListener('click', () => { | |
| contactBtn.innerHTML = "Message Sent!"; | |
| contactBtn.style.background = "#22c55e"; | |
| setTimeout(() => { | |
| contactBtn.innerHTML = "Message Me"; | |
| contactBtn.style.background = "var(--accent);"; | |
| }, 2000); | |
| }); | |
| // --- Dynamic Theme Toggle (Optional Enhancement) --- | |
| // (Could be added here, but keeping it simple for single file requirement) | |
| </script> | |
| </body> | |
| </html> |