879 lines
67 KiB
PHP
879 lines
67 KiB
PHP
<div class="flex h-full bg-zinc-950 overflow-hidden relative"
|
||
data-requires-reverb="true"
|
||
x-data="{
|
||
sidebarOpen: window.innerWidth >= 1280,
|
||
selectedId: @entangle('selectedEmailId'),
|
||
mobileView: 'list',
|
||
qrModal: false,
|
||
qrAddress: '',
|
||
generateQR(address) {
|
||
this.qrAddress = address;
|
||
this.qrModal = true;
|
||
this.$nextTick(() => {
|
||
new QRious({
|
||
element: document.getElementById('qr-canvas'),
|
||
value: address,
|
||
size: 200,
|
||
background: 'transparent',
|
||
foreground: '#09090b',
|
||
level: 'H'
|
||
});
|
||
});
|
||
}
|
||
}"
|
||
x-init="$watch('selectedId', value => { if(value && window.innerWidth < 1024) mobileView = 'detail' }); $watch('mobileView', value => { if(value === 'list' && window.innerWidth < 1024) selectedId = null })"
|
||
@resize.window="if (window.innerWidth >= 1280) sidebarOpen = true">
|
||
|
||
<!-- ═══ Cinematic Creation Overlay ═══ -->
|
||
<div x-show="$wire.isCreatingFirstMailbox"
|
||
x-transition:enter="transition ease-out duration-700"
|
||
x-transition:enter-start="opacity-0 backdrop-blur-none"
|
||
x-transition:enter-end="opacity-100 backdrop-blur-md"
|
||
x-transition:leave="transition ease-in duration-500"
|
||
x-transition:leave-start="opacity-100 backdrop-blur-md"
|
||
x-transition:leave-end="opacity-0 backdrop-blur-none"
|
||
class="fixed inset-0 z-[200] bg-zinc-950/90 flex flex-col items-center justify-center p-8 text-center"
|
||
x-init="
|
||
if ($wire.isCreatingFirstMailbox) { setTimeout(() => $wire.finishAutoCreation(), 1000); }
|
||
$watch('$wire.isCreatingFirstMailbox', value => { if(value) setTimeout(() => $wire.finishAutoCreation(), 1000) });
|
||
"
|
||
style="display: none;">
|
||
|
||
<!-- Logo Animation -->
|
||
<div class="mb-12 animate-pulse transition-all duration-1000 ease-in-out"
|
||
x-bind:class="{ 'scale-110 opacity-100': $wire.isCreatingFirstMailbox, 'scale-90 opacity-0': !$wire.isCreatingFirstMailbox }">
|
||
<x-bento.logo size="lg" />
|
||
</div>
|
||
|
||
<div class="w-24 h-24 relative mb-12 transform-gpu">
|
||
<div class="absolute inset-0 border-4 border-pink-500/10 rounded-full transition-all duration-700"></div>
|
||
<div class="absolute inset-0 border-4 border-pink-500 border-t-transparent animate-[spin_1.5s_cubic-bezier(0.4,0,0.2,1)_infinite] rounded-full shadow-[0_0_30px_rgba(236,72,153,0.3)]"></div>
|
||
<div class="absolute inset-4 bg-pink-500/20 rounded-full blur-3xl animate-pulse"></div>
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<svg class="w-10 h-10 text-pink-500 animate-pulse transition-transform duration-700 ease-in-out hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex flex-col items-center max-w-sm space-y-4">
|
||
<h2 class="text-xl font-black text-white uppercase tracking-[0.3em] font-mono animate-slide-up bg-clip-text text-transparent bg-gradient-to-r from-white via-zinc-200 to-zinc-400">Establishing Secure Identity</h2>
|
||
<p class="text-[11px] text-zinc-500 font-bold uppercase tracking-widest leading-relaxed opacity-0 animate-slide-up [animation-delay:400ms]">
|
||
Generating unique encryption keys and provisioning anonymous routing routes...
|
||
</p>
|
||
<div class="flex gap-1.5 opacity-0 animate-slide-up [animation-delay:800ms]">
|
||
<div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-bounce [animation-delay:-0.3s]"></div>
|
||
<div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-bounce [animation-delay:-0.15s]"></div>
|
||
<div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-bounce"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Global Confirmation Modal -->
|
||
<x-bento.confirm-modal />
|
||
|
||
<!-- Mobile Sidebar Backdrop -->
|
||
<div x-show="sidebarOpen"
|
||
x-transition:enter="transition ease-out duration-300"
|
||
x-transition:enter-start="opacity-0"
|
||
x-transition:enter-end="opacity-100"
|
||
x-transition:leave="transition ease-in duration-200"
|
||
x-transition:leave-start="opacity-100"
|
||
x-transition:leave-end="opacity-0"
|
||
@click="sidebarOpen = false"
|
||
class="fixed inset-0 bg-zinc-950/60 backdrop-blur-sm z-40 xl:hidden"></div>
|
||
|
||
<!-- Component Sidebar -->
|
||
<aside class="fixed xl:relative inset-y-0 left-0 flex-shrink-0 bg-zinc-900/40 border-r border-white/5 flex flex-col transition-all duration-300 z-50 xl:z-30"
|
||
:class="{
|
||
'w-64 translate-x-0 shadow-2xl xl:shadow-none': sidebarOpen,
|
||
'-translate-x-full xl:translate-x-0': !sidebarOpen,
|
||
'xl:w-64': sidebarOpen && window.innerWidth >= 1280,
|
||
'xl:w-20': !sidebarOpen && window.innerWidth >= 1280
|
||
}">
|
||
<div class="h-16 flex items-center justify-between px-6 border-b border-white/5">
|
||
<a href="/" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
|
||
<x-bento.logo size="sm" x-data="{ showText: sidebarOpen }" />
|
||
</a>
|
||
|
||
<!-- Mobile Close Button -->
|
||
<button @click="sidebarOpen = false" class="xl:hidden p-1.5 rounded-lg hover:bg-white/5 text-zinc-500 hover:text-white transition-all cursor-pointer">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Sidebar Content -->
|
||
<div class="flex-1 overflow-y-auto py-6 px-4 space-y-8 scrollbar-hide">
|
||
<!-- Navigation -->
|
||
<nav class="space-y-1">
|
||
<button @click="$wire.set('activeFolder', 'inbox')"
|
||
class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all group cursor-pointer"
|
||
:class="$wire.activeFolder === 'inbox' ? 'bg-pink-500/10 text-pink-500 border border-pink-500/20 shadow-[0_0_20px_rgba(236,72,153,0.05)]' : 'text-zinc-500 hover:text-zinc-300 hover:bg-white/5'">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg>
|
||
<span class="font-medium text-sm" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 hidden'">Inbox</span>
|
||
@if($unreadCount > 0)
|
||
<span class="ml-auto text-[10px] font-bold px-1.5 py-0.5 rounded bg-pink-500/20 text-pink-500" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 hidden'">{{ $unreadCount }}</span>
|
||
@endif
|
||
</button>
|
||
</nav>
|
||
|
||
<!-- Active Mailbox Control -->
|
||
<div :class="sidebarOpen ? 'opacity-100' : 'opacity-0 hidden'">
|
||
@if($currentMailbox)
|
||
<div class="p-4 rounded-2xl bg-zinc-900 border border-white/5 relative overflow-hidden group mb-4">
|
||
<div class="absolute top-0 right-0 w-24 h-24 bg-pink-500/5 rounded-full blur-2xl -z-10"></div>
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-1.5 h-1.5 rounded-full animate-pulse transition-colors duration-500"
|
||
:class="wsConnected ? 'bg-emerald-500' : 'bg-rose-500'"></div>
|
||
<span class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Active Mailbox</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<button @click="generateQR('{{ $currentMailbox->address }}')"
|
||
class="p-1.5 rounded-lg bg-white/5 text-zinc-500 hover:text-white hover:bg-white/10 transition-all cursor-pointer"
|
||
title="QR Code">
|
||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" />
|
||
</svg>
|
||
</button>
|
||
<button @click="navigator.clipboard.writeText('{{ $currentMailbox->address }}'); addToast('Address copied to clipboard', 'success')"
|
||
class="p-1.5 rounded-lg bg-white/5 text-zinc-500 hover:text-white hover:bg-white/10 transition-all cursor-pointer"
|
||
title="Copy Address">
|
||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
|
||
</button>
|
||
<button @click="$dispatch('open-confirm-modal', {
|
||
title: 'Burn Mailbox?',
|
||
message: 'Are you sure you want to delete this mailbox? All emails will be permanently lost.',
|
||
confirmLabel: 'Burn Now',
|
||
type: 'danger',
|
||
action: () => $wire.deleteMailbox({{ $currentMailbox->id }})
|
||
})"
|
||
class="p-1.5 rounded-lg bg-rose-500/10 text-rose-500/60 hover:text-rose-500 hover:bg-rose-500/20 transition-all cursor-pointer"
|
||
title="Delete Session">
|
||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="text-[11px] font-mono text-white break-all mb-4">{{ $currentMailbox->address }}</div>
|
||
<div class="space-y-2"
|
||
x-data="{
|
||
expiresAt: '{{ $currentMailbox->expires_at?->toIso8601String() }}',
|
||
created_at: '{{ $currentMailbox->created_at?->toIso8601String() }}',
|
||
timeLeft: 'Never',
|
||
percent: 100,
|
||
isExpired: false,
|
||
init() {
|
||
if (!this.expiresAt) return;
|
||
|
||
this.update();
|
||
setInterval(() => this.update(), 1000);
|
||
},
|
||
update() {
|
||
const end = new Date(this.expiresAt).getTime();
|
||
const start = new Date(this.created_at).getTime();
|
||
const now = new Date().getTime();
|
||
|
||
if (now > end) {
|
||
this.timeLeft = 'Expired';
|
||
this.percent = 0;
|
||
if (!this.isExpired) {
|
||
this.isExpired = true;
|
||
$wire.deleteMailbox({{ $currentMailbox->id }});
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Calculate time string
|
||
const diff = end - now;
|
||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||
const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||
const secs = Math.floor((diff % (1000 * 60)) / 1000);
|
||
|
||
if (days > 0) {
|
||
this.timeLeft = `${days}d ${hours}h ${mins}m ${secs}s`;
|
||
} else if (hours > 0) {
|
||
this.timeLeft = `${hours}h ${mins}m ${secs}s`;
|
||
} else if (mins > 0) {
|
||
this.timeLeft = `${mins}m ${secs}s`;
|
||
} else {
|
||
this.timeLeft = `${secs}s`;
|
||
}
|
||
|
||
// Calculate percentage based on total lifespan vs remaining
|
||
const totalLifespan = end - start;
|
||
const timeRemaining = end - now;
|
||
this.percent = Math.max(0, Math.min(100, (timeRemaining / totalLifespan) * 100));
|
||
}
|
||
}">
|
||
<div class="flex items-center justify-between text-[10px]">
|
||
<span class="text-zinc-500 uppercase font-black tracking-tighter">Expires In</span>
|
||
<span class="text-pink-500 font-mono" x-text="timeLeft"></span>
|
||
</div>
|
||
<div class="h-1 bg-white/5 rounded-full overflow-hidden">
|
||
<div class="h-full bg-gradient-to-r from-pink-500 to-emerald-500 transition-all duration-1000 ease-linear" :style="`width: ${percent}%`"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
<!-- Controls Layout -->
|
||
<div class="space-y-6">
|
||
<!-- Create New Button -->
|
||
<button @click="$wire.set('showCreateModal', true)"
|
||
class="w-full py-3 px-4 rounded-2xl bg-white/5 border border-white/10 text-white text-xs font-bold flex items-center justify-center gap-2 hover:bg-white/10 hover:border-pink-500/30 transition-all group cursor-pointer">
|
||
<div class="w-5 h-5 rounded-lg bg-pink-500/20 text-pink-500 flex items-center justify-center group-hover:scale-110 transition-transform">
|
||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4.5v15m7.5-7.5h-15" /></svg>
|
||
</div>
|
||
Create New Mailbox
|
||
</button>
|
||
|
||
<!-- Active List -->
|
||
@if($this->active_mailboxes->where('id', '!=', $currentMailboxId)->count() > 0)
|
||
<div class="space-y-3">
|
||
<h4 class="text-[10px] font-bold text-zinc-600 uppercase tracking-[0.2em] px-3 mb-4">Your Sessions</h4>
|
||
<div class="space-y-2 max-h-48 overflow-y-auto pr-1 scrollbar-hide">
|
||
@foreach($this->active_mailboxes as $mailbox)
|
||
@if($mailbox->id !== $currentMailboxId)
|
||
<button wire:click="switchMailbox({{ $mailbox->id }})"
|
||
class="w-full p-3 rounded-xl bg-zinc-900/40 border border-white/5 text-left group hover:border-white/20 transition-all flex items-center justify-between cursor-pointer">
|
||
<div class="min-w-0 flex-1"
|
||
x-data="{
|
||
expiresAt: '{{ $mailbox->expires_at?->toIso8601String() }}',
|
||
timeLeft: 'Never',
|
||
isExpired: false,
|
||
init() {
|
||
if (!this.expiresAt) return;
|
||
this.update();
|
||
setInterval(() => this.update(), 1000); // 1-sec interval
|
||
},
|
||
update() {
|
||
const end = new Date(this.expiresAt).getTime();
|
||
const now = new Date().getTime();
|
||
|
||
if (now > end) {
|
||
this.timeLeft = 'Expired';
|
||
if (!this.isExpired) {
|
||
this.isExpired = true;
|
||
$wire.deleteMailbox({{ $mailbox->id }});
|
||
}
|
||
return;
|
||
}
|
||
|
||
const diff = end - now;
|
||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||
const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||
const secs = Math.floor((diff % (1000 * 60)) / 1000);
|
||
|
||
if (days > 0) {
|
||
this.timeLeft = `${days}d ${hours}h ${mins}m ${secs}s`;
|
||
} else if (hours > 0) {
|
||
this.timeLeft = `${hours}h ${mins}m ${secs}s`;
|
||
} else if (mins > 0) {
|
||
this.timeLeft = `${mins}m ${secs}s`;
|
||
} else {
|
||
this.timeLeft = `${secs}s`;
|
||
}
|
||
}
|
||
}">
|
||
<div class="text-[10px] font-mono text-zinc-400 truncate group-hover:text-white transition-colors">{{ $mailbox->address }}</div>
|
||
<div class="text-[9px] text-zinc-600 font-bold uppercase mt-1" x-text="timeLeft"></div>
|
||
</div>
|
||
<svg class="w-4 h-4 text-zinc-700 group-hover:text-pink-500 translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
||
</button>
|
||
@endif
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- Sidebar Footer -->
|
||
<a href="{{ auth()->check() ? route('settings.profile') : route('login') }}"
|
||
class="p-4 border-t border-white/5 flex items-center gap-4 hover:bg-white/5 transition-all group">
|
||
<div class="w-10 h-10 rounded-full bg-zinc-800 border border-white/10 flex items-center justify-center text-zinc-400 group-hover:border-pink-500/30 group-hover:bg-pink-500/10 group-hover:text-pink-500 transition-all">
|
||
@auth
|
||
<span class="text-xs font-bold">{{ auth()->user()->initials() }}</span>
|
||
@else
|
||
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
|
||
@endauth
|
||
</div>
|
||
<div class="flex-1 min-w-0" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 hidden'">
|
||
<div class="text-xs font-bold text-white truncate group-hover:text-pink-500 transition-colors">
|
||
@auth
|
||
{{ auth()->user()->name ?? auth()->user()->email }}
|
||
@else
|
||
Anonymous
|
||
@endauth
|
||
</div>
|
||
<div class="text-[9px] text-zinc-500 uppercase font-black tracking-tighter">
|
||
@auth
|
||
{{ auth()->user()->tierLabel() }} USER
|
||
@else
|
||
GUEST USER
|
||
@endauth
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</aside>
|
||
|
||
<!-- Email List Column -->
|
||
<div class="w-full lg:w-96 flex-shrink-0 bg-app-bg border-r border-white/5 flex flex-col z-20 transition-all duration-300"
|
||
:class="{'hidden lg:flex': mobileView === 'detail' && selectedId}">
|
||
|
||
<!-- List Header -->
|
||
<div class="h-16 flex items-center px-4 border-b border-white/5 bg-zinc-950/20 backdrop-blur-3xl sticky top-0 z-10 gap-3">
|
||
<!-- Sidebar Toggle (Mobile/Tablet) -->
|
||
<button @click="sidebarOpen = !sidebarOpen"
|
||
class="xl:hidden p-2 rounded-lg bg-white/5 border border-white/5 text-zinc-400 hover:text-white transition-all cursor-pointer">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||
</svg>
|
||
</button>
|
||
|
||
<div class="flex-1 relative group">
|
||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500 group-focus-within:text-pink-500 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
|
||
<input type="text" placeholder="Search mail..."
|
||
class="w-full h-10 bg-white/5 border border-white/5 rounded-xl pl-10 pr-4 text-sm focus:outline-none focus:ring-1 focus:ring-pink-500/30 focus:border-pink-500/20 transition-all placeholder:text-zinc-600">
|
||
</div>
|
||
<button wire:click="$refresh()"
|
||
class="w-10 h-10 rounded-xl bg-white/5 border border-white/5 flex items-center justify-center text-zinc-400 hover:text-white hover:bg-white/10 transition-all group overflow-hidden cursor-pointer"
|
||
x-data="{ refreshing: false }"
|
||
@click="refreshing = true; setTimeout(() => refreshing = false, 750)">
|
||
<svg class="w-5 h-5"
|
||
:class="{ 'animate-[spin_0.75s_ease-out_infinite]': refreshing }"
|
||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- List Content -->
|
||
<div class="flex-1 overflow-y-auto divide-y divide-white/5 scrollbar-hide" x-ref="listContainer">
|
||
@forelse($emails as $email)
|
||
<div wire:key="email-{{ $email->id }}"
|
||
@click="$wire.selectEmail({{ $email->id }}); mobileView = 'detail'"
|
||
class="p-5 cursor-pointer transition-all relative group"
|
||
:class="selectedId === {{ $email->id }} ? 'bg-pink-500/5' : 'hover:bg-white/[0.02]'">
|
||
<div class="absolute left-0 top-0 bottom-0 w-1 bg-pink-500 scale-y-0 transition-transform duration-300"
|
||
:class="selectedId === {{ $email->id }} ? 'scale-y-100' : 'scale-y-0'"></div>
|
||
|
||
<div class="flex items-start justify-between gap-4 mb-2">
|
||
<div class="flex items-center gap-3 min-w-0">
|
||
@if(!$email->is_read)
|
||
<div class="w-2 h-2 rounded-full bg-pink-500 shadow-[0_0_8px_rgba(236,72,153,0.5)] flex-shrink-0"></div>
|
||
@endif
|
||
<h4 class="text-sm font-bold truncate transition-colors" :class="selectedId === {{ $email->id }} ? 'text-white' : 'text-zinc-200 group-hover:text-white'">
|
||
{{ $email->sender_name ?: $email->sender_email }}
|
||
</h4>
|
||
</div>
|
||
<span class="text-[10px] font-bold text-zinc-600 uppercase whitespace-nowrap">{{ $email->received_at?->diffForHumans(['short' => true]) }}</span>
|
||
</div>
|
||
|
||
<div class="text-xs font-semibold text-zinc-300 mb-2 truncate group-hover:text-zinc-100 transition-colors">
|
||
{{ $email->subject }}
|
||
</div>
|
||
|
||
<p class="text-[11px] text-zinc-500 line-clamp-2 leading-relaxed font-medium">
|
||
{{ $email->preview }}
|
||
</p>
|
||
|
||
@if($email->attachment_size > 0)
|
||
<div class="mt-3 flex items-center gap-2">
|
||
<div class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-white/5 border border-white/5 text-[9px] font-mono text-zinc-400">
|
||
<svg class="w-3 h-3 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path></svg>
|
||
Attachments
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
@empty
|
||
{{-- ═══ Cinematic Empty State ═══ --}}
|
||
<div class="flex-1 flex flex-col items-center justify-center p-8 text-center min-h-[400px]">
|
||
{{-- Animated Envelope Icon --}}
|
||
<div class="relative w-20 h-20 mb-8">
|
||
<div class="absolute inset-0 bg-pink-500/10 rounded-2xl animate-pulse"></div>
|
||
<div class="absolute inset-0 border border-pink-500/20 rounded-2xl"></div>
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<svg class="w-10 h-10 text-pink-500/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="text-sm font-bold text-zinc-400 mb-2 tracking-tight">No emails yet</h3>
|
||
<p class="text-[11px] text-zinc-600 mb-6 max-w-[220px] leading-relaxed">
|
||
Send an email to your address and it will appear here instantly
|
||
</p>
|
||
|
||
{{-- Current mailbox address for easy reference --}}
|
||
@if($currentMailbox)
|
||
<button @click="navigator.clipboard.writeText('{{ $currentMailbox->address }}'); addToast('Address copied to clipboard', 'success')"
|
||
class="px-4 ру-2.5 h-10 rounded-xl bg-zinc-900 border border-white/5 text-[10px] font-mono text-zinc-400 hover:border-pink-500/20 hover:text-white transition-all cursor-pointer group mb-6 relative overflow-hidden flex items-center justify-center min-w-[200px]">
|
||
<span class="group-hover:opacity-0 transition-opacity duration-200">{{ $currentMailbox->address }}</span>
|
||
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-pink-500 font-bold uppercase tracking-widest font-sans bg-zinc-900">Click to Copy</span>
|
||
</button>
|
||
@endif
|
||
|
||
{{-- Animated "Waiting" Indicator --}}
|
||
<div class="flex items-center gap-2.5 text-zinc-600">
|
||
<svg class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
|
||
</svg>
|
||
<span class="text-[10px] font-bold uppercase tracking-[0.2em] animate-pulse">Waiting for emails</span>
|
||
</div>
|
||
</div>
|
||
@endforelse
|
||
</div>
|
||
|
||
@if($emails->hasPages())
|
||
<!-- Sticky Pagination -->
|
||
<div class="h-14 flex items-center justify-between px-4 border-t border-white/5 bg-zinc-950/40 backdrop-blur-xl shrink-0">
|
||
<button wire:click="previousPage"
|
||
@click="$refs.listContainer.scrollTop = 0"
|
||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 border border-white/5 text-[10px] font-bold text-zinc-400 hover:text-white hover:bg-white/10 transition-all disabled:opacity-30 disabled:pointer-events-none uppercase tracking-widest cursor-pointer"
|
||
{{ $emails->onFirstPage() ? 'disabled' : '' }}>
|
||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
|
||
Prev
|
||
</button>
|
||
|
||
<div class="flex items-center gap-1.5">
|
||
<span class="text-[10px] font-black text-white/90 uppercase tracking-[0.2em]">{{ $emails->currentPage() }}</span>
|
||
<span class="text-[10px] font-bold text-zinc-600 uppercase tracking-widest">/</span>
|
||
<span class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">{{ $emails->lastPage() }}</span>
|
||
</div>
|
||
|
||
<button wire:click="nextPage"
|
||
@click="$refs.listContainer.scrollTop = 0"
|
||
class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 border border-white/5 text-[10px] font-bold text-zinc-400 hover:text-white hover:bg-white/10 transition-all disabled:opacity-30 disabled:pointer-events-none uppercase tracking-widest cursor-pointer"
|
||
{{ !$emails->hasMorePages() ? 'disabled' : '' }}>
|
||
Next
|
||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
||
</button>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
<!-- QR Code Modal -->
|
||
<div x-show="qrModal"
|
||
class="fixed inset-0 z-[100] flex items-center justify-center p-4 lg:p-8"
|
||
x-cloak>
|
||
<div x-show="qrModal"
|
||
x-transition:enter="transition ease-out duration-300"
|
||
x-transition:enter-start="opacity-0"
|
||
x-transition:enter-end="opacity-100"
|
||
x-transition:leave="transition ease-in duration-200"
|
||
x-transition:leave-start="opacity-100"
|
||
x-transition:leave-end="opacity-0"
|
||
@click="qrModal = false"
|
||
class="absolute inset-0 bg-zinc-950/80 backdrop-blur-xl"></div>
|
||
|
||
<div x-show="qrModal"
|
||
x-transition:enter="transition ease-out duration-500"
|
||
x-transition:enter-start="opacity-0 scale-95 translate-y-8"
|
||
x-transition:enter-end="opacity-100 scale-100 translate-y-0"
|
||
x-transition:leave="transition ease-in duration-300"
|
||
x-transition:leave-start="opacity-100 scale-100 translate-y-0"
|
||
x-transition:leave-end="opacity-0 scale-95 translate-y-8"
|
||
class="w-full max-w-[320px] bg-zinc-900 border border-white/10 rounded-[32px] p-6 relative overflow-hidden shadow-2xl">
|
||
|
||
<!-- Glow Background -->
|
||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-48 h-48 bg-pink-500/10 rounded-full blur-[60px] -z-10"></div>
|
||
|
||
<div class="text-center">
|
||
<div class="w-12 h-12 rounded-xl bg-pink-500/10 text-pink-500 flex items-center justify-center mx-auto mb-4">
|
||
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" />
|
||
</svg>
|
||
</div>
|
||
|
||
<h3 class="text-lg font-black text-white mb-1 tracking-tight uppercase">Mailbox QR</h3>
|
||
<p class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-6">Scan to access</p>
|
||
|
||
<div class="p-4 bg-white rounded-2xl mb-6 flex justify-center shadow-inner inline-block">
|
||
<canvas id="qr-canvas"></canvas>
|
||
</div>
|
||
|
||
<div class="p-3 rounded-xl bg-zinc-950/50 border border-white/5 font-mono text-[9px] text-zinc-400 break-all mb-6" x-text="qrAddress"></div>
|
||
|
||
<button @click="qrModal = false"
|
||
class="w-full py-3.5 rounded-xl bg-white text-zinc-950 font-black text-[10px] uppercase tracking-[0.2em] hover:bg-zinc-100 transition-all cursor-pointer">
|
||
Dismiss
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Email Detail Column -->
|
||
<main class="flex-1 flex flex-col min-w-0 bg-zinc-950/50 backdrop-blur-md relative z-10 transition-all duration-300 h-full overflow-hidden"
|
||
:class="{'hidden lg:flex': mobileView === 'list' || !selectedId}">
|
||
|
||
<!-- Cinematic Loading Overlay -->
|
||
<div wire:loading.flex wire:target="selectEmail" class="absolute inset-0 z-[100] bg-zinc-950/60 backdrop-blur-xl items-center justify-center">
|
||
<div class="flex flex-col items-center justify-center">
|
||
<div class="w-20 h-20 relative mb-8">
|
||
<div class="absolute inset-0 border-4 border-pink-500/10 rounded-full"></div>
|
||
<div class="absolute inset-0 border-4 border-pink-500 border-t-transparent animate-spin rounded-full shadow-[0_0_20px_rgba(236,72,153,0.2)]"></div>
|
||
<div class="absolute inset-4 bg-pink-500/20 rounded-full blur-2xl animate-pulse"></div>
|
||
<div class="absolute inset-0 flex items-center justify-center">
|
||
<svg class="w-8 h-8 text-pink-500 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col items-center">
|
||
<span class="text-[10px] font-black text-white uppercase tracking-[0.4em] mb-2 animate-pulse">Establishing Secure Channel</span>
|
||
<div class="flex gap-1">
|
||
<div class="w-1 h-1 rounded-full bg-pink-500 animate-bounce [animation-delay:-0.3s]"></div>
|
||
<div class="w-1 h-1 rounded-full bg-pink-500 animate-bounce [animation-delay:-0.15s]"></div>
|
||
<div class="w-1 h-1 rounded-full bg-pink-500 animate-bounce"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@php $currentEmail = $selectedEmailId ? $emails->firstWhere('id', $selectedEmailId) : null; @endphp
|
||
@if($currentEmail)
|
||
|
||
<!-- Detail Header -->
|
||
<div class="h-16 flex items-center px-6 border-b border-white/5 bg-zinc-950/20 backdrop-blur-3xl sticky top-0 z-10">
|
||
<button @click="mobileView = 'list'" class="lg:hidden mr-4 p-2 rounded-lg bg-white/5 border border-white/5 text-zinc-400 hover:text-white transition-all cursor-pointer">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
|
||
</button>
|
||
<div class="flex items-center gap-4">
|
||
<div class="flex items-center gap-2">
|
||
<button wire:click="downloadEmail({{ $selectedEmailId }})"
|
||
class="p-2 rounded-xl bg-white/5 border border-white/5 text-zinc-400 hover:text-white hover:bg-white/10 transition-all group cursor-pointer" title="Download Email">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
|
||
</button>
|
||
<button wire:click="printEmail({{ $selectedEmailId }})"
|
||
class="p-2 rounded-xl bg-white/5 border border-white/5 text-zinc-400 hover:text-white hover:bg-white/10 transition-all group cursor-pointer" title="Print Email">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2m8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" /></svg>
|
||
</button>
|
||
</div>
|
||
<div class="h-6 w-px bg-white/5"></div>
|
||
<button @click="$dispatch('open-confirm-modal', {
|
||
title: 'Burn Email?',
|
||
message: 'Are you sure you want to delete this email? This action is permanent.',
|
||
confirmLabel: 'Burn Now',
|
||
type: 'danger',
|
||
action: () => $wire.deleteEmail({{ $selectedEmailId }})
|
||
})"
|
||
class="p-2 rounded-xl bg-white/5 border border-white/5 text-zinc-400 hover:text-rose-500 hover:bg-rose-500/10 transition-all cursor-pointer" title="Delete Email">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Privacy Toggles -->
|
||
<div class="ml-auto flex items-center p-1 bg-white/5 border border-white/5 rounded-xl">
|
||
<button wire:click="$set('viewMode', 'text')"
|
||
class="px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all cursor-pointer"
|
||
:class="$wire.viewMode === 'text' ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'">
|
||
Text
|
||
</button>
|
||
<button wire:click="$set('viewMode', 'html')"
|
||
class="px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all cursor-pointer"
|
||
:class="$wire.viewMode === 'html' ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'">
|
||
HTML
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Detail Content -->
|
||
<div class="flex-1 relative overflow-hidden">
|
||
<div class="h-full overflow-y-auto p-8 lg:p-12 scrollbar-hide" wire:loading.remove wire:target="selectEmail">
|
||
<div class="max-w-3xl">
|
||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center text-xl font-bold text-white shadow-xl">
|
||
{{ substr($currentEmail->sender_name ?: $currentEmail->sender_email, 0, 1) }}
|
||
</div>
|
||
<div>
|
||
<h2 class="text-xl font-bold text-white mb-1">{{ $currentEmail->sender_name ?: $currentEmail->sender_email }}</h2>
|
||
<div class="text-xs font-mono text-zinc-500 uppercase tracking-widest">{{ $currentEmail->sender_email }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-[10px] font-bold text-zinc-600 uppercase tracking-widest px-3 py-1.5 rounded-full border border-white/5 bg-white/5">
|
||
Received {{ $currentEmail->received_at?->diffForHumans() }}
|
||
</div>
|
||
</div>
|
||
|
||
<h1 class="text-2xl md:text-3xl font-black tracking-tight text-white mb-8 leading-tight">
|
||
{{ $currentEmail->subject }}
|
||
</h1>
|
||
|
||
@if($viewMode === 'html')
|
||
<div class="mb-8 p-4 rounded-2xl border transition-all duration-500 @if(!$allowRemoteContent) bg-amber-500/5 border-amber-500/20 @else bg-emerald-500/5 border-emerald-500/20 @endif flex flex-col sm:flex-row items-center justify-between gap-4 group">
|
||
<div class="flex items-center gap-3">
|
||
@if(!$allowRemoteContent)
|
||
<div class="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-500 flex items-center justify-center shrink-0">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
|
||
</div>
|
||
<div>
|
||
<div class="text-xs font-bold text-amber-500 uppercase tracking-widest leading-none mb-1">Remote assets blocked</div>
|
||
<p class="text-[10px] text-zinc-500 font-medium">For your privacy, Zemail has disabled automatic loading of remote images.</p>
|
||
</div>
|
||
@else
|
||
<div class="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-500 flex items-center justify-center shrink-0">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
|
||
</div>
|
||
<div>
|
||
<div class="text-xs font-bold text-emerald-500 uppercase tracking-widest leading-none mb-1">Remote content enabled</div>
|
||
<p class="text-[10px] text-zinc-500 font-medium">Images and remote resources are currently active for this email.</p>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
@if(!$allowRemoteContent)
|
||
<button wire:click="$set('allowRemoteContent', true)"
|
||
class="px-4 py-2 rounded-xl bg-amber-500 text-zinc-950 font-black text-[10px] uppercase tracking-wider hover:bg-amber-400 transition-all flex items-center gap-2 cursor-pointer">
|
||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
|
||
Load Content
|
||
</button>
|
||
@else
|
||
<button wire:click="$set('allowRemoteContent', false)"
|
||
class="px-4 py-2 rounded-xl bg-zinc-800 text-zinc-400 font-bold text-[10px] uppercase tracking-wider hover:text-white transition-all flex items-center gap-2 border border-white/5 cursor-pointer">
|
||
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /></svg>
|
||
Re-Block
|
||
</button>
|
||
@endif
|
||
</div>
|
||
@endif
|
||
|
||
@if($viewMode === 'text' && empty($currentEmail['body_text']))
|
||
<div class="mb-8 p-4 rounded-2xl bg-zinc-900 border border-white/5 flex items-center gap-4">
|
||
<div class="w-10 h-10 rounded-xl bg-white/5 text-zinc-400 flex items-center justify-center shrink-0">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||
</div>
|
||
<div>
|
||
<div class="text-[10px] font-bold text-zinc-300 uppercase tracking-widest leading-none mb-1">Plain text version missing</div>
|
||
<p class="text-[9px] text-zinc-500 font-medium">Viewing sanitized HTML version instead.</p>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
<div class="prose prose-invert max-w-none text-zinc-400 leading-relaxed font-medium mb-12 {{ $viewMode === 'text' ? 'whitespace-pre-wrap font-mono text-[13px] shadow-[inset_0_20px_50px_rgba(0,0,0,0.1)] p-8 bg-zinc-900/30 rounded-3xl border border-white/5 tracking-tight' : 'space-y-4' }}">{!! $this->getProcessedContent($currentEmail) !!}</div>
|
||
|
||
@if($currentEmail->attachment_size > 0 && is_array($currentEmail->attachments_json))
|
||
<div class="mt-12 pt-8 border-t border-white/5">
|
||
<h4 class="text-[10px] font-bold text-white uppercase tracking-[0.2em] mb-4">Attachments ({{ count($currentEmail->attachments_json) }})</h4>
|
||
|
||
<div class="relative group/attachments">
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 @guest blur-[3px] pointer-events-none select-none grayscale opacity-60 @endguest">
|
||
@foreach($currentEmail->attachments_json as $attachment)
|
||
<div class="flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/5 hover:border-pink-500/30 transition-all group">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-10 h-10 rounded-xl bg-zinc-900 flex items-center justify-center text-pink-500">
|
||
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
|
||
</div>
|
||
<div>
|
||
<div class="text-xs font-bold text-white truncate">{{ $attachment['name'] }}</div>
|
||
<div class="text-[9px] font-mono text-zinc-500 uppercase">{{ $attachment['size'] }}</div>
|
||
</div>
|
||
</div>
|
||
@auth
|
||
<button class="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center text-zinc-400 hover:text-white transition-all cursor-pointer">
|
||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
|
||
</button>
|
||
@endauth
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
|
||
@guest
|
||
<div class="absolute inset-0 flex items-center justify-center z-20">
|
||
<a href="{{ route('login') }}" class="group/btn relative px-6 py-3 rounded-2xl bg-pink-500 text-white font-bold text-xs uppercase tracking-widest shadow-[0_0_20px_rgba(236,72,153,0.3)] hover:scale-105 transition-all">
|
||
<span class="relative z-10 flex items-center gap-2">
|
||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
|
||
Login to Download
|
||
</span>
|
||
</a>
|
||
</div>
|
||
@endguest
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@else
|
||
<!-- Empty State -->
|
||
<div class="flex-1 flex flex-col items-center justify-center p-12 text-center" wire:loading.remove wire:target="selectEmail">
|
||
<div class="w-24 h-24 rounded-3xl bg-zinc-900 border border-white/5 flex items-center justify-center text-zinc-700 mb-8 relative">
|
||
<div class="absolute inset-0 bg-pink-500/5 rounded-3xl blur-2xl"></div>
|
||
<svg class="w-12 h-12 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-white mb-3">Select an email to read</h3>
|
||
<p class="text-zinc-500 max-w-xs text-sm leading-relaxed">Choose one of your disposable emails from the list to view its full content and secure attachments.</p>
|
||
</div>
|
||
@endif
|
||
</main>
|
||
<!-- Create Mailbox Modal -->
|
||
<div x-show="$wire.showCreateModal"
|
||
style="display: none;"
|
||
x-data="{ tab: @entangle('createType') }"
|
||
x-transition:enter="transition ease-out duration-300"
|
||
x-transition:enter-start="opacity-0"
|
||
x-transition:enter-end="opacity-100"
|
||
x-transition:leave="transition ease-in duration-200"
|
||
x-transition:leave-start="opacity-100"
|
||
x-transition:leave-end="opacity-0"
|
||
class="fixed inset-0 z-[100] flex items-center justify-center p-6 bg-zinc-950/80 backdrop-blur-sm">
|
||
|
||
<div @click.away="$wire.set('showCreateModal', false)"
|
||
class="w-full max-w-md bg-zinc-900 border border-white/10 rounded-[32px] overflow-hidden shadow-2xl relative">
|
||
<div class="absolute inset-0 bg-gradient-to-br from-pink-500/5 to-emerald-500/5 pointer-events-none"></div>
|
||
|
||
<div class="p-8 relative z-10">
|
||
<div class="flex items-center justify-between mb-8">
|
||
<div>
|
||
<h3 class="text-xl font-bold text-white mb-1">New Mailbox</h3>
|
||
<p class="text-xs text-zinc-500 font-medium">Create a new secure disposable identity.</p>
|
||
</div>
|
||
<button @click="$wire.set('showCreateModal', false)" class="text-zinc-500 hover:text-white transition-colors cursor-pointer">
|
||
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Type Selector -->
|
||
<div class="flex p-1 bg-zinc-950 rounded-2xl mb-8 border border-white/5">
|
||
<button @click="tab = 'random'"
|
||
class="flex-1 py-3 text-xs font-bold rounded-xl transition-all duration-300 cursor-pointer"
|
||
:class="tab === 'random' ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'">
|
||
Random
|
||
</button>
|
||
<button @click="tab = 'custom'"
|
||
class="flex-1 py-3 text-xs font-bold rounded-xl transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer"
|
||
:class="tab === 'custom' ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'">
|
||
Custom
|
||
@if(!auth()->check())
|
||
<svg class="w-3.5 h-3.5 text-zinc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
|
||
@endif
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Tab Content Container -->
|
||
<div class="grid grid-cols-1 grid-rows-1 min-h-[220px]">
|
||
<div x-show="tab === 'custom'"
|
||
x-transition:enter="transition ease-out duration-300 delay-150"
|
||
x-transition:enter-start="opacity-0 translate-y-2"
|
||
x-transition:enter-end="opacity-100 translate-y-0"
|
||
x-transition:leave="transition ease-in duration-150"
|
||
x-transition:leave-start="opacity-100 translate-y-0"
|
||
x-transition:leave-end="opacity-0 -translate-y-2"
|
||
wire:key="tab-custom"
|
||
class="col-start-1 row-start-1 relative">
|
||
|
||
@auth
|
||
<div class="space-y-6">
|
||
<div>
|
||
<label class="text-[10px] font-bold text-white uppercase tracking-widest mb-3 block">Username</label>
|
||
<input type="text" wire:model="customUsername" placeholder="e.g. dev-test-01"
|
||
class="w-full h-12 bg-zinc-950 border border-white/5 rounded-2xl px-4 text-sm focus:outline-none focus:ring-1 focus:ring-pink-500/50 transition-all font-mono">
|
||
</div>
|
||
<div>
|
||
<label class="text-[10px] font-bold text-white uppercase tracking-widest mb-3 block">Domain Selection</label>
|
||
<div class="relative group">
|
||
<select wire:model="customDomain"
|
||
class="w-full h-12 bg-zinc-950 border border-white/5 rounded-2xl px-4 text-sm focus:outline-none focus:ring-1 focus:ring-pink-500/50 transition-all appearance-none text-zinc-300 cursor-pointer">
|
||
@foreach($this->available_domains as $domain)
|
||
<option value="{{ $domain->name }}">@ {{ $domain->name }}</option>
|
||
@endforeach
|
||
</select>
|
||
<svg class="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@else
|
||
<div class="h-full min-h-[240px] flex flex-col items-center justify-center text-center p-8 bg-zinc-950 border border-white/5 rounded-[32px] relative overflow-hidden group">
|
||
<div class="absolute inset-0 bg-gradient-to-b from-pink-500/5 to-transparent opacity-50"></div>
|
||
<div class="relative z-10 flex flex-col items-center">
|
||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center mb-6 shadow-[0_20px_50px_rgba(236,72,153,0.3)]">
|
||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
|
||
</svg>
|
||
</div>
|
||
<h4 class="text-lg font-black text-white mb-2 tracking-widest uppercase">Login Required</h4>
|
||
<p class="text-[11px] text-zinc-500 leading-relaxed font-medium max-w-[220px]">Sign in to create custom aliases and use premium domains.</p>
|
||
</div>
|
||
</div>
|
||
@endauth
|
||
</div>
|
||
|
||
<div x-show="tab === 'random'"
|
||
x-transition:enter="transition ease-out duration-300 delay-150"
|
||
x-transition:enter-start="opacity-0 translate-y-2"
|
||
x-transition:enter-end="opacity-100 translate-y-0"
|
||
x-transition:leave="transition ease-in duration-150"
|
||
x-transition:leave-start="opacity-100 translate-y-0"
|
||
x-transition:leave-end="opacity-0 -translate-y-2"
|
||
wire:key="tab-random"
|
||
class="col-start-1 row-start-1 min-h-[240px] flex flex-col items-center justify-center text-center p-8 bg-zinc-950 border border-white/5 rounded-[32px] relative overflow-hidden group">
|
||
<div class="absolute inset-0 bg-gradient-to-b from-pink-500/5 to-transparent opacity-50"></div>
|
||
<div class="relative z-10 flex flex-col items-center">
|
||
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center mb-6 shadow-[0_20px_50px_rgba(236,72,153,0.3)] group-hover:scale-110 transition-transform duration-500">
|
||
<svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.456-2.454L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
|
||
</svg>
|
||
</div>
|
||
<h4 class="text-lg font-black text-white mb-2 tracking-widest uppercase">Random Identity</h4>
|
||
<p class="text-[11px] text-zinc-500 leading-relaxed font-medium max-w-[220px]">We'll generate a secure, high-entropy unique address for you instantly.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Global Action / Login Button -->
|
||
<div class="mt-8">
|
||
@if(!auth()->check())
|
||
<div x-show="tab === 'custom'">
|
||
<a href="{{ route('login') }}" class="w-full py-4 rounded-2xl bg-white text-zinc-950 font-black text-sm uppercase tracking-widest hover:bg-zinc-100 hover:shadow-[0_0_30px_rgba(255,255,255,0.1)] transition-all flex items-center justify-center gap-3 relative z-10">
|
||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
|
||
Login to Unlock
|
||
</a>
|
||
</div>
|
||
<button wire:click="createMailbox"
|
||
x-show="tab === 'random'"
|
||
class="w-full py-4 rounded-2xl bg-pink-600 text-white font-black text-sm uppercase tracking-widest hover:bg-pink-500 hover:shadow-[0_0_30px_rgba(236,72,153,0.3)] transition-all flex items-center justify-center gap-3 relative z-10 cursor-pointer">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
|
||
Generate Mailbox
|
||
</button>
|
||
@else
|
||
<button wire:click="createMailbox"
|
||
class="w-full py-4 rounded-2xl bg-pink-600 text-white font-black text-sm uppercase tracking-widest hover:bg-pink-500 hover:shadow-[0_0_30px_rgba(236,72,153,0.3)] transition-all flex items-center justify-center gap-3 relative z-10 cursor-pointer">
|
||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
|
||
Generate Mailbox
|
||
</button>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.scrollbar-hide::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.scrollbar-hide {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
@keyframes slide-right {
|
||
from { opacity: 0; transform: translateX(-10px); }
|
||
to { opacity: 1; transform: translateX(0); }
|
||
}
|
||
|
||
@keyframes slide-up {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.animate-slide-up {
|
||
animation: slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||
}
|
||
</style>
|
||
</div>
|