Hugging Face's logo

Spaces:
tsadf
/
anycoder-0de794aa
Running

App Files Community
anycoder-0de794aa / index.html
tsadf's picture
tsadf
Upload folder using huggingface_hub
846a7b3 verified
raw
history blame contribute delete
32.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Code Playground - Run Python Scripts</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
 <script>
 tailwind.config = {
 theme: {
 extend: {
 fontFamily: {
 sans: ['Inter', 'sans-serif'],
 mono: ['JetBrains Mono', 'monospace'],
 },
 }
 }
 }
 </script>
 <style>
 :root {
 --bg-body: #0b0c10;
 --bg-surface: #15161a;
 --bg-surface-raised: #1e1f25;
 --bg-surface-raised-hover: #25262d;
 --bg-surface-pressed: #2a2b33;
 --text-primary: #e2e4e9;
 --text-secondary: #8a8f9e;
 --text-tertiary: #5b6073;
 --border-subtle: rgba(255,255,255,0.05);
 --accent: #58a6ff;
 --accent-soft: rgba(88,166,255,0.12);
 --accent-glow: rgba(88,166,255,0.25);
 --green: #3fb950;
 --green-soft: rgba(63,185,80,0.12);
 --red: #f85149;
 --yellow: #e3b341;
 --purple: #bc8cff;
 }
 * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
 html {
scroll-behavior: smooth;
}
 body {
 font-family: 'Inter', sans-serif;
 background: var(--bg-body);
 color: var(--text-primary);
 min-height: 100vh;
 overflow-x: hidden;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 }
 /* === Ambient Background === */
 .ambient-bg {
 position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
 }
 .ambient-bg::before {
 content: '';
 position: absolute;
top: -20%;
left: -10%;
width: 60%;
height: 60%;
 background: radial-gradient(ellipse, rgba(88,166,255,0.04) 0%, transparent 70%);
 animation: ambientDrift 25s ease-in-out infinite alternate;
 }
 .ambient-bg::after {
 content: '';
 position: absolute;
bottom: -20%;
right: -10%;
width: 50%;
height: 50%;
 background: radial-gradient(ellipse, rgba(188,140,255,0.03) 0%, transparent 70%);
 animation: ambientDrift 30s ease-in-out infinite alternate-reverse;
 }
 @keyframes ambientDrift {
 0% { transform: translate(0,0) scale(1); }
 100% { transform: translate(30px, -20px) scale(1.1); }
 }
 /* === Dot Grid === */
 .dot-grid {
 position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
 background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
 background-size: 40px 40px;
 mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
 }
 /* === Custom Scrollbar === */
 ::-webkit-scrollbar {
width: 5px;
height: 5px;
}
 ::-webkit-scrollbar-track {
background: transparent;
}
 ::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.08);
border-radius: 10px;
}
 ::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.15);
}
 /* === Code Editor === */
 .editor-container {
 background: #0d1117;
 border: 1px solid var(--border-subtle);
 border-radius: 14px;
 overflow: hidden;
 position: relative;
 }
 .editor-header {
 display: flex;
align-items: center;
gap: 6px;
 padding: 12px 16px;
 background: rgba(255,255,255,0.015);
 border-bottom: 1px solid var(--border-subtle);
 }
 .dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
 .dot-red {
background: #ff5f57;
}
 .dot-yellow {
background: #febc2e;
}
 .dot-green {
background: #28c840;
}
 .editor-code {
 font-family: 'JetBrains Mono', monospace;
 font-size: 14.5px;
 line-height: 2;
 padding: 20px 24px;
 overflow-x: auto;
 white-space: pre;
 color: var(--text-primary);
 }
 .editor-code .comment {
color: #8b949e;
font-style: italic;
}
 .editor-code .keyword {
color: #ff7b72;
font-weight: 600;
}
 .editor-code .function {
color: #d2a8ff;
}
 .editor-code .string {
color: #a5d6ff;
}
 .editor-code .number {
color: #79c0ff;
}
 .line-num {
 display: inline-block;
width: 28px;
text-align: right;
margin-right: 18px;
 color: var(--text-tertiary);
font-size: 12px;
user-select: none;
 }
 /* === Terminal === */
 .terminal-window {
 background: #080808;
 border: 1px solid var(--border-subtle);
 border-radius: 14px;
 overflow: hidden;
 box-shadow:
 0 0 0 1px rgba(88,166,255,0.03),
 0 20px 60px -15px rgba(0,0,0,0.7);
 }
 .terminal-header {
 display: flex;
align-items: center;
justify-content: space-between;
 padding: 10px 16px;
 background: rgba(255,255,255,0.02);
 border-bottom: 1px solid rgba(255,255,255,0.03);
 }
 .terminal-tabs {
 display: flex;
gap: 4px;
 }
 .terminal-tab {
 display: flex;
align-items: center;
gap: 8px;
 padding: 6px 14px;
border-radius: 8px;
 font-size: 12px;
font-weight: 500;
 transition: all 0.2s;
 }
 .terminal-tab.active {
 background: rgba(255,255,255,0.06);
 color: var(--text-primary);
 }
 .terminal-tab:not(.active) {
 color: var(--text-tertiary);
cursor: pointer;
 }
 .terminal-tab:not(.active):hover {
 background: rgba(255,255,255,0.03);
 color: var(--text-secondary);
 }
 .terminal-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 6px rgba(63,185,80,0.5);
}
 .terminal-body {
 font-family: 'JetBrains Mono', monospace;
 font-size: 13.5px;
 line-height: 1.9;
 padding: 20px 24px;
 min-height: 220px;
 max-height: 320px;
 overflow-y: auto;
 color: #e2e4e9;
 }
 .prompt {
color: var(--green);
margin-right: 8px;
}
 .cmd-path {
color: var(--accent);
margin-right: 6px;
}
 .typing-cursor {
 display: inline-block;
width: 8px;
height: 18px;
 background: var(--accent);
border-radius: 2px;
 margin-left: 2px;
 animation: blink 0.9s step-end infinite;
 vertical-align: middle;
 }
 @keyframes blink {
50% { opacity: 0; }
}
 /* === Buttons === */
 .btn {
 display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
 font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 14px;
 padding: 12px 28px;
border-radius: 12px;
border: none;
 cursor: pointer;
transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 position: relative;
overflow: hidden;
 letter-spacing: -0.01em;
 }
 .btn-run {
 background: linear-gradient(135deg, #238636 0%, #2ea043 100%);
 color: white;
 box-shadow: 0 4px 14px rgba(46,160,67,0.25), 0 1px 3px rgba(0,0,0,0.3);
 }
 .btn-run:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 24px rgba(46,160,67,0.35), 0 1px 3px rgba(0,0,0,0.3);
 }
 .btn-run:active {
transform: translateY(0);
}
 .btn-run.running {
 background: linear-gradient(135deg, #9e6c02 0%, #d29922 100%);
 box-shadow: 0 4px 14px rgba(210,153,34,0.25), 0 1px 3px rgba(0,0,0,0.3);
 cursor: not-allowed;
 }
 .btn-secondary {
 background: var(--bg-surface-raised);
 color: var(--text-secondary);
 border: 1px solid var(--border-subtle);
 box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 }
 .btn-secondary:hover {
 background: var(--bg-surface-raised-hover);
 color: var(--text-primary);
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0,0,0,0.3);
 }
 /* === Cards === */
 .card {
 background: var(--bg-surface);
 border: 1px solid var(--border-subtle);
 border-radius: 16px;
 padding: 24px;
 transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
 }
 .card:hover {
 border-color: rgba(255,255,255,0.08);
 box-shadow: 0 20px 40px -12px rgba(0,0,0,0.5);
 transform: translateY(-2px);
 }
 /* === Feature Icons === */
 .feature-icon {
 width: 44px;
height: 44px;
 border-radius: 12px;
 display: flex;
align-items: center;
justify-content: center;
 font-size: 18px;
 margin-bottom: 16px;
 transition: transform 0.3s;
 }
 .card:hover .feature-icon {
transform: scale(1.1) rotate(-4deg);
}
 /* === Header === */
 .site-header {
 position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
 padding: 0 24px;
 transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
 }
 .site-header.scrolled {
 background: rgba(11, 12, 16, 0.7);
 backdrop-filter: blur(20px) saturate(180%);
 -webkit-backdrop-filter: blur(20px) saturate(180%);
 border-bottom: 1px solid rgba(255,255,255,0.04);
 }
 .site-header-inner {
 max-width: 1240px;
margin: 0 auto;
 display: flex;
align-items: center;
justify-content: space-between;
 height: 64px;
 }
 .logo {
 display: flex;
align-items: center;
gap: 10px;
 font-weight: 700;
font-size: 18px;
color: var(--text-primary);
 text-decoration: none;
letter-spacing: -0.03em;
 transition: opacity 0.2s;
 }
 .logo:hover {
opacity: 0.85;
}
 .logo-icon {
 width: 32px;
height: 32px;
 border-radius: 10px;
 background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%);
 display: flex;
align-items: center;
justify-content: center;
 font-size: 14px;
color: white;
 box-shadow: 0 4px 14px rgba(88,166,255,0.25);
 }
 /* === Hero Section === */
 .hero-section {
 position: relative;
z-index: 1;
 padding: 140px 24px 60px;
 overflow: hidden;
 }
 .hero-section::before {
 content: '';
 position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
 width: 800px;
height: 400px;
 background: radial-gradient(ellipse, rgba(88,166,255,0.06) 0%, transparent 70%);
 pointer-events: none;
 }
 /* === Accent Glow behind elements === */
 .glow-backdrop {
 position: absolute;
inset: 0;
pointer-events: none;
 }
 .glow-backdrop::after {
 content: '';
 position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
 width: 500px;
height: 500px;
 background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
 filter: blur(80px);
 }
 /* === Animated Success === */
 .output-line {
 opacity: 0;
 animation: lineReveal 0.3s ease forwards;
 }
 @keyframes lineReveal {
 from { opacity: 0; transform: translateY(4px); }
 to { opacity: 1; transform: translateY(0); }
 }
 /* === Stats Bar === */
 .stat-item {
 display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
 }
 .stat-value {
 font-family: 'JetBrains Mono', monospace;
 font-size: 20px;
font-weight: 700;
color: var(--text-primary);
 }
 .stat-label {
 font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
 color: var(--text-tertiary);
font-weight: 500;
 }
 /* === Code Typing Animation === */
 @keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
 .fade-in {
 animation: fadeIn 0.5s ease forwards;
 }
 /* === Social Links === */
 .social-link {
 display: inline-flex;
align-items: center;
gap: 6px;
 padding: 6px 14px;
border-radius: 8px;
 font-size: 13px;
font-weight: 500;
 color: var(--text-tertiary);
 text-decoration: none;
 border: 1px solid var(--border-subtle);
 background: transparent;
 transition: all 0.2s;
 }
 .social-link:hover {
 background: var(--bg-surface-raised);
 color: var(--text-secondary);
 border-color: rgba(255,255,255,0.08);
 transform: translateY(-1px);
 }
 /* === Toast === */
 .toast {
 position: fixed;
bottom: 32px;
right: 32px;
z-index: 200;
 padding: 14px 22px;
border-radius: 12px;
 font-size: 14px;
font-weight: 500;
 background: var(--bg-surface-raised);
 border: 1px solid var(--border-subtle);
 box-shadow: 0 20px 50px rgba(0,0,0,0.6);
 transform: translateY(80px);
opacity: 0;
 transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 display: flex;
align-items: center;
gap: 10px;
 }
 .toast.show {
transform: translateY(0);
opacity: 1;
}
 /* === Responsive === */
 @media (max-width: 768px) {
 .hero-section { padding: 120px 20px 40px; }
 .editor-code { font-size: 13px; padding: 16px; }
 .terminal-body { padding: 16px; font-size: 12px; }
 .btn { padding: 11px 22px; font-size: 13px; }
 }
 /* === Nav link === */
 .nav-link {
 font-size: 13px;
font-weight: 500;
 color: var(--text-tertiary);
text-decoration: none;
 padding: 6px 12px;
border-radius: 8px;
 transition: all 0.2s;
 }
 .nav-link:hover {
color: var(--text-secondary);
background: rgba(255,255,255,0.03);
}
 /* === Dividers === */
 .section-divider {
 width: 100%;
height: 1px;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
 }
 /* === Responsive Grid for stats === */
 .stats-bar {
 display: flex;
align-items: center;
justify-content: center;
 gap: 40px;
 }
 @media (max-width: 640px) {
 .stats-bar {
gap: 20px;
flex-wrap: wrap;
}
 .stat-value {
font-size: 16px;
}
 }
 /* Animation for the run button icon spin */
 @keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
 .spin {
animation: spin 0.8s linear infinite;
}
 /* Pulse for the live indicator */
 @keyframes pulse-ring {
 0% { transform: scale(1); opacity: 1; }
 100% { transform: scale(2.5); opacity: 0; }
 }
 .live-dot {
position: relative;
}
 .live-dot::after {
 content: '';
 position: absolute;
inset: -2px;
border-radius: 50%;
 border: 1px solid var(--green);
 animation: pulse-ring 2s ease-out infinite;
 }
 </style>
</head>
<body>
<!-- Ambient background layers -->
 <div class="ambient-bg"></div>
 <div class="dot-grid"></div>
<!-- Header -->
 <header class="site-header" id="siteHeader">
 <div class="site-header-inner">
 <a href="#" class="logo">
 <div class="logo-icon"><i class="fa-solid fa-terminal"></i></div>
 <span>CodePlay</span>
 </a>
 <nav style="display:flex;align-items:center;gap:4px;">
 <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="nav-link" style="display:flex;align-items:center;gap:6px;color:var(--text-secondary);">
 <i class="fa-solid fa-code" style="font-size:11px;color:var(--accent);"></i>
 Built with anycoder
 </a>
 </nav>
 </div>
 </header>
<!-- Hero -->
 <section class="hero-section">
 <div style="max-width:800px;margin:0 auto;text-align:center;position:relative;z-index:1;">
 <div style="display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:100px;background:var(--accent-soft);border:1px solid rgba(88,166,255,0.08);margin-bottom:28px;font-size:12px;font-weight:600;color:var(--accent);letter-spacing:0.02em;backdrop-filter:blur(8px);">
 <span class="live-dot" style="width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;"></span>
 Python Script Runner &middot; Online
 </div>
 <h1 style="font-size:clamp(2.5rem,6vw,4rem);font-weight:800;line-height:1.08;letter-spacing:-0.04em;margin-bottom:20px;color:#fff;">
 Write. Run. See Results.<br>
 <span style="background:linear-gradient(135deg,#58a6ff,#bc8cff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">Instantly.</span>
 </h1>
 <p style="font-size:18px;color:var(--text-secondary);line-height:1.7;max-width:540px;margin:0 auto 40px;font-weight:400;">
 A beautiful, browser-based playground to write and execute Python scripts. See your code come to life with a stunning terminal interface.
 </p>
 <div style="display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;">
 <button class="btn btn-run" onclick="runScript()" id="runBtn">
 <i class="fa-solid fa-play" id="runIcon"></i>
 <span id="runLabel">Run Script</span>
 </button>
 <button class="btn btn-secondary" onclick="copyCode()" id="copyBtn">
 <i class="fa-regular fa-copy" id="copyIcon"></i>
 <span id="copyLabel">Copy Code</span>
 </button>
 </div>
 </div>
 </section>
<!-- Editor + Terminal -->
 <section style="position:relative;z-index:1;padding:0 24px 40px;">
 <div style="max-width:900px;margin:0 auto;">
<!-- Code Editor -->
 <div class="editor-container" style="margin-bottom:16px;">
 <div class="editor-header">
 <div class="dot dot-red"></div>
 <div class="dot dot-yellow"></div>
 <div class="dot dot-green"></div>
 <span style="margin-left:10px;font-size:12px;color:var(--text-tertiary);font-weight:500;user-select:none;">hello.py</span>
 <span style="margin-left:auto;font-size:11px;color:var(--text-tertiary);user-select:none;font-family:'JetBrains Mono',monospace;">python</span>
 </div>
 <div class="editor-code" id="codeEditor">
<span class="line-num">1</span><span class="comment">#!/usr/bin/env python3</span>
<span class="line-num">2</span>
<span class="line-num">3</span><span class="comment"># A simple Python script that prints a greeting</span>
<span class="line-num">4</span><span class="comment"># to the console output.</span>
<span class="line-num">5</span>
<span class="line-num">6</span><span class="keyword">def</span> <span class="function">main</span>():
<span class="line-num">7</span> <span class="comment"># Create the greeting message</span>
<span class="line-num">8</span> message = <span class="string">"Hello, World!"</span>
<span class="line-num">9</span>
<span class="line-num">10</span> <span class="comment"># Print the greeting to the terminal</span>
<span class="line-num">11</span> <span class="function">print</span>(message)
<span class="line-num">12</span>
<span class="line-num">13</span><span class="keyword">if</span> __name__ == <span class="string">"__main__"</span>:
<span class="line-num">14</span> main()
 </div>
 </div>
<!-- Terminal -->
 <div class="terminal-window" id="terminalWindow">
 <div class="terminal-header">
 <div class="terminal-tabs">
 <div class="terminal-tab active">
 <div class="terminal-dot"></div>
 Terminal
 </div>
 <div class="terminal-tab">
 <i class="fa-solid fa-bug" style="font-size:10px;color:var(--text-tertiary);"></i>
 Debug
 </div>
 <div class="terminal-tab">
 <i class="fa-solid fa-list-ul" style="font-size:10px;color:var(--text-tertiary);"></i>
 Output
 </div>
 </div>
 <div style="display:flex;align-items:center;gap:10px;">
 <button onclick="clearTerminal()" style="background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:4px 8px;border-radius:6px;font-size:12px;transition:all 0.2s;display:flex;align-items:center;gap:4px;" onmouseenter="this.style.color='var(--text-secondary)';this.style.background='rgba(255,255,255,0.03)'" onmouseleave="this.style.color='';this.style.background=''">
 <i class="fa-solid fa-eraser" style="font-size:10px;"></i>
 Clear
 </button>
 </div>
 </div>
 <div class="terminal-body" id="terminalBody">
 <div style="color:var(--text-tertiary);font-style:italic;margin-bottom:4px;">
 <i class="fa-solid fa-circle-info" style="margin-right:6px;font-size:10px;"></i>
 Click "Run Script" to execute the code above
 </div>
 </div>
 </div>
<!-- Execution Stats -->
 <div style="margin-top:20px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;">
 <div style="padding:10px 20px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--text-tertiary);">
 <span style="display:flex;align-items:center;gap:6px;">
 <i class="fa-solid fa-clock" style="font-size:11px;color:var(--accent);"></i>
 <span id="execTime">--</span>
 </span>
 <span style="width:1px;height:14px;background:var(--border-subtle);"></span>
 <span style="display:flex;align-items:center;gap:6px;">
 <i class="fa-solid fa-memory" style="font-size:11px;color:var(--purple);"></i>
 <span id="memUsage">--</span>
 </span>
 <span style="width:1px;height:14px;background:var(--border-subtle);"></span>
 <span style="display:flex;align-items:center;gap:6px;">
 <i class="fa-solid fa-file-code" style="font-size:11px;color:var(--yellow);"></i>
 <span>14 lines</span>
 </span>
 </div>
 </div>
</div>
 </section>
<div class="section-divider" style="max-width:900px;margin:0 auto 40px;"></div>
<!-- Features -->
 <section style="position:relative;z-index:1;padding:0 24px 60px;">
 <div style="max-width:1000px;margin:0 auto;">
 <div style="text-align:center;margin-bottom:44px;">
 <h2 style="font-size:28px;font-weight:700;letter-spacing:-0.03em;margin-bottom:10px;color:#fff;">Why use this playground?</h2>
 <p style="font-size:15px;color:var(--text-tertiary);max-width:420px;margin:0 auto;line-height:1.6;">
 A carefully crafted environment for quick script testing and learning.
 </p>
 </div>
 <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;">
 <div class="card">
 <div class="feature-icon" style="background:var(--accent-soft);color:var(--accent);">
 <i class="fa-solid fa-bolt"></i>
 </div>
 <h3 style="font-size:16px;font-weight:600;margin-bottom:6px;color:var(--text-primary);">Instant Execution</h3>
 <p style="font-size:13.5px;color:var(--text-secondary);line-height:1.7;">
 Run your Python scripts with zero setup time. No installation, no dependencies &mdash; just click and watch it work.
 </p>
 </div>
 <div class="card">
 <div class="feature-icon" style="background:var(--green-soft);color:var(--green);">
 <i class="fa-solid fa-terminal"></i>
 </div>
 <h3 style="font-size:16px;font-weight:600;margin-bottom:6px;color:var(--text-primary);">Terminal Simulation</h3>
 <p style="font-size:13.5px;color:var(--text-secondary);line-height:1.7;">
 A realistic terminal interface with syntax highlighting, execution feedback, and beautiful animated output.
 </p>
 </div>
 <div class="card">
 <div class="feature-icon" style="background:rgba(227,179,65,0.12);color:var(--yellow);">
 <i class="fa-solid fa-share-nodes"></i>
 </div>
 <h3 style="font-size:16px;font-weight:600;margin-bottom:6px;color:var(--text-primary);">Easy Sharing</h3>
 <p style="font-size:13.5px;color:var(--text-secondary);line-height:1.7;">
 Copy code snippets to your clipboard with one click. Share your scripts with teammates effortlessly.
 </p>
 </div>
 <div class="card">
 <div class="feature-icon" style="background:rgba(188,140,255,0.12);color:var(--purple);">
 <i class="fa-solid fa-chart-simple"></i>
 </div>
 <h3 style="font-size:16px;font-weight:600;margin-bottom:6px;color:var(--text-primary);">Performance Stats</h3>
 <p style="font-size:13.5px;color:var(--text-secondary);line-height:1.7;">
 See real-time execution metrics including runtime, memory usage, and output size after each run.
 </p>
 </div>
 </div>
 </div>
 </section>
<div class="section-divider" style="max-width:900px;margin:0 auto 40px;"></div>
<!-- Script Info -->
 <section style="position:relative;z-index:1;padding:0 24px 80px;">
 <div style="max-width:900px;margin:0 auto;">
 <div class="card" style="padding:40px;background:linear-gradient(180deg,var(--bg-surface) 0%,rgba(88,166,255,0.03) 100%);">
 <div style="display:flex;align-items:center;gap:16px;margin-bottom:28px;flex-wrap:wrap;">
 <div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(88,166,255,0.2);">
 <i class="fa-brands fa-python" style="font-size:22px;color:#fff;"></i>
 </div>
 <div>
 <h2 style="font-size:22px;font-weight:700;letter-spacing:-0.02em;color:#fff;">Script Analysis</h2>
 <p style="font-size:13px;color:var(--text-tertiary);margin-top:2px;">A breakdown of what the code does</p>
 </div>
 </div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:32px;">
 <div style="padding:16px;border-radius:12px;background:rgba(255,255,255,0.015);border:1px solid var(--border-subtle);">
 <div style="font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-tertiary);font-weight:600;margin-bottom:8px;">Function</div>
 <div style="font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;color:var(--accent);">main()</div>
 <div style="font-size:12px;color:var(--text-secondary);margin-top:4px;">Entry point of the program</div>
 </div>
 <div style="padding:16px;border-radius:12px;background:rgba(255,255,255,0.015);border:1px solid var(--border-subtle);">
 <div style="font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-tertiary);font-weight:600;margin-bottom:8px;">Output</div>
 <div style="font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;color:var(--green);">"Hello, World!"</div>
 <div style="font-size:12px;color:var(--text-secondary);margin-top:4px;">Printed to standard output</div>
 </div>
 <div style="padding:16px;border-radius:12px;background:rgba(255,255,255,0.015);border:1px solid var(--border-subtle);">
 <div style="font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-tertiary);font-weight:600;margin-bottom:8px;">Guard</div>
 <div style="font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:var(--purple);">__name__ == "__main__"</div>
 <div style="font-size:12px;color:var(--text-secondary);margin-top:4px;">Prevents execution on import</div>
 </div>
 </div>
<div style="background:rgba(0,0,0,0.3);border:1px solid var(--border-subtle);border-radius:12px;padding:24px;">
 <div style="font-size:13px;color:var(--text-secondary);line-height:2;font-family:'JetBrains Mono',monospace;">
 <div style="color:var(--text-tertiary);margin-bottom:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;">
 <i class="fa-solid fa-circle-info" style="margin-right:6px;"></i>
 Execution Flow
 </div>
 <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
 <span style="width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;">1</span>
 <span>Script starts execution</span>
 </div>
 <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
 <span style="width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;">2</span>
 <span>Checks <span style="color:var(--purple);">__name__</span> guard condition</span>
 </div>
 <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
 <span style="width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;">3</span>
 <span>Calls <span style="color:var(--function);">main()</span> function</span>
 </div>
 <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
 <span style="width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;">4</span>
 <span>Assigns string <span style="color:var(--string);">"Hello, World!"</span> to <span style="color:var(--keyword);">message</span></span>
 </div>
 <div style="display:flex;align-items:center;gap:10px;">
 <span style="width:22px;height:22px;border-radius:50%;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;">5</span>
 <span>Outputs message via <span style="color:var(--function);">print()</span></span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer style="position:relative;z-index:1;padding:32px 24px;border-top:1px solid var(--border-subtle);">
 <div style="max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;">
 <div style="font-size:13px;color:var(--text-tertiary);">
 Built with care using HTML, CSS & JavaScript
 </div>
 <div style="display:flex;gap:8px;flex-wrap:wrap;">
 <a href="#" class="social-link"><i class="fa-brands fa-github" style="font-size:13px;"></i>GitHub</a>
 <a href="#" class="social-link"><i class="fa-brands fa-twitter" style="font-size:13px;"></i>Twitter</a>
 <a href="#" class="social-link"><i class="fa-solid fa-envelope" style="font-size:13px;"></i>Contact</a>
 </div>
 </div>
 </footer>
<!-- Toast -->
 <div class="toast" id="toast">
 <i class="fa-solid fa-circle-check" style="color:var(--green);"></i>
 <span