879 lines
48 KiB
HTML
879 lines
48 KiB
HTML
{{template "components/header.html" .}}
|
|
{{template "components/preloader.html" .}}
|
|
<div id="main-wrapper">
|
|
<!-- Sidebar Start -->
|
|
{{template "components/sidebar.html" .}}
|
|
<!-- Sidebar End -->
|
|
<div class="page-wrapper">
|
|
<!-- Header Start -->
|
|
{{template "components/topbar.html" .}}
|
|
<!-- Header End -->
|
|
<div class="body-wrapper">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-xl-8">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title fw-semibold">Follow Artists</h4>
|
|
<p class="card-subtitle">Tips for Following Local Artists</p>
|
|
<div class="overflow-auto mt-4" data-simplebar>
|
|
<div class="hstack gap-9">
|
|
<a href="javascript:void(0)" class="text-center flex-shrink-0 ">
|
|
<div class="border border-2 border-primary rounded-circle">
|
|
<img src="../assets/images/music/s1.jpg" class="rounded-circle img-fluid m-1" alt="art" width="55" />
|
|
</div>
|
|
<span class="d-block fs-3 mt-1 text-dark">Dualia</span>
|
|
</a>
|
|
<a href="javascript:void(0)" class="text-center flex-shrink-0 ">
|
|
<div class="border border-2 border-primary rounded-circle">
|
|
<img src="../assets/images/music/s2.jpg" class="rounded-circle img-fluid m-1" alt="art" width="55" />
|
|
</div>
|
|
<span class="d-block fs-3 mt-1 text-dark">John</span>
|
|
</a>
|
|
<a href="javascript:void(0)" class="text-center flex-shrink-0 ">
|
|
<div class="border border-2 border-primary rounded-circle">
|
|
<img src="../assets/images/music/s3.jpg" class="rounded-circle img-fluid m-1" alt="art" width="55" />
|
|
</div>
|
|
<span class="d-block fs-3 mt-1 text-dark">Smith</span>
|
|
</a>
|
|
<a href="javascript:void(0)" class="text-center flex-shrink-0 ">
|
|
<div class="border border-2 border-white rounded-circle">
|
|
<img src="../assets/images/music/s4.jpg" class="rounded-circle img-fluid m-1" alt="art" width="55" />
|
|
</div>
|
|
<span class="d-block fs-3 mt-1 text-dark">Sia</span>
|
|
</a>
|
|
<a href="javascript:void(0)" class="text-center flex-shrink-0 ">
|
|
<div class="border border-2 border-white rounded-circle">
|
|
<img src="../assets/images/music/s1.jpg" class="rounded-circle img-fluid m-1" alt="art" width="55" />
|
|
</div>
|
|
<span class="d-block fs-3 mt-1 text-dark">Adele</span>
|
|
</a>
|
|
<a href="javascript:void(0)" class="text-center flex-shrink-0 ">
|
|
<div class="border border-2 border-white rounded-circle">
|
|
<img src="../assets/images/music/s2.jpg" class="rounded-circle img-fluid m-1" alt="art" width="55" />
|
|
</div>
|
|
<span class="d-block fs-3 mt-1 text-dark">Dualia</span>
|
|
</a>
|
|
<a href="javascript:void(0)" class="text-center flex-shrink-0 ">
|
|
<div class="border border-2 border-white rounded-circle">
|
|
<img src="../assets/images/music/s3.jpg" class="rounded-circle img-fluid m-1" alt="art" width="55" />
|
|
</div>
|
|
<span class="d-block fs-3 mt-1 text-dark">Sia</span>
|
|
</a>
|
|
<a href="javascript:void(0)" class="text-center flex-shrink-0 ">
|
|
<div class="border border-2 border-white rounded-circle">
|
|
<img src="../assets/images/music/s4.jpg" class="rounded-circle img-fluid m-1" alt="art" width="55" />
|
|
</div>
|
|
<span class="d-block fs-3 mt-1 text-dark">John</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title fw-semibold">Recently Played</h4>
|
|
<p class="card-subtitle">What's on My Playlist This Week?</p>
|
|
<div class="row mt-3">
|
|
<div class="col-md-4 col-sm-6">
|
|
<div class="card shadow-none border position-relative mb-md-0">
|
|
<div class="overflow-hidden rounded">
|
|
<a href="javascript:void(0)">
|
|
<img src="../assets/images/music/album5.jpg" class="rounded hover-img card-img" alt="art" />
|
|
</a>
|
|
</div>
|
|
<div class="p-2 d-flex">
|
|
<div>
|
|
<h6 class="mt-2 mb-0 fw-semibold">Naach Meri Rani</h6>
|
|
<span class="fs-2 text-nowrap">Guru Randhawa</span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<a href="javascript:void(0)" class="z-1 btn bg-white text-primary round-sm rounded-circle mt-n4 shadow-sm p-0 d-flex align-items-center justify-content-center">
|
|
<i class="ti ti-player-play text-primary fs-4"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-sm-6">
|
|
<div class="card shadow-none border position-relative mb-md-0">
|
|
<div class="overflow-hidden rounded">
|
|
<a href="javascript:void(0)">
|
|
<div class="hover-img">
|
|
<img src="../assets/images/music/album7.jpg" class="rounded hover-img card-img" alt="art" />
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="p-2 d-flex">
|
|
<div>
|
|
<h6 class="mt-2 mb-0 fw-semibold">Party Anthems</h6>
|
|
<span class="fs-2 text-nowrap">Arijit Singh</span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<a href="javascript:void(0)" class="z-1 btn bg-white text-primary round-sm rounded-circle mt-n4 shadow-sm p-0 d-flex align-items-center justify-content-center">
|
|
<i class="ti ti-player-play text-primary fs-4"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 col-sm-6">
|
|
<div class="card border shadow-none position-relative mb-0">
|
|
<div class="overflow-hidden rounded">
|
|
<a href="javascript:void(0)">
|
|
<div class="hover-img">
|
|
<img src="../assets/images/music/album8.jpg" class="rounded hover-img card-img" alt="art" />
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="p-2 d-flex">
|
|
<div>
|
|
<h6 class="mt-2 mb-0 fw-semibold text-truncate">Badshah Party</h6>
|
|
<span class="fs-2 text-nowrap">Badshah</span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<a href="javascript:void(0)" class="z-1 btn bg-white text-primary round-sm rounded-circle mt-n4 shadow-sm p-0 d-flex align-items-center justify-content-center">
|
|
<i class="ti ti-player-play text-primary fs-4"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card mb-0">
|
|
<div class="card-body p-4">
|
|
<h4 class="card-title">My Friends</h4>
|
|
<p class="card-subtitle">The Power of Friendship</p>
|
|
<div class="row gx-3 mt-4">
|
|
<div class="col-3">
|
|
<img src="../assets/images/profile/user-2.jpg" class="rounded img-fluid" alt="art" />
|
|
</div>
|
|
<div class="col-3">
|
|
<img src="../assets/images/profile/user-3.jpg" class="rounded img-fluid" alt="art" />
|
|
</div>
|
|
<div class="col-3">
|
|
<img src="../assets/images/profile/user-4.jpg" class="rounded img-fluid" alt="art" />
|
|
</div>
|
|
<div class="col-3">
|
|
<img src="../assets/images/profile/user-5.jpg" class="rounded img-fluid" alt="art" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body p-4">
|
|
<h4 class="card-title">Favourite Artists</h4>
|
|
<p class="card-subtitle">The Iconic Music of Prince</p>
|
|
<div class="row gx-3 mt-4">
|
|
<div class="col-3">
|
|
<img src="../assets/images/music/s1.jpg" class="rounded img-fluid" alt="art" />
|
|
</div>
|
|
<div class="col-3">
|
|
<img src="../assets/images/music/s2.jpg" class="rounded img-fluid" alt="art" />
|
|
</div>
|
|
<div class="col-3">
|
|
<img src="../assets/images/music/s3.jpg" class="rounded img-fluid" alt="art" />
|
|
</div>
|
|
<div class="col-3">
|
|
<img src="../assets/images/music/s4.jpg" class="rounded img-fluid" alt="art" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title fw-semibold">Recent Search</h4>
|
|
<p class="card-subtitle">What's Next in the World of Search?</p>
|
|
<div class="hstack my-4 gap-3">
|
|
<a role="alert" class="alert mb-0 py-2 badge bg-primary-subtle text-primary s rounded-pill d-flex align-items-center justify-content-between gap-2 ">Shiela
|
|
On7 <span data-bs-dismiss="alert">
|
|
<i class="ti ti-square-x fs-4"></i>
|
|
</span>
|
|
</a>
|
|
<a role="alert" class="alert mb-0 py-2 badge bg-danger-subtle text-danger s rounded-pill d-flex align-items-center justify-content-between gap-2 ">Denny
|
|
Caknan <span data-bs-dismiss="alert">
|
|
<i class="ti ti-square-x fs-4"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="card bg-primary-subtle shadow-none mb-0">
|
|
<div class="card-body px-3 py-4">
|
|
<div class="text-center">
|
|
<div class="mplayer">
|
|
<div id="jp_container_N" class="jp-video-270p jp-state-no-volume">
|
|
<div class="jp-type-playlist">
|
|
<div id="jplayer_N" class="jp-jplayer hide"></div>
|
|
<div class="jp-gui">
|
|
<div class="jp-interface">
|
|
<img src="../assets/images/music/album3.jpg" class="rounded poster" alt="album" width="100" />
|
|
<h5 class="mt-3 mb-0 jp-title fw-semibold fs-5"></h5>
|
|
<span class="opacity-75 fs-3 jp-artist"></span>
|
|
<div class="jp-controls">
|
|
<div>
|
|
<a class="jp-repeat btn border-0 round-sm opacity-75 rounded-circle" title="repeat">
|
|
<i class="ti ti-repeat fs-4"></i>
|
|
</a>
|
|
<a class="jp-repeat-off hide btn border-0 round-sm rounded-circle" title="repeat off">
|
|
<i class="ti ti-repeat fs-4 text-primary"></i>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a class="jp-previous btn border-0 round-sm opacity-75 rounded-circle">
|
|
<i class="ti ti-chevrons-left fs-4"></i>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a class="jp-play btn border-0 text-bg-white text-primary round-sm rounded-circle">
|
|
<i class="ti ti-player-play fs-4"></i>
|
|
</a>
|
|
<a class="jp-pause btn border-0 text-bg-white text-primary round-sm rounded-circle">
|
|
<i class="ti ti-player-pause"></i>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a class="jp-next btn border-0 round-sm opacity-75 rounded-circle">
|
|
<i class="ti ti-chevrons-right fs-4"></i>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a class="jp-shuffle btn border-0 round-sm opacity-75 rounded-circle" title="shuffle">
|
|
<i class="ti ti-arrows-shuffle-2 fs-4"></i>
|
|
</a>
|
|
<a class="jp-shuffle-off hide btn border-0 round-sm rounded-circle" title="shuffle off">
|
|
<i class="ti ti-arrows-shuffle-2 fs-4 text-primary"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="jp-progress hidden-xs">
|
|
<div class="jp-seek-bar w-100">
|
|
<div class="jp-play-bar play-progress w-0"></div>
|
|
<div class="jp-current-time current-time"></div>
|
|
<div class="jp-duration duration"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a class="jp-mute " title="mute">
|
|
<i class="ti ti-volume-3 text-muted fs-4"></i>
|
|
</a>
|
|
<a class="jp-unmute" title="unmute">
|
|
<i class="ti ti-volume fs-4 text-primary"></i>
|
|
</a>
|
|
</div>
|
|
<div class="jp-volume jp-music-volume">
|
|
<div class="jp-volume-bar">
|
|
<div class="jp-volume-bar-value"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="jp-playlist dropup" id="playlist">
|
|
<ul class="dropdown-menu bg-inverse m-b-0">
|
|
<li class="list-group-item"></li>
|
|
</ul>
|
|
</div>
|
|
<div class="jp-no-solution hide">
|
|
<span>Update Required</span> To play the media you will need to either update your browser
|
|
to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center mt-3 p-3 bg-hover-light-black rounded border-bottom">
|
|
<div class="position-relative d-flex align-items-center">
|
|
<a href="javascript:void(0)" class="stretched-link "></a>
|
|
<img src="../assets/images/music/album1.jpg" width="45" class="rounded" alt="album" />
|
|
<div class="ms-3">
|
|
<h6 class="mb-0 fw-semibold">Viva Las</h6>
|
|
<span class="fs-2">Viva Las</span>
|
|
</div>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<div class="dropdown">
|
|
<a class="" href="javascript:void(0)" id="m1" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ti ti-dots-vertical fs-4"></i>
|
|
</a>
|
|
<ul class="dropdown-menu" aria-labelledby="m1">
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-share text-muted me-1 fs-4"></i>Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-download text-muted me-1 fs-4"></i>Download
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-info-circle text-muted me-1 fs-4"></i>Get Song Info
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center bg-hover-light-black rounded p-3 border-bottom">
|
|
<div class="position-relative d-flex align-items-center">
|
|
<a href="javascript:void(0)" class="stretched-link "></a>
|
|
<img src="../assets/images/music/album2.jpg" width="45" alt="album" class="rounded" />
|
|
<div class="ms-3">
|
|
<h6 class="mb-0 fw-semibold">As It Was</h6>
|
|
<span class="fs-2">As It Was</span>
|
|
</div>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<div class="dropdown">
|
|
<a class="" href="javascript:void(0)" id="m2" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ti ti-dots-vertical fs-4"></i>
|
|
</a>
|
|
<ul class="dropdown-menu" aria-labelledby="m2">
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-share text-muted me-1 fs-4"></i>Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-download text-muted me-1 fs-4"></i>Download
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-info-circle text-muted me-1 fs-4"></i>Get Song Info
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center p-3 bg-hover-light-black rounded">
|
|
<div class="position-relative d-flex align-items-center">
|
|
<a href="javascript:void(0)" class="stretched-link "></a>
|
|
<img src="../assets/images/music/album4.jpg" width="45" alt="album" class="rounded" />
|
|
<div class="ms-3">
|
|
<h6 class="mb-0 fw-semibold text-truncate w-75">RedTape Anthem</h6>
|
|
<span class="fs-2">RedTape Anthem</span>
|
|
</div>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<div class="dropdown">
|
|
<a class="" href="javascript:void(0)" id="m3" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ti ti-dots-vertical fs-4"></i>
|
|
</a>
|
|
<ul class="dropdown-menu" aria-labelledby="m3">
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-share text-muted me-1 fs-4"></i>Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-download text-muted me-1 fs-4"></i>Download
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-info-circle text-muted me-1 fs-4"></i>Get Song Info
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center p-3 bg-hover-light-black rounded border-bottom">
|
|
<div class="position-relative d-flex align-items-center">
|
|
<a href="javascript:void(0)" class="stretched-link "></a>
|
|
<img src="../assets/images/music/album1.jpg" width="45" class="rounded" alt="album" />
|
|
<div class="ms-3">
|
|
<h6 class="mb-0 fw-semibold">Viva Las</h6>
|
|
<span class="fs-2">Viva Las</span>
|
|
</div>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<div class="dropdown">
|
|
<a class="" href="javascript:void(0)" id="m1" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ti ti-dots-vertical fs-4"></i>
|
|
</a>
|
|
<ul class="dropdown-menu" aria-labelledby="m1">
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-share text-muted me-1 fs-4"></i>Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-download text-muted me-1 fs-4"></i>Download
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-info-circle text-muted me-1 fs-4"></i>Get Song Info
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card">
|
|
<div class="card-body p-4">
|
|
<div class="d-flex align-items-center">
|
|
<div>
|
|
<h4 class="card-title fw-semibold">Top 10 from this week</h4>
|
|
<p class="card-subtitle">Based on your preferences</p>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<div class="dropdown">
|
|
<a class="" href="javascript:void(0)" id="t1" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ti ti-dots-vertical fs-4"></i>
|
|
</a>
|
|
<ul class="dropdown-menu" aria-labelledby="t1">
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-share text-muted me-1 fs-4"></i>Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-download text-muted me-1 fs-4"></i>Download
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-info-circle text-muted me-1 fs-4"></i>Get Song Info
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 overflow-auto gap-4 h-450" data-simplebar>
|
|
<a href="javascript:void(0)" class="mb-4 d-block">
|
|
<img src="../assets/images/music/top10-1.jpg" class="img-fluid rounded" alt="album" />
|
|
</a>
|
|
<a href="javascript:void(0)" class="mb-4 d-block">
|
|
<img src="../assets/images/music/top10-2.jpg" class="img-fluid rounded" alt="album" />
|
|
</a>
|
|
<a href="javascript:void(0)" class="d-block">
|
|
<img src="../assets/images/music/top10-3.jpg" class="img-fluid rounded" alt="album" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card">
|
|
<div class="card-body p-4">
|
|
<div class="d-flex align-items-center">
|
|
<div>
|
|
<h4 class="card-title fw-semibold">Top Playlist</h4>
|
|
<p class="card-subtitle">Based on your choic</p>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<div class="dropdown">
|
|
<a class="" href="javascript:void(0)" id="t2" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="ti ti-dots-vertical fs-4"></i>
|
|
</a>
|
|
<ul class="dropdown-menu" aria-labelledby="t2">
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-share text-muted me-1 fs-4"></i>Share
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="javascript:void(0)">
|
|
<i class="ti ti-download text-muted me-1 fs-4"></i>Download
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-auto card mt-4 mb-0 shadow-none border h-450" data-simplebar>
|
|
<div class="hstack p-3 bg-hover-light-black position-relative border-bottom">
|
|
<a href="javascript:void(0)" class="stretched-link "></a>
|
|
<a class="" href="javascript:void(0)">
|
|
<i class="ti ti-player-play fs-5"></i>
|
|
</a>
|
|
<img src="../assets/images/music/album1.jpg" alt="top-1" width="40" class="rounded ms-3" />
|
|
<div class="ms-3">
|
|
<h6 class="mb-0">N95</h6>
|
|
<span class="fs-3">Kendrick Lamar</span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<a class="" href="javascript:void(0)">
|
|
<i class="ti ti-heart text-primary fs-5"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="hstack p-3 bg-hover-light-black position-relative border-bottom">
|
|
<a href="javascript:void(0)" class="stretched-link "></a>
|
|
<a class="" href="javascript:void(0)">
|
|
<i class="ti ti-player-play fs-5"></i>
|
|
</a>
|
|
<img src="../assets/images/music/album2.jpg" alt="top-1" width="40" class="rounded ms-3" />
|
|
<div class="ms-3">
|
|
<h6 class="mb-0">Women</h6>
|
|
<span class="fs-3">Doja Cat</span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<a class="" href="javascript:void(0)">
|
|
<i class="ti ti-heart text-primary fs-5"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="hstack p-3 bg-hover-light-black position-relative border-bottom">
|
|
<a href="javascript:void(0)" class="stretched-link "></a>
|
|
<a class="" href="javascript:void(0)">
|
|
<i class="ti ti-player-play fs-5"></i>
|
|
</a>
|
|
<img src="../assets/images/music/album3.jpg" alt="top-1" width="40" class="rounded ms-3" />
|
|
<div class="ms-3">
|
|
<h6 class="mb-0">Wait For U</h6>
|
|
<span class="fs-3">Future, Tems</span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<a class="" href="javascript:void(0)">
|
|
<i class="ti ti-heart text-muted fs-5"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="hstack p-3 bg-hover-light-black position-relative border-bottom">
|
|
<a href="javascript:void(0)" class="stretched-link "></a>
|
|
<a class="" href="javascript:void(0)">
|
|
<i class="ti ti-player-play fs-5"></i>
|
|
</a>
|
|
<img src="../assets/images/music/album4.jpg" alt="top-1" width="40" class="rounded ms-3" />
|
|
<div class="ms-3">
|
|
<h6 class="mb-0">Blinding Lights</h6>
|
|
<span class="fs-3">The Weekend</span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<a class="" href="javascript:void(0)">
|
|
<i class="ti ti-heart text-muted fs-5"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="hstack p-3 bg-hover-light-black position-relative border-bottom">
|
|
<a href="javascript:void(0)" class="stretched-link "></a>
|
|
<a class="" href="javascript:void(0)">
|
|
<i class="ti ti-player-play fs-5"></i>
|
|
</a>
|
|
<img src="../assets/images/music/album5.jpg" alt="top-1" width="40" class="rounded ms-3" />
|
|
<div class="ms-3">
|
|
<h6 class="mb-0">Cooped Up</h6>
|
|
<span class="fs-3">Roddy Ricch</span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<a class="" href="javascript:void(0)">
|
|
<i class="ti ti-heart text-primary fs-5"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="hstack p-3 bg-hover-light-black position-relative border-bottom">
|
|
<a href="javascript:void(0)" class="stretched-link "></a>
|
|
<a class="" href="javascript:void(0)">
|
|
<i class="ti ti-player-play fs-5"></i>
|
|
</a>
|
|
<img src="../assets/images/music/album6.jpg" alt="top-1" width="40" class="rounded ms-3" />
|
|
<div class="ms-3">
|
|
<h6 class="mb-0">N95</h6>
|
|
<span class="fs-3">Roddy Ricch</span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<a class="" href="javascript:void(0)">
|
|
<i class="ti ti-heart text-primary fs-5"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="hstack p-3 bg-hover-light-black position-relative">
|
|
<a href="javascript:void(0)" class="stretched-link "></a>
|
|
<a class="" href="javascript:void(0)">
|
|
<i class="ti ti-player-play fs-5"></i>
|
|
</a>
|
|
<img src="../assets/images/music/album7.jpg" alt="top-1" width="40" class="rounded ms-3" />
|
|
<div class="ms-3">
|
|
<h6 class="mb-0">Party Anthem</h6>
|
|
<span class="fs-3">Arijit Singh</span>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<a class="" href="javascript:void(0)">
|
|
<i class="ti ti-heart text-primary fs-5"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card">
|
|
<div class="card-body p-4">
|
|
<h4 class="card-title fw-semibold">Most Popular this week</h4>
|
|
<p class="card-subtitle">Based on your preferences</p>
|
|
<div class="mt-4 card p-3 rounded shadow-none border">
|
|
<div class="d-flex align-items-center">
|
|
<div class="position-relative">
|
|
<img src="../assets/images/music/album1.jpg" class="rounded" alt="album" width="97" />
|
|
<div class="card-img-overlay d-flex align-items-center justify-content-center">
|
|
<button class="btn btn-primary rounded-circle round p-0">
|
|
<i class="ti ti-player-play fs-5"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="ms-3">
|
|
<h6 class="mb-0 fs-5">Trending Songs</h6>
|
|
<span class="d-block fs-3 my-1">Top trending hits, refres..</span>
|
|
<small>Created by Gaana</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 card p-3 rounded shadow-none border">
|
|
<div class="d-flex align-items-center">
|
|
<div class="position-relative">
|
|
<img src="../assets/images/music/album2.jpg" class="rounded" alt="album" width="97" />
|
|
<div class="card-img-overlay d-flex align-items-center justify-content-center">
|
|
<button class="btn btn-primary rounded-circle round p-0">
|
|
<i class="ti ti-player-play fs-5"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="ms-3">
|
|
<h6 class="mb-0 fs-5">Trending Songs</h6>
|
|
<span class="d-block fs-3 my-1">Top trending hits, refres..</span>
|
|
<small>Created by Gaana</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 card mb-0 p-3 rounded shadow-none border">
|
|
<div class="d-flex align-items-center">
|
|
<div class="position-relative">
|
|
<img src="../assets/images/music/album4.jpg" class="rounded" alt="album" width="97" />
|
|
<div class="card-img-overlay d-flex align-items-center justify-content-center">
|
|
<button class="btn btn-primary rounded-circle round p-0">
|
|
<i class="ti ti-player-play fs-5"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="ms-3">
|
|
<h6 class="mb-0 fs-5">Trending Songs</h6>
|
|
<span class="d-block fs-3 my-1">Top trending hits, refres..</span>
|
|
<small>Created by Gaana</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Search Bar -->
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable modal-lg">
|
|
<div class="modal-content rounded-1">
|
|
<div class="modal-header border-bottom">
|
|
<input type="search" class="form-control fs-3" placeholder="Search here" id="search" />
|
|
<a href="javascript:void(0)" data-bs-dismiss="modal" class="lh-1">
|
|
<i class="ti ti-x fs-5 ms-3"></i>
|
|
</a>
|
|
</div>
|
|
<div class="modal-body message-body" data-simplebar="">
|
|
<h5 class="mb-0 fs-5 p-1">Quick Page Links</h5>
|
|
<ul class="list mb-0 py-2">
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Modern</span>
|
|
<span class="text-muted d-block">/dashboards/dashboard1</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Dashboard</span>
|
|
<span class="text-muted d-block">/dashboards/dashboard2</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Contacts</span>
|
|
<span class="text-muted d-block">/apps/contacts</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Posts</span>
|
|
<span class="text-muted d-block">/apps/blog/posts</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Detail</span>
|
|
<span class="text-muted d-block">/apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Shop</span>
|
|
<span class="text-muted d-block">/apps/ecommerce/shop</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Modern</span>
|
|
<span class="text-muted d-block">/dashboards/dashboard1</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Dashboard</span>
|
|
<span class="text-muted d-block">/dashboards/dashboard2</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Contacts</span>
|
|
<span class="text-muted d-block">/apps/contacts</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Posts</span>
|
|
<span class="text-muted d-block">/apps/blog/posts</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Detail</span>
|
|
<span class="text-muted d-block">/apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow</span>
|
|
</a>
|
|
</li>
|
|
<li class="p-1 mb-1 bg-hover-light-black">
|
|
<a href="javascript:void(0)">
|
|
<span class="d-block">Shop</span>
|
|
<span class="text-muted d-block">/apps/ecommerce/shop</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Shopping Cart -->
|
|
<div class="offcanvas offcanvas-end shopping-cart" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
|
|
<div class="offcanvas-header justify-content-between py-4">
|
|
<h5 class="offcanvas-title fs-5 fw-semibold" id="offcanvasRightLabel">
|
|
Shopping Cart
|
|
</h5>
|
|
<span class="badge bg-primary rounded-4 px-3 py-1 lh-sm">5 new</span>
|
|
</div>
|
|
<div class="offcanvas-body h-100 px-4 pt-0" data-simplebar>
|
|
<ul class="mb-0">
|
|
<li class="pb-7">
|
|
<div class="d-flex align-items-center">
|
|
<img src="../assets/images/products/product-1.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
|
|
<div>
|
|
<h6 class="mb-1">Supreme toys cooker</h6>
|
|
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
|
|
<div class="d-flex align-items-center justify-content-between mt-2">
|
|
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
|
|
<div class="input-group input-group-sm w-50">
|
|
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add1">
|
|
-
|
|
</button>
|
|
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add1" value="1" />
|
|
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addo2">
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="pb-7">
|
|
<div class="d-flex align-items-center">
|
|
<img src="../assets/images/products/product-2.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
|
|
<div>
|
|
<h6 class="mb-1">Supreme toys cooker</h6>
|
|
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
|
|
<div class="d-flex align-items-center justify-content-between mt-2">
|
|
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
|
|
<div class="input-group input-group-sm w-50">
|
|
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add2">
|
|
-
|
|
</button>
|
|
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add2" value="1" />
|
|
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addon34">
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="pb-7">
|
|
<div class="d-flex align-items-center">
|
|
<img src="../assets/images/products/product-3.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
|
|
<div>
|
|
<h6 class="mb-1">Supreme toys cooker</h6>
|
|
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
|
|
<div class="d-flex align-items-center justify-content-between mt-2">
|
|
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
|
|
<div class="input-group input-group-sm w-50">
|
|
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add3">
|
|
-
|
|
</button>
|
|
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add3" value="1" />
|
|
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addon3">
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="align-bottom">
|
|
<div class="d-flex align-items-center pb-7">
|
|
<span class="text-dark fs-3">Sub Total</span>
|
|
<div class="ms-auto">
|
|
<span class="text-dark fw-semibold fs-3">$2530</span>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center pb-7">
|
|
<span class="text-dark fs-3">Total</span>
|
|
<div class="ms-auto">
|
|
<span class="text-dark fw-semibold fs-3">$6830</span>
|
|
</div>
|
|
</div>
|
|
<a href="../main/eco-checkout.html" class="btn btn-outline-primary w-100">Go to shopping cart</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{template "components/footer.html" .}}
|