401 lines
16 KiB
PHP
401 lines
16 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Rút Gọn Link Shopee Affiliate - Tạo Link Nhanh</title>
|
|
<!-- Fonts & Icons -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
|
|
|
|
<style>
|
|
:root {
|
|
--bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
|
|
--accent-primary: #8b5cf6;
|
|
--accent-secondary: #ec4899;
|
|
--glass-bg: rgba(255, 255, 255, 0.03);
|
|
--glass-border: rgba(255, 255, 255, 0.08);
|
|
--text-main: #f8fafc;
|
|
--text-muted: #94a3b8;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--bg-gradient);
|
|
min-height: 100vh;
|
|
color: var(--text-main);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
/* Underlay blurs */
|
|
.blur-sphere-1 {
|
|
position: absolute;
|
|
width: 400px;
|
|
height: 400px;
|
|
background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
|
|
top: -100px;
|
|
left: -100px;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.blur-sphere-2 {
|
|
position: absolute;
|
|
width: 450px;
|
|
height: 450px;
|
|
background: radial-gradient(circle, rgba(236, 72, 153, 0.15) 0%, rgba(0,0,0,0) 70%);
|
|
bottom: -150px;
|
|
right: -100px;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
z-index: 10;
|
|
max-width: 650px;
|
|
}
|
|
|
|
.brand-logo {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.brand-logo i {
|
|
font-size: 3rem;
|
|
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
display: inline-block;
|
|
margin-bottom: 0.5rem;
|
|
filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.3));
|
|
}
|
|
|
|
.brand-title {
|
|
font-size: 2.25rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.025em;
|
|
background: linear-gradient(to right, #ffffff, #c084fc);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.brand-subtitle {
|
|
color: var(--text-muted);
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Glass Card */
|
|
.glass-card {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 24px;
|
|
padding: 2.5rem;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.glass-card:hover {
|
|
border-color: rgba(255, 255, 255, 0.15);
|
|
box-shadow: 0 20px 45px rgba(139, 92, 246, 0.1);
|
|
}
|
|
|
|
/* Input styling */
|
|
.form-control-custom {
|
|
background: rgba(15, 23, 42, 0.6);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 14px;
|
|
color: var(--text-main);
|
|
padding: 1rem 1.25rem;
|
|
font-size: 1rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.form-control-custom:focus {
|
|
background: rgba(15, 23, 42, 0.8);
|
|
border-color: var(--accent-primary);
|
|
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
|
|
color: var(--text-main);
|
|
outline: none;
|
|
}
|
|
|
|
.form-control-custom::placeholder {
|
|
color: #4b5563;
|
|
}
|
|
|
|
/* Button styling */
|
|
.btn-custom {
|
|
background: linear-gradient(135deg, var(--accent-primary), #7c3aed);
|
|
border: none;
|
|
border-radius: 14px;
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
padding: 1rem;
|
|
transition: all 0.2s ease;
|
|
box-shadow: 0 10px 20px -5px rgba(139, 92, 246, 0.4);
|
|
}
|
|
|
|
.btn-custom:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 22px -3px rgba(139, 92, 246, 0.5);
|
|
background: linear-gradient(135deg, #9333ea, #6d28d9);
|
|
}
|
|
|
|
.btn-custom:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Result Area */
|
|
.result-container {
|
|
background: rgba(139, 92, 246, 0.05);
|
|
border: 1px dashed rgba(139, 92, 246, 0.3);
|
|
border-radius: 16px;
|
|
padding: 1.5rem;
|
|
margin-top: 2rem;
|
|
animation: fadeIn 0.4s ease-out forwards;
|
|
}
|
|
|
|
.result-title {
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--accent-primary);
|
|
font-weight: 700;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.result-link-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(15, 23, 42, 0.4);
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.result-link {
|
|
color: #34d399;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
word-break: break-all;
|
|
margin-right: 1rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.btn-copy {
|
|
background: rgba(52, 211, 153, 0.1);
|
|
color: #34d399;
|
|
border: 1px solid rgba(52, 211, 153, 0.2);
|
|
border-radius: 8px;
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-copy:hover {
|
|
background: #34d399;
|
|
color: #0f172a;
|
|
border-color: #34d399;
|
|
}
|
|
|
|
/* Loading Spinner */
|
|
.loading-overlay {
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(15, 23, 42, 0.8);
|
|
border-radius: 24px;
|
|
z-index: 20;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
footer {
|
|
margin-top: 3rem;
|
|
color: #4b5563;
|
|
font-size: 0.85rem;
|
|
text-align: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
footer a {
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
}
|
|
|
|
footer a:hover {
|
|
color: #ffffff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="blur-sphere-1"></div>
|
|
<div class="blur-sphere-2"></div>
|
|
|
|
<div class="container text-center">
|
|
<!-- Logo & Brand Header -->
|
|
<div class="brand-logo">
|
|
<i class="bi bi-rocket-takeoff-fill"></i>
|
|
<h1 class="brand-title">Shopee Affiliate Link</h1>
|
|
<p class="brand-subtitle">Rút gọn link kiếm tiền hoa hồng trong 1 nốt nhạc</p>
|
|
</div>
|
|
|
|
<!-- Conversion Card -->
|
|
<div class="glass-card text-start position-relative">
|
|
<!-- Loading Indicator -->
|
|
<div id="loading" class="loading-overlay">
|
|
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"></div>
|
|
<div class="mt-3 fw-bold text-white">Đang convert link Shopee...</div>
|
|
</div>
|
|
|
|
<!-- Error Alerts -->
|
|
@if(session('error'))
|
|
<div class="alert alert-danger border-0 bg-danger bg-opacity-10 text-danger rounded-4 px-4 py-3 mb-4" role="alert">
|
|
<i class="bi bi-exclamation-triangle-fill me-2"></i> {{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('public_convert.process') }}" method="POST" onsubmit="showLoading()">
|
|
@csrf
|
|
<div class="mb-4">
|
|
<label for="url" class="form-label fw-semibold mb-2">Nhập link Shopee của bạn</label>
|
|
<input type="url" name="url" id="url" class="form-control form-control-custom"
|
|
placeholder="https://shopee.vn/product-name-i.1234567.891011"
|
|
value="{{ old('url', session('original_url')) }}" required autocomplete="off">
|
|
<div class="form-text mt-2 small" style="color: rgba(255, 255, 255, 0.45);">
|
|
Hỗ trợ link sản phẩm Shopee, link shop, link bộ sưu tập, hoặc link rút gọn s.shopee.vn.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6 mb-3 mb-md-0">
|
|
<label for="customer_name" class="form-label fw-semibold mb-2">Họ và tên <span class="text-muted fw-normal">(Không bắt buộc)</span></label>
|
|
<input type="text" name="customer_name" id="customer_name" class="form-control form-control-custom"
|
|
placeholder="Ví dụ: Nguyễn Văn A" value="{{ old('customer_name') }}" autocomplete="off">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="customer_phone" class="form-label fw-semibold mb-2">Số điện thoại <span class="text-muted fw-normal">(Không bắt buộc)</span></label>
|
|
<input type="tel" name="customer_phone" id="customer_phone" class="form-control form-control-custom"
|
|
placeholder="Ví dụ: 0987654321" value="{{ old('customer_phone') }}" autocomplete="off">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4 bg-white bg-opacity-5 p-3 rounded-3 border border-white border-opacity-10">
|
|
<div class="small text-muted" style="line-height: 1.5;">
|
|
<i class="bi bi-info-circle text-info me-1"></i>
|
|
<strong>Quyền lợi hoa hồng:</strong> Việc nhập Tên & Số điện thoại là <strong>không bắt buộc</strong>. Tuy nhiên, nếu bạn điền thông tin, Admin sẽ dựa vào đó để đối soát đơn hàng và <strong>chia lại tiền hoa hồng</strong> chiết khấu trực tiếp cho bạn!
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-custom w-100 fs-6"><i class="bi bi-magic me-1"></i> Rút Gọn Link Ngay</button>
|
|
<div class="text-center mt-3">
|
|
<a href="{{ route('customer_lookup.index') }}" class="text-decoration-none small text-muted"><i class="bi bi-search me-1"></i> Bạn muốn tra cứu số click & hoa hồng đã tích lũy? Bấm vào đây</a>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Result Box -->
|
|
@if(session('short_url'))
|
|
<div class="result-container">
|
|
@if(session('product_title'))
|
|
<div class="mb-3">
|
|
<div class="result-title">Sản phẩm:</div>
|
|
<div class="fw-bold text-white small"><i class="bi bi-box-seam me-1 text-warning"></i> {{ session('product_title') }}</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="mb-3">
|
|
<div class="result-title">Link Affiliate của bạn:</div>
|
|
<div class="result-link-box">
|
|
<a href="{{ session('short_url') }}" target="_blank" class="result-link" id="short-link">{{ session('short_url') }}</a>
|
|
<button onclick="copyLink(this, '{{ session('short_url') }}')" class="btn btn-copy">
|
|
<i class="bi bi-copy me-1"></i> Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
@if(session('estimated_commission') && session('estimated_commission') > 0)
|
|
<div class="mt-2 bg-success bg-opacity-10 border border-success border-opacity-20 rounded-3 p-3 text-start">
|
|
<div class="fw-bold text-success" style="font-size: 1.05rem;">
|
|
<i class="bi bi-cash-coin me-1"></i> Hoa hồng ước tính: ~{{ number_format(session('estimated_commission')) }}đ
|
|
</div>
|
|
<div class="small mt-1" style="color: rgba(255, 255, 255, 0.45); font-size: 0.8rem; line-height: 1.4;">
|
|
* Lưu ý: Số tiền hoa hồng hiển thị ở trên chỉ là <strong>ước tính tham khảo</strong> dựa trên giá sản phẩm tại thời điểm tạo link. Hoa hồng thực tế nhận được có thể chênh lệch tùy thuộc vào chính sách chiết khấu động của Shopee và loại shop tại thời điểm người mua thanh toán đơn hàng thành công.
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Zalo Community Group Card -->
|
|
@php
|
|
$zaloGroupUrl = app(\App\Services\SettingService::class)->get('zalo_group_join_url');
|
|
@endphp
|
|
@if($zaloGroupUrl)
|
|
<div class="glass-card text-center mt-4 p-4" style="border-radius: 20px;">
|
|
<h5 class="fw-bold text-success mb-2"><i class="bi bi-chat-dots-fill me-1"></i> Tham gia cộng đồng Zalo</h5>
|
|
<p class="text-muted small mb-3">Tham gia nhóm Zalo của chúng tôi để nhận tin tức giảm giá hot nhất và được hỗ trợ 24/7 từ Admin!</p>
|
|
<a href="{{ $zaloGroupUrl }}" target="_blank" class="btn btn-outline-success btn-sm px-4 py-2 rounded-pill fw-bold text-white border-success bg-success bg-opacity-25" style="box-shadow: 0 5px 15px rgba(25, 135, 84, 0.2);">
|
|
<i class="bi bi-box-arrow-in-right me-1"></i> Tham gia nhóm Zalo ngay
|
|
</a>
|
|
</div>
|
|
@endif
|
|
|
|
<footer>
|
|
© 2026 - Rút Gọn Link Shopee Affiliate.
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Script logic -->
|
|
<script>
|
|
function showLoading() {
|
|
document.getElementById('loading').style.display = 'flex';
|
|
}
|
|
|
|
function copyLink(button, text) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
const originalText = button.innerHTML;
|
|
button.innerHTML = '<i class="bi bi-check-lg"></i> Copied!';
|
|
button.style.backgroundColor = '#34d399';
|
|
button.style.color = '#0f172a';
|
|
button.style.borderColor = '#34d399';
|
|
|
|
setTimeout(() => {
|
|
button.innerHTML = originalText;
|
|
button.style.backgroundColor = '';
|
|
button.style.color = '';
|
|
button.style.borderColor = '';
|
|
}, 2000);
|
|
}).catch(err => {
|
|
console.error('Không thể copy link:', err);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|