Spaces:

bricklebink
/

kimi-test

Running

App Files Files Community

bricklebink commited on Jul 25

Commit

d46cce8

verified ·

1 Parent(s): 69373e6

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +359 -19

index.html CHANGED Viewed

@@ -1,19 +1,359 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sin City CNC - Precision Machining with Attitude</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --neon-red: #ff0040;
+            --neon-orange: #ff4500;
+            --steel-gray: #2a2a2a;
+            --dark-bg: #0a0a0a;
+            --fire-orange: #ff6b35;
+            --fire-yellow: #ffd700;
+        }
+        body {
+            font-family: 'Share Tech Mono', monospace;
+            background: var(--dark-bg);
+            color: #fff;
+            overflow-x: hidden;
+            min-height: 100vh;
+        }
+        .hero {
+            position: relative;
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+        .devil-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background:
+                radial-gradient(circle at center, transparent 30%, var(--dark-bg) 70%),
+                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><path d="M200 50 Q150 30 100 50 Q80 100 100 150 Q120 180 150 200 Q180 220 200 250 Q220 220 250 200 Q280 180 300 150 Q320 100 300 50 Q250 30 200 50" fill="none" stroke="%23ff0040" stroke-width="3"/><circle cx="170" cy="120" r="15" fill="%23ff0040"/><circle cx="230" cy="120" r="15" fill="%23ff0040"/><path d="M170 180 Q200 200 230 180" stroke="%23ff0040" stroke-width="2" fill="none"/><path d="M100 50 L300 50 L280 20 L120 20 Z" fill="%23ff0040"/></svg>') center/contain no-repeat;
+            animation: flicker 2s infinite alternate;
+            z-index: 1;
+        }
+        @keyframes flicker {
+            0%, 100% { opacity: 0.8; filter: drop-shadow(0 0 20px var(--neon-red)) drop-shadow(0 0 40px var(--neon-red)); }
+            50% { opacity: 1; filter: drop-shadow(0 0 25px var(--neon-red)) drop-shadow(0 0 50px var(--neon-red)); }
+            75% { opacity: 0.9; filter: drop-shadow(0 0 15px var(--neon-red)) drop-shadow(0 0 30px var(--neon-red)); }
+        }
+        .flames {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 200px;
+            background: linear-gradient(to top, var(--fire-orange), transparent);
+            filter: blur(2px);
+            animation: rise 3s ease-in-out infinite;
+            z-index: 2;
+        }
+        .flames::before,
+        .flames::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: inherit;
+        }
+        .flames::before {
+            animation: flicker-fire 1.5s ease-in-out infinite;
+            transform: scaleY(0.8);
+        }
+        .flames::after {
+            animation: flicker-fire 2s ease-in-out infinite reverse;
+            transform: scaleY(0.6);
+        }
+        @keyframes rise {
+            0%, 100% { transform: translateY(0) scaleY(1); }
+            50% { transform: translateY(-20px) scaleY(1.1); }
+        }
+        @keyframes flicker-fire {
+            0%, 100% { opacity: 0.8; }
+            50% { opacity: 1; }
+        }
+        .content {
+            position: relative;
+            z-index: 10;
+            text-align: center;
+            padding: 2rem;
+        }
+        h1 {
+            font-family: 'Orbitron', monospace;
+            font-size: clamp(3rem, 8vw, 8rem);
+            font-weight: 900;
+            background: linear-gradient(135deg, #666, #999, #666);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
+            margin-bottom: 2rem;
+            animation: zoomIn 3s ease-out forwards;
+            letter-spacing: 0.1em;
+        }
+        @keyframes zoomIn {
+            from {
+                transform: scale(0.5);
+                opacity: 0;
+            }
+            to {
+                transform: scale(1);
+                opacity: 1;
+            }
+        }
+        .blurb {
+            font-size: clamp(1rem, 3vw, 1.5rem);
+            margin-bottom: 3rem;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+            line-height: 1.8;
+            color: #ccc;
+            animation: fadeInUp 1s ease-out 1s both;
+        }
+        @keyframes fadeInUp {
+            from {
+                transform: translateY(30px);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+        .nav-menu {
+            display: flex;
+            gap: 2rem;
+            justify-content: center;
+            flex-wrap: wrap;
+            margin-bottom: 3rem;
+            animation: fadeInUp 1s ease-out 1.5s both;
+        }
+        .nav-link {
+            color: var(--neon-red);
+            text-decoration: none;
+            font-size: 1.2rem;
+            padding: 0.5rem 1.5rem;
+            border: 2px solid transparent;
+            position: relative;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+        }
+        .nav-link::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(45deg, transparent, var(--neon-red), transparent);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            z-index: -1;
+        }
+        .nav-link:hover {
+            color: #000;
+            border-color: var(--neon-red);
+            box-shadow: 0 0 20px var(--neon-red);
+        }
+        .nav-link:hover::before {
+            opacity: 1;
+        }
+        .cta-button {
+            display: inline-block;
+            padding: 1rem 3rem;
+            font-size: 1.5rem;
+            text-transform: uppercase;
+            letter-spacing: 0.2em;
+            background: linear-gradient(135deg, var(--steel-gray), #444);
+            color: var(--neon-red);
+            border: 2px solid var(--neon-red);
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+            animation: fadeInUp 1s ease-out 2s both;
+            box-shadow: 0 0 20px var(--neon-red);
+        }
+        .cta-button::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            background: var(--neon-red);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s ease, height 0.6s ease;
+            z-index: -1;
+        }
+        .cta-button:hover {
+            color: #000;
+            box-shadow: 0 0 40px var(--neon-red);
+        }
+        .cta-button:hover::before {
+            width: 300%;
+            height: 300%;
+        }
+        .smoke-particles {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            z-index: 5;
+        }
+        .particle {
+            position: absolute;
+            width: 2px;
+            height: 2px;
+            background: rgba(255, 255, 255, 0.5);
+            border-radius: 50%;
+            animation: float 10s infinite ease-in-out;
+        }
+        @keyframes float {
+            0% {
+                transform: translateY(100vh) translateX(0);
+                opacity: 0;
+            }
+            10% {
+                opacity: 1;
+            }
+            90% {
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(-100vh) translateX(100px);
+                opacity: 0;
+            }
+        }
+        @media (max-width: 768px) {
+            .nav-menu {
+                flex-direction: column;
+                gap: 1rem;
+            }
+            .nav-link {
+                font-size: 1rem;
+                padding: 0.75rem 2rem;
+            }
+            .cta-button {
+                font-size: 1.2rem;
+                padding: 0.75rem 2rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <section class="hero">
+        <div class="devil-bg"></div>
+        <div class="flames"></div>
+        <div class="smoke-particles"></div>
+        <div class="content">
+            <h1>SIN CITY CNC</h1>
+            <p class="blurb">
+                Where precision meets darkness. We craft the finest custom parts with devilish accuracy and demonic durability.
+                From aerospace to automotive, we machine your nightmares into reality.
+            </p>
+            <nav class="nav-menu">
+                <a href="#services" class="nav-link">Services</a>
+                <a href="#gallery" class="nav-link">Gallery</a>
+                <a href="#contact" class="nav-link">Contact</a>
+                <a href="#about" class="nav-link">About</a>
+            </nav>
+            <button class="cta-button" onclick="handleCTAClick()">
+                Summon Your Parts
+            </button>
+        </div>
+    </section>
+    <script>
+        // Create smoke particles
+        function createSmokeParticles() {
+            const container = document.querySelector('.smoke-particles');
+            const particleCount = 50;
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                particle.style.left = Math.random() * 100 + '%';
+                particle.style.animationDelay = Math.random() * 10 + 's';
+                particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
+                container.appendChild(particle);
+            }
+        }
+        // Handle CTA click
+        function handleCTAClick() {
+            const button = document.querySelector('.cta-button');
+            button.style.transform = 'scale(0.95)';
+            setTimeout(() => {
+                button.style.transform = 'scale(1)';
+                alert('Welcome to hell... of precision machining!');
+            }, 200);
+        }
+        // Initialize
+        createSmokeParticles();
+        // Add some interactive hover effects
+        document.querySelectorAll('.nav-link').forEach(link => {
+            link.addEventListener('mouseenter', function() {
+                this.style.textShadow = '0 0 10px var(--neon-red)';
+            });
+            link.addEventListener('mouseleave', function() {
+                this.style.textShadow = 'none';
+            });
+        });
+    </script>
+</body>
+</html>