-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
53ea763
commit 496e4f1
Showing
1 changed file
with
105 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,106 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <link rel="stylesheet" href="styles.css" /> | ||
| <title>Los Angeles Drive GTA-5</title> | ||
| <script src="https://cdn.tailwindcss.com"></script> | ||
| </head> | ||
|
|
||
| <body class="overflow-hidden relative bg-black"> | ||
| <div | ||
| class="video-background opacity-0 fixed inset-0 transition-opacity duration-1000 ease-in-out" | ||
| > | ||
| <div class="video-foreground"> | ||
| <div id="youtube-player" style="width: 640px; height: 360px"> | ||
| <div style="width: 100%; height: 100%"> | ||
| <iframe | ||
| frameborder="0" | ||
| allowfullscreen | ||
| allow="autoplay; encrypted-media" | ||
| title="GTA V Cinematic Video | Midnight City" | ||
| width="100%" | ||
| height="100%" | ||
| src="https://www.youtube.com/embed/WL-xeM0RD7E?rel=0&autoplay=1&mute=1&controls=0&showinfo=0&modestbranding=1&playsinline=1" | ||
| id="widget2" | ||
| ></iframe> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <audio id="audio" autoplay loop> | ||
| <source src="midnightcity.mp3" type="audio/mpeg" /> | ||
| </audio> | ||
|
|
||
| <div | ||
| class="overlay absolute inset-0 flex justify-center items-center z-10 mt-20" | ||
| > | ||
| <a href="index.html"> | ||
| <h1 | ||
| class="text-2xl font-bold text-white bg-opacity-50 bg-gray-800 p-3 rounded-lg backdrop-blur-md" | ||
| > | ||
| Midnight City Gta-5 | ||
| </h1> | ||
| </a> | ||
| </div> | ||
|
|
||
| <div | ||
| class="fixed bottom-4 right-4 flex flex-col items-center space-y-2 bg-gray-800 bg-opacity-75 p-3 rounded-lg shadow-lg" | ||
| > | ||
| <div class="flex space-x-2"> | ||
| <button | ||
| id="playButton" | ||
| aria-label="Play" | ||
| class="w-10 h-10 bg-cyan-500 rounded-full text-white flex items-center justify-center shadow-lg hidden" | ||
| > | ||
| 🔇 | ||
| </button> | ||
| <button | ||
| id="pauseButton" | ||
| aria-label="Pause" | ||
| class="w-10 h-10 bg-cyan-500 rounded-full text-white flex items-center justify-center shadow-lg" | ||
| > | ||
| 🔊 | ||
| </button> | ||
| </div> | ||
| <div class="flex items-center space-x-2"> | ||
| <span class="text-white text-sm">Volume</span> | ||
| <input | ||
| type="range" | ||
| id="volume" | ||
| min="0" | ||
| max="1" | ||
| step="0.01" | ||
| value="1" | ||
| class="appearance-none w-24 h-2 bg-gray-300 rounded-full cursor-pointer" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div | ||
| class="fixed top-4 right-4 bg-gray-800 bg-opacity-75 p-4 rounded-lg shadow-lg" | ||
| > | ||
| <div class="flex flex-col items-end space-y-1"> | ||
| <div class="flex items-center space-x-1"> | ||
| <span | ||
| class="text-white text-lg font-semibold" | ||
| id="currentDate" | ||
| ></span> | ||
| </div> | ||
| <div class="flex items-center space-x-1"> | ||
| <span class="text-white text-sm" id="currentTime">0:00</span> | ||
| </div> | ||
| <div class="flex items-center space-x-1"> | ||
| <span class="text-white text-sm" id="weather">🌃 75°F </span> | ||
| <span class="text-white text-sm font-semibold" id="location" | ||
| >Los Angeles</span | ||
| > | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |