eeee
Este commit está contenido en:
Joey 😎
175
index.html
175
index.html
@@ -7,137 +7,130 @@
|
||||
|
||||
<title>RadioPlayer</title>
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="img/cover.png" />
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/animate.css">
|
||||
<link rel="stylesheet" href="css/style.css?v2322">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="cover-site">
|
||||
<div id="bgCover"></div>
|
||||
<div class="bg-mask"></div>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<section id="player">
|
||||
<div class="container">
|
||||
<div class="row web-player">
|
||||
<div class="col-12 col-lg-10">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-5">
|
||||
<div class="cover-album">
|
||||
<div id="currentCoverArt"></div>
|
||||
<div class="watermark"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 ml-md-auto col-md-6">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="info-current-song">
|
||||
<h2 id="currentSong" class="current-song text-uppercase">Song</h2>
|
||||
<h3 id="currentArtist" class="current-artist text-captalize">Artist</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<!--
|
||||
<div class="row">
|
||||
<div class="play-pause col-12 col-md-2 text-center">
|
||||
<i id="playerButton" class="fa fa-play-circle" onclick="togglePlay()"></i>
|
||||
</div>
|
||||
<div class="col-12 col-md-10 text-center">
|
||||
<div class="row volume-control">
|
||||
<div class="volume-icon col-1"><i class="fa fa-volume-up"></i></div>
|
||||
<div class="volume-slide col-10 text-center"><input type="range" id="volume"
|
||||
step="1" min="0" max="100" value="80"></div>
|
||||
<div class="percentual-volume col-12">Volume <span id="volIndicator">...</span>%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center call-lyrics">
|
||||
<a href="#" class="lyrics" style="" data-target="#modalLyrics">VER LETRA</a>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<div class="row">
|
||||
<div class="play-pause col-12 col-md-6 text-center">
|
||||
<button class="btn-play" onclick="togglePlay()"><i id="playerButton" class="fa fa-play"></i> <span id="buttonPlay">PLAY</span></button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 text-center">
|
||||
<div class="row volume-control">
|
||||
<div class="volume-icon col-1"><i class="fa fa-volume-up"></i></div>
|
||||
<div class="volume-slide col-10 text-center"><input type="range" id="volume"
|
||||
step="1" min="0" max="100" value="80"></div>
|
||||
<div class="percentual-volume col-12">Volume <span id="volIndicator">...</span>%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 text-center call-lyrics">
|
||||
<a href="#" class="lyrics" style="" data-target="#modalLyrics">LYRICS</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Spotify-style Player Interface -->
|
||||
<div class="player-interface">
|
||||
<!-- Left Side: Artwork -->
|
||||
<div class="player-left">
|
||||
<div class="main-artwork">
|
||||
<div id="currentCoverArt" class="loading-artwork-main">
|
||||
<div class="artwork-loading-spinner"></div>
|
||||
</div>
|
||||
<div class="watermark"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row historic">
|
||||
<div class="col-12">
|
||||
<h2>RECENTLY PLAYED</h2>
|
||||
<div class="row" id="historicSong">
|
||||
<article class="col-12 col-md-6">
|
||||
<div class="cover-historic"></div>
|
||||
<div class="music-info">
|
||||
<div class="song">No Song</div>
|
||||
<div class="artist">No Artist</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
<article class="col-12 col-md-6">
|
||||
<div class="cover-historic"></div>
|
||||
<div class="music-info">
|
||||
<div class="song">No Title</div>
|
||||
<div class="artist">No Artist</div>
|
||||
</div>
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
<!-- Right Side: Song Info and Controls -->
|
||||
<div class="player-right">
|
||||
<!-- Song Information -->
|
||||
<div class="song-info">
|
||||
<h2 id="currentSong" class="current-song">
|
||||
<span class="song-skeleton">Loading...</span>
|
||||
</h2>
|
||||
<h3 id="currentArtist" class="current-artist">
|
||||
<span class="artist-skeleton">Loading artist...</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<!-- Player Controls -->
|
||||
<div class="player-controls">
|
||||
<button class="btn-play" onclick="togglePlay()">
|
||||
<i id="playerButton" class="fa fa-play"></i>
|
||||
<span id="buttonPlay">PLAY</span>
|
||||
<div class="btn-loading-spinner"></div>
|
||||
</button>
|
||||
|
||||
<div class="volume-control">
|
||||
<div class="volume-icon">
|
||||
<i class="fa fa-volume-up"></i>
|
||||
</div>
|
||||
<div class="volume-slide">
|
||||
<input type="range" id="volume" step="1" min="0" max="100" value="80">
|
||||
</div>
|
||||
<div class="volume-indicator">
|
||||
<span id="volIndicator">80</span>%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button class="btn-secondary" data-toggle="modal" data-target="#modalHistory">
|
||||
<i class="fa fa-history"></i>
|
||||
HISTORY
|
||||
</button>
|
||||
<a href="#" class="btn-secondary lyrics" data-target="#modalLyrics">
|
||||
<i class="fa fa-file-text-o"></i>
|
||||
LYRICS
|
||||
<div class="lyrics-loading-dot"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Lyrics Modal -->
|
||||
<div class="modal fade" id="modalLyrics" tabindex="-1" role="dialog" aria-labelledby="lyricsSong" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="lyricsSong">Lyrics</h5>
|
||||
<button type="button" style="color: #fff" class="close" data-dismiss="modal" aria-label="Fechar">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="lyric"></div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
|
||||
<div class="modal-body" id="lyric">
|
||||
<div class="lyrics-loading">
|
||||
<div class="lyrics-skeleton-line"></div>
|
||||
<div class="lyrics-skeleton-line"></div>
|
||||
<div class="lyrics-skeleton-line short"></div>
|
||||
<div class="lyrics-skeleton-line"></div>
|
||||
<div class="lyrics-skeleton-line short"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- History Modal -->
|
||||
<div class="modal fade" id="modalHistory" tabindex="-1" role="dialog" aria-labelledby="historyTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="historyTitle">Recently Played</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="history-list" id="historicSong">
|
||||
<!-- History items will be generated dynamically -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
|
||||
<script type="text/javascript" src="js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="js/script.js?3892920001992"></script>
|
||||
<script type="text/javascript" src="js/script.js?3892920001992"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Referencia en una nueva incidencia
Block a user