Added almost all features except language, ads, seo, pages
This commit is contained in:
Gitea
@@ -21,8 +21,18 @@
|
||||
</div>
|
||||
|
||||
<flux:navlist variant="outline">
|
||||
<flux:button class="cursor-pointer inbox-btn" variant="filled" icon="inbox" x-on:click="$dispatch('getEmail')">Inbox</flux:button>
|
||||
<flux:button class="mt-2 cursor-pointer" variant="filled" icon="refresh-cw" x-on:click="$dispatch('fetchMessages')">Refresh</flux:button>
|
||||
<flux:button class="cursor-pointer inbox-btn" variant="filled" icon="inbox" x-on:click="window.location.href = '{{ route('mailbox') }}'">Inbox</flux:button>
|
||||
{{-- <flux:button class="mt-2 cursor-pointer" variant="filled" icon="refresh-cw" x-on:click="Livewire.dispatch('fetchMessages')">Refresh</flux:button>--}}
|
||||
<button type="button" class="relative items-center font-medium justify-center gap-2 whitespace-nowrap disabled:opacity-75 dark:disabled:opacity-75 disabled:cursor-default disabled:pointer-events-none h-10 text-sm rounded-lg px-4 inline-flex bg-zinc-800/5 hover:bg-zinc-800/10 dark:bg-white/10 dark:hover:bg-white/20 text-zinc-800 dark:text-white [[data-flux-button-group]_&]:border-e [:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-e-0 [[data-flux-button-group]_&]:border-zinc-200/80 dark:[[data-flux-button-group]_&]:border-zinc-900/50 mt-2 cursor-pointer" data-flux-button="data-flux-button" data-flux-group-target="data-flux-group-target" x-on:click="Livewire.dispatch('fetchMessages'); document.getElementById('refresh-icon').classList.add('animate-spin')">
|
||||
<svg id="refresh-icon" class="shrink-0 [:where(&)]:size-4" data-flux-icon="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-slot="icon">
|
||||
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
|
||||
<path d="M21 3v5h-5"></path>
|
||||
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
|
||||
<path d="M8 16H3v5"></path>
|
||||
</svg>
|
||||
|
||||
{{ __('Refresh') }}
|
||||
</button>
|
||||
</flux:navlist>
|
||||
<img src="https://placehold.co/300x250?font=roboto" alt="sideAds" />
|
||||
<flux:spacer />
|
||||
@@ -34,8 +44,9 @@
|
||||
<flux:navlist.item href="#">Contacts</flux:navlist.item>
|
||||
<flux:separator variant="subtle" />
|
||||
</flux:navlist>
|
||||
<p>© {{ config('app.settings.app_name') }}</p>
|
||||
<p class="text-sm font-medium">© {{ config('app.settings.app_name') }}</p>
|
||||
</flux:sidebar>
|
||||
|
||||
<flux:header sticky container class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700">
|
||||
<flux:sidebar.toggle class="lg:hidden" icon="bars-3" inset="left" />
|
||||
<flux:separator vertical class="lg:hidden lg:mx-0 mx-3" />
|
||||
@@ -43,14 +54,27 @@
|
||||
<livewire:frontend.email type="header"/>
|
||||
<flux:spacer />
|
||||
<flux:navbar class="me-4">
|
||||
<flux:tooltip content="Language">
|
||||
<flux:button x-data x-on:click="" icon="language" variant="subtle" aria-label="Language" />
|
||||
</flux:tooltip>
|
||||
|
||||
<flux:dropdown position="top" align="start">
|
||||
<flux:tooltip content="Language">
|
||||
<flux:button x-data x-on:click="" icon="language" variant="subtle" aria-label="Language" />
|
||||
</flux:tooltip>
|
||||
<flux:menu>
|
||||
<span>
|
||||
@foreach(config('app.locales') as $item => $language)
|
||||
<span x-on:click="window.location.href ='{{ route('locale', $language) }}'" role="menuitem" class="cursor-pointer group dark:hover:bg-zinc-600/75 dark:hover:text-gray-300 dark:focus:bg-zinc-600/75 dark:focus:text-gray-300 flex items-center px-4 py-2 dark:text-gray-400 text-gray-700 hover:text-gray-900 focus:text-gray-900 text-sm leading-5 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none truncate">{{ config('app.locales_text')[$item] }}</span>
|
||||
@endforeach
|
||||
</span>
|
||||
</flux:menu>
|
||||
</flux:dropdown>
|
||||
|
||||
<flux:tooltip content="Switch Theme">
|
||||
<flux:button x-data x-on:click="$flux.dark = ! $flux.dark" icon="moon" variant="subtle" aria-label="Toggle dark mode" />
|
||||
</flux:tooltip>
|
||||
<flux:dropdown position="top" align="start">
|
||||
<flux:tooltip content="Account">
|
||||
<flux:button icon="circle-user-round" variant="subtle" aria-label="Account" />
|
||||
</flux:tooltip>
|
||||
<flux:menu>
|
||||
<flux:text class="p-1">You are signed in as:</flux:text>
|
||||
<div wire:ignore>
|
||||
@@ -71,57 +95,92 @@
|
||||
</flux:dropdown>
|
||||
</flux:navbar>
|
||||
|
||||
<flux:modal name="create-account" class="md:w-96">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg">Generate Your Temporary Email</flux:heading>
|
||||
</div>
|
||||
|
||||
|
||||
<livewire:frontend.action action="customEmail" />
|
||||
|
||||
<flux:separator text="or" />
|
||||
|
||||
<div class="flex w-full">
|
||||
<div class="w-1/2">
|
||||
<livewire:frontend.action action="random" />
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<livewire:frontend.action action="gmail" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</flux:modal>
|
||||
|
||||
<flux:modal name="delete-account" class="min-w-[22rem]">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg">Delete account?</flux:heading>
|
||||
<flux:text class="mt-2">
|
||||
<p>You're about to delete this account.</p>
|
||||
</flux:text>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:modal.close>
|
||||
<flux:button variant="ghost">Cancel</flux:button>
|
||||
</flux:modal.close>
|
||||
<livewire:frontend.action action="delete" />
|
||||
</div>
|
||||
</div>
|
||||
</flux:modal>
|
||||
</flux:header>
|
||||
|
||||
|
||||
<flux:modal name="create-account" class="md:w-96">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg">Generate Your Temporary Email</flux:heading>
|
||||
</div>
|
||||
|
||||
|
||||
<livewire:frontend.action action="customEmail" />
|
||||
|
||||
<flux:separator text="or" />
|
||||
|
||||
<div class="flex w-full">
|
||||
<div class="w-1/2">
|
||||
<livewire:frontend.action action="random" />
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<livewire:frontend.action action="gmail" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</flux:modal>
|
||||
|
||||
<flux:modal name="delete-account" class="min-w-[22rem]">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg">Delete account?</flux:heading>
|
||||
<flux:text class="mt-2">
|
||||
<p>You're about to delete this account.</p>
|
||||
</flux:text>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<flux:spacer />
|
||||
<flux:modal.close>
|
||||
<flux:button variant="ghost">Cancel</flux:button>
|
||||
</flux:modal.close>
|
||||
<livewire:frontend.action action="delete" />
|
||||
</div>
|
||||
</div>
|
||||
</flux:modal>
|
||||
|
||||
<flux:main class="dark:bg-gray-900 bg-gray-100">
|
||||
{{ $slot }}
|
||||
</flux:main>
|
||||
<!-- Toast Container -->
|
||||
|
||||
<div id="toast-container" class="fixed top-5 left-1/2 transform -translate-x-1/2 z-50 space-y-4"></div>
|
||||
|
||||
@fluxScripts
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
setTimeout(() => {
|
||||
const email = '{{ App\Models\ZEmail::getEmail(true) }}';
|
||||
const add_mail_in_title = "{{ json_decode(config('app.settings.configuration_settings'))->add_mail_in_title ? 'yes' : 'no' }}"
|
||||
if(add_mail_in_title === 'yes') {
|
||||
document.title += ` - ${email}`;
|
||||
}
|
||||
Livewire.dispatch('updateEmail');
|
||||
}, 2000);
|
||||
|
||||
|
||||
document.addEventListener('stopLoader', () => {
|
||||
document.querySelectorAll('#refresh-icon').forEach(el => {
|
||||
setTimeout(() => {
|
||||
el.classList.remove('animate-spin');
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
let counter = parseInt({{ json_decode(config('app.settings.configuration_settings'))->fetch_seconds }});
|
||||
|
||||
setInterval(() => {
|
||||
if (counter === 0 && document.getElementById('imap-error') === null && !document.hidden) {
|
||||
document.querySelectorAll('#refresh-icon').forEach(el => {
|
||||
el.classList.add('animate-spin');
|
||||
});
|
||||
Livewire.dispatch('fetchMessages');
|
||||
counter = parseInt({{ json_decode(config('app.settings.configuration_settings'))->fetch_seconds }});
|
||||
}
|
||||
|
||||
counter--;
|
||||
if(document.hidden) {
|
||||
counter = 1;
|
||||
}
|
||||
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<div class="shrink-0 text-base text-gray-500 select-none sm:text-sm/6 mr-1.5">
|
||||
<flux:icon.mail variant="mini"/>
|
||||
</div>
|
||||
<input type="text" name="username" id="username" wire:model.defer="username" class="block min-w-0 grow py-2 pr-3 pl-1 text-base dark:text-white text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6" placeholder="Enter Username">
|
||||
<input type="text" name="username" id="username" autocomplete="false" wire:model.defer="username" class="block min-w-0 grow py-2 pr-3 pl-1 text-base dark:text-white text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6" placeholder="Enter Username">
|
||||
<div class="grid shrink-0 grid-cols-1 focus-within:relative">
|
||||
<select id="domain" name="domain" aria-label="Domain" wire:model="domain" class="col-start-1 row-start-1 w-full appearance-none rounded-md py-1.5 pr-7 pl-3 text-base text-gray-500 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 dark:focus:outline-white focus:outline-zinc-900 sm:text-sm/6">
|
||||
<option class="dark:bg-zinc-700 dark:text-white bg-zinc-100 accent-gray-700" selected>Choose a domain</option>
|
||||
@@ -32,8 +32,8 @@
|
||||
|
||||
<div class="flex mt-6">
|
||||
<div class="flex w-full">
|
||||
<flux:button x-on:click="$dispatch('closeModal')" class="w-1/2" type="submit" variant="outline">Cancel</flux:button>
|
||||
<flux:button class="ml-2 w-1/2 btn-success" type="submit" variant="primary">Create Account</flux:button>
|
||||
<flux:button x-on:click="$dispatch('closeModal')" class="w-1/2 cursor-pointer" variant="outline">Cancel</flux:button>
|
||||
<flux:button class="ml-2 w-1/2 btn-success cursor-pointer" type="submit" variant="primary">Create Account</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,47 +1,51 @@
|
||||
<div class="inbox-list cursor-pointer" x-on:click="" data-message-id="{{ $message['id'] }}">
|
||||
<div class="block rounded-lg bg-white shadow-md dark:bg-zinc-700 text-left">
|
||||
<div class="flex items-center px-4 py-4 sm:px-6">
|
||||
<div class="flex flex-1 items-center min-w-0">
|
||||
<div class="flex-shrink-0">
|
||||
@if($messageId)
|
||||
<livewire:frontend.components.message :message="$message" />
|
||||
@else
|
||||
<div class="inbox-list cursor-pointer" wire:click="setMessageId({{ $message['id'] }})" data-message-id="{{ $message['id'] }}">
|
||||
<div class="block rounded-lg bg-white shadow-md dark:bg-zinc-700 text-left">
|
||||
<div class="flex items-center px-4 py-4 sm:px-6">
|
||||
<div class="flex flex-1 items-center min-w-0">
|
||||
<div class="flex-shrink-0">
|
||||
<span class="relative inline-block">
|
||||
<img src="{{ asset('images/user.webp') }}" class="size-12" alt="inbox-logo" />
|
||||
<span class="shadow-solid absolute bottom-0 right-0 block w-3 h-3 dark:text-gray-500 text-white bg-amber-300 dark:bg-amber-400 rounded-full"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-1 px-4 min-w-0 md:grid md:gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<div class="dark:text-accent text-accent-content text-sm font-medium leading-5 truncate">
|
||||
{{ $message['sender_name'] }}
|
||||
</div>
|
||||
<div class="flex items-center mt-2 dark:text-gray-400 text-gray-500 text-sm leading-5">
|
||||
<svg fill="currentColor" viewBox="0 0 20 20"
|
||||
class="flex-shrink-0 mr-1.5 w-5 h-5 text-gray-400">
|
||||
<path fill-rule="evenodd"
|
||||
d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884zM18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span class="truncate">{{ $message['sender_email'] }}</span></div>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<div class="flex-1 px-4 min-w-0 md:grid md:gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<div class="dark:text-gray-300 text-gray-900 text-sm leading-5 truncate">
|
||||
{{ $message['subject'] }}
|
||||
<div class="dark:text-accent text-accent-content text-sm font-medium leading-5 truncate">
|
||||
{{ $message['sender_name'] }}
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center mt-2 text-gray-400 dark:text-gray-400 text-sm leading-5 truncate">
|
||||
{{ Str::limit($message['contentText'], 100) }}
|
||||
<div class="flex items-center mt-2 dark:text-gray-400 text-gray-500 text-sm leading-5">
|
||||
<svg fill="currentColor" viewBox="0 0 20 20"
|
||||
class="flex-shrink-0 mr-1.5 w-5 h-5 text-gray-400">
|
||||
<path fill-rule="evenodd"
|
||||
d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884zM18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span class="truncate">{{ $message['sender_email'] }}</span></div>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<div>
|
||||
<div class="dark:text-gray-300 text-gray-900 text-sm leading-5 truncate">
|
||||
{{ $message['subject'] }}
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center mt-2 text-gray-400 dark:text-gray-400 text-sm leading-5 truncate">
|
||||
{{ Str::limit($message['contentText'], 100) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<svg fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5 text-gray-400">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<svg fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5 text-gray-400">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
<span>
|
||||
<div class="-mx-2">
|
||||
<nav class="flex items-center">
|
||||
<flux:icon.chevron-left variant="mini"/>
|
||||
<flux:text>Back</flux:text>
|
||||
</nav>
|
||||
|
||||
<div class="mt-2 md:flex md:items-center md:justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<h2 class="dark:text-gray-300 text-gray-900 text-2xl font-bold leading-7 sm:truncate">
|
||||
{{ $message['subject'] }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex flex-shrink-0 mt-4 overflow-y-auto md:ml-4 md:mt-0 gap-2">
|
||||
<flux:button iconVariant="mini" iconLeading="download">Download</flux:button>
|
||||
<flux:button iconVariant="mini" iconLeading="file">Source</flux:button>
|
||||
<flux:button iconVariant="mini" iconLeading="printer">Print</flux:button>
|
||||
<flux:button iconVariant="mini" iconLeading="trash">Delete</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 px-4 py-5 bg-white border-b border-gray-200 dark:border-gray-900 shadow overflow-hidden sm:px-6 sm:rounded-md">
|
||||
<div class="flex flex-wrap items-center justify-between -ml-4 -mt-4 sm:flex-nowrap">
|
||||
<div class="ml-4 mt-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="{{ asset('images/user.webp') }}" class="size-12" alt="inbox-logo" />
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<div class="text-gray-700 text-lg font-medium leading-6">
|
||||
{{ $message['sender_name'] }}
|
||||
<span class="text-gray-700 text-sm font-normal leading-5">{{ $message['sender_email'] }}</span>
|
||||
</div>
|
||||
<div class="flex items-center mt-2 text-gray-500 text-sm leading-5">
|
||||
<svg fill="currentColor" viewBox="0 0 20 20" class="flex-shrink-0 mr-1.5 w-5 h-5 text-gray-400">
|
||||
<path fill-rule="evenodd" d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884zM18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span class="truncate"><a href="mailto:{{ $message['sender_email'] }}"
|
||||
class="ml-1">{{ $message['sender_email'] }};</a></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-shrink-0 ml-4 mt-4">
|
||||
<time datetime="2025-04-24T10:11:55+00:00" class="text-gray-500 truncate">
|
||||
{{ $message['datediff'] }}
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?si=fAMHSQ_S73NGoCMX" class="w-full iframe-min-height">
|
||||
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
@@ -1,6 +1,7 @@
|
||||
<span>
|
||||
@if($type === "header")<p class="px-2 text-sm cursor-pointer truncate">{{ $email ?? __('...') }}</p>
|
||||
@else<flux:text class="p-1" variant="subtle">{{ $email ?? __('...') }}</flux:text>
|
||||
@if($type === "header")
|
||||
<p class="px-2 text-sm font-medium cursor-pointer truncate" id="copyEmail" x-on:click="$dispatch('copyEmail')">{{ $email ?? __('...') }}</p>
|
||||
@else<flux:text class="p-1" variant="subtle">{{ $email ?? __('...') }}</flux:text>
|
||||
@if($list)
|
||||
@foreach(array_reverse($emails) as $email_list_item)
|
||||
<span>
|
||||
@@ -9,5 +10,5 @@
|
||||
</span>
|
||||
@endforeach
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
</span>
|
||||
|
||||
@@ -1,9 +1,165 @@
|
||||
<span>
|
||||
<div x-data="{ show: false, id: 0 }">
|
||||
@if($messages)
|
||||
@foreach(array_reverse($messages) as $message)
|
||||
<livewire:frontend.components.mail :message="$message" />
|
||||
@endforeach
|
||||
<div class="mailbox">
|
||||
<div x-show="!show" class="list">
|
||||
<flux:heading class="mb-3" size="xl" level="1">Inbox</flux:heading>
|
||||
<div class="mb-3"></div>
|
||||
@foreach(array_reverse($messages) as $message)
|
||||
<div class="inbox-list cursor-pointer" x-on:click="show = true; id = {{ $message['id'] }};" data-id="{{ $message['id'] }}">
|
||||
<div class="block rounded-lg bg-white shadow-md dark:bg-zinc-700 text-left">
|
||||
<div class="flex items-center px-4 py-4 sm:px-6">
|
||||
<div class="flex flex-1 items-center min-w-0">
|
||||
<div class="flex-shrink-0">
|
||||
<span class="relative inline-block">
|
||||
{{-- <img src="{{ asset('images/user.webp') }}" class="size-12" alt="inbox-logo" />--}}
|
||||
<span class="{{ $message['sender_photo']['dark'] }} {{ $message['sender_photo']['light'] }} inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-11 text-[22px] transition">
|
||||
<span id="sender-logo" class="font-medium leading-none text-gray-100 dark:text-gray-300 dark:group-hover:text-gray-200 group-hover:text-gray-700 truncate">{{ strtoupper(substr($message['sender_name'] ?: $message['sender_email'], 0, 1) ) }}</span>
|
||||
</span>
|
||||
@if(!$message['is_seen'])
|
||||
<span class="shadow-solid absolute bottom-0 right-0 block w-3 h-3 dark:text-gray-500 text-white bg-amber-300 dark:bg-amber-400 rounded-full"></span>
|
||||
@endif
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-1 px-4 min-w-0 md:grid md:gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<div class="dark:text-accent text-accent-content text-sm font-medium leading-5 truncate">
|
||||
{{ $message['sender_name'] }}
|
||||
</div>
|
||||
<div class="flex items-center mt-2 dark:text-gray-400 text-gray-500 text-sm leading-5">
|
||||
<svg fill="currentColor" viewBox="0 0 20 20"
|
||||
class="flex-shrink-0 mr-1.5 w-5 h-5 text-gray-400">
|
||||
<path fill-rule="evenodd"
|
||||
d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884zM18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span class="truncate">{{ $message['sender_email'] }}</span></div>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<div>
|
||||
<div class="dark:text-gray-300 text-gray-900 text-sm leading-5 truncate">
|
||||
{{ $message['subject'] }}
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center mt-2 text-gray-400 dark:text-gray-400 text-sm leading-5 truncate">
|
||||
{{ Str::limit($message['contentText'], 100) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<svg fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5 text-gray-400">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<div x-show="show" class="message">
|
||||
@foreach(array_reverse($messages) as $message)
|
||||
<div x-show="id === {{ $message['id'] }}" id="message-{{ $message['id'] }}">
|
||||
<textarea class="hidden">To: {{ $this->email ?? "" }} From: "{{ $message['sender_name'] }}" <{{ $message['sender_email'] }}> Subject: {{ $message['subject'] }} Date: {{ $message['date'] }} Content-Type: text/html {{ $message['content'] }}</textarea>
|
||||
<span>
|
||||
<div class="-mx-2">
|
||||
<nav class="flex items-center cursor-pointer" x-on:click="show = false">
|
||||
<flux:icon.chevron-left variant="mini"/>
|
||||
<flux:text>Back</flux:text>
|
||||
</nav>
|
||||
|
||||
<div class="mt-2 md:flex md:items-center md:justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<h2 class="dark:text-gray-300 text-gray-900 text-2xl font-bold leading-7 sm:truncate">
|
||||
{{ $message['subject'] }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex flex-shrink-0 mt-4 overflow-y-auto md:ml-4 md:mt-0 gap-2">
|
||||
<flux:button iconVariant="mini" iconLeading="download" x-on:click="$dispatch('downloadFile', { download_id: {{ $message['id'] }} })" class="cursor-pointer">Download</flux:button>
|
||||
{{-- <flux:button iconVariant="mini" iconLeading="file">Source</flux:button>--}}
|
||||
<flux:button iconVariant="mini" iconLeading="printer" x-on:click="$dispatch('printFile', { print_id: {{ $message['id'] }} })" class="cursor-pointer">Print</flux:button>
|
||||
<flux:button iconVariant="mini" iconLeading="trash" x-on:click="show = false; id = 0; document.querySelector(`[data-id='{{ $message['id'] }}']`).remove()" wire:click="delete({{ $message['id'] }})" class="cursor-pointer" style="color: #F14743;">Delete</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 px-4 py-5 bg-white border-b border-gray-200 dark:border-gray-900 shadow overflow-hidden sm:px-6 sm:rounded-md">
|
||||
<div class="flex flex-wrap items-center justify-between -ml-4 -mt-4 sm:flex-nowrap">
|
||||
<div class="ml-4 mt-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<span class="{{ $message['sender_photo']['dark'] }} {{ $message['sender_photo']['light'] }} inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-11 text-[22px] transition">
|
||||
<span id="sender-logo" class="font-medium leading-none text-gray-100 dark:text-gray-300 dark:group-hover:text-gray-200 group-hover:text-gray-700 truncate">{{ strtoupper(substr($message['sender_name'] ?: $message['sender_email'], 0, 1) ) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<div class="text-gray-700 text-lg font-medium leading-6">
|
||||
{{ $message['sender_name'] }}
|
||||
<span class="text-gray-700 text-sm font-normal leading-5">{{ $message['sender_email'] }}</span>
|
||||
</div>
|
||||
<div class="flex items-center mt-2 text-gray-500 text-sm leading-5">
|
||||
<svg fill="currentColor" viewBox="0 0 20 20" class="flex-shrink-0 mr-1.5 w-5 h-5 text-gray-400">
|
||||
<path fill-rule="evenodd" d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884zM18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span class="truncate"><a href="mailto:{{ $message['sender_email'] }}"
|
||||
class="ml-1">{{ $email ?? "" }};</a></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-shrink-0 ml-4 mt-4">
|
||||
<time datetime="2025-04-24T10:11:55+00:00" class="text-gray-500 truncate">
|
||||
{{ $message['datediff'] }}
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<iframe srcdoc="{{ $message['content'] }}" class="w-full iframe-min-height">
|
||||
</iframe>
|
||||
</div>
|
||||
|
||||
@if (count($message['attachments']) > 0)
|
||||
<div class="grid grid-cols-1 mt-2 text-sm leading-5 text-gray-900 lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2">
|
||||
@foreach ($message['attachments'] as $attachment)
|
||||
<button class="mb-2 mr-2 border border-gray-200 rounded-md text-sm leading-5 hover:text-gray-500 cursor-pointer" onclick="window.open('{{ $attachment['url'] }}', '_blank')">
|
||||
<div class="py-3 pl-3 pr-4">
|
||||
<div class="flex flex-1 items-center">
|
||||
<svg class="h-5 w-5 flex-shrink-0 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span class="ml-2 flex-1 truncate">{{ $attachment['file'] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<flux:text>{{ $initial ? __('Empty Inbox') : __('Fetching') . '...' }}</flux:text>
|
||||
<flux:heading class="mb-3" size="xl" level="1">Inbox</flux:heading>
|
||||
<div class="mb-3"></div>
|
||||
|
||||
<div class="block rounded-lg bg-white shadow-md dark:bg-zinc-700 items-center">
|
||||
<div class="flex mailbox-min-height w-full items-center justify-center px-4 py-4 sm:px-6">
|
||||
<div class="waitingBox flex flex-col items-center relative -space-y-4">
|
||||
<div class="absolute -mt-4 inset-0 flex justify-center items-center animate-spin duration-2000">
|
||||
<flux:icon.refresh-cw variant="mini" style="color: #ffffdf" />
|
||||
</div>
|
||||
<svg width="120" height="124" viewBox="0 0 92 87" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M26 54.37V38.9C26.003 37.125 26.9469 35.4846 28.48 34.59L43.48 25.84C45.027 24.9468 46.933 24.9468 48.48 25.84L63.48 34.59C65.0285 35.4745 65.9887 37.1167 66 38.9V54.37C66 57.1314 63.7614 59.37 61 59.37H31C28.2386 59.37 26 57.1314 26 54.37Z" fill="#8C92A5"></path>
|
||||
<path d="M46 47.7L26.68 36.39C26.2325 37.1579 25.9978 38.0312 26 38.92V54.37C26 57.1314 28.2386 59.37 31 59.37H61C63.7614 59.37 66 57.1314 66 54.37V38.9C66.0022 38.0112 65.7675 37.1379 65.32 36.37L46 47.7Z" fill="#CDCDD8"></path>
|
||||
<path d="M27.8999 58.27C28.7796 58.9758 29.8721 59.3634 30.9999 59.37H60.9999C63.7613 59.37 65.9999 57.1314 65.9999 54.37V38.9C65.9992 38.0287 65.768 37.1731 65.3299 36.42L27.8999 58.27Z" fill="#E5E5F0"></path>
|
||||
</svg>
|
||||
<flux:text>{{ $initial ? __('Empty Inbox') : __('Fetching') }}</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endif
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,63 @@
|
||||
<div>
|
||||
<flux:heading class="mb-3" size="xl" level="1">Inbox</flux:heading>
|
||||
<div class="mb-3"></div>
|
||||
<livewire:frontend.mailbox />
|
||||
<div class="flex justify-center items-center py-3">
|
||||
<div class="flex items-center">
|
||||
<div class="group relative mx-auto w-full overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] transition-all duration-300 ease-in-out hover:bg-gradient-to-r hover:from-zinc-600 hover:via-zinc-800 hover:to-zinc-700">
|
||||
<div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
|
||||
<div class="space-y-4 w-full">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center items-center">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-1">
|
||||
<!-- Card 1 -->
|
||||
<div class="flex items-center">
|
||||
<div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] transition-all duration-300 ease-in-out hover:bg-gradient-to-r hover:from-zinc-600 hover:via-zinc-800 hover:to-zinc-700">
|
||||
<div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
|
||||
<div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
|
||||
<div class="space-y-4">
|
||||
<flux:icon.shield-check/>
|
||||
<p class="text-lg font-semibold dark:text-white text-accent-content">Secure Temporary Email</p>
|
||||
<p class="font-md text-slate-500">
|
||||
Your temporary email address is protected by a reliable password, generated randomly in your browser, providing a barrier against unauthorized access and potential breaches.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="flex items-center">
|
||||
<div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] transition-all duration-300 ease-in-out hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-700">
|
||||
<div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
|
||||
<div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
|
||||
<div class="space-y-4">
|
||||
<flux:icon.user />
|
||||
<p class="text-lg font-semibold dark:text-white text-accent-content">Instant Disposable Email</p>
|
||||
<p class="font-md text-slate-500">
|
||||
No more wasting precious time on registrations, form-filling, or solving captchas. Your temp email address is ready for use instantly, putting you in control effortlessly.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="flex items-center">
|
||||
<div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] transition-all duration-300 ease-in-out hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-600">
|
||||
<div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
|
||||
<div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
|
||||
<div class="space-y-4">
|
||||
<flux:icon.clock />
|
||||
<p class="text-lg font-semibold dark:text-white text-accent-content">Fast and Anonymous Email Service</p>
|
||||
<p class="font-md text-slate-500">Experience fast message delivery without delays or restrictions. Our service is finely tuned for maximum delivery speed, ensuring you stay connected seamlessly.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user