Spaces:

Fuckingbase
/

pudcaster

Running

App Files Files Community

Fuckingbase commited on Sep 11, 2025

Commit

2c02f13

verified ·

1 Parent(s): 0a55333

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +105 -19
prompts.txt +1 -0

README.md CHANGED Viewed

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

 ---
+title: pudcaster
+emoji: 🐳
 colorFrom: red
+colorTo: purple
 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,105 @@
-<!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="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Persian Audio Galaxy</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <style>
+        @keyframes blink {
+            from, to { opacity: 1; }
+            50% { opacity: 0; }
+        }
+        @keyframes attention-pulse {
+            0% { transform: scale(1); filter: drop-shadow(0 0 0px #4285f4); }
+            50% { transform: scale(1.2); filter: drop-shadow(0 0 8px #8ab4f8); }
+            100% { transform: scale(1); filter: drop-shadow(0 0 0px #4285f4); }
+        }
+        .animate-blink {
+            animation: blink 1s step-end infinite;
+        }
+        .animate-attention-pulse {
+            animation: attention-pulse 1.5s infinite;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            height: 16px;
+            width: 16px;
+            border-radius: 50%;
+            background: #e8eaed;
+            border: 2px solid #191919;
+            margin-top: -6px;
+        }
+        input[type="range"]::-moz-range-thumb {
+            height: 16px;
+            width: 16px;
+            border-radius: 50%;
+            background: #e8eaed;
+            border: 2px solid #191919;
+        }
+        .volume-slider {
+            writing-mode: bt-lr;
+            -webkit-appearance: slider-vertical;
+        }
+        .seek-bar {
+            background: linear-gradient(to right, #6ea8ff, #6ea8ff) no-repeat left;
+            background-size: 0% 100%;
+        }
+    </style>
+</head>
+<body class="h-screen w-full overflow-hidden bg-black font-sans">
+    <!-- Google Page Stage -->
+    <div id="google-stage" class="fixed inset-0 flex justify-center items-center transition-opacity duration-1000 ease-in-out opacity-100 visible z-50 bg-white">
+        <div class="flex flex-col items-center justify-center flex-grow w-full p-5 box-border">
+            <!-- Google Logo -->
+            <svg class="google-logo max-w-[272px] w-[60%] mb-7" aria-label="Google" viewBox="0 0 272 92" xmlns="http://www.w3.org/2000/svg">
+                <path d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z" fill="#EA4335"></path>
+                <path d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z" fill="#FBBC05"></path>
+                <path d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z" fill="#4285F4"></path>
+                <path d="M225 3v65h-9.5V3h9.5z" fill="#34A853"></path>
+                <path d="M262.02 54.48l7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98l19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z" fill="#EA4335"></path>
+                <path d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z" fill="#4285F4"></path>
+            </svg>
+            <!-- Search Form -->
+            <form class="search-form w-full max-w-[584px]">
+                <div class="search-container flex z-30 h-[46px] bg-white border border-[#dfe1e5] rounded-[24px] mx-auto hover:shadow hover:border-transparent transition-shadow">
+                    <div class="search-input-wrapper flex flex-1 items-center px-3 overflow-hidden">
+                        <span id="typing-text" class="flex-grow whitespace-nowrap overflow-hidden text-base" dir="ltr">
+                            <span id="typed-text"></span>
+                            <span id="cursor" class="inline-block bg-[#222] w-px h-5 align-middle animate-blink"></span>
+                        </span>
+                        <input id="search-input" type="text" autoComplete="off" class="hidden" />
+                    </div>
+                    <div id="search-icon-wrapper" class="search-icon-wrapper flex items-center pl-3 cursor-pointer">
+                        <svg id="search-icon" class="search-icon w-6 h-6 fill-[#4285f4] transition-all" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                            <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
+                        </svg>
+                    </div>
+                </div>
+                <div class="google-buttons mt-4 text-center">
+                    <button class="bg-[#f8f9fa] border border-[#f8f9fa] rounded text-[#3c4043] font-inherit text-sm mx-1 px-4 h-9 min-w-[54px] text-center cursor-not-allowed opacity-70" disabled>
+                        Google Search
+                    </button>
+                    <button class="bg-[#f8f9fa] border border-[#f8f9fa] rounded text-[#3c4043] font-inherit text-sm mx-1 px-4 h-9 min-w-[54px] text-center cursor-not-allowed opacity-70" disabled>
+                        I'm Feeling Lucky
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <!-- Video Intro Stage -->
+    <div id="video-stage" class="fixed inset-0 flex justify-center items-center transition-opacity duration-1000 ease-in-out opacity-0 invisible z-40">
+        <video id="intro-video" class="w-full h-full object-cover" playsInline>
+            <source src="https://github.com/Shervinuri/Telbot/raw/refs/heads/main/lv_0_20250907111724.mp4" type="video/mp4">
+        </video>
+    </div>
+    <!-- Main Experience Stage -->
+    <div id="main-stage" class="fixed inset-0 flex justify-center items-center transition-opacity duration-1000 ease-in-out opacity-0 invisible z-30">
+        <audio id="audio-player" loop crossorigin="anonymous">
+            <source src="https://raw.githubusercontent.com/Shervinuri/Telbot/89a6ba05e0e67d37b917d488749324
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ import React, { useEffect, useRef, useState } from 'react'; import * as THREE from 'three'; const PersianAudioGalaxy: React.FC = () => { const [activeStage, setActiveStage] = useState<'google' | 'video' | 'main'>('google'); const [typingText, setTypingText] = useState(''); const [isTypingComplete, setIsTypingComplete] = useState(false); const [isTransitioning, setIsTransitioning] = useState(false); const [isPlaying, setIsPlaying] = useState(false); const [currentTime, setCurrentTime] = useState(0); const [duration, setDuration] = useState(0); const [volume, setVolume] = useState(1); const searchInputRef = useRef<HTMLInputElement>(null); const videoRef = useRef<HTMLVideoElement>(null); const audioRef = useRef<HTMLAudioElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null); const eqCanvasRef = useRef<HTMLCanvasElement>(null); const threeCanvasRef = useRef<HTMLCanvasElement>(null); const sceneRef = useRef<THREE.Scene | null>(null); const cameraRef = useRef<THREE.PerspectiveCamera | null>(null); const rendererRef = useRef<THREE.WebGLRenderer | null>(null); const starsRef = useRef<THREE.Points | null>(null); const animationRef = useRef<number>(0); const audioContextRef = useRef<AudioContext | null>(null); const analyserRef = useRef<AnalyserNode | null>(null); const frequencyDataRef = useRef<Uint8Array | null>(null); const fullText = "دیگه کجا میتونم اطلاعات به این مفیدی پیدا کنم!؟"; // Typing animation effect useEffect(() => { if (activeStage !== 'google') return; let index = 0; const typingInterval = setInterval(() => { if (index < fullText.length) { setTypingText(fullText.substring(0, index + 1)); index++; } else { clearInterval(typingInterval); setIsTypingComplete(true); if (searchInputRef.current) { searchInputRef.current.focus(); } } }, 100); return () => clearInterval(typingInterval); }, [activeStage]); // Handle keyboard events for the search input useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (activeStage === 'google' && isTypingComplete) { if (e.key === 'Enter') { handleTransitionToVideo(); } } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [activeStage, isTypingComplete]); // Initialize Three.js scene useEffect(() => { if (activeStage !== 'main' || !threeCanvasRef.current) return; const init3D = () => { const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 50; const renderer = new THREE.WebGLRenderer({ canvas: threeCanvasRef.current as HTMLCanvasElement, antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); const starGeo = new THREE.BufferGeometry(); const starVertices = []; for (let i = 0; i < 15000; i++) { starVertices.push( (Math.random() - 0.5) * 2000, (Math.random() - 0.5) * 2000, (Math.random() - 0.5) * 2000 ); } starGeo.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3)); const stars = new THREE.Points( starGeo, new THREE.PointsMaterial({ color: 0xaaaaaa, size: 0.7 }) ); scene.add(stars); sceneRef.current = scene; cameraRef.current = camera; rendererRef.current = renderer; starsRef.current = stars; const handleResize = () => { if (cameraRef.current && rendererRef.current) { cameraRef.current.aspect = window.innerWidth / window.innerHeight; cameraRef.current.updateProjectionMatrix(); rendererRef.current.setSize(window.innerWidth, window.innerHeight); } }; window.addEventListener('resize', handleResize); // Start animation animate(); return () => { window.removeEventListener('resize', handleResize); if (animationRef.current) { cancelAnimationFrame(animationRef.current); } }; }; init3D(); }, [activeStage]); // Animation loop const animate = () => { if (sceneRef.current && cameraRef.current && rendererRef.current && starsRef.current) { starsRef.current.rotation.y += 0.00015; cameraRef.current.position.z -= 0.03; if (cameraRef.current.position.z < -200) { cameraRef.current.position.z = 200; } // Draw equalizer if audio is playing if (analyserRef.current && audioRef.current && !audioRef.current.paused) { drawEqualizer(); } rendererRef.current.render(sceneRef.current, cameraRef.current); animationRef.current = requestAnimationFrame(animate); } }; // Setup audio analysis const setupAudioAnalysis = async () => { if (audioContextRef.current) return; try { const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)(); audioContextRef.current = audioContext; if (audioContext.state === 'suspended') { await audioContext.resume(); } if (audioRef.current) { const source = audioContext.createMediaElementSource(audioRef.current); const analyser = audioContext.createAnalyser(); analyser.fftSize = 256; source.connect(analyser); analyser.connect(audioContext.destination); analyserRef.current = analyser; frequencyDataRef.current = new Uint8Array(analyser.frequencyBinCount); } } catch (error) { console.error('Audio analysis setup failed:', error); } }; // Draw equalizer visualization const drawEqualizer = () => { if (!analyserRef.current || !frequencyDataRef.current || !eqCanvasRef.current) return; const eqCtx = eqCanvasRef.current.getContext('2d'); if (!eqCtx) return; analyserRef.current.getByteFrequencyData(frequencyDataRef.current); eqCtx.clearRect(0, 0, eqCanvasRef.current.width, eqCanvasRef.current.height); const barCount = 64; const barWidth = (eqCanvasRef.current.width / barCount); let x = 0; const gradient = eqCtx.createLinearGradient(0, 0, eqCanvasRef.current.width, 0); gradient.addColorStop(0, '#8ab4f8'); gradient.addColorStop(0.5, '#6ea8ff'); gradient.addColorStop(1, '#d1e3ff'); for (let i = 0; i < barCount; i++) { const barHeight = (frequencyDataRef.current[i * 2] / 255) * eqCanvasRef.current.height; eqCtx.fillStyle = gradient; eqCtx.fillRect(x, (eqCanvasRef.current.height - barHeight) / 2, barWidth, barHeight); x += barWidth; } }; // Handle transition to video stage const handleTransitionToVideo = async () => { if (isTransitioning) return; setIsTransitioning(true); try { await setupAudioAnalysis(); if (videoRef.current) { await videoRef.current.play(); setActiveStage('video'); } } catch (error) { console.error('Video playback failed:', error); setIsTransitioning(false); } }; // Handle video end to transition to main stage useEffect(() => { const video = videoRef.current; if (!video) return; const handleVideoEnd = () => setActiveStage('main'); video.addEventListener('ended', handleVideoEnd); return () => video.removeEventListener('ended', handleVideoEnd); }, []); // Audio player controls const togglePlayPause = () => { if (audioRef.current) { if (audioRef.current.paused) { audioRef.current.play(); setIsPlaying(true); } else { audioRef.current.pause(); setIsPlaying(false); } } }; const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => { if (audioRef.current) { audioRef.current.currentTime = parseFloat(e.target.value); setCurrentTime(parseFloat(e.target.value)); } }; const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => { const newVolume = parseFloat(e.target.value); setVolume(newVolume); if (audioRef.current) { audioRef.current.volume = newVolume; } }; // Format time for display const formatTime = (seconds: number) => { const minutes = Math.floor(seconds / 60); const secs = Math.floor(seconds % 60); return `${minutes}:${secs < 10 ? '0' : ''}${secs}`; }; // Update current time as audio plays useEffect(() => { const audio = audioRef.current; if (!audio) return; const updateTime = () => setCurrentTime(audio.currentTime); const updateDuration = () => setDuration(audio.duration); audio.addEventListener('timeupdate', updateTime); audio.addEventListener('loadedmetadata', updateDuration); return () => { audio.removeEventListener('timeupdate', updateTime); audio.removeEventListener('loadedmetadata', updateDuration); }; }, []); return ( <div className="h-screen w-full overflow-hidden bg-black font-sans" dir="rtl"> {/* Google Page Stage */} <div className={`fixed inset-0 flex justify-center items-center transition-opacity duration-1000 ease-in-out ${ activeStage === 'google' ? 'opacity-100 visible z-50' : 'opacity-0 invisible' }`} style={{ backgroundColor: '#fff' }} > <div className="flex flex-col items-center justify-center flex-grow w-full p-5 box-border"> {/* Google Logo */} <svg className="google-logo max-w-[272px] w-[60%] mb-7" aria-label="Google" viewBox="0 0 272 92" xmlns="http://www.w3.org/2000/svg" > <path d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z" fill="#EA4335"></path> <path d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z" fill="#FBBC05"></path> <path d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z" fill="#4285F4"></path> <path d="M225 3v65h-9.5V3h9.5z" fill="#34A853"></path> <path d="M262.02 54.48l7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98l19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z" fill="#EA4335"></path> <path d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z" fill="#4285F4"></path> </svg> {/* Search Form */} <form className="search-form w-full max-w-[584px]" onSubmit={(e) => e.preventDefault()}> <div className="search-container flex z-30 h-[46px] bg-white border border-[#dfe1e5] rounded-[24px] mx-auto hover:shadow hover:border-transparent transition-shadow"> <div className="search-input-wrapper flex flex-1 items-center px-3 overflow-hidden"> <span className="flex-grow whitespace-nowrap overflow-hidden text-base" dir="ltr"> {typingText} {isTypingComplete && ( <span className="inline-block bg-[#222] w-px h-5 align-middle animate-blink"></span> )} </span> <input ref={searchInputRef} id="search-input" type="text" autoComplete="off" className="hidden" /> </div> <div className={`search-icon-wrapper flex items-center pl-3 cursor-pointer ${ isTypingComplete ? '' : 'pointer-events-none' }`} onClick={handleTransitionToVideo} > <svg className={`search-icon w-6 h-6 fill-[#4285f4] transition-all ${ isTypingComplete ? 'animate-attention-pulse' : '' }`} focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" > <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path> </svg> </div> </div> <div className="google-buttons mt-4 text-center"> <button className="bg-[#f8f9fa] border border-[#f8f9fa] rounded text-[#3c4043] font-inherit text-sm mx-1 px-4 h-9 min-w-[54px] text-center cursor-not-allowed opacity-70" disabled > Google Search </button> <button className="bg-[#f8f9fa] border border-[#f8f9fa] rounded text-[#3c4043] font-inherit text-sm mx-1 px-4 h-9 min-w-[54px] text-center cursor-not-allowed opacity-70" disabled > I'm Feeling Lucky </button> </div> </form> </div> </div> {/* Video Intro Stage */} <div className={`fixed inset-0 flex justify-center items-center transition-opacity duration-1000 ease-in-out ${ activeStage === 'video' ? 'opacity-100 visible z-40' : 'opacity-0 invisible' }`} > <video ref={videoRef} id="intro-video" className="w-full h-full object-cover" src="https://github.com/Shervinuri/Telbot/raw/refs/heads/main/lv_0_20250907111724.mp4" playsInline /> </div> {/* Main Experience Stage */} <div className={`fixed inset-0 flex justify-center items-center transition-opacity duration-1000 ease-in-out ${ activeStage === 'main' ? 'opacity-100 visible z-30' : 'opacity-0 invisible' }`} > <audio ref={audioRef} src="https://raw.githubusercontent.com/Shervinuri/Telbot/89a6ba05e0e67d37b917d488749324d909480d23/POD.mp3" loop crossOrigin="anonymous" /> {/* Three.js Canvas for Starfield */} <canvas ref={threeCanvasRef} id="starfield" className="fixed top-0 left-0 w-full h-full z-10" /> {/* Audio Player */} <div id="audio-player-container" className={`fixed bottom-8 left-1/2 transform -translate-x-1/2 w-[90%] max-w-[500px] bg-[rgba(25,25,25,0.7)] backdrop-blur-xl rounded-xl p-4 shadow-xl border border-[rgba(255,255,255,0.18)] z-50 transition-opacity duration-1000 ease-in-out ${ activeStage === 'main' ? 'opacity-100 delay-1000' : 'opacity-0' }`} > <div className="player-top-row flex items-center gap-4 mb-2"> <canvas ref={eqCanvasRef} id="equalizer-canvas" className="flex-grow h-[50px]" /> <div className="volume-container relative flex items-center"> <button id="volume-btn" className="bg-transparent border-none cursor-pointer p-1"> <svg className="w-[22px] h-[22px] fill-[#e8eaed]" viewBox="0 0 24 24" > <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path> </svg> </button> <input type="range" id="volume-slider" min="0" max="1" step="0.01" value={volume} orient="vertical" onChange={handleVolumeChange} className="volume-slider absolute bottom-[150%] left-1/2 transform -translate-x-1/2 w-2 h-[100px] bg-[rgba(255,255,255,0.2)] rounded outline-none transition-opacity opacity-0 invisible appearance-none p-0 m-0 hover:opacity-100 hover:visible" /> </div> </div> <div className="player-bottom-row flex items-center gap-4 text-[#e8eaed] text-sm font-mono" dir="ltr"> <span id="current-time">{formatTime(currentTime)}</span> <input type="range" id="seek-bar" min="0" max={duration || 100} step="1" value={currentTime} onChange={handleSeek} className="seek-bar flex-grow h-1 bg-[rgba(255,255,255,0.2)] rounded cursor-pointer appearance-none bg-gradient-to-r from-[#6ea8ff] to-[#6ea8ff] bg-no-repeat bg-left" style={{ backgroundSize: `${duration ? (currentTime / duration) * 100 : 0}% 100%` }} /> <span id="duration">{formatTime(duration)}</span> <button id="play-pause-btn" onClick={togglePlayPause} className="bg-transparent border-none cursor-pointer p-0 w-10 h-10 flex justify-center items-center flex-shrink-0" > {isPlaying ? ( <svg className="w-7 h-7 fill-[#e8eaed] transition-transform hover:scale-110" viewBox="0 0 24 24" > <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/> </svg> ) : ( <svg className="w-7 h-7 fill-[#e8eaed] transition-transform hover:scale-110" viewBox="0 0 24 24" > <path d="M8 5v14l11-7z"/> </svg> )} </button> </div> </div> </div> {/* CSS for animations */} <style>{` @keyframes blink { from, to { opacity: 1; } 50% { opacity: 0; } } @keyframes attention-pulse { 0% { transform: scale(1); filter: drop-shadow(0 0 0px #4285f4); } 50% { transform: scale(1.2); filter: drop-shadow(0 0 8px #8ab4f8); } 100% { transform: scale(1); filter: drop-shadow(0 0 0px #4285f4); } } .animate-blink { animation: blink 1s step-end infinite; } .animate-attention-pulse { animation: attention-pulse 1.5s infinite; } .seek-bar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 16px; width: 16px; border-radius: 50%; background: #e8eaed; border: 2px solid #191919; margin-top: -6px; } .seek-bar::-moz-range-tra