|
Server : Apache/2.4.18 (Ubuntu) System : Linux canvaswebdesign 3.13.0-71-generic #114-Ubuntu SMP Tue Dec 1 02:34:22 UTC 2015 x86_64 User : oppastar ( 1041) PHP Version : 7.0.33-0ubuntu0.16.04.15 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, Directory : /var/www/laciasmara.com/public_html/shop/application/views/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laciasmara.com - Spin Wheel</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap" rel="stylesheet" />
<!-- SweetAlert CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- In your view file -->
<script>
// Get CSRF token name and hash from CodeIgniter
var csrfTokenName = '<?php echo $this->security->get_csrf_token_name(); ?>';
var csrfHash = '<?php echo $this->security->get_csrf_hash(); ?>';
</script>
<!-- Stylesheet -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.swal2-popup {
border-radius: 1em;
padding: 1em;
}
.swal2-title {
font-size: 1.5em;
color: #4caf50;
}
body {
height: 100vh;
background: linear-gradient(135deg, #c3a3f1, #6414e9);
}
.wrapper {
width: 90%;
max-width: 34.37em;
max-height: 90vh;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3em;
border-radius: 1em;
box-shadow: 0 4em 5em rgba(27, 8, 53, 0.2);
}
.container {
position: relative;
width: 100%;
height: 100%;
}
#wheel {
max-height: inherit;
width: inherit;
}
#spin-btn {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
height: 22%;
width: 22%;
border-radius: 50%;
cursor: pointer;
border: 0;
background: radial-gradient(#fdcf3b 50%, #d88a40 85%);
color: #c66e16;
text-transform: uppercase;
font-size: 1.2em;
letter-spacing: 0.1em;
font-weight: 600;
transition: transform 0.2s;
}
#spin-btn:hover {
transform: translate(-50%, -50%) scale(1.1);
background: radial-gradient(#fce85d 50%, #d88a40 85%);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}
img {
position: absolute;
width: 4em;
top: 45%;
right: -8%;
}
#final-value {
font-size: 1em;
text-align: center;
margin-bottom: 1.5em;
color: #202020;
font-weight: 500;
}
@media screen and (max-width: 768px) {
.wrapper {
font-size: 12px;
padding: 1.5em;
}
.swal2-popup {
border-radius: 1em;
padding: 1.2em;
}
.swal2-title {
font-size: 1.5em;
color: #4caf50;
}
#spin-btn {
height: 25%;
width: 25%;
font-size: 1.2em;
}
img {
right: -5%;
height: 15%;
width: 15%;
}
* {
font-size: 12px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="final-value">
<p>Tap the Spin Button to Reveal Your Surprise!</p>
</div>
<div class="container">
<canvas id="wheel"></canvas>
<button id="spin-btn">Spin Now!</button>
<img src="<?= base_url('assets/frontend/img/arrow.png'); ?>" alt="spinner-arrow" />
</div>
</div>
<!-- Chart JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<!-- Chart JS Plugin for displaying text over chart -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js"></script>
<!-- SweetAlert JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
const wheel = document.getElementById("wheel");
const spinBtn = document.getElementById("spin-btn");
const finalValue = document.getElementById("final-value");
window.onload = function() {
Swal.fire({
title: 'Terms and Conditions',
text: 'Please read and accept the terms and conditions before using the Spin Wheel.',
icon: 'info',
showCancelButton: false,
confirmButtonText: 'Terms & Conditions',
allowOutsideClick: false,
allowEscapeKey: false,
preConfirm: () => {
return true;
}
}).then((result) => {
if (result.isConfirmed) {
showTermsAndConditions();
}
});
};
function showTermsAndConditions() {
Swal.fire({
title: '📝 Terms and Conditions',
html: `
<div style="text-align: left; line-height: 1.5;">
<ul style="padding-left: 20px; list-style-type:none;">
<li style="margin-bottom: 10px; font-size: 12px;">- Vouchers are not valid with any other offers and/or discounts.</li>
<li style="margin-bottom: 10px; font-size: 12px;">- Vouchers are valid only in November.</li>
<li style="margin-bottom: 10px; font-size: 12px;">- 50% Discount only for selected items.</li>
</ul>
</div>
`,
icon: 'info',
showCancelButton: true,
confirmButtonText: 'Agree',
cancelButtonText: 'Not Now',
allowOutsideClick: false,
allowEscapeKey: false,
}).then((result) => {
const spinBtn = document.getElementById('spin-btn');
if (result.isConfirmed) {
// Jika user setuju, kembali ke swal awal dan aktifkan tombol Spin
Swal.fire({
title: 'Terms Accepted',
html: `Spin the wheel for a special reward. <br>Good luck!🍀`,
icon: 'success',
confirmButtonText: 'Spin Now'
}).then(() => {
if (spinBtn) {
spinBtn.disabled = false;
}
});
} else {
spinBtn.disabled = true;
}
});
}
const rotationValues = [{
minDegree: 0,
maxDegree: 30,
value: "Sexy Pills" // 2
},
{
minDegree: 31,
maxDegree: 90,
value: "Voucher 100k" //1
},
{
minDegree: 91,
maxDegree: 150,
value: "Voucher 50k" //6
},
{
minDegree: 151,
maxDegree: 210,
value: "Sexy Pills" // 5
},
{
minDegree: 211,
maxDegree: 270,
value: "Voucher 50k" // 4
},
{
minDegree: 271,
maxDegree: 330,
value: "Discount 50%" //3
},
{
minDegree: 331,
maxDegree: 360,
value: "Sexy Pills" //2
}
];
const data = [16, 16, 16, 16, 16, 16];
const pieColors = ["#8b35bc", "#b163da", "#8b35bc", "#b163da", "#8b35bc", "#b163da"];
let isMobile = window.innerWidth < 768;
let myChart = new Chart(wheel, {
plugins: [ChartDataLabels],
type: "pie",
data: {
labels: ["Voucher 100k", "Sexy Pills", "Discount 50%", "Voucher 50k", "Sexy Pills", "Voucher 50k"],
datasets: [{
backgroundColor: pieColors,
data: data
}]
},
options: {
responsive: true,
animation: {
duration: 0
},
plugins: {
tooltip: false,
legend: {
display: false
},
datalabels: {
color: "#ffffff",
formatter: (_, context) => context.chart.data.labels[context.dataIndex],
font: {
size: isMobile ? 12 : 16
},
anchor: 'center',
align: 'end',
padding: 1,
rotation: (context) => {
const index = context.dataIndex;
switch (index) {
case 0:
return 120;
case 1:
return 0;
case 2:
return 60;
case 3:
return 120;
case 4:
return 180
case 5:
return 60
default:
return 0;
}
}
}
}
}
});
const valueGenerator = (angleValue) => {
for (let rotation of rotationValues) {
if (angleValue >= rotation.minDegree && angleValue <= rotation.maxDegree) {
return rotation.value;
}
}
return null;
};
function launchConfetti() {
const duration = 0.5 * 1000; // Durasi animasi confetti (3 detik)
const animationEnd = Date.now() + duration;
const colors = ['#bb0000', '#ffffff', '#00b300', '#ffcc00'];
(function frame() {
const timeLeft = animationEnd - Date.now();
if (timeLeft <= 0) {
return;
}
const particleCount = 50 * (timeLeft / duration);
confetti({
particleCount,
angle: 60,
spread: 55,
origin: {
x: 0
},
colors,
});
confetti({
particleCount,
angle: 120,
spread: 55,
origin: {
x: 1
},
colors,
});
requestAnimationFrame(frame);
})();
}
let count = 0;
let speed = 10;
spinBtn.addEventListener("click", () => {
spinBtn.disabled = true;
finalValue.innerHTML = `<p>Get Ready for Your Prize!</p>`;
let randomDegree = Math.floor(Math.random() * 360);
let rotationInterval = setInterval(() => {
myChart.options.rotation += speed;
myChart.update();
let currentAngle = myChart.options.rotation % 360;
let currentPrize = valueGenerator(currentAngle);
if (count > 5) {
speed = Math.max(1, speed - 0.1);
}
if (myChart.options.rotation >= 360) {
count += 1;
myChart.options.rotation = 0;
} else if (count > 4 && currentAngle === randomDegree) {
clearInterval(rotationInterval);
speed = 10;
count = 0;
// Generate voucher code based on the prize
let voucherCode = '';
let redirectUrl = '';
if (currentPrize === 'Voucher 100k') {
voucherCode = 'BIRTHDAY100K';
redirectUrl = "https://www.laciasmara.com/shop/";
} else if (currentPrize === 'Voucher 50k') {
voucherCode = 'BIRTHDAY50K';
redirectUrl = "https://www.laciasmara.com/shop/";
} else if (currentPrize === 'Discount 50%') {
voucherCode = 'BIRTHDAY50%';
redirectUrl = "https://www.laciasmara.com/shop/category/your-special-day";
} else if (currentPrize === 'Sexy Pills') {
const textMessage = `Halo Laciasmara, aku mau klaim hadiah ulang tahun: ${currentPrize}.`;
redirectUrl = `https://api.whatsapp.com/send/?phone=628114715626&text=${encodeURIComponent(textMessage)}&type=phone_number&app_absent=0`;
}
$.ajax({
url: "<?php echo "SpinWheel/log_prize" ?>",
// '<?= base_url() ?>' + 'ajax/ajax_set_point_rewards' // Ganti dengan URL controller Anda
type: "POST",
data: {
result: currentPrize,
[csrfTokenName]: csrfHash
},
success: function(response) {
const res = JSON.parse(response);
if (res.status === 'error') {
Swal.fire({
title: "Oops...",
text: res.message,
icon: "error",
confirmButtonText: "Okay"
}).then(() => {
window.location.href = "https://www.laciasmara.com/shop/";
});
}
if (res.status === 'success') {
if (voucherCode) {
Swal.fire({
title: "🎉 Congratulations!",
html: `
<p>You scored a ${currentPrize}! Use the code below to claim your voucher.</p>
<p style="font-size: 18px; margin-top: 8px; font-weight: bold;">${voucherCode}</p>
<button id="copy-voucher" class="swal2-confirm swal2-styled" style="margin-top: 20px;">Copy Code</button>
`,
icon: "success",
showConfirmButton: false,
willOpen: () => {
// Menjalankan confetti tepat sebelum Swal terbuka
launchConfetti();
}
});
// Add event listener to copy button
document.getElementById('copy-voucher').addEventListener('click', () => {
navigator.clipboard.writeText(voucherCode).then(() => {
let toastPosition = window.innerWidth < 768 ? "top" : "top-end";
const Toast = Swal.mixin({
toast: true,
position: toastPosition,
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
didOpen: (toast) => {
toast.onmouseenter = Swal.stopTimer;
toast.onmouseleave = Swal.resumeTimer;
}
});
Toast.fire({
icon: "success",
title: "The voucher code has been copied to your clipboard."
}).then(() => {
// Tampilkan konfirmasi redirect sesuai dengan voucher yang didapat
Swal.fire({
title: "Redirecting...",
text: "You will be redirected to our shop.",
icon: "info",
showCancelButton: true,
confirmButtonText: "Continue",
cancelButtonText: "Cancel",
backdrop: true
}).then((result) => {
if (result.isConfirmed) {
// Redirect ke halaman sesuai voucher
window.location.href = redirectUrl;
} else {
Swal.fire({
title: "Cancelled",
text: "You chose to stay on the current page.",
icon: "info",
timer: 2000,
showConfirmButton: false
});
}
});
});
});
});
} else {
// Show SweetAlert if the prize is not a voucher
Swal.fire({
title: "🎉 Congratulations!",
text: `Awesome! You landed on: ${currentPrize}, click below to claim.`,
icon: "success",
confirmButtonText: "Claim Here",
showCancelButton: false,
willOpen: () => {
// Menjalankan confetti tepat sebelum Swal terbuka
launchConfetti();
}
}).then((result) => {
if (result.isConfirmed) {
// Redirect ke halaman sesuai voucher
window.location.href = redirectUrl;
} else {
Swal.fire({
title: "Cancelled",
text: "You chose to stay on the current page.",
icon: "info",
timer: 2000,
showConfirmButton: false
});
}
});
}
}
},
error: function(xhr) {
console.error(xhr);
}
})
}
}, 10);
});
window.addEventListener('resize', function() {
let newSize = window.innerWidth < 768 ? 12 : 16;
myChart.options.plugins.datalabels.font.size = newSize;
myChart.update(); // Update chart dengan ukuran font yang baru
});
</script>
</body>
</html>