w33b/hstream
1
0
Fork 1
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Update more modal designs

Browse Source
This commit is contained in:
w33b
2026-05-23 11:46:20 +02:00
parent 0d4545c2ab
commit d8cf70e747
5 changed files with 89 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
resources/views/components/modal-header.blade.php
View File

@@ -1,13 +1,19 @@
@props(['title'])
<div class="flex flex-shrink-0 items-center justify-between rounded-t-md p-4 bg-rose-600">
<!--Modal title-->
<h5 class="text-xl font-medium leading-normal text-white">
<div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
<div>
<h2
id="modalGenresLabel"
class="text-xl font-semibold text-neutral-900 dark:text-white"
>
{{ $title }}
</h5>
<!--Close button-->
<button type="button" class="box-content text-white rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none" data-te-modal-dismiss aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</h2>
</div>
<button
type="button"
data-te-modal-dismiss
class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
>
✕
</button>
</div>

29
resources/views/modals/add-to-playlist.blade.php
View File

@@ -1,8 +1,14 @@
@auth
<!--Verically centered modal-->
<div data-te-modal-init class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none" id="modalAddToPlaylist" tabindex="-1" aria-labelledby="Playlist" aria-modal="true" role="dialog">
<div data-te-modal-dialog-ref class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%] 2xl:min-[576px]:max-w-[30%]">
<div class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
<div
data-te-modal-init
id="modalAddToPlaylist"
tabindex="-1"
aria-modal="true"
role="dialog"
class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
>
<div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
<div class="relative w-full max-w-2xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
<x-modal-header :title="__('Add to Playlist')" />
<!--Modal body-->
@@ -26,11 +32,16 @@
<x-input-error :messages="$errors->get('playlist')" class="mt-2" />
</div>
<div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
<a id="playlist-cancel" class="inline-block cursor-pointer rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200" data-te-modal-dismiss data-te-ripple-init data-te-ripple-color="light">
<div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4 gap-3">
<a
data-te-modal-dismiss
id="playlist-cancel"
class="cursor-pointer rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800">
Cancel
</a>
<a id="playlist-add" class="ml-1 cursor-pointer inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600" data-te-ripple-init data-te-ripple-color="light">
<a
id="playlist-add"
class="cursor-pointer rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700">
Add
</a>
</div>
@@ -52,7 +63,9 @@
</div>
<div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
<a id="playlist-create-and-add" class="ml-1 cursor-pointer inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600" data-te-ripple-init data-te-ripple-color="light">
<a
id="playlist-create-and-add"
class="cursor-pointer rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700">
Create and Add Episode
</a>
</div>

15
resources/views/modals/create-playlist.blade.php
View File

@@ -1,7 +1,14 @@
<!--Verically centered modal-->
<div data-te-modal-init class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none" id="modalCreatePlaylist" tabindex="-1" aria-labelledby="Playlist" aria-modal="true" role="dialog">
<div data-te-modal-dialog-ref class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%] 2xl:min-[576px]:max-w-[30%]">
<div class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
<div
data-te-modal-init
id="modalCreatePlaylist"
tabindex="-1"
aria-labelledby="modalCreatePlaylist"
aria-modal="true"
role="dialog"
class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
>
<div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
<div class="relative w-full max-w-4xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
<x-modal-header :title="__('Create Playlist')" />
<!--Modal body-->

17
resources/views/modals/download.blade.php
View File

@@ -1,8 +1,15 @@
<!--Verically centered modal-->
<div data-te-modal-init class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none" id="modalDownload" tabindex="-1" aria-labelledby="Download" aria-modal="true" role="dialog">
<div data-te-modal-dialog-ref class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[50%] 2xl:min-[576px]:max-w-[30%]">
<div class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
<x-modal-header :title='__("Download {$episode->title} - {$episode->episode}")' />
<div
data-te-modal-init
id="modalDownload"
tabindex="-1"
aria-labelledby="modalDownload"
aria-modal="true"
role="dialog"
class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
>
<div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
<div class="relative w-full max-w-4xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
<x-modal-header title="Download {{ $episode->title }} - {{ $episode->episode }}" />
@php
$dldomains = config('hstream.download_domain');

37
resources/views/modals/share.blade.php
View File

@@ -1,12 +1,15 @@
<!--Verically centered modal-->
<div data-te-modal-init
class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
id="modalShare" tabindex="-1" aria-labelledby="Share" aria-modal="true" role="dialog">
<div data-te-modal-dialog-ref
class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[50%] 2xl:min-[576px]:max-w-[25%]">
<div
class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
<x-modal-header :title='__("Share {$episode->title} - {$episode->episode}")' />
<div
data-te-modal-init
id="modalShare"
tabindex="-1"
aria-labelledby="Share"
aria-modal="true"
role="dialog"
class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
>
<div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
<div class="relative w-full max-w-2xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
<x-modal-header title="Share {{ $episode->title }} - {{ $episode->episode }}" />
<!--Modal body-->
<div class="relative p-4">
@@ -15,8 +18,8 @@
$currentUrl = url()->current();
$text = 'Watch ' . $episode->title . ' - ' . $episode->episode . ' in 4k on hstream.moe!';
@endphp
<div class="flex flex-wrap justify-stretch">
<a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
<div class="flex flex-wrap justify-stretch gap-3">
<a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
target="_blank" rel="noopener"
href="https://facebook.com/sharer/sharer.php?u={{ $currentUrl }}"
aria-label="Share on Facebook" draggable="false">
@@ -29,7 +32,7 @@
</svg>
<span class="ml-2">Facebook</span>
</a>
<a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
<a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
target="_blank" rel="noopener"
href="https://twitter.com/intent/tweet?url={{ $currentUrl }}&amp;text={{ $text }}"
aria-label="Share on Twitter" draggable="false">
@@ -42,7 +45,7 @@
</svg>
<span class="ml-2">Twitter</span>
</a>
<a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
<a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
target="_blank" rel="noopener"
href="https://reddit.com/submit/?url={{ $currentUrl }}&amp;resubmit=true&amp;title={{ $text }}"
aria-label="Share on Reddit" draggable="false">
@@ -55,7 +58,7 @@
</svg>
<span class="ml-2">Reddit</span>
</a>
<a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
<a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
target="_blank" rel="noopener"
href="https://wa.me/?text={{ $text }}%20{{ $currentUrl }}"
aria-label="Share on Whatsapp" draggable="false" style="">
@@ -68,7 +71,7 @@
</svg>
<span class="ml-2">Whatsapp</span>
</a>
<a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
<a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
target="_blank" rel="noopener"
href="https://telegram.me/share/url?text={{ $text }}&amp;url={{ $currentUrl }}"
aria-label="Share on Telegram" draggable="false">
@@ -81,7 +84,7 @@
</svg>
<span class="ml-2">Telegram</span>
</a>
<a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
<a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
target="_blank" rel="noopener"
href="mailto:?subject={{ $text }}&amp;body={{ $currentUrl }}"
aria-label="Share by Email" draggable="false">
@@ -100,7 +103,7 @@
<div>
<button id="copy-button" type="button" data-te-clipboard-init
data-te-clipboard-target="#copy-target" data-te-ripple-init data-te-ripple-color="light"
class="inline-block rounded border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out focus:bg-rose-600 focus:outline-none focus:ring-0 active:bg-rose-700">
class="cursor-pointer rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700">
Copy
</button>
</div>