Spaces:

ParulPandey
/

watchful-sun

Running

App Files Files Community

ParulPandey commited on Jun 21, 2025

Commit

d095cbc

verified ·

1 Parent(s): ee68be0

remove - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +390 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Watchful Sun
-emoji: 🌍
-colorFrom: gray
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: watchful-sun
+emoji: 🐳
+colorFrom: purple
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,390 @@
-<!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>Celestial Sun Animation</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
+    <style>
+        /* Custom CSS for the animation canvas */
+        #animation-container {
+            position: relative;
+            width: 100%;
+            height: 100vh;
+            overflow: hidden;
+            background-color: #000010;
+        }
+        #animation-canvas {
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 1;
+        }
+        .control-panel {
+            position: absolute;
+            bottom: 2rem;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 10;
+            background: rgba(0, 0, 20, 0.7);
+            backdrop-filter: blur(10px);
+            border-radius: 1rem;
+            padding: 1rem;
+            box-shadow: 0 0 20px rgba(255, 223, 186, 0.2);
+            transition: all 0.3s ease;
+        }
+        .info-panel {
+            position: absolute;
+            top: 2rem;
+            right: 2rem;
+            z-index: 10;
+            background: rgba(0, 0, 20, 0.7);
+            backdrop-filter: blur(10px);
+            border-radius: 1rem;
+            padding: 1rem;
+            box-shadow: 0 0 20px rgba(255, 223, 186, 0.2);
+            max-width: 300px;
+            transition: all 0.3s ease;
+        }
+        @media (max-width: 768px) {
+            .control-panel {
+                width: calc(100% - 2rem);
+                left: 1rem;
+                transform: none;
+            }
+        }
+        .glow-text {
+            text-shadow: 0 0 8px rgba(255, 223, 186, 0.8);
+        }
+        .slider-thumb {
+            -webkit-appearance: none;
+            height: 4px;
+            border-radius: 2px;
+            background: linear-gradient(90deg, #ff9a3c, #ff3c3c);
+        }
+        .slider-thumb::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #fff;
+            cursor: pointer;
+            box-shadow: 0 0 5px rgba(255, 223, 186, 0.8);
+        }
+    </style>
+</head>
+<body class="bg-black text-white overflow-hidden">
+    <div id="animation-container" class="relative">
+        <canvas id="animation-canvas"></canvas>
+        <!-- Control Panel -->
+        <div class="control-panel" style="left: 2rem; transform: none;">
+            <div class="flex flex-col space-y-2 w-40">
+                <div>
+                    <label for="earth-speed" class="block text-xs font-medium mb-1">Earth Orbit Speed</label>
+                    <input type="range" id="earth-speed" min="0.1" max="2" step="0.1" value="0.5" class="w-full slider-thumb">
+                </div>
+                <div>
+                    <label for="sun-intensity" class="block text-xs font-medium mb-1">Sun Intensity</label>
+                    <input type="range" id="sun-intensity" min="50" max="150" step="5" value="100" class="w-full slider-thumb">
+                </div>
+                <div class="flex space-x-2">
+                    <button id="reset-btn" class="flex-1 bg-gray-800 hover:bg-gray-700 text-white py-1 px-2 rounded text-xs transition">
+                        Reset
+                    </button>
+                    <button id="fullscreen-btn" class="flex-1 bg-gray-800 hover:bg-gray-700 text-white py-1 px-2 rounded text-xs transition">
+                        Fullscreen
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Global variables for our celestial objects and stars
+        let sun;
+        let earth;
+        let stars = [];
+        let animationCanvas;
+        let earthSpeed = 0.5;
+        let sunIntensity = 100;
+        // DOM elements
+        const earthSpeedSlider = document.getElementById('earth-speed');
+        const sunIntensitySlider = document.getElementById('sun-intensity');
+        const earthSpeedValue = document.getElementById('earth-speed-value');
+        const sunIntensityValue = document.getElementById('sun-intensity-value');
+        const resetBtn = document.getElementById('reset-btn');
+        const fullscreenBtn = document.getElementById('fullscreen-btn');
+        const animationContainer = document.getElementById('animation-container');
+        // Event listeners for controls
+        earthSpeedSlider.addEventListener('input', function() {
+            earthSpeed = parseFloat(this.value);
+            earthSpeedValue.textContent = earthSpeed;
+            if (earth) earth.speed = earthSpeed;
+        });
+        sunIntensitySlider.addEventListener('input', function() {
+            sunIntensity = parseInt(this.value);
+            sunIntensityValue.textContent = sunIntensity;
+        });
+        resetBtn.addEventListener('click', function() {
+            earthSpeedSlider.value = 0.5;
+            sunIntensitySlider.value = 100;
+            earthSpeed = 0.5;
+            sunIntensity = 100;
+            earthSpeedValue.textContent = earthSpeed;
+            sunIntensityValue.textContent = sunIntensity;
+            if (earth) earth.speed = earthSpeed;
+        });
+        fullscreenBtn.addEventListener('click', function() {
+            if (!document.fullscreenElement) {
+                animationContainer.requestFullscreen().catch(err => {
+                    console.error(`Error attempting to enable fullscreen: ${err.message}`);
+                });
+            } else {
+                document.exitFullscreen();
+            }
+        });
+        // The main setup function, runs once at the start
+        function setup() {
+            animationCanvas = createCanvas(windowWidth, windowHeight);
+            animationCanvas.id('animation-canvas');
+            colorMode(HSB, 360, 100, 100, 100);
+            angleMode(DEGREES);
+            // Create a new sun instance in the center of the canvas
+            sun = new Sun(width / 2, height / 2);
+            // Create an earth instance that orbits the sun
+            earth = new Earth(sun.pos.x, sun.pos.y, min(width, height) * 0.4); // Center X, Center Y, Orbit Radius
+            // Create a field of stars for the background
+            for (let i = 0; i < 300; i++) {
+                stars.push(createVector(random(width), random(height)));
+            }
+            describe('A large, glowing yellow and orange sun with two prominent black eyes and a smile. It follows a small, blue Earth revolving around it. The background is a dark, starry sky.');
+        }
+        // The main draw loop, runs continuously
+        function draw() {
+            background(245, 90, 10); // Dark space blue
+            // Draw the stars
+            drawStars();
+            // Update the earth's position
+            earth.update();
+            // Update and display the sun, telling its eyes to look at the earth
+            sun.update();
+            sun.display(earth.pos); // Pass earth's position to the sun
+            // Display the earth
+            earth.display();
+        }
+        // Function to draw the starfield
+        function drawStars() {
+            noStroke();
+            for (const star of stars) {
+                // Make some stars twinkle
+                let alpha = random(50, 100);
+                if (random() > 0.995) {
+                    alpha = 100; // Bright flash
+                    fill(60, 20, 100, 100);
+                    ellipse(star.x, star.y, 3, 3);
+                } else {
+                    fill(60, 10, 100, alpha);
+                    ellipse(star.x, star.y, 2, 2);
+                }
+            }
+        }
+        // Adjust canvas size when the browser window is resized
+        function windowResized() {
+            resizeCanvas(windowWidth, windowHeight);
+            // Re-center the sun and earth's orbit center
+            if (sun) sun.pos.set(width / 2, height / 2);
+            if (earth) {
+                earth.center.set(width / 2, height / 2);
+                earth.radius = min(width, height) * 0.3;
+            }
+        }
+        // --- Sun Class ---
+        // Manages the body and eyes of our celestial being
+        class Sun {
+            constructor(x, y) {
+                this.pos = createVector(x, y); // Position vector of the sun's core
+                this.bodySize = min(width, height) * 0.2; // The size of the main sun body
+                this.coronaSize = this.bodySize * 2; // The outer size of the corona
+                // Position the eyes relative to the sun's center - made them larger
+                this.eyes = [
+                    { offset: createVector(-this.bodySize * 0.27, -this.bodySize * 0.13), size: this.bodySize * 0.33 },
+                    { offset: createVector(this.bodySize * 0.27, -this.bodySize * 0.13), size: this.bodySize * 0.33 }
+                ];
+            }
+            update() {
+                // Update body size based on window dimensions
+                this.bodySize = min(width, height) * 0.2;
+                this.coronaSize = this.bodySize * 2;
+                // Update eye positions and sizes
+                this.eyes[0].offset.set(-this.bodySize * 0.27, -this.bodySize * 0.13);
+                this.eyes[1].offset.set(this.bodySize * 0.27, -this.bodySize * 0.13);
+                this.eyes[0].size = this.bodySize * 0.33;
+                this.eyes[1].size = this.bodySize * 0.33;
+            }
+            // Display the entire sun
+            display(target) { // 'target' is the position the eyes should look at
+                push();
+                translate(this.pos.x, this.pos.y);
+                this.drawCorona();
+                // --- Draw the Body ---
+                drawingContext.shadowBlur = 40 * (sunIntensity / 100);
+                drawingContext.shadowColor = color(45, 90, 100);
+                noStroke();
+                fill(45, 80, 100, 20 * (sunIntensity / 100));
+                ellipse(0, 0, this.bodySize * 1.3, this.bodySize * 1.3);
+                fill(45, 90, 100, 30 * (sunIntensity / 100));
+                ellipse(0, 0, this.bodySize * 1.15, this.bodySize * 1.15);
+                fill(50, 10, 100);
+                ellipse(0, 0, this.bodySize, this.bodySize);
+                drawingContext.shadowBlur = 0;
+                // --- Draw the Eyes ---
+                this.eyes.forEach(eye => this.drawEye(eye.offset.x, eye.offset.y, eye.size, target));
+                // --- Draw the Smile ---
+                push();
+                noFill();
+                stroke(30, 80, 40, 80); // A dark, friendly orange/brown
+                strokeWeight(4);
+                // arc(x, y, width, height, startAngle, stopAngle)
+                arc(0, this.bodySize * 0.13, this.bodySize * 0.4, this.bodySize * 0.27, 0, 180);
+                pop();
+                pop();
+            }
+            drawCorona() {
+                push();
+                noFill();
+                strokeWeight(3);
+                for (let i = 0; i < 360; i += 2) {
+                    let noiseFactor = noise(i * 0.1, frameCount * 0.01);
+                    let r = map(noiseFactor, 0, 1, this.bodySize * 0.7, this.coronaSize * 0.7 * (sunIntensity / 100));
+                    let x1 = cos(i) * this.bodySize * 0.5;
+                    let y1 = sin(i) * this.bodySize * 0.5;
+                    let x2 = cos(i) * r;
+                    let y2 = sin(i) * r;
+                    let hue = map(r, this.bodySize * 0.7, this.coronaSize * 0.7, 40, 20);
+                    let alpha = map(r, this.bodySize * 0.7, this.coronaSize * 0.7, 100, 20) * (sunIntensity / 100);
+                    stroke(hue, 100, 100, alpha);
+                    line(x1, y1, x2, y2);
+                }
+                pop();
+            }
+            // Draw a single eye that tracks the target
+            drawEye(x, y, size, target) {
+                // Calculate the global position of the eye relative to the canvas
+                let eyePos = createVector(this.pos.x + x, this.pos.y + y);
+                // Calculate the angle from the eye to the target (the Earth)
+                let angle = atan2(target.y - eyePos.y, target.x - eyePos.x);
+                let dist = p5.Vector.dist(target, eyePos);
+                // The pupil moves towards the edge, but stops before leaving the eye
+                let pupilOffset = min(dist, size / 2 - (size / 1.8 / 2));
+                push();
+                translate(x, y);
+                // Add a dark ring around the eye to make it pop from the bright sun surface
+                stroke(30, 80, 30, 80); // Dark, semi-transparent orange/brown
+                strokeWeight(2);
+                fill(50, 15, 100); // Bright, pale yellow for sclera
+                ellipse(0, 0, size, size);
+                // Pupil
+                rotate(angle);
+                noStroke();
+                fill(0); // Simple black pupil for high contrast
+                // The pupil is now centered and does not bulge out.
+                ellipse(pupilOffset, 0, size / 1.8, size / 1.8);
+                pop();
+            }
+        }
+        // --- Earth Class ---
+        // Manages the orbiting Earth
+        class Earth {
+            constructor(centerX, centerY, radius) {
+                this.center = createVector(centerX, centerY);
+                this.radius = radius;
+                this.size = min(width, height) * 0.05; // The size for Earth
+                this.angle = 0;
+                this.speed = earthSpeed;
+                this.pos = createVector(); // This will hold the earth's current x, y
+            }
+            update() {
+                // Update size based on window dimensions
+                this.size = min(width, height) * 0.05;
+                // Increment the angle to make the earth revolve
+                this.angle += this.speed;
+                // Calculate the new x and y position based on the angle and radius
+                this.pos.x = this.center.x + this.radius * cos(this.angle);
+                this.pos.y = this.center.y + this.radius * sin(this.angle);
+            }
+            display() {
+                // Draw the orbital path
+                noFill();
+                stroke(100, 0, 100, 10); // Faint white line
+                strokeWeight(1);
+                ellipse(this.center.x, this.center.y, this.radius * 2, this.radius * 2);
+                push();
+                translate(this.pos.x, this.pos.y);
+                // Add a little glow
+                drawingContext.shadowBlur = 15;
+                drawingContext.shadowColor = color(200, 80, 100);
+                // Draw Earth body (blue)
+                fill(210, 80, 80); // Blue for water
+                noStroke();
+                ellipse(0, 0, this.size, this.size);
+                // Draw continents (green)
+                fill(120, 70, 60);
+                ellipse(-this.size * 0.1, this.size * 0.2, this.size * 0.5, this.size * 0.4);
+                ellipse(this.size * 0.2, -this.size * 0.2, this.size * 0.6, this.size * 0.3);
+                pop();
+            }
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ParulPandey/watchful-sun" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>