Spaces:

Vijithkumar
/

video-university

Running

App Files Files Community

Vijithkumar commited on Mar 29

Commit

ab0e7ea

verified ·

1 Parent(s): 88e97b9

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Video University
-emoji: 📊
-colorFrom: yellow
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: video-university
+emoji: 🐳
+colorFrom: blue
+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,877 @@
-<!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>University Building Animation</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Georgia', serif;
+            background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            overflow: hidden;
+        }
+        .university-container {
+            position: relative;
+            width: 900px;
+            height: 600px;
+            perspective: 1000px;
+        }
+        .building-facade {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: #D3C7B7;
+            border-radius: 10px;
+            box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
+            transform-style: preserve-3d;
+            transform: rotateX(5deg);
+            overflow: hidden;
+        }
+        /* Main building structure */
+        .main-building {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 80%;
+            background: linear-gradient(to bottom, #C0B3A0, #D3C7B7);
+            border-top: 15px solid #A89984;
+        }
+        /* Columns and architectural details */
+        .columns {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 85%;
+            display: flex;
+            justify-content: space-around;
+        }
+        .column {
+            width: 60px;
+            height: 100%;
+            background: linear-gradient(to bottom, #A89984, #C0B3A0);
+            position: relative;
+            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
+        }
+        .column::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            width: 100%;
+            height: 40px;
+            background-color: #8F7B5E;
+            border-radius: 5px 5px 0 0;
+        }
+        .column::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            width: 70px;
+            height: 30px;
+            background-color: #8F7B5E;
+            left: -5px;
+            border-radius: 5px;
+        }
+        /* Windows */
+        .windows {
+            position: absolute;
+            top: 20%;
+            width: 100%;
+            height: 50%;
+            display: grid;
+            grid-template-columns: repeat(8, 1fr);
+            grid-template-rows: repeat(4, 1fr);
+            gap: 15px;
+            padding: 0 40px;
+        }
+        .window {
+            background-color: #3A5F8F;
+            border: 3px solid #2C4A7A;
+            border-radius: 5px;
+            position: relative;
+            overflow: hidden;
+            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s;
+        }
+        .window:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px gold;
+        }
+        .window-pane {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.2) 100%);
+        }
+        .window-sill {
+            position: absolute;
+            bottom: -5px;
+            width: 110%;
+            height: 8px;
+            background-color: #A89984;
+            left: -5%;
+            border-radius: 3px;
+        }
+        /* Main entrance */
+        .entrance {
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 200px;
+            height: 250px;
+            background: linear-gradient(to bottom, #8F7B5E, #A89984);
+            border-radius: 10px 10px 0 0;
+            z-index: 2;
+        }
+        .door {
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 80px;
+            height: 180px;
+            background-color: #5D4037;
+            border: 5px solid #4E342E;
+            border-bottom: none;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #D7CCC8;
+            font-size: 24px;
+            transition: all 0.5s;
+        }
+        .door:hover {
+            background-color: #6D4C41;
+            transform: translateX(-50%) scale(1.02);
+        }
+        .steps {
+            position: absolute;
+            bottom: -30px;
+            width: 250px;
+            height: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .step {
+            width: 100%;
+            height: 10px;
+            background-color: #A89984;
+            margin-bottom: 3px;
+            border-radius: 2px;
+        }
+        /* Clock tower */
+        .clock-tower {
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 120px;
+            height: 30%;
+            background: linear-gradient(to bottom, #C0B3A0, #A89984);
+            border-radius: 10px 10px 0 0;
+            z-index: 3;
+        }
+        .clock-face {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 70px;
+            height: 70px;
+            background-color: #F5F5F5;
+            border-radius: 50%;
+            border: 5px solid #5D4037;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+        }
+        .clock-hour {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 4px;
+            height: 20px;
+            background-color: #333;
+            transform-origin: bottom center;
+            transform: translate(-50%, -100%) rotate(0deg);
+        }
+        .clock-minute {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 3px;
+            height: 30px;
+            background-color: #333;
+            transform-origin: bottom center;
+            transform: translate(-50%, -100%) rotate(0deg);
+        }
+        .clock-second {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 2px;
+            height: 30px;
+            background-color: #D32F2F;
+            transform-origin: bottom center;
+            transform: translate(-50%, -100%) rotate(0deg);
+        }
+        /* Roof details */
+        .roof {
+            position: absolute;
+            top: 0;
+            width: 100%;
+            height: 10%;
+            background: linear-gradient(to bottom, #8F7B5E, #A89984);
+            border-radius: 10px 10px 0 0;
+            z-index: 2;
+        }
+        .roof-decoration {
+            position: absolute;
+            top: -15px;
+            width: 100%;
+            height: 30px;
+            background-color: #5D4037;
+            clip-path: polygon(0% 100%, 2% 0%, 98% 0%, 100% 100%);
+        }
+        /* Bell tower */
+        .bell-tower {
+            position: absolute;
+            top: -80px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 60px;
+            height: 80px;
+            background: linear-gradient(to bottom, #A89984, #8F7B5E);
+            border-radius: 10px 10px 0 0;
+            z-index: 4;
+        }
+        .bell {
+            position: absolute;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 40px;
+            height: 40px;
+            background-color: #D3C7B7;
+            border-radius: 50%;
+            box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.3);
+            animation: bellSwing 5s infinite ease-in-out;
+            transform-origin: top center;
+        }
+        @keyframes bellSwing {
+            0%, 100% { transform: translateX(-50%) rotate(-5deg); }
+            50% { transform: translateX(-50%) rotate(5deg); }
+        }
+        /* People walking */
+        .people {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 100px;
+        }
+        .person {
+            position: absolute;
+            bottom: 30px;
+            width: 20px;
+            height: 50px;
+            animation: walk 15s linear infinite;
+            transform-origin: bottom center;
+        }
+        .person:nth-child(2) {
+            bottom: 40px;
+            animation-delay: -3s;
+            animation-duration: 18s;
+        }
+        .person:nth-child(3) {
+            bottom: 35px;
+            animation-delay: -7s;
+            animation-duration: 20s;
+        }
+        .person-head {
+            position: absolute;
+            top: 0;
+            left: 5px;
+            width: 10px;
+            height: 10px;
+            background-color: #5D4037;
+            border-radius: 50%;
+        }
+        .person-body {
+            position: absolute;
+            top: 10px;
+            left: 5px;
+            width: 10px;
+            height: 25px;
+            background-color: #3A5F8F;
+            border-radius: 3px;
+        }
+        .person-legs {
+            position: absolute;
+            top: 35px;
+            left: 5px;
+            width: 10px;
+            height: 15px;
+        }
+        .leg {
+            position: absolute;
+            width: 3px;
+            height: 15px;
+            background-color: #2C4A7A;
+            animation: walkLeg 0.5s infinite alternate;
+        }
+        .leg.left {
+            left: 2px;
+            animation-delay: 0.25s;
+        }
+        .leg.right {
+            right: 2px;
+        }
+        @keyframes walk {
+            0% { left: -30px; }
+            100% { left: calc(100% + 30px); }
+        }
+        @keyframes walkLeg {
+            0% { transform: rotate(-15deg); }
+            100% { transform: rotate(15deg); }
+        }
+        /* Clouds */
+        .clouds {
+            position: absolute;
+            top: 0;
+            width: 100%;
+            height: 30%;
+        }
+        .cloud {
+            position: absolute;
+            background-color: white;
+            border-radius: 50%;
+            filter: blur(5px);
+            opacity: 0.8;
+            animation: cloudMove 60s linear infinite;
+        }
+        @keyframes cloudMove {
+            0% { transform: translateX(-100px); }
+            100% { transform: translateX(1000px); }
+        }
+        /* University name */
+        .university-name {
+            position: absolute;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-family: 'Times New Roman', serif;
+            font-size: 28px;
+            color: #5D4037;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+            z-index: 10;
+        }
+        /* Controls */
+        .controls {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 10px;
+            z-index: 100;
+        }
+        .control-btn {
+            padding: 8px 15px;
+            background-color: #5D4037;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .control-btn:hover {
+            background-color: #8D6E63;
+            transform: translateY(-2px);
+        }
+        .control-btn:active {
+            transform: translateY(0);
+        }
+        /* Time display */
+        .time-display {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background-color: rgba(0, 0, 0, 0.5);
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            font-family: 'Courier New', monospace;
+            z-index: 100;
+        }
+        /* Interactive elements */
+        .info-panel {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 300px;
+            background-color: rgba(255, 255, 255, 0.9);
+            border-radius: 10px;
+            padding: 20px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+            z-index: 200;
+            display: none;
+        }
+        .close-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: none;
+            border: none;
+            font-size: 20px;
+            cursor: pointer;
+            color: #5D4037;
+        }
+        /* Birds */
+        .birds {
+            position: absolute;
+            top: 20%;
+            width: 100%;
+            height: 20%;
+        }
+        .bird {
+            position: absolute;
+            color: #5D4037;
+            font-size: 20px;
+            animation: birdFly 20s linear infinite;
+        }
+        @keyframes birdFly {
+            0% { transform: translateX(-50px) translateY(0); }
+            25% { transform: translateX(200px) translateY(-20px); }
+            50% { transform: translateX(450px) translateY(0); }
+            75% { transform: translateX(700px) translateY(-20px); }
+            100% { transform: translateX(950px) translateY(0); }
+        }
+    </style>
+</head>
+<body>
+    <div class="university-container">
+        <div class="building-facade">
+            <div class="main-building">
+                <div class="columns">
+                    <div class="column"></div>
+                    <div class="column"></div>
+                    <div class="column"></div>
+                    <div class="column"></div>
+                    <div class="column"></div>
+                    <div class="column"></div>
+                </div>
+                <div class="windows">
+                    <!-- 32 windows (8 columns x 4 rows) -->
+                    <div class="window" onclick="showInfo('Lecture Hall A')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                    <!-- Repeat for all windows -->
+                    <div class="window" onclick="showInfo('Chemistry Lab')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                    <div class="window" onclick="showInfo('Physics Department')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                    <div class="window" onclick="showInfo('Library')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                    <div class="window" onclick="showInfo('Computer Lab')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                    <div class="window" onclick="showInfo('Faculty Office')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                    <div class="window" onclick="showInfo('Student Lounge')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                    <div class="window" onclick="showInfo('Conference Room')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                    <!-- Repeat for 4 rows -->
+                    <div class="window" onclick="showInfo('Biology Lab')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                    <div class="window" onclick="showInfo('Mathematics Dept')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                    <div class="window" onclick="showInfo('History Dept')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                    <div class="window" onclick="showInfo('Language Center')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                    <div class="window" onclick="showInfo('Research Lab')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                    <div class="window" onclick="showInfo('Dean\'s Office')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                    <div class="window" onclick="showInfo('Admissions')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                    <div class="window" onclick="showInfo('Career Center')">
+                        <div class="window-pane"></div>
+                        <div class="window-sill"></div>
+                    </div>
+                </div>
+                <div class="entrance">
+                    <div class="door" onclick="showInfo('Main Entrance')">
+                        <i class="fas fa-door-open"></i>
+                    </div>
+                    <div class="steps">
+                        <div class="step"></div>
+                        <div class="step"></div>
+                        <div class="step"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="roof">
+                <div class="roof-decoration"></div>
+            </div>
+            <div class="clock-tower">
+                <div class="clock-face">
+                    <div class="clock-hour" id="clock-hour"></div>
+                    <div class="clock-minute" id="clock-minute"></div>
+                    <div class="clock-second" id="clock-second"></div>
+                </div>
+            </div>
+            <div class="bell-tower">
+                <div class="bell"></div>
+            </div>
+            <div class="people">
+                <div class="person">
+                    <div class="person-head"></div>
+                    <div class="person-body"></div>
+                    <div class="person-legs">
+                        <div class="leg left"></div>
+                        <div class="leg right"></div>
+                    </div>
+                </div>
+                <div class="person">
+                    <div class="person-head"></div>
+                    <div class="person-body"></div>
+                    <div class="person-legs">
+                        <div class="leg left"></div>
+                        <div class="leg right"></div>
+                    </div>
+                </div>
+                <div class="person">
+                    <div class="person-head"></div>
+                    <div class="person-body"></div>
+                    <div class="person-legs">
+                        <div class="leg left"></div>
+                        <div class="leg right"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="clouds" id="clouds"></div>
+            <div class="birds">
+                <div class="bird">🐦</div>
+                <div class="bird" style="top: 30px; animation-delay: -5s;">🦅</div>
+                <div class="bird" style="top: 10px; animation-delay: -10s;">🕊️</div>
+            </div>
+            <div class="university-name">Prestige University</div>
+        </div>
+        <div class="controls">
+            <button class="control-btn" id="dayNightBtn">
+                <i class="fas fa-moon"></i> Night Mode
+            </button>
+            <button class="control-btn" id="weatherBtn">
+                <i class="fas fa-cloud-sun"></i> Change Weather
+            </button>
+            <button class="control-btn" id="bellBtn">
+                <i class="fas fa-bell"></i> Ring Bell
+            </button>
+        </div>
+        <div class="time-display" id="time-display">
+            <i class="fas fa-clock"></i> <span id="time-text">10:15 AM</span>
+        </div>
+        <div class="info-panel" id="info-panel">
+            <button class="close-btn" onclick="closeInfo()">&times;</button>
+            <h3 id="info-title">Room Information</h3>
+            <p id="info-content">Select a room or area to see details about it.</p>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Create clouds
+            function createClouds() {
+                const cloudsContainer = document.getElementById('clouds');
+                cloudsContainer.innerHTML = '';
+                for (let i = 0; i < 5; i++) {
+                    const cloud = document.createElement('div');
+                    cloud.className = 'cloud';
+                    // Random size and position
+                    const size = Math.random() * 100 + 50;
+                    cloud.style.width = `${size}px`;
+                    cloud.style.height = `${size/2}px`;
+                    cloud.style.top = `${Math.random() * 50}px`;
+                    cloud.style.left = `${Math.random() * 800 - 100}px`;
+                    // Random animation duration
+                    const duration = Math.random() * 40 + 40;
+                    cloud.style.animationDuration = `${duration}s`;
+                    cloudsContainer.appendChild(cloud);
+                }
+            }
+            // Update clock hands
+            function updateClock() {
+                const now = new Date();
+                const hours = now.getHours() % 12;
+                const minutes = now.getMinutes();
+                const seconds = now.getSeconds();
+                // Calculate angles
+                const hourAngle = (hours * 30) + (minutes * 0.5);
+                const minuteAngle = minutes * 6;
+                const secondAngle = seconds * 6;
+                // Apply rotations
+                document.getElementById('clock-hour').style.transform =
+                    `translate(-50%, -100%) rotate(${hourAngle}deg)`;
+                document.getElementById('clock-minute').style.transform =
+                    `translate(-50%, -100%) rotate(${minuteAngle}deg)`;
+                document.getElementById('clock-second').style.transform =
+                    `translate(-50%, -100%) rotate(${secondAngle}deg)`;
+                // Update digital time
+                const timeString = now.toLocaleTimeString('en-US', {
+                    hour: '2-digit',
+                    minute: '2-digit'
+                });
+                document.getElementById('time-text').textContent = timeString;
+                setTimeout(updateClock, 1000);
+            }
+            // Show info panel
+            function showInfo(roomName) {
+                const infoPanel = document.getElementById('info-panel');
+                const infoTitle = document.getElementById('info-title');
+                const infoContent = document.getElementById('info-content');
+                infoTitle.textContent = roomName;
+                // Different descriptions for different rooms
+                const roomDescriptions = {
+                    'Main Entrance': 'The grand entrance to Prestige University. Open daily from 7AM to 9PM.',
+                    'Lecture Hall A': 'Capacity: 200 students. Equipped with modern audio-visual systems.',
+                    'Chemistry Lab': 'State-of-the-art laboratory with fume hoods and analytical equipment.',
+                    'Physics Department': 'Home to Nobel laureates and cutting-edge research facilities.',
+                    'Library': 'Over 1 million volumes. Open 24/7 during exam periods.',
+                    'Computer Lab': '200 workstations with specialized software for all disciplines.',
+                    'Faculty Office': 'Office hours posted on each professor\'s door.',
+                    'Student Lounge': 'Relaxation area with vending machines and comfortable seating.',
+                    'Conference Room': 'Reservations required. Capacity: 50 people.',
+                    'Biology Lab': 'Contains DNA sequencers, microscopes, and tissue culture facilities.',
+                    'Mathematics Dept': 'Offering tutoring services for all undergraduate courses.',
+                    'History Dept': 'Special collections include rare medieval manuscripts.',
+                    'Language Center': 'Interactive learning environment with native speaker tutors.',
+                    'Research Lab': 'Graduate students and faculty conduct advanced research here.',
+                    'Dean\'s Office': 'Administrative heart of the university.',
+                    'Admissions': 'Information about applications, tours, and requirements.',
+                    'Career Center': 'Resume workshops, interview prep, and job fairs.'
+                };
+                infoContent.textContent = roomDescriptions[roomName] ||
+                    'This room is part of our historic campus. More information available at the information desk.';
+                infoPanel.style.display = 'block';
+            }
+            // Close info panel
+            function closeInfo() {
+                document.getElementById('info-panel').style.display = 'none';
+            }
+            // Toggle day/night mode
+            document.getElementById('dayNightBtn').addEventListener('click', function() {
+                const body = document.body;
+                const isNight = body.style.background.includes('dark');
+                if (isNight) {
+                    body.style.background = 'linear-gradient(to bottom, #87CEEB, #E0F7FA)';
+                    document.querySelectorAll('.window').forEach(window => {
+                        window.style.backgroundColor = '#3A5F8F';
+                    });
+                    this.innerHTML = '<i class="fas fa-moon"></i> Night Mode';
+                } else {
+                    body.style.background = 'linear-gradient(to bottom, #0F2027, #203A43, #2C5364)';
+                    document.querySelectorAll('.window').forEach(window => {
+                        window.style.backgroundColor = '#FFD700';
+                    });
+                    this.innerHTML = '<i class="fas fa-sun"></i> Day Mode';
+                }
+            });
+            // Change weather
+            document.getElementById('weatherBtn').addEventListener('click', function() {
+                const clouds = document.getElementById('clouds');
+                const isRaining = clouds.style.animation.includes('rain');
+                if (isRaining) {
+                    // Clear weather
+                    clouds.innerHTML = '';
+                    createClouds();
+                    this.innerHTML = '<i class="fas fa-cloud-sun"></i> Change Weather';
+                } else {
+                    // Rainy weather
+                    clouds.innerHTML = '';
+                    for (let i = 0; i < 100; i++) {
+                        const drop = document.createElement('div');
+                        drop.className = 'rain-drop';
+                        drop.style.left = `${Math.random() * 100}%`;
+                        drop.style.top = `${Math.random() * 100}%`;
+                        drop.style.animationDuration = `${Math.random() * 0.5 + 0.5}s`;
+                        drop.style.animationDelay = `${Math.random() * 2}s`;
+                        clouds.appendChild(drop);
+                    }
+                    this.innerHTML = '<i class="fas fa-sun"></i> Clear Sky';
+                }
+            });
+            // Ring bell
+            document.getElementById('bellBtn').addEventListener('click', function() {
+                const bell = document.querySelector('.bell');
+                bell.style.animation = 'bellSwing 0.5s infinite ease-in-out';
+                setTimeout(() => {
+                    bell.style.animation = 'bellSwing 5s infinite ease-in-out';
+                }, 2000);
+                this.innerHTML = '<i class="fas fa-bell"></i> Bell Ringing!';
+                setTimeout(() => {
+                    this.innerHTML = '<i class="fas fa-bell"></i> Ring Bell';
+                }, 2000);
+            });
+            // Initialize
+            createClouds();
+            updateClock();
+            // Add rain drop style if not already present
+            if (!document.querySelector('style[data-rain]')) {
+                const style = document.createElement('style');
+                style.setAttribute('data-rain', 'true');
+                style.textContent = `
+                    .rain-drop {
+                        position: absolute;
+                        width: 2px;
+                        height: 15px;
+                        background-color: rgba(255, 255, 255, 0.7);
+                        animation: rainFall linear infinite;
+                    }
+                    @keyframes rainFall {
+                        0% { transform: translateY(-100px); opacity: 1; }
+                        100% { transform: translateY(600px); opacity: 0; }
+                    }
+                `;
+                document.head.appendChild(style);
+            }
+        });
+    </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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>