Spaces:

guma
/

easy-dark-studio

Running

App Files Files Community

guma commited on 28 days ago

Commit

65efbf2

verified ·

1 Parent(s): 9f49b2c

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +274 -19

index.html CHANGED Viewed

@@ -1,19 +1,274 @@
-<!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>P5.js Circle Sketch</title>
+    <meta name="description" content="A simple P5.js sketch that draws a circle">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        header {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            padding: 1rem 2rem;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+            z-index: 1000;
+        }
+        .header-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        h1 {
+            color: white;
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+        .credit {
+            color: white;
+            font-size: 0.9rem;
+            opacity: 0.9;
+        }
+        .credit a {
+            color: white;
+            text-decoration: none;
+            font-weight: 500;
+            transition: opacity 0.3s ease;
+        }
+        .credit a:hover {
+            opacity: 0.8;
+            text-decoration: underline;
+        }
+        main {
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 2rem;
+        }
+        #canvas-container {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            padding: 2rem;
+            max-width: 100%;
+            max-height: calc(100vh - 200px);
+        }
+        canvas {
+            display: block;
+            border-radius: 8px;
+        }
+        .controls {
+            margin-top: 1.5rem;
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 0.75rem 1.5rem;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+        button:active {
+            transform: translateY(0);
+        }
+        footer {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            padding: 1rem;
+            text-align: center;
+            color: white;
+            font-size: 0.85rem;
+            border-top: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        @media (max-width: 768px) {
+            header {
+                padding: 1rem;
+            }
+            h1 {
+                font-size: 1.2rem;
+            }
+            .header-content {
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+            #canvas-container {
+                padding: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="header-content">
+            <h1>P5.js Circle Sketch</h1>
+            <div class="credit">
+                Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener">anycoder</a>
+            </div>
+        </div>
+    </header>
+    <main>
+        <div id="canvas-container">
+            <div id="sketch-holder"></div>
+            <div class="controls">
+                <button onclick="changeColor()">Change Color</button>
+                <button onclick="changeSize()">Change Size</button>
+                <button onclick="animateCircle()">Animate</button>
+                <button onclick="resetSketch()">Reset</button>
+            </div>
+        </div>
+    </main>
+    <footer>
+        <p>Interactive P5.js Circle • Click buttons to explore different effects</p>
+    </footer>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
+    <script>
+        let circleColor;
+        let circleSize;
+        let animating = false;
+        let animationAngle = 0;
+        let originalSize;
+        function setup() {
+            let canvas = createCanvas(600, 400);
+            canvas.parent('sketch-holder');
+            circleColor = color(102, 126, 234);
+            circleSize = 100;
+            originalSize = 100;
+            noStroke();
+        }
+        function draw() {
+            // Gradient background
+            for(let i = 0; i <= height; i++) {
+                let inter = map(i, 0, height, 0, 1);
+                let c = lerpColor(color(240, 240, 245), color(220, 220, 230), inter);
+                stroke(c);
+                line(0, i, width, i);
+            }
+            // Calculate position
+            let x = width / 2;
+            let y = height / 2;
+            // Apply animation if active
+            if (animating) {
+                animationAngle += 0.02;
+                x = width / 2 + cos(animationAngle) * 100;
+                y = height / 2 + sin(animationAngle) * 100;
+                circleSize = originalSize + sin(animationAngle * 2) * 30;
+            }
+            // Draw shadow
+            fill(0, 20);
+            ellipse(x + 5, y + 5, circleSize);
+            // Draw circle
+            fill(circleColor);
+            ellipse(x, y, circleSize);
+            // Draw highlight
+            fill(255, 100);
+            ellipse(x - circleSize/4, y - circleSize/4, circleSize/3);
+        }
+        function changeColor() {
+            let colors = [
+                color(102, 126, 234),  // Blue
+                color(118, 75, 162),   // Purple
+                color(237, 100, 166),  // Pink
+                color(255, 193, 7),    // Yellow
+                color(76, 175, 80),    // Green
+                color(244, 67, 54)     // Red
+            ];
+            let currentIndex = -1;
+            for(let i = 0; i < colors.length; i++) {
+                if(red(circleColor) === red(colors[i]) &&
+                   green(circleColor) === green(colors[i]) &&
+                   blue(circleColor) === blue(colors[i])) {
+                    currentIndex = i;
+                    break;
+                }
+            }
+            circleColor = colors[(currentIndex + 1) % colors.length];
+        }
+        function changeSize() {
+            circleSize = random(50, 200);
+            originalSize = circleSize;
+        }
+        function animateCircle() {
+            animating = !animating;
+            if (!animating) {
+                animationAngle = 0;
+                circleSize = originalSize;
+            }
+        }
+        function resetSketch() {
+            circleColor = color(102, 126, 234);
+            circleSize = 100;
+            originalSize = 100;
+            animating = false;
+            animationAngle = 0;
+        }
+        // Handle window resize
+        function windowResized() {
+            let container = document.getElementById('canvas-container');
+            let maxWidth = container.clientWidth - 64; // Account for padding
+            if (maxWidth < 600) {
+                resizeCanvas(maxWidth, maxWidth * 0.67);
+            }
+        }
+    </script>
+</body>
+</html>