improve code
This commit is contained in:
@@ -36,14 +36,14 @@
|
||||
@section('content')
|
||||
<canvas class="confetti-canvas" id="confetti"></canvas>
|
||||
|
||||
<main class="flex-grow flex flex-col items-center justify-center px-container-padding pt-24 pb-32 mt-16 w-full">
|
||||
<main class="flex-grow flex flex-col items-center justify-center px-container-padding pt-24 pb-32 mt-16 w-full max-w-md mx-auto">
|
||||
<!-- Success Indicator -->
|
||||
<div class="mb-xl relative">
|
||||
<div class="w-24 h-24 bg-primary-fixed rounded-full flex items-center justify-center text-primary-container shadow-[0_0_40px_rgba(0,105,72,0.2)]">
|
||||
<span class="material-symbols-outlined !text-5xl" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
<x-icon name="check_circle" class="w-12 h-12 text-primary-container" />
|
||||
</div>
|
||||
<!-- Decorative Sparks -->
|
||||
<div class="absolute -top-2 -right-2 text-primary opacity-50"><span class="material-symbols-outlined !text-xl">auto_awesome</span></div>
|
||||
<div class="absolute -top-2 -right-2 text-primary opacity-50"><x-icon name="auto_awesome" class="w-5 h-5" /></div>
|
||||
</div>
|
||||
|
||||
<!-- Typography Block -->
|
||||
@@ -60,9 +60,17 @@
|
||||
<span class="font-mono text-4xl font-bold text-primary tracking-widest" id="couponCode">{{ $code }}</span>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 text-primary font-label-md text-label-md hover:bg-primary-container/10 px-md py-sm rounded-full transition-colors active:scale-95" onclick="copyCode()">
|
||||
<span class="material-symbols-outlined" id="copyIcon">content_copy</span>
|
||||
<span id="copyIcon" class="inline-flex">
|
||||
<x-icon name="content_copy" class="w-5 h-5" data-icon="content_copy" />
|
||||
</span>
|
||||
<span id="copyText">Kody göçür</span>
|
||||
</button>
|
||||
<template id="icon-check">
|
||||
<x-icon name="check" class="w-5 h-5" />
|
||||
</template>
|
||||
<template id="icon-content_copy">
|
||||
<x-icon name="content_copy" class="w-5 h-5" />
|
||||
</template>
|
||||
</div>
|
||||
<!-- Shadow Depth -->
|
||||
<div class="absolute -bottom-4 left-1/2 -translate-x-1/2 w-[80%] h-4 bg-primary/10 blur-xl rounded-full -z-10"></div>
|
||||
@@ -77,7 +85,7 @@
|
||||
|
||||
<!-- Info Card -->
|
||||
<div class="mt-2xl w-full max-w-sm bg-secondary-container/30 border border-secondary-container rounded-lg p-md flex gap-md items-start">
|
||||
<span class="material-symbols-outlined text-secondary">info</span>
|
||||
<x-icon name="info" class="w-6 h-6 text-secondary shrink-0" />
|
||||
<p class="font-body-sm text-body-sm text-on-secondary-container">
|
||||
Bu kupon diňe öňümizdäki 24 sagadyň dowamynda hereket edýär. Arzanladyşdan peýdalanmak üçin töleg wagtynda ulanmagy ýatdan çykarmaň.
|
||||
</p>
|
||||
@@ -151,11 +159,11 @@
|
||||
const btnIcon = document.getElementById('copyIcon');
|
||||
|
||||
btnText.innerText = 'Göçürildi!';
|
||||
btnIcon.innerText = 'check';
|
||||
btnIcon.innerHTML = document.getElementById('icon-check').innerHTML;
|
||||
|
||||
setTimeout(() => {
|
||||
btnText.innerText = 'Kody göçür';
|
||||
btnIcon.innerText = 'content_copy';
|
||||
btnIcon.innerHTML = document.getElementById('icon-content_copy').innerHTML;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user