Spaces:
Running
Running
| <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> |