index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="theme-color" content="#000000" />
    <meta name="Description"
        content="Welcome to DMAN's artist page. Here you can find all the artist's work presented in a nice player." />
    <title>D-Man</title>
    <!-- External Remote Style Libraries -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <!-- External local Style -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- FavIcon -->
    <link href="https://pinco227.github.io/D-man/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <!-- First scripts to load and execute -->
    <script src="assets/js/redirect.js"></script>
    <script>recieveRedirect()</script>
</head>

<body class="backdrop">
    <!-- Background overlay -->

    <!-- Top Fixed Navigaon bar -->
    <nav class="navbar navbar-expand-md fixed-top">
        <div class="container-xxl">
            <a class="navbar-brand spa-nav" href="home">D-Man</a>
            <div class="navbar-nav no-collapse">
                <a class="nav-link spa-nav" aria-current="page" href="music"><i class="fas fa-music"></i> <span
                        class="d-none d-md-inline">Music
                        Library</span></a>
                <a class="nav-link spa-nav" href="videos"><i class="fas fa-caret-square-right"></i> <span
                        class="d-none d-md-inline">Videos</span></a>
                <a class="nav-link spa-nav" href="gallery"><i class="fas fa-image"></i> <span
                        class="d-none d-md-inline">Gallery</span></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
                    aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-ellipsis-v"></i>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <div class="navbar-nav">
                    <a class="nav-link spa-nav" href="about" data-bs-toggle="collapse"
                        data-bs-target="#navbarCollapse"><i class="fas fa-quote-right"></i> About Me</a>
                    <a class="nav-link spa-nav" href="contact" data-bs-toggle="collapse"
                        data-bs-target="#navbarCollapse"><i class="fas fa-comments"></i> Contact</a>
                </div>
            </div>
        </div>
    </nav>
    <!-- Main section of the site -->
    <main class="container-xxl my-5">
        <div class="row">
            <!-- Music player collapsible -->
            <div class="d-md-block col-md-6 col-lg-5" id="player-collapse">
                <span id="collapse-player"><i class="fas fa-chevron-down"></i></span>
                <aside>
                    <div id="player-screen">
                        <!-- Player cover art -->
                        <div id="player-top">
                            <img id="player-cover-art" alt="Playing song cover art" src="media/music/Singles/cover.jpg"
                                data-amplitude-song-info="cover_art_url" />
                        </div>
                        <!-- Now playing information -->
                        <div class="player-middle">
                            <div id="meta-container">
                                <span data-amplitude-song-info="name" class="song-name"></span>

                                <div class="song-artist-album">
                                    <span data-amplitude-song-info="artist"></span> - <span
                                        data-amplitude-song-info="album"></span>
                                </div>
                            </div>
                        </div>
                        <!-- Player controls (visible mobile) -->
                        <div class="d-md-none player-controls-container">
                            <div class="shuffle-container">
                                <div class="amplitude-shuffle amplitude-shuffle-off">
                                    <span class="shuffle-text">Shuffle</span>
                                    <i class="fas fa-random"></i>
                                    <span class="shuffle-off">Off</span>
                                    <span class="shuffle-on">On</span>
                                </div>
                            </div>
                            <div class="prev-container">
                                <div class="amplitude-prev"></div>
                            </div>
                            <div class="play-pause-container mx-auto">
                                <div class="amplitude-play-pause"></div>
                            </div>
                            <div class="next-container">
                                <div class="amplitude-next"></div>
                            </div>
                            <div class="repeat-container">
                                <div class="amplitude-repeat amplitude-repeat-off">
                                    <span class="shuffle-text">Loop</span>
                                    <i class="fas fa-sync-alt"></i>
                                    <span class="repeat-off">Off</span>
                                    <span class="repeat-on">On</span>
                                </div>
                            </div>
                        </div>
                        <!-- Player seeker waveform (visible mobile) -->
                        <div class="d-md-none player-progress-bar-container">
                            <span class="amplitude-current-time time-container"></span>
                            <div class="seeker">
                                <div class="amplitude-wave-form">
                                </div>
                                <input type="range" class="amplitude-song-slider" id="global-large-song-slider" />
                            </div>
                            <span class="amplitude-duration-time time-container"></span>
                        </div>
                        <!-- Playlist -->
                        <div id="list">
                            <!-- List loaded here dinamically -->
                        </div>
                    </div>
                </aside>
            </div>
            <!-- Content section -->
            <div class="col-md-6 col-lg-7">
                <section>
                    <div id="content">
                        <!-- Dynamic cotent is loaded here -->
                    </div>
                </section>
            </div>
        </div>
    </main>
    <!-- Footer / Player controls -->
    <footer class="fixed-bottom">
        <div class="container-xxl">
            <div class="row">
                <!-- Player seeker -->
                <div class="col-12 col-md-8 player-progress-bar-card">
                    <div class="player-progress-bar-container">
                        <span class="amplitude-current-time time-container"></span>
                        <div class="seeker">
                            <div class="amplitude-wave-form">
                            </div>
                            <input type="range" class="amplitude-song-slider" />
                        </div>
                        <span class="amplitude-duration-time time-container"></span>
                    </div>
                </div>
                <!-- Now playing (visible mobile) -->
                <div class="d-md-none col-9" id="now-playing">
                    <div class="d-block d-md-none" id="expand-player">
                        <i class="fas fa-chevron-up"></i>
                    </div>
                    <div id="now-playing-cover"></div>
                    <div class="meta-container">
                        <span data-amplitude-song-info="name" class="song-name"></span>
                        <span data-amplitude-song-info="artist"></span>
                        <span data-amplitude-song-info="album"></span>
                    </div>
                </div>
                <!-- Player controls -->
                <div class="col-3 col-md-4" id="controls-container">
                    <div class="d-none d-md-block" id="shuffle-container">
                        <div class="amplitude-shuffle amplitude-shuffle-off">
                            <span class="shuffle-text">Shuffle</span>
                            <i class="fas fa-random"></i>
                            <span class="shuffle-off">Off</span>
                            <span class="shuffle-on">On</span>
                        </div>
                    </div>
                    <div class="d-none d-md-block" id="repeat-container">
                        <div class="amplitude-repeat amplitude-repeat-off">
                            <span class="shuffle-text">Loop</span>
                            <i class="fas fa-sync-alt"></i>
                            <span class="repeat-off">Off</span>
                            <span class="repeat-on">On</span>
                        </div>
                    </div>
                    <div class="d-none d-md-block" id="prev-container">
                        <div class="amplitude-prev" id="previous"></div>
                    </div>
                    <div id="play-pause-container">
                        <div class="amplitude-play-pause" id="play-pause"></div>
                    </div>
                    <div id="next-container">
                        <div class="amplitude-next" id="next"></div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Youtube modal -->
    <div class="modal fade" tabindex="-1" id="yt-modal" role="dialog" aria-hidden="true">
        <span class="close-modal" data-bs-dismiss="modal"><i class="fas fa-times"></i></span>
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div id="yt-player"></div>
            </div>
        </div>
    </div>

    <!-- Gallery modal -->
    <div class="modal fade" id="galleryModal" tabindex="-1" role="dialog" aria-hidden="true">
        <span class="close-modal" data-bs-dismiss="modal"><i class="fas fa-times"></i></span>
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div id="galleryCarousel">
                    <div id="gallery-show-item" style="background-image:url('media/photos/2015_DMAN.jpg');">
                        <div class="carousel-caption">
                            <h3>DMAN</h3>
                            <h5>2015</h5>
                        </div>
                    </div>
                    <button id="carousel-prev">
                        <i class="fas fa-chevron-left"></i>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button id="carousel-next">
                        <i class="fas fa-chevron-right"></i>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Resume playback dialog -->
    <div class="modal fade" tabindex="-1" id="playback-dialog" role="dialog" aria-hidden="true" data-bs-focus="false">
        <div class="modal-dialog modal-dialog-centered my-0">
            <div class="modal-content">
                <div class="modal-body d-flex justify-content-evenly p-1">
                    <h5 class="modal-title">Resume playback ?</h5>
                    <button type="button" class="btn" id="dialog-yes"><i class="fas fa-play"></i> Resume
                        Playback</button>
                    <button type="button" class="btn" id="dialog-no">No thanks</button>
                </div>
            </div>
        </div>
    </div>

    <!-- External JS Libraries -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/amplitudejs@5.3.0/dist/amplitude.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/node-vibrant@3.2.1-alpha.1/dist/vibrant.min.js"></script>
    <!-- Local JS files -->
    <script src="assets/js/player.js"></script>
    <script src="assets/js/script.js"></script>
</body>

</html>