178 lines
6.9 KiB
PHP
178 lines
6.9 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('styles')
|
|
<style>
|
|
.confetti-canvas {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
.coupon-cutout {
|
|
mask-image: radial-gradient(circle at 0 50%, transparent 10px, black 11px),
|
|
radial-gradient(circle at 100% 50%, transparent 10px, black 11px);
|
|
mask-composite: intersect;
|
|
-webkit-mask-image: radial-gradient(circle at 0 50%, transparent 12px, black 13px),
|
|
radial-gradient(circle at 100% 50%, transparent 12px, black 13px);
|
|
}
|
|
.float-animation {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('header-back')
|
|
<!-- No back button on success screen -->
|
|
<div class="w-10"></div>
|
|
@endsection
|
|
|
|
@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 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)]">
|
|
<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"><x-icon name="auto_awesome" class="w-5 h-5" /></div>
|
|
</div>
|
|
|
|
<!-- Typography Block -->
|
|
<div class="text-center mb-2xl">
|
|
<h2 class="font-headline-xl text-headline-xl text-on-surface mb-sm">Gutlaýarys!</h2>
|
|
<p class="font-body-md text-body-md text-on-surface-variant max-w-[280px] mx-auto">Kupon koduňyz ulanmaga taýýar.</p>
|
|
</div>
|
|
|
|
<!-- Styled Coupon Card -->
|
|
<div class="w-full max-w-sm relative float-animation">
|
|
<div class="bg-surface-container-highest coupon-cutout rounded-lg p-lg flex flex-col items-center border border-outline-variant/30">
|
|
<div class="text-on-surface-variant font-label-md text-label-md mb-md uppercase tracking-widest">Çäklendirilen Teklip Kody</div>
|
|
<div class="bg-surface-container-lowest border-2 border-dashed border-primary/30 rounded-md px-xl py-lg w-full text-center mb-md group transition-all hover:border-primary">
|
|
<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 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>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="w-full max-w-sm mt-2xl flex flex-col gap-md">
|
|
<button class="w-full bg-primary text-on-primary py-md rounded-full font-label-md text-label-md shadow-[0_4px_12px_rgba(0,105,72,0.3)] hover:opacity-90 active:scale-95 transition-all">
|
|
Häzir ulan
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 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">
|
|
<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>
|
|
</div>
|
|
</main>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
// Confetti Logic
|
|
const canvas = document.getElementById('confetti');
|
|
const ctx = canvas.getContext('2d');
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
|
|
let particles = [];
|
|
const colors = ['#006948', '#85f8c4', '#68dba9', '#00855d', '#ffdad7'];
|
|
|
|
class Particle {
|
|
constructor() {
|
|
this.x = Math.random() * canvas.width;
|
|
this.y = Math.random() * canvas.height - canvas.height;
|
|
this.size = Math.random() * 8 + 4;
|
|
this.speed = Math.random() * 3 + 2;
|
|
this.color = colors[Math.floor(Math.random() * colors.length)];
|
|
this.rotation = Math.random() * 360;
|
|
this.rotationSpeed = Math.random() * 10 - 5;
|
|
}
|
|
update() {
|
|
this.y += this.speed;
|
|
this.rotation += this.rotationSpeed;
|
|
if (this.y > canvas.height) {
|
|
this.y = -20;
|
|
this.x = Math.random() * canvas.width;
|
|
}
|
|
}
|
|
draw() {
|
|
ctx.save();
|
|
ctx.translate(this.x, this.y);
|
|
ctx.rotate(this.rotation * Math.PI / 180);
|
|
ctx.fillStyle = this.color;
|
|
ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size);
|
|
ctx.restore();
|
|
}
|
|
}
|
|
|
|
function initConfetti() {
|
|
for (let i = 0; i < 100; i++) {
|
|
particles.push(new Particle());
|
|
}
|
|
}
|
|
|
|
function animateConfetti() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
particles.forEach(p => {
|
|
p.update();
|
|
p.draw();
|
|
});
|
|
requestAnimationFrame(animateConfetti);
|
|
}
|
|
|
|
initConfetti();
|
|
animateConfetti();
|
|
|
|
// Copy Functionality
|
|
function copyCode() {
|
|
const code = document.getElementById('couponCode').innerText;
|
|
navigator.clipboard.writeText(code);
|
|
|
|
const btnText = document.getElementById('copyText');
|
|
const btnIcon = document.getElementById('copyIcon');
|
|
|
|
btnText.innerText = 'Göçürildi!';
|
|
btnIcon.innerHTML = document.getElementById('icon-check').innerHTML;
|
|
|
|
setTimeout(() => {
|
|
btnText.innerText = 'Kody göçür';
|
|
btnIcon.innerHTML = document.getElementById('icon-content_copy').innerHTML;
|
|
}, 2000);
|
|
}
|
|
|
|
// Handle window resize
|
|
window.addEventListener('resize', () => {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
particles = [];
|
|
initConfetti();
|
|
});
|
|
</script>
|
|
@endsection |