Init
This commit is contained in:
136
resources/views/modals/share.blade.php
Normal file
136
resources/views/modals/share.blade.php
Normal file
@@ -0,0 +1,136 @@
|
||||
<!--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}")' />
|
||||
|
||||
<!--Modal body-->
|
||||
<div class="relative p-4">
|
||||
<!-- Social Media -->
|
||||
@php
|
||||
$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"
|
||||
target="_blank" rel="noopener"
|
||||
href="https://facebook.com/sharer/sharer.php?u={{ $currentUrl }}"
|
||||
aria-label="Share on Facebook" draggable="false">
|
||||
<svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512" class="w-6 h-6">
|
||||
<title>Facebook</title>
|
||||
<path
|
||||
d="M379 22v75h-44c-36 0-42 17-42 41v54h84l-12 85h-72v217h-88V277h-72v-85h72v-62c0-72 45-112 109-112 31 0 58 3 65 4z">
|
||||
</path>
|
||||
</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"
|
||||
target="_blank" rel="noopener"
|
||||
href="https://twitter.com/intent/tweet?url={{ $currentUrl }}&text={{ $text }}"
|
||||
aria-label="Share on Twitter" draggable="false">
|
||||
<svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512" class="w-6 h-6">
|
||||
<title>Twitter</title>
|
||||
<path
|
||||
d="m459 152 1 13c0 139-106 299-299 299-59 0-115-17-161-47a217 217 0 0 0 156-44c-47-1-85-31-98-72l19 1c10 0 19-1 28-3-48-10-84-52-84-103v-2c14 8 30 13 47 14A105 105 0 0 1 36 67c51 64 129 106 216 110-2-8-2-16-2-24a105 105 0 0 1 181-72c24-4 47-13 67-25-8 24-25 45-46 58 21-3 41-8 60-17-14 21-32 40-53 55z">
|
||||
</path>
|
||||
</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"
|
||||
target="_blank" rel="noopener"
|
||||
href="https://reddit.com/submit/?url={{ $currentUrl }}&resubmit=true&title={{ $text }}"
|
||||
aria-label="Share on Reddit" draggable="false">
|
||||
<svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512" class="w-6 h-6">
|
||||
<title>Reddit</title>
|
||||
<path
|
||||
d="M440 204c-15 0-28 6-38 15-35-24-83-40-137-42l28-125 88 20c0 22 18 39 39 39 22 0 40-18 40-39s-17-40-40-40c-15 0-28 9-35 22l-97-22c-5-1-10 3-11 7l-31 138c-53 2-100 18-136 43a53 53 0 0 0-38-16c-56 0-74 74-23 100l-3 24c0 84 95 152 210 152 117 0 211-68 211-152 0-8-1-17-3-25 50-25 32-99-24-99zM129 309a40 40 0 1 1 80 0 40 40 0 0 1-80 0zm215 93c-37 37-139 37-176 0-4-3-4-9 0-13s10-4 13 0c28 28 120 29 149 0 4-4 10-4 14 0s4 10 0 13zm-1-54c-22 0-39-17-39-39a39 39 0 1 1 39 39z">
|
||||
</path>
|
||||
</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"
|
||||
target="_blank" rel="noopener"
|
||||
href="https://wa.me/?text={{ $text }}%20{{ $currentUrl }}"
|
||||
aria-label="Share on Whatsapp" draggable="false" style="">
|
||||
<svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512" class="w-6 h-6">
|
||||
<title>Whatsapp</title>
|
||||
<path
|
||||
d="M413 97A222 222 0 0 0 64 365L31 480l118-31a224 224 0 0 0 330-195c0-59-25-115-67-157zM256 439c-33 0-66-9-94-26l-7-4-70 18 19-68-4-7a185 185 0 0 1 287-229c34 36 56 82 55 131 1 102-84 185-186 185zm101-138c-5-3-33-17-38-18-5-2-9-3-12 2l-18 22c-3 4-6 4-12 2-32-17-54-30-75-66-6-10 5-10 16-31 2-4 1-7-1-10l-17-41c-4-10-9-9-12-9h-11c-4 0-9 1-15 7-5 5-19 19-19 46s20 54 23 57c2 4 39 60 94 84 36 15 49 17 67 14 11-2 33-14 37-27s5-24 4-26c-2-2-5-4-11-6z">
|
||||
</path>
|
||||
</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"
|
||||
target="_blank" rel="noopener"
|
||||
href="https://telegram.me/share/url?text={{ $text }}&url={{ $currentUrl }}"
|
||||
aria-label="Share on Telegram" draggable="false">
|
||||
<svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512" class="w-6 h-6">
|
||||
<title>Telegram</title>
|
||||
<path
|
||||
d="M256 8a248 248 0 1 0 0 496 248 248 0 0 0 0-496zm115 169c-4 39-20 134-28 178-4 19-10 25-17 25-14 2-25-9-39-18l-56-37c-24-17-8-25 6-40 3-4 67-61 68-67l-1-4-5-1q-4 1-105 70-15 10-27 9c-9 0-26-5-38-9-16-5-28-7-27-16q1-7 18-14l145-62c69-29 83-34 92-34 2 0 7 1 10 3l4 7a43 43 0 0 1 0 10z">
|
||||
</path>
|
||||
</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"
|
||||
target="_blank" rel="noopener"
|
||||
href="mailto:?subject={{ $text }}&body={{ $currentUrl }}"
|
||||
aria-label="Share by Email" draggable="false">
|
||||
<svg aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512" class="w-6 h-6">
|
||||
<title>Email</title>
|
||||
<path
|
||||
d="M464 64a48 48 0 0 1 29 86L275 314c-11 8-27 8-38 0L19 150a48 48 0 0 1 29-86h416zM218 339c22 17 54 17 76 0l218-163v208c0 35-29 64-64 64H64c-35 0-64-29-64-64V176l218 163z">
|
||||
</path>
|
||||
</svg>
|
||||
<span class="ml-2">Email</span>
|
||||
</a>
|
||||
</div>
|
||||
<br>
|
||||
<div class="flex">
|
||||
<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">
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative mb-3 w-full" data-te-input-wrapper-init>
|
||||
<input type="text"
|
||||
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-rose-700 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-rose-700 [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
|
||||
id="copy-target" value="{{ $currentUrl }}" readonly />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mb-[0.125rem] block min-h-[1.5rem] text-center">
|
||||
<input class="w-4 h-4 text-rose-600 bg-gray-100 border-gray-300 rounded focus:ring-rose-500 dark:focus:ring-rose-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
type="checkbox" value="" id="checkBoxStartAt" />
|
||||
<label class="inline-block pl-[0.15rem] hover:cursor-pointer dark:text-white" for="checkBoxStartAt">
|
||||
Start at current time
|
||||
</label>
|
||||
</div>
|
||||
<script>
|
||||
const checkbox = document.getElementById('checkBoxStartAt');
|
||||
const urlInput = document.getElementById('copy-target');
|
||||
const url = '{{ $currentUrl }}';
|
||||
checkbox.addEventListener('change', (event) => {
|
||||
if (event.currentTarget.checked) {
|
||||
urlInput.value = url + "?t=" + parseInt(player.currentTime);
|
||||
} else {
|
||||
urlInput.value = url;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user