mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-28 16:32:28 +00:00
106 lines
3.3 KiB
HTML
106 lines
3.3 KiB
HTML
<section class="channel-profile-container" data-ds="new">
|
||
<!-- Modified banner wrapper for taller, rounded style -->
|
||
<div class="profile-banner relative mb-6 rounded-lg shadow-lg">
|
||
<!-- Increase the default height classes -->
|
||
<img
|
||
id="channelBanner"
|
||
class="h-48 w-full rounded-lg object-cover md:h-64"
|
||
src="assets/jpg/bitvid.jpg"
|
||
alt="Banner"
|
||
loading="lazy"
|
||
referrerpolicy="no-referrer"
|
||
crossorigin="anonymous"
|
||
data-fallback-src="assets/jpg/bitvid.jpg"
|
||
/>
|
||
<div class="absolute inset-0 rounded-lg bg-black bg-opacity-50"></div>
|
||
|
||
<div
|
||
class="absolute bottom-4 left-4 right-4 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between"
|
||
>
|
||
<div class="flex items-center">
|
||
<div
|
||
class="h-16 w-16 overflow-hidden rounded-full border-2 border-border-translucent-bright"
|
||
>
|
||
<img
|
||
id="channelAvatar"
|
||
src="assets/svg/default-profile.svg"
|
||
alt="Avatar"
|
||
class="h-full w-full object-cover"
|
||
/>
|
||
</div>
|
||
<div class="ml-4 text-text">
|
||
<h2 id="channelName" class="text-xl font-bold">User Name</h2>
|
||
<p id="channelNpub" class="text-sm opacity-80">npub...</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col items-end gap-3 self-start sm:self-end">
|
||
<div class="flex items-center gap-2">
|
||
<button
|
||
id="zapButton"
|
||
type="button"
|
||
class="icon-button"
|
||
aria-label="Open zap dialog"
|
||
aria-haspopup="dialog"
|
||
aria-expanded="false"
|
||
aria-controls="zapControls"
|
||
>
|
||
<img
|
||
src="assets/svg/lightning-bolt.svg"
|
||
alt="Zap"
|
||
class="icon-image"
|
||
/>
|
||
</button>
|
||
<button
|
||
id="channelShareBtn"
|
||
type="button"
|
||
class="icon-button"
|
||
aria-label="Share channel"
|
||
>
|
||
<img
|
||
src="assets/svg/share-video.svg"
|
||
alt="Share channel"
|
||
class="icon-image"
|
||
/>
|
||
</button>
|
||
<button
|
||
id="channelMoreBtn"
|
||
type="button"
|
||
class="icon-button"
|
||
aria-haspopup="true"
|
||
aria-expanded="false"
|
||
aria-label="Channel options"
|
||
aria-controls="channelProfileMoreMenu"
|
||
>
|
||
<img src="assets/svg/ellipsis.svg" alt="More" class="h-5 w-5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Basic profile details: about text, website, LN address -->
|
||
<div class="profile-details mt-4 px-4">
|
||
<p id="channelAbout" class="mb-2 text-text-strong"></p>
|
||
<a
|
||
id="channelWebsite"
|
||
href="#"
|
||
target="_blank"
|
||
class="mb-2 block text-info-strong hover:underline"
|
||
>Website</a
|
||
>
|
||
<p id="channelLightning" class="text-sm text-muted-strong"></p>
|
||
</div>
|
||
|
||
<!-- Area for Subscribe/Unsubscribe button -->
|
||
<div class="my-4 px-4">
|
||
<div id="subscribeBtnArea" class="hidden"></div>
|
||
</div>
|
||
|
||
<hr class="my-6" />
|
||
|
||
<h3 class="mb-4 text-lg font-bold text-text-strong">Videos by This User</h3>
|
||
<div id="channelVideoList" class="bv-grid-video">
|
||
<!-- User’s videos will go here -->
|
||
</div>
|
||
</section>
|