-
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
7a82a87
commit f920795
Showing
1 changed file
with
154 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 |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <!--Begining of head section--> | ||
| <head> | ||
| <title>Retro playlist</title> | ||
| <!--Linking the CSS stylesheet using extrenal CSS--> | ||
| <link rel="stylesheet" type="text/css" href="MusicPlayerStyle.css"> | ||
| <!--Font Awesome script for using icons from font awesome--> | ||
| <script src="https://kit.fontawesome.com/6f0f83005a.js" crossorigin="anonymous"></script> | ||
| <!--Adds responsiveness to the website--> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/> | ||
| <style> | ||
| .alb{ | ||
| justify-content: center; | ||
| align-items: center; | ||
| margin-left:60px;; | ||
| min-height: 200vh; | ||
| width:60%; | ||
| height:10%; | ||
| background-color: var(--bg_color_2); | ||
| justify-content: space-between; | ||
| } | ||
| </style> | ||
| </head> | ||
| <!--End of head section--> | ||
| <body> | ||
| <!--Begining of navigation bar section--> | ||
| <nav> | ||
| <!--Music Player Logo div--> | ||
| <div id="music-player-tag"> | ||
| <div id="music-player-logo"> | ||
| <img src="Images/music-player-logo.png"> | ||
| </div> | ||
| <!--Music Player Logo div end--> | ||
|
|
||
| <!--Music Player Title--> | ||
| <div id="music-player-name"> | ||
| Music<br/><b>Player</b> | ||
| </div> | ||
| </div> | ||
| <!--Music Player Title div end--> | ||
|
|
||
| <!--Search Bar div--> | ||
|
|
||
| <!--Search Bar div end--> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| </nav> | ||
| <!--End of navigation bar section--> | ||
|
|
||
|
|
||
| <!--Main Section--> | ||
| <main> | ||
| <!--Artist Template--> | ||
| <div id="artist-template"> | ||
| <div id="artist-image"> | ||
| </div><!--Artist Details | ||
| >--><div id="artist-details"> | ||
| <!--Artist Title--> | ||
| <div id="artist-title"> | ||
| <div> | ||
| <b>Retro Playlist</b> | ||
| <br/> | ||
| <artist-type></artist-type> | ||
| </div> | ||
|
|
||
| </div> | ||
| <!--End of Artist Title--> | ||
| <!--Artist Intro--> | ||
| <div id="artist-intro"> | ||
| Enjoy 'Retro' playlist. | ||
| </div> | ||
| <!--End of Artist Intro--> | ||
| <!--Miscellaneous Buttons--> | ||
| <div id="artist-buttons"> | ||
|
|
||
| </div> | ||
|
|
||
| <!--End of miscellaeous buttons--> | ||
| </div> | ||
| <!--End of artist details--> | ||
| </div> | ||
| <!--End of artist template--> | ||
|
|
||
|
|
||
| </main> | ||
| <!--End of main section--> | ||
|
|
||
| <!--Begining of Aside Section--> | ||
| <aside> | ||
| <div id="aside-header-1"> | ||
| Other Playlist | ||
| <a href="musicH.php"><x>View All</x></a> | ||
| </div> | ||
| <!--Similar artist--> | ||
| <div id="similar-artist"> | ||
| <div id="artist-img2"></div> | ||
| <div id="song-details"> | ||
| <a style="padding:20px;font-size:30px;" href="chill.php">Chill</a> | ||
| <br/> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <div id="similar-artist"> | ||
| <div id="artist-img4"></div> | ||
| <div id="song-details"> | ||
| <a style="padding:20px;font-size:30px;" href="rock.php">Rock</a> | ||
| <br/> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <div id="similar-artist"> | ||
| <div id="artist-img3"></div> | ||
| <div id="song-details"> | ||
| <a style="padding:20px;font-size:30px;" href="workout.php">Workout</a> | ||
| <br/> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
| <!--End of Similar artist--> | ||
| </aside> | ||
| <!--End of aside--> | ||
|
|
||
| <div class="alb"> | ||
| <?php | ||
| include "db_conn.php"; | ||
| $sql = "SELECT * FROM videos ORDER BY id DESC"; | ||
| $res = mysqli_query($conn, $sql); | ||
|
|
||
| if (mysqli_num_rows($res) > 0) { | ||
| while ($video = mysqli_fetch_assoc($res)) { | ||
| ?> | ||
| <p style="font:20px;color:White; height: 20%;width: 100%;"><?=$video['name']?></p> | ||
| <audio style="width:900px; background-color:white;" id="audio1" src="uploads/<?=$video['video_url']?>" | ||
| controls> | ||
| </audio> | ||
|
|
||
| <?php | ||
| } | ||
| }else { | ||
| echo "<h1>Empty</h1>"; | ||
| } | ||
| ?> | ||
| </div> | ||
| </body> | ||
| <!--End of body section--> | ||
| </html> | ||
| <!--End of html code--> |