first commit
This commit is contained in:
@@ -0,0 +1,133 @@
|
||||
@if (Auth::check())
|
||||
<div class="modal fade default_background" id="customPrizeModal" tabindex="-1" aria-labelledby="customPrizeModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<!-- <h5 class="modal-title" id="customPrizeModalLabel">Cập nhật giải thưởng</h5> -->
|
||||
<button type="button" class="btn btn-primary btn-close" data-bs-dismiss="modal" aria-label="Đóng">X</button>
|
||||
</div>
|
||||
<div class="modal-body" id="customPrize">
|
||||
<div class="container custom_list">
|
||||
<div class="input-group">
|
||||
<input type="text" id="newItem" placeholder="Thêm công việc mới">
|
||||
<button id="addButton">Thêm</button>
|
||||
</div>
|
||||
<ul id="taskList">
|
||||
@foreach ($game_data as $game_item)
|
||||
<li>
|
||||
<span>{{ $game_item['label'] ?? '' }}</span>
|
||||
<button class="delete-btn">Xóa</button>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Đóng</button>
|
||||
<button type="button" class="btn btn-primary" id="saveData">Lưu thay đổi</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const newItemInput = document.getElementById('newItem');
|
||||
const addButton = document.getElementById('addButton');
|
||||
const taskList = document.getElementById('taskList');
|
||||
const sendDataButton = document.getElementById('saveData'); // Tạo nút gửi dữ liệu
|
||||
|
||||
function addItem() {
|
||||
const newItemText = newItemInput.value.trim();
|
||||
const currentPrizeCount = taskList.querySelectorAll('li').length; // Đếm số lượng giải thưởng hiện tại
|
||||
|
||||
if (newItemText !== '') {
|
||||
if (currentPrizeCount < 6) { // Kiểm tra nếu chưa đạt đến giới hạn
|
||||
const listItem = document.createElement('li');
|
||||
listItem.innerHTML = `
|
||||
<span>${newItemText}</span>
|
||||
<button class="delete-btn">Xóa</button>
|
||||
`;
|
||||
taskList.appendChild(listItem);
|
||||
newItemInput.value = '';
|
||||
|
||||
const deleteButton = listItem.querySelector('.delete-btn');
|
||||
deleteButton.addEventListener('click', removeItem);
|
||||
} else {
|
||||
alert('Bạn chỉ có thể thêm tối đa 6 giải thưởng.'); // Thông báo khi vượt quá giới hạn
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function removeItem(event) {
|
||||
const listItem = event.target.parentNode;
|
||||
taskList.removeChild(listItem);
|
||||
}
|
||||
|
||||
function sendTaskListToServer() {
|
||||
const prizeItems = taskList.querySelectorAll('li span');
|
||||
const prizeArray = [];
|
||||
|
||||
prizeItems.forEach(span => {
|
||||
prizeArray.push(span.textContent.trim());
|
||||
});
|
||||
|
||||
if (prizeArray.length > 0) {
|
||||
fetch('updateprize', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
|
||||
},
|
||||
body: JSON.stringify({ prizes: prizeArray })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
alert('Cập nhật thành công');
|
||||
window.location.reload();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Lỗi AJAX:', error);
|
||||
});
|
||||
} else {
|
||||
alert('Danh sách công việc đang trống.');
|
||||
}
|
||||
}
|
||||
|
||||
addButton.addEventListener('click', addItem);
|
||||
|
||||
newItemInput.addEventListener('keypress', function (event) {
|
||||
if (event.key === 'Enter') {
|
||||
addItem();
|
||||
}
|
||||
});
|
||||
|
||||
taskList.addEventListener('click', function (event) {
|
||||
if (event.target.classList.contains('delete-btn')) {
|
||||
removeItem(event);
|
||||
}
|
||||
});
|
||||
|
||||
sendDataButton.addEventListener('click', sendTaskListToServer);
|
||||
});
|
||||
</script>
|
||||
@else
|
||||
<div class="modal fade default_background" id="customPrizeModal" tabindex="-1" aria-labelledby="customPrizeModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<!-- <h5 class="modal-title" id="customPrizeModalLabel">Cập nhật giải thưởng</h5> -->
|
||||
<button type="button" class="btn btn-primary btn-close" data-bs-dismiss="modal" aria-label="Đóng">X</button>
|
||||
</div>
|
||||
<div class="modal-body" id="customPrize">
|
||||
<div class="alert alert-danger font-weight-normal">
|
||||
Vui lòng <a class="custom_btn login_btn" href="{{ route('login') }}">Đăng nhập</a>
|
||||
để xem nội dung này
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endif
|
||||
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Tra cứu thần số học miễn phí và chính xác nhất! Tìm hiểu ý nghĩa số chủ đạo, số vận mệnh, biểu đồ ngày sinh và khám phá mối quan hệ tương hợp theo các con số">
|
||||
<meta name="author" content="Devcrud">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<title>Lý Gia Thạnh</title>
|
||||
<!-- font icons -->
|
||||
<link rel="stylesheet" href="{{asset('frontend/vendors/themify-icons/css/themify-icons.css')}}">
|
||||
<!-- Bootstrap + Meyawo main styles -->
|
||||
<link rel="stylesheet" href="{{asset('frontend/css/main.css?version=1.8')}}">
|
||||
<link rel="stylesheet" href="{{asset('frontend/css/game.css?version=1.8')}}">
|
||||
<link href="{{asset('frontend/fontawesome/all.css')}}" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<script src="{{asset('frontend/vendors/jquery/jquery-3.4.1.js')}}"></script>
|
||||
<script src="{{asset('libs/bootstrap/js/bootstrap.bundle.js')}}"></script>
|
||||
</head>
|
||||
|
||||
<body data-spy="scroll" data-target=".navbar" data-offset="40" id="home">
|
||||
<!-- menu -->
|
||||
<!-- end menu -->
|
||||
@include('frontend.parts.menu')
|
||||
|
||||
@yield('content')
|
||||
@include('frontend.parts.posts_popup')
|
||||
|
||||
<!-- core -->
|
||||
<script src="{{asset('frontend/vendors/bootstrap/bootstrap.bundle.js')}}"></script>
|
||||
|
||||
<!-- bootstrap 3 affix -->
|
||||
<script src="{{asset('frontend/vendors/bootstrap/bootstrap.affix.js')}}"></script>
|
||||
|
||||
<!-- Meyawo js -->
|
||||
<script src="{{asset('frontend/js/main.js')}}"></script>
|
||||
<script src="{{asset('frontend/js/game.js')}}"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,392 @@
|
||||
<link rel="stylesheet" href="{{asset('frontend/css/game.css?version=2.4')}}" />
|
||||
<div class="row chart_containter">
|
||||
<div class="col-lg-6 col-md-6 ribbon">
|
||||
<div class="wrap">
|
||||
<span class="ribbon6" id="game_rule" data-toggle="modal" data-target="#ruleModal">Thể lệ tham dự</span>
|
||||
</div>
|
||||
@if(Session::has('success'))
|
||||
<div class="alert alert-success">
|
||||
{{ Session::get('success') }}
|
||||
@php
|
||||
Session::forget('success');
|
||||
@endphp
|
||||
</div>
|
||||
@endif
|
||||
@if(Session::has('error'))
|
||||
<div class="alert alert-danger">
|
||||
{{ Session::get('error') }}
|
||||
@php
|
||||
Session::forget('error');
|
||||
@endphp
|
||||
</div>
|
||||
@endif
|
||||
@if(Session::has('errors'))
|
||||
<div class="alert alert-danger">
|
||||
{{ 'Có lỗi xảy ra (' . implode(', ', $errors->all(':message')) . ')'}}
|
||||
@php
|
||||
Session::forget('errors');
|
||||
@endphp
|
||||
</div>
|
||||
@endif
|
||||
<div id="luckywheel_container">
|
||||
<div class="luckywheel_inner" style="margin-top: 1rem;">
|
||||
<div class="luckywheel_inner" style="background-color: #950000;
|
||||
box-shadow: inset 6px -6px 20px #000;">
|
||||
<div class="wheel-section">
|
||||
<div class="wheel-container">
|
||||
<div class="wheel-border-lights">
|
||||
<canvas id="wheelCanvas" width="600" height="600"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cylinder_container">
|
||||
<div class="cylinder2"></div>
|
||||
<div class="cylinder"></div>
|
||||
</div>
|
||||
<button id="spinButton" style="display: block;"
|
||||
data-check="{{ Auth::check() && $spined == 0 ? 'true' : 'false' }}"
|
||||
data-auth="{{ Auth::check() ? 'true' : 'false' }}"
|
||||
data-spined="{{ $spined ?? 0 }}">BẮT ĐẦU
|
||||
QUAY
|
||||
</button>
|
||||
<!-- Debug: Auth={{ Auth::check() ? 'YES' : 'NO' }} Spined={{ $spined ?? 0 }} -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 slogan">
|
||||
<div class="custom_title text-center" style="{{ !Auth::check() || $spined == 1 ? 'position: absolute;' : '' }};">
|
||||
<span>VÒNG QUAY MAY MẮN</span>
|
||||
</div>
|
||||
<div class="logo-container">
|
||||
<img class="logo" src="{{asset('frontend/imgs/LogoSIS.png')}}" alt="Your Company Logo">
|
||||
</div>
|
||||
<div class="demonstration_img">
|
||||
@if (isset($parameter_data['banner_image']) && $parameter_data['banner_image'] != '')
|
||||
<img src="{{asset('images/' . $parameter_data['banner_image'])}}" alt="Demonstration img">
|
||||
@else
|
||||
<img src="{{asset('frontend/imgs/luckywheel_winner.avif')}}" alt="Demonstration img">
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@if (!$is_login || $spined == 1)
|
||||
<section class="alert_wheel_spin">
|
||||
<div class="alert fade alert-simple alert-danger alert-dismissible text-left font__family-montserrat font__size-16 font__weight-light brk-library-rendered rendered show"
|
||||
role="alert" data-brk-library="component__alert">
|
||||
<button type="button" class="close font__size-18" data-dismiss="alert">
|
||||
<span aria-hidden="true">
|
||||
<i class="fa fa-times danger "></i>
|
||||
</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
<i class="start-icon far fa-times-circle faa-pulse animated"></i>
|
||||
<strong class="font__weight-semibold">Thông báo: </strong>
|
||||
@if (!$is_login)
|
||||
<div class="alert alert-danger text-center" style="width: 100%; margin: auto;">
|
||||
Vui lòng <a class="btn btn-danger custom_btn" href="{{ route('login') }}">Nhập thông tin</a> để có thể
|
||||
quay số
|
||||
trúng giải
|
||||
</div>
|
||||
@endif
|
||||
@if ($spined == 1)
|
||||
<div class="alert alert-danger text-center prize_alert">
|
||||
Bạn chỉ được phép quay 1 lần,
|
||||
giải thưởng gần nhất <b>
|
||||
<h2>{{ $lasted_prize_name ?? '' }}</h2>
|
||||
</b>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
<div id="result"></div>
|
||||
</div>
|
||||
@include('frontend.game.customprize_popup')
|
||||
@include('frontend.game.rule')
|
||||
<script>
|
||||
$('#game_rule').on('click', function () {
|
||||
$('#gamerule').html('');
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
var url = "{{route('game/rule')}}";
|
||||
$.ajax({
|
||||
// dataType: 'json',
|
||||
url: url,
|
||||
type: 'GET',
|
||||
contentType: false,
|
||||
processData: false,
|
||||
success: function (result) {
|
||||
$('#gamerule').html(result);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const canvas = document.getElementById("wheelCanvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
const spinButton = document.getElementById("spinButton");
|
||||
const segmentsInput = document.getElementById("segments");
|
||||
const resultDiv = document.getElementById("result");
|
||||
let game_data = "{{json_encode($game_data)}}";
|
||||
var data = JSON.parse(game_data.replace(/"/g, '"'));
|
||||
let segments = [];
|
||||
let prize_ids = [];
|
||||
const images = [];
|
||||
data.forEach(item => {
|
||||
segments.push(item.detail);
|
||||
prize_ids.push(item.id);
|
||||
const img = new Image();
|
||||
img.src = item.image; // Đảm bảo 'item' chứa URL của ảnh
|
||||
images.push(img);
|
||||
});
|
||||
// Tableau de couleurs avec leurs configurations
|
||||
const colorSchemes = [{
|
||||
bg: "#e30a00",
|
||||
text: "#fff"
|
||||
}, // Bleu foncé
|
||||
{
|
||||
bg: "#fff",
|
||||
text: "#e30a00"
|
||||
}, {
|
||||
bg: "#e30a00",
|
||||
text: "#fff"
|
||||
}, // Bleu foncé
|
||||
{
|
||||
bg: "#fff",
|
||||
text: "#e30a00"
|
||||
}, {
|
||||
bg: "#e30a00",
|
||||
text: "#fff"
|
||||
}, // Bleu foncé
|
||||
{
|
||||
bg: "#fff",
|
||||
text: "#e30a00"
|
||||
}, {
|
||||
bg: "#e30a00",
|
||||
text: "#fff"
|
||||
}, // Bleu foncé
|
||||
{
|
||||
bg: "#fff",
|
||||
text: "#e30a00"
|
||||
}, {
|
||||
bg: "#e30a00",
|
||||
text: "#fff"
|
||||
}, // Bleu foncé
|
||||
{
|
||||
bg: "#fff",
|
||||
text: "#e30a00"
|
||||
}
|
||||
];
|
||||
// Dimensions du canvas
|
||||
const width = 600; // Tăng chiều rộng
|
||||
const height = 600;
|
||||
canvas.width = width; // Cập nhật kích thước canvas
|
||||
canvas.height = height;
|
||||
// Variables pour l'animation
|
||||
let currentAngle = 0; // angle de départ
|
||||
let spinVelocity = 0; // vitesse de rotation
|
||||
let isSpinning = false; // indicateur d'animation en cours
|
||||
// Fonction pour dessiner la roue
|
||||
function drawWheel(segmentsArray) {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
const numSegments = segmentsArray.length;
|
||||
const anglePerSegment = (2 * Math.PI) / numSegments;
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
const radius = Math.min(width, height) / 2;
|
||||
|
||||
for (let i = 0; i < numSegments; i++) {
|
||||
const startAngle = currentAngle + i * anglePerSegment - Math.PI / 2;
|
||||
const endAngle = startAngle + anglePerSegment;
|
||||
const colorScheme = colorSchemes[i % colorSchemes.length];
|
||||
|
||||
// Vẽ nền của phân đoạn
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(centerX, centerY);
|
||||
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
|
||||
ctx.fillStyle = colorScheme.bg;
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
|
||||
// BẮT ĐẦU: Vẽ ảnh TRƯỚC chữ để chữ nằm trên ảnh
|
||||
if (images[i] && images[i].complete && images[i].naturalWidth > 0 && images[i].naturalHeight > 0) { // Kiểm tra ảnh đã tải xong và không bị lỗi
|
||||
ctx.save(); // Lưu trạng thái hiện tại của canvas
|
||||
|
||||
const imageSize = 100; // Kích thước ảnh
|
||||
const distanceFromCenter = radius * 0.65; // Khoảng cách từ tâm vòng quay ra vị trí ảnh
|
||||
|
||||
// Tính toán góc chính giữa của phân đoạn hiện tại
|
||||
const angleOfSegmentCenter = startAngle + anglePerSegment / 2;
|
||||
|
||||
// Tính toán vị trí tâm của ảnh trên vòng quay (nếu không xoay)
|
||||
const imageCenterX = centerX + Math.cos(angleOfSegmentCenter) * distanceFromCenter;
|
||||
const imageCenterY = centerY + Math.sin(angleOfSegmentCenter) * distanceFromCenter;
|
||||
|
||||
// Di chuyển gốc tọa độ về tâm của ảnh
|
||||
ctx.translate(imageCenterX, imageCenterY);
|
||||
|
||||
// Xoay ngữ cảnh vẽ để "chân" ảnh hướng về tâm vòng tròn.
|
||||
ctx.rotate(angleOfSegmentCenter + Math.PI / 2);
|
||||
|
||||
// Vẽ ảnh. Vì gốc tọa độ đã ở tâm ảnh, ta vẽ ảnh tại (-imageSize / 2, -imageSize / 2)
|
||||
// để căn giữa ảnh.
|
||||
ctx.drawImage(images[i], -imageSize / 2, -imageSize / 2, imageSize, imageSize);
|
||||
|
||||
ctx.restore(); // Khôi phục trạng thái canvas về ban đầu
|
||||
} else if (images[i] && !images[i].complete) {
|
||||
// Nếu ảnh chưa tải xong, gán sự kiện onload để vẽ lại khi ảnh đã sẵn sàng
|
||||
images[i].onload = () => {
|
||||
drawWheel(segments);
|
||||
};
|
||||
}
|
||||
// KẾT THÚC: Vẽ ảnh
|
||||
|
||||
// BẮT ĐẦU: Vẽ chữ SAU ảnh để chữ nằm trên ảnh
|
||||
ctx.save();
|
||||
ctx.fillStyle = colorScheme.text;
|
||||
ctx.font = "bold 24px Arial"; // Đã TĂNG kích thước chữ lên 24px
|
||||
ctx.translate(
|
||||
centerX + Math.cos(startAngle + anglePerSegment / 2) * (radius * 0.85),
|
||||
centerY + Math.sin(startAngle + anglePerSegment / 2) * (radius * 0.85)
|
||||
);
|
||||
ctx.rotate(startAngle + anglePerSegment / 2 + Math.PI / 2);
|
||||
const text = segmentsArray[i];
|
||||
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
|
||||
ctx.restore();
|
||||
// KẾT THÚC: Vẽ chữ
|
||||
}
|
||||
|
||||
// Vẽ mũi tên chỉ thị
|
||||
const oscillationAmount = 8; // Tăng độ lớn dao động để mũi tên "rung" mạnh hơn
|
||||
const oscillationSpeed = 0.05; // Giảm tốc độ dao động để nó mượt mà hơn
|
||||
const time = Date.now() * 0.005; // Sử dụng thời gian để tạo dao động độc lập với vòng quay
|
||||
const offsetX_oscillation = Math.sin(time * oscillationSpeed) * oscillationAmount;
|
||||
const offsetY_oscillation = Math.cos(time * oscillationSpeed) * oscillationAmount;
|
||||
|
||||
// Dời mũi tên sang phải 15px cố định
|
||||
const fixedOffsetX = 0;
|
||||
|
||||
ctx.beginPath();
|
||||
// Điều chỉnh vị trí mũi tên để nó nằm gần viền ngoài của canvas và dời sang phải
|
||||
// Thêm fixedOffsetX vào các tọa độ X để dịch chuyển sang phải
|
||||
ctx.moveTo(centerX + 100, centerY);
|
||||
ctx.lineTo(centerX, centerY - 60);
|
||||
ctx.lineTo(centerX, centerY + 60);
|
||||
ctx.closePath(); // Đóng đường dẫn để đảm bảo hình tam giác được vẽ đúng
|
||||
|
||||
// Định dạng màu sắc và đổ bóng cho mũi tên
|
||||
ctx.fillStyle = "#db0202"; // Màu cam nổi bật (Material Design Orange A700)
|
||||
ctx.shadowColor = "rgb(0, 0, 0)"; // Màu đổ bóng
|
||||
ctx.shadowBlur = 30; // Độ mờ đổ bóng
|
||||
ctx.shadowOffsetX = 5; // Độ lệch đổ bóng theo X
|
||||
ctx.shadowOffsetY = 5; // Độ lệch đổ bóng theo Y
|
||||
ctx.fill();
|
||||
|
||||
// Đảm bảo reset shadow sau khi vẽ mũi tên để không ảnh hưởng các phần tử khác
|
||||
ctx.shadowColor = "transparent";
|
||||
ctx.shadowBlur = 0;
|
||||
ctx.shadowOffsetX = 0;
|
||||
ctx.shadowOffsetY = 0;
|
||||
|
||||
// --- Bắt đầu phần vẽ HÌNH TRÒN tại TÂM ---
|
||||
ctx.beginPath();
|
||||
const centerCircleRadius = radius * 0.18; // Kích thước hình tròn tại tâm, 18% bán kính vòng quay
|
||||
ctx.arc(centerX, centerY, centerCircleRadius, 0, Math.PI * 2, false);
|
||||
ctx.fillStyle = "#fff"; // Màu vàng gold cho hình tròn tâm
|
||||
ctx.shadowColor = "rgba(0, 0, 0, 0.4)"; // Đổ bóng nhẹ cho hình tròn tâm
|
||||
ctx.shadowBlur = 10;
|
||||
ctx.shadowOffsetX = 3;
|
||||
ctx.shadowOffsetY = 3;
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = "#db0202"; // Viền màu đồng cho hình tròn tâm
|
||||
ctx.lineWidth = 10;
|
||||
ctx.stroke();
|
||||
|
||||
// Đảm bảo reset shadow sau khi vẽ hình tròn để không ảnh hưởng mũi tên
|
||||
ctx.shadowColor = "transparent";
|
||||
ctx.shadowBlur = 0;
|
||||
ctx.shadowOffsetX = 0;
|
||||
ctx.shadowOffsetY = 0;
|
||||
|
||||
// Vẽ chữ lên hình tròn tại tâm
|
||||
ctx.save(); // Lưu trạng thái canvas để không ảnh hưởng các phần tử khác
|
||||
ctx.fillStyle = "#db0202"; // Màu chữ
|
||||
ctx.font = `bold ${Math.min(centerCircleRadius * 0.6, 32)}px Arial`; // Kích thước chữ responsive, tối đa 28px
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle'; // Căn giữa chữ theo chiều dọc
|
||||
const centerText = "S.I.S"; // Văn bản muốn hiển thị
|
||||
ctx.fillText(centerText, centerX, centerY); // Vẽ chữ tại tâm
|
||||
ctx.restore(); // Khôi phục trạng thái canvas
|
||||
// --- Kết thúc phần vẽ HÌNH TRÒN tại TÂM ---
|
||||
}
|
||||
// Animation de la roue
|
||||
function spinWheel() {
|
||||
if (!isSpinning) return;
|
||||
// Mise à jour de l'angle et réduction de la vitesse
|
||||
currentAngle += spinVelocity;
|
||||
spinVelocity *= 0.995; // friction
|
||||
// Condition d'arrêt
|
||||
if (spinVelocity < 0.01) {
|
||||
spinVelocity = 0;
|
||||
isSpinning = false;
|
||||
findWinner();
|
||||
}
|
||||
// Redessiner la roue à chaque frame
|
||||
drawWheel(segments);
|
||||
requestAnimationFrame(spinWheel);
|
||||
}
|
||||
// Déterminer le segment gagnant en fonction de l'angle final
|
||||
function findWinner() {
|
||||
const numSegments = segments.length;
|
||||
const anglePerSegment = (2 * Math.PI) / numSegments;
|
||||
let normalizedAngle = currentAngle % (2 * Math.PI);
|
||||
if (normalizedAngle < 0) normalizedAngle += 2 * Math.PI;
|
||||
normalizedAngle = (normalizedAngle - Math.PI / 2 + 2 * Math.PI) % (2 * Math.PI);
|
||||
const winningIndex = (numSegments - Math.floor(normalizedAngle / anglePerSegment) - 1) % numSegments;
|
||||
const winner = segments[winningIndex];
|
||||
const resultDiv = document.getElementById('result');
|
||||
resultDiv.classList.remove('show');
|
||||
// Utiliser le schéma de couleur du segment gagnant
|
||||
const colorScheme = colorSchemes[winningIndex % colorSchemes.length];
|
||||
setTimeout(() => {
|
||||
// cong bo giai thuong
|
||||
let prize_id = prize_ids[winningIndex];
|
||||
var csrfToken = $('meta[name="csrf-token"]').attr('content');
|
||||
$.ajax({
|
||||
url: "{{ route('updateprizeuser') }}",
|
||||
type: 'POST',
|
||||
data: {
|
||||
prize_id: prize_id,
|
||||
_token: csrfToken // Bao gồm CSRF token
|
||||
},
|
||||
success: function (response) {
|
||||
resultDiv.innerHTML = response;
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
alert('Có lỗi xảy ra');
|
||||
}
|
||||
});
|
||||
resultDiv.classList.add('show');
|
||||
}, 300);
|
||||
}
|
||||
// Bouton "Tourner la roue"
|
||||
spinButton.addEventListener("click", (event) => {
|
||||
if ($(event.currentTarget).data('check') == false) {
|
||||
alert('Chưa đăng nhập hoặc đã quay số rồi');
|
||||
return;
|
||||
}
|
||||
if (!isSpinning) {
|
||||
// Réinitialiser l'affichage du résultat
|
||||
const resultDiv = document.getElementById('result');
|
||||
resultDiv.classList.remove('show');
|
||||
// Donner une vitesse initiale aléatoire
|
||||
spinVelocity = Math.random() * 0.5 + 0.4;
|
||||
isSpinning = true;
|
||||
spinWheel();
|
||||
}
|
||||
});
|
||||
drawWheel(segments);
|
||||
</script>
|
||||
<script src="{{asset('frontend/js/game.js')}}"></script>
|
||||
@@ -0,0 +1,841 @@
|
||||
<link rel="stylesheet" href="{{asset('frontend/css/game.css?version=1.5')}}" />
|
||||
<div class="row chart_containter">
|
||||
<div class="background-left" style="display: none;">
|
||||
<img src="{{ asset('frontend/imgs/background_left.png') }}" />
|
||||
</div>
|
||||
<div class="col-lg-12 col-md-12 ribbon">
|
||||
<div class="wrap">
|
||||
<span class="ribbon6" id="game_rule" data-toggle="modal" data-target="#ruleModal">Thể lệ tham dự</span>
|
||||
</div>
|
||||
@if(Session::has('success'))
|
||||
<div class="alert alert-success">
|
||||
{{ Session::get('success') }}
|
||||
@php
|
||||
Session::forget('success');
|
||||
@endphp
|
||||
</div>
|
||||
@endif
|
||||
@if(Session::has('error'))
|
||||
<div class="alert alert-danger">
|
||||
{{ Session::get('error') }}
|
||||
@php
|
||||
Session::forget('error');
|
||||
@endphp
|
||||
</div>
|
||||
@endif
|
||||
@if(Session::has('errors'))
|
||||
<div class="alert alert-danger">
|
||||
{{ 'Có lỗi xảy ra (' . implode(', ', $errors->all(':message')) . ')'}}
|
||||
@php
|
||||
Session::forget('errors');
|
||||
@endphp
|
||||
</div>
|
||||
@endif
|
||||
@if (!$is_login)
|
||||
<div class="alert alert-danger text-center" style="width: 100%; margin: auto;">
|
||||
Vui lòng <a class="btn btn-danger custom_btn" href="{{ route('login') }}">Nhập thông tin</a> để có thể
|
||||
quay số
|
||||
trúng giải
|
||||
</div>
|
||||
@endif
|
||||
@if ($spined == 1)
|
||||
<div class="alert alert-danger text-center prize_alert">
|
||||
Bạn chỉ được phép quay 1 lần,
|
||||
giải thưởng gần nhất <b>
|
||||
<h2>{{ $lasted_prize_name ?? '' }}</h2>
|
||||
</b>
|
||||
</div>
|
||||
@endif
|
||||
<div class="custom_title text-center">VÒNG QUAY MAY MẮN</div>
|
||||
<div id="chart"></div>
|
||||
</div>
|
||||
<div class="col-lg-12 col-md-12" style="display: none;">
|
||||
<!-- hien thi giai thuong -->
|
||||
<div class="custom_subtitle">DANH SÁCH GIẢI THƯỞNG</div>
|
||||
<div class="grid-container">
|
||||
@foreach ($game_data as $game_item)
|
||||
<div class="grid-item ribbon_item">
|
||||
<div class="wrap_item">
|
||||
<span class="ribbon_minitem">{{ $game_item['label'] ?? '' }}</span>
|
||||
</div>
|
||||
<!-- <img src="{{ asset('images/' . $game_item['image']) }}" alt="{{ $game_item['detail'] ?? '' }}"> -->
|
||||
<div class="overlay">
|
||||
<h3 class="title">{{ $game_item['detail'] ?? '' }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<!-- ket thuc hien thị giai thuong -->
|
||||
</div>
|
||||
</div>
|
||||
<section class="contact-info-section" style="display: none;">
|
||||
|
||||
<div class="contact-info-container">
|
||||
<div class="contact-item">
|
||||
<div class="icon-circle">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
</div>
|
||||
<p>397 Nguyễn Văn Cừ nối dài, P An Bình, Q.Ninh Kiều, TP Cần Thơ</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<div class="icon-circle">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
</div>
|
||||
<p>Thứ 2 - Chủ Nhật: 07h00 - 16h30</p>
|
||||
<p>Cấp Cứu & Nội Viện: 24/7</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<div class="icon-circle">
|
||||
<i class="fas fa-phone"></i>
|
||||
</div>
|
||||
<p class="highlight-text">18001115</p>
|
||||
<p>Tổng đài liên hệ</p>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<div class="icon-circle">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</div>
|
||||
<p class="highlight-text">cskh@dotquy.vn</p>
|
||||
<p>Thanh toán & khiếu nại</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@include('frontend.game.luckywheel_popup')
|
||||
@include('frontend.game.customprize_popup')
|
||||
@include('frontend.game.rule')
|
||||
<style>
|
||||
.custom-navbar {
|
||||
background-color: #0000006e;
|
||||
}
|
||||
|
||||
.za-chat .chat-wrapper .box__header {
|
||||
padding: 24px;
|
||||
background-color: #ff0000;
|
||||
}
|
||||
|
||||
.page_container {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.page_container .fas {
|
||||
background-color: #695aa6;
|
||||
color: #fff;
|
||||
padding: 0.3rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.slogan {
|
||||
border: none;
|
||||
visibility: visible;
|
||||
bottom: 54px;
|
||||
right: 52px;
|
||||
position: fixed;
|
||||
width: auto;
|
||||
height: auto;
|
||||
z-index: 1000;
|
||||
font-weight: 800;
|
||||
background-color: #ff0000;
|
||||
padding: 1rem 4rem 1rem 1rem;
|
||||
color: #fff;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 1px 1px 20px #000;
|
||||
/* Áp dụng animation */
|
||||
animation-name: blink;
|
||||
/* Tên của animation (đã định nghĩa ở trên) */
|
||||
animation-duration: 1.5s;
|
||||
/* Thời gian hoàn thành một chu kỳ animation (1.5 giây) */
|
||||
animation-iteration-count: infinite;
|
||||
/* Số lần lặp lại: infinite (vô hạn) */
|
||||
animation-timing-function: ease-in-out;
|
||||
/* Kiểu tốc độ: bắt đầu và kết thúc chậm, ở giữa nhanh */
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Bắt đầu: Hoàn toàn hiển thị */
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Giữa: Hoàn toàn trong suốt (ẩn) */
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Kết thúc: Hoàn toàn hiển thị trở lại */
|
||||
}
|
||||
|
||||
.contact-info-section {
|
||||
width: 100%;
|
||||
background-color: #bd021b;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
position: absolute;
|
||||
bottom: -4rem;
|
||||
}
|
||||
|
||||
.contact-info-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
/* Phân bố đều các item */
|
||||
align-items: flex-start;
|
||||
/* Căn trên các item */
|
||||
flex-wrap: wrap;
|
||||
/* Cho phép xuống dòng trên màn hình nhỏ */
|
||||
gap: 20px;
|
||||
/* Khoảng cách giữa các item */
|
||||
padding: 0 20px;
|
||||
/* Padding hai bên */
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
/* Căn giữa nội dung */
|
||||
text-align: center;
|
||||
/* Căn giữa chữ */
|
||||
flex: 1;
|
||||
/* Cho phép các item chiếm không gian bằng nhau */
|
||||
min-width: 200px;
|
||||
/* Đảm bảo mỗi item có chiều rộng tối thiểu */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.icon-circle {
|
||||
width: 60px;
|
||||
/* Kích thước icon circle */
|
||||
height: 60px;
|
||||
background-color: #ffffff54;
|
||||
/* Màu đỏ cam như trong ảnh */
|
||||
border-radius: 50%;
|
||||
/* Làm tròn thành hình tròn */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
/* Khoảng cách với chữ */
|
||||
}
|
||||
|
||||
.icon-circle i {
|
||||
color: #ffffff;
|
||||
/* Màu icon trắng */
|
||||
font-size: 28px;
|
||||
/* Kích thước icon */
|
||||
}
|
||||
|
||||
.contact-item p {
|
||||
margin: 3px 0;
|
||||
color: #ffffff;
|
||||
line-height: 1.4;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.contact-item .highlight-text {
|
||||
color: #fff;
|
||||
/* Màu đỏ cam cho các text nổi bật */
|
||||
font-weight: bold;
|
||||
/* In đậm chữ */
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.contact-info-container {
|
||||
flex-direction: column;
|
||||
/* Xếp chồng các item trên màn hình nhỏ */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
margin-bottom: 25px;
|
||||
/* Khoảng cách giữa các item khi xếp chồng */
|
||||
width: 100%;
|
||||
/* Chiếm toàn bộ chiều rộng */
|
||||
max-width: 300px;
|
||||
/* Giới hạn chiều rộng cho item riêng lẻ */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="{{asset('frontend/js/game.js')}}"></script>
|
||||
<script>
|
||||
$('#game_rule').on('click', function () {
|
||||
$('#gamerule').html('');
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
var url = "{{route('game/rule')}}";
|
||||
$.ajax({
|
||||
// dataType: 'json',
|
||||
url: url,
|
||||
type: 'GET',
|
||||
contentType: false,
|
||||
processData: false,
|
||||
success: function (result) {
|
||||
$('#gamerule').html(result);
|
||||
}
|
||||
});
|
||||
});
|
||||
let is_login = "{{ $is_login }}";
|
||||
let spined = "{{ $spined }}";
|
||||
const screenWidth = window.screen.width;
|
||||
if (screenWidth <= 991) {
|
||||
var padding = { top: 40, right: 20, bottom: 40, left: 20 },
|
||||
w = 350 - padding.left - padding.right,
|
||||
h = 350 - padding.top - padding.bottom,
|
||||
r = Math.min(w, h) / 2,
|
||||
rotation = 0,
|
||||
oldrotation = 0,
|
||||
picked = 100000,
|
||||
oldpick = [],
|
||||
color = d3.scale.category20();
|
||||
} else {
|
||||
var padding = { top: 80, right: 80, bottom: 80, left: 80 },
|
||||
w = 600 - padding.left - padding.right,
|
||||
h = 600 - padding.top - padding.bottom,
|
||||
r = Math.min(w, h) / 2,
|
||||
rotation = 0,
|
||||
oldrotation = 0,
|
||||
picked = 100000,
|
||||
oldpick = [],
|
||||
color = d3.scale.category20();
|
||||
}
|
||||
|
||||
let game_data = "{{json_encode($game_data)}}";
|
||||
var data = JSON.parse(game_data.replace(/"/g, '"'));
|
||||
var svg = d3.select('#chart')
|
||||
.append("svg")
|
||||
.data([data])
|
||||
.attr("width", w + padding.left + padding.right)
|
||||
.attr("height", h + padding.top + padding.bottom);
|
||||
|
||||
var container = svg.append("g")
|
||||
.attr("class", "chartholder")
|
||||
.attr("transform", "translate(" + (w / 2 + padding.left) + "," + (h / 2 + padding.top) + ")");
|
||||
|
||||
const mainCircleRadius = Math.min(w, h) / 2 - 48; // Bán kính của đường tròn chính
|
||||
const dotRadius = 10;
|
||||
const numberOfDots = 20;
|
||||
const dotDistanceFromCenterFactor = 1.6; // Tăng hệ số để đẩy xa hơn
|
||||
const defaultColor = "white"; // Màu mặc định khi đứng yên
|
||||
|
||||
// Bán kính để định vị các chấm
|
||||
const dotPositionRadius = mainCircleRadius * dotDistanceFromCenterFactor;
|
||||
|
||||
// Hình tròn chính (chỉ có đường viền)
|
||||
let isSpinning = false; // Biến theo dõi trạng thái quay
|
||||
const animationDuration = 2; // Điều chỉnh tổng thời gian của một chu kỳ màu
|
||||
const colors = ["#ff0000", "#ff0000", "#ff0000", "#ff0000", "#ff0000", "#ff0000"];
|
||||
const numberOfColors = colors.length;
|
||||
|
||||
|
||||
|
||||
// Tạo các chấm đổi màu dọc theo đường viền và thiết lập animation delay
|
||||
if (screenWidth <= 991) {
|
||||
const dotPositionRadius = mainCircleRadius * 1.8;
|
||||
let numberOfDots_min = numberOfDots;
|
||||
container.append("circle")
|
||||
.attr("r", mainCircleRadius)
|
||||
.style({
|
||||
"fill": "none",
|
||||
"stroke": "gray",
|
||||
"stroke-width": "2rem"
|
||||
});
|
||||
for (let i = 0; i < numberOfDots_min; i++) {
|
||||
const angle = (2 * Math.PI / numberOfDots) * i;
|
||||
const x = dotPositionRadius * Math.cos(angle);
|
||||
const y = dotPositionRadius * Math.sin(angle);
|
||||
const animationDelay = (i / numberOfDots) * (animationDuration / numberOfColors); // Điều chỉnh độ trễ
|
||||
|
||||
container.append("circle")
|
||||
.attr("cx", x)
|
||||
.attr("cy", y)
|
||||
.attr("r", dotRadius / 2)
|
||||
.attr("class", "animated-dot") // Thêm class mặc định
|
||||
.style("fill", colors[i % 2])
|
||||
.style("animation-delay", `${animationDelay}s`); // Thiết lập animation-delay ngay từ đầu
|
||||
}
|
||||
} else {
|
||||
const dotPositionRadius = mainCircleRadius * dotDistanceFromCenterFactor;
|
||||
container.append("circle")
|
||||
.attr("r", mainCircleRadius)
|
||||
.style({
|
||||
"fill": "none",
|
||||
"stroke": "gray",
|
||||
"stroke-width": "2rem"
|
||||
});
|
||||
for (let i = 0; i < numberOfDots; i++) {
|
||||
const angle = (2 * Math.PI / numberOfDots) * i;
|
||||
const x = dotPositionRadius * Math.cos(angle);
|
||||
const y = dotPositionRadius * Math.sin(angle);
|
||||
const animationDelay = (i / numberOfDots) * (animationDuration / numberOfColors); // Điều chỉnh độ trễ
|
||||
|
||||
container.append("circle")
|
||||
.attr("cx", x)
|
||||
.attr("cy", y)
|
||||
.attr("r", dotRadius)
|
||||
.attr("class", "animated-dot") // Thêm class mặc định
|
||||
.style("fill", colors[i % 2])
|
||||
.style("animation-delay", `${animationDelay}s`)
|
||||
.style("filter", "drop-shadow(0 0 5px #ad031a)"); // Thiết lập animation-delay ngay từ đầu
|
||||
}
|
||||
}
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.animated-dot.spinning { /* Chỉ áp dụng animation khi có class 'spinning' */
|
||||
animation: sequential-blink ${animationDuration}s linear infinite; /* Điều chỉnh thời gian */
|
||||
filter: drop-shadow(0 0 2px currentColor);
|
||||
}
|
||||
|
||||
@keyframes sequential-blink {
|
||||
${Array.from({ length: numberOfColors }, (_, index) => {
|
||||
const percentage = (index / (numberOfColors - 1)) * 100;
|
||||
return ` ${percentage}% { fill: ${colors[index]}; }`;
|
||||
}).join('\n')}
|
||||
100% { fill: ${colors[0]}; }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
// Thêm hình tròn làm border bên ngoài
|
||||
if (screenWidth <= 991) {
|
||||
svg.insert("circle", ":first-child")
|
||||
.attr("cx", w / 2 + padding.left) // Tâm X của hình tròn
|
||||
.attr("cy", h / 2 + padding.top) // Tâm Y của hình tròn
|
||||
.attr("r", r + 3) // Bán kính của hình tròn (lớn hơn r một chút để làm border)
|
||||
.style("fill", "none") // Không tô màu nền
|
||||
.style("stroke", "#ff9800") // Màu của border hình tròn
|
||||
.style("stroke-width", "1rem").style("filter", "drop-shadow(0 0 5px rgba(0, 0, 0, 0.5))");
|
||||
svg.insert("circle", ":first-child")
|
||||
.attr("cx", w / 2 + padding.left) // Tâm X của hình tròn
|
||||
.attr("cy", h / 2 + padding.top) // Tâm Y của hình tròn
|
||||
.attr("r", r + 1) // Bán kính của hình tròn (lớn hơn r một chút để làm border)
|
||||
.style("fill", "none") // Không tô màu nền
|
||||
.style("stroke", "red") // Màu của border hình tròn
|
||||
.style("stroke-width", "3rem");
|
||||
svg.insert("circle", ":first-child")
|
||||
.attr("cx", w / 2 + padding.left) // Tâm X của hình tròn
|
||||
.attr("cy", h / 2 + padding.top) // Tâm Y của hình tròn
|
||||
.attr("r", r + 2) // Bán kính của hình tròn (lớn hơn r một chút để làm border)
|
||||
.style("fill", "none") // Không tô màu nền
|
||||
.style("stroke", "#ff9800") // Màu của border hình tròn
|
||||
.style("stroke-width", "4rem").style("filter", "drop-shadow(0 0 3px rgba(30, 30, 30, 0.5))");
|
||||
} else {
|
||||
svg.insert("circle", ":first-child")
|
||||
.attr("cx", w / 2 + padding.left) // Tâm X của hình tròn
|
||||
.attr("cy", h / 2 + padding.top) // Tâm Y của hình tròn
|
||||
.attr("r", r + 20) // Bán kính của hình tròn (lớn hơn r một chút để làm border)
|
||||
.style("fill", "none") // Không tô màu nền
|
||||
.style("stroke", "#ff9800") // Màu của border hình tròn
|
||||
// .style("stroke", "#000")
|
||||
.style("stroke-width", "1rem").style("filter", "drop-shadow(0 0 5px rgba(0, 0, 0, 0.5))");
|
||||
svg.insert("circle", ":first-child")
|
||||
.attr("cx", w / 2 + padding.left) // Tâm X của hình tròn
|
||||
.attr("cy", h / 2 + padding.top) // Tâm Y của hình tròn
|
||||
.attr("r", r - 18) // Bán kính của hình tròn (lớn hơn r một chút để làm border)
|
||||
.style("fill", "none") // Không tô màu nền
|
||||
.style("stroke", "red") // Màu của border hình tròn
|
||||
.style("stroke-width", "7rem");
|
||||
svg.insert("circle", ":first-child")
|
||||
.attr("cx", w / 2 + padding.left) // Tâm X của hình tròn
|
||||
.attr("cy", h / 2 + padding.top) // Tâm Y của hình tròn
|
||||
.attr("r", r + 12) // Bán kính của hình tròn (lớn hơn r một chút để làm border)
|
||||
.style("fill", "none") // Không tô màu nền
|
||||
// .style("stroke", "#ff9800") // Màu của border hình tròn // Không tô màu nền
|
||||
.style("stroke", "#ffeb3b")
|
||||
.style("stroke-width", "8rem").style("filter", "drop-shadow(0 0 5px rgb(0, 0, 0))");
|
||||
}
|
||||
|
||||
var vis = container
|
||||
.append("g");
|
||||
|
||||
var pie = d3.layout.pie().sort(null).value(function (d) { return 1; });
|
||||
// declare an arc generator function
|
||||
var arc = d3.svg.arc().outerRadius(r + 30);
|
||||
// select paths, use arc generator to draw
|
||||
var arcs = vis.selectAll("g.slice")
|
||||
.data(pie)
|
||||
.enter()
|
||||
.append("g")
|
||||
.attr("class", "slice");
|
||||
|
||||
if (!is_login || spined == 1) {
|
||||
var color = d3.scale.ordinal().range(['#eb9c13', '#a5af09', '#0ba97e', '#79c323', '#926c6c', '#c1341a', '#e12603', '#9d4e0a', '#eb9c13', '#a5af09', '#0ba97e', '#73e3a3']);
|
||||
} else {
|
||||
var color = d3.scale.ordinal().range(['#eb9c13', '#a5af09', '#0ba97e', '#79c323', '#926c6c', '#c1341a', '#e12603', '#9d4e0a', '#eb9c13', '#a5af09', '#0ba97e', '#73e3a3']);
|
||||
}
|
||||
|
||||
arcs.append("path")
|
||||
.attr('stroke', '#eb0a0a')
|
||||
.attr('stroke-width', '5')
|
||||
.attr("fill", function (d, i) { return color(i); })
|
||||
.attr("d", function (d) { return arc(d); });
|
||||
|
||||
// Thêm một nhóm 'g' mới vào mỗi lát cắt để chứa cả ảnh và văn bản.
|
||||
// Nhóm này sẽ được dịch chuyển đến tâm của lát cắt.
|
||||
arcs.append("g")
|
||||
.attr("class", "label-group")
|
||||
.attr("transform", function (d) {
|
||||
// arc.centroid(d) trả về tọa độ [x, y] của tâm (centroid) của lát cắt.
|
||||
// Đây là vị trí lý tưởng để đặt nhãn.
|
||||
d.innerRadius = 0;
|
||||
d.outerRadius = r;
|
||||
d.angle = (d.startAngle + d.endAngle) / 2;
|
||||
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius - 50) + ")";
|
||||
});
|
||||
|
||||
// Chọn tất cả các nhóm 'label-group' vừa tạo và thêm phần tử 'image' vào
|
||||
if (screenWidth <= 991) {
|
||||
d3.selectAll(".label-group")
|
||||
.append("image")
|
||||
.attr("xlink:href", function (d, i) {
|
||||
// Lấy đường dẫn ảnh từ dữ liệu gốc của bạn.
|
||||
// d.data thường chứa đối tượng dữ liệu gốc khi sử dụng d3.pie() hoặc d3.layout.pie().
|
||||
return "{{ asset('images') }}/" + data[i].image; // Hoặc d.data.image nếu bạn đã cấu hình pie generator để lấy data
|
||||
})
|
||||
.attr("transform", "rotate(90)")
|
||||
.attr("width", 50) // Đặt chiều rộng của ảnh (điều chỉnh theo nhu cầu)
|
||||
.attr("height", 50) // Đặt chiều cao của ảnh (điều chỉnh theo nhu cầu)
|
||||
.attr("x", -25) // Điều chỉnh vị trí x để căn giữa ảnh (nếu width là 40, thì x là -20)
|
||||
.attr("y", -50); // Điều chỉnh vị trí y để đặt ảnh phía trên văn bản
|
||||
// Chọn tất cả các nhóm 'label-group' và thêm phần tử 'text' vào
|
||||
d3.selectAll(".label-group")
|
||||
.append("text")
|
||||
.attr("dy", "-3rem") // Điều chỉnh vị trí y của văn bản để nó nằm dưới ảnh
|
||||
.attr("dx", "0rem") // Điều chỉnh vị trí y của văn bản để nó nằm dưới ảnh
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("transform", "rotate(90)") // Căn giữa văn bản theo chiều ngang
|
||||
.text(function (d, i) {
|
||||
// Lấy nhãn từ dữ liệu gốc của bạn
|
||||
return data[i].label; // Hoặc d.data.label
|
||||
})
|
||||
.style("fill", function (d, i) {
|
||||
// Lấy màu của lát cắt hiện tại từ bảng màu của bạn
|
||||
const sliceColor = color(i);
|
||||
// Logic để chọn màu chữ tương phản với màu nền của lát cắt
|
||||
// Bạn có thể cần điều chỉnh các giá trị màu hex cụ thể để phù hợp hơn
|
||||
return '#fff';
|
||||
})
|
||||
.style("font-size", "1.2rem") // Điều chỉnh kích thước font để phù hợp với ảnh
|
||||
.style("font-family", "Baloo Paaji");
|
||||
} else {
|
||||
d3.selectAll(".label-group")
|
||||
.append("image")
|
||||
.attr("xlink:href", function (d, i) {
|
||||
// Lấy đường dẫn ảnh từ dữ liệu gốc của bạn.
|
||||
// d.data thường chứa đối tượng dữ liệu gốc khi sử dụng d3.pie() hoặc d3.layout.pie().
|
||||
return "{{ asset('images') }}/" + data[i].image; // Hoặc d.data.image nếu bạn đã cấu hình pie generator để lấy data
|
||||
})
|
||||
.attr("transform", "rotate(90)")
|
||||
.attr("width", 80) // Đặt chiều rộng của ảnh (điều chỉnh theo nhu cầu)
|
||||
.attr("height", 80) // Đặt chiều cao của ảnh (điều chỉnh theo nhu cầu)
|
||||
.attr("x", -40) // Điều chỉnh vị trí x để căn giữa ảnh (nếu width là 40, thì x là -20)
|
||||
.attr("y", -40); // Điều chỉnh vị trí y để đặt ảnh phía trên văn bản
|
||||
// Chọn tất cả các nhóm 'label-group' và thêm phần tử 'text' vào
|
||||
d3.selectAll(".label-group")
|
||||
.append("text")
|
||||
.attr("dy", "-3rem") // Điều chỉnh vị trí y của văn bản để nó nằm dưới ảnh
|
||||
.attr("dx", "0rem") // Điều chỉnh vị trí y của văn bản để nó nằm dưới ảnh
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("transform", "rotate(90)") // Căn giữa văn bản theo chiều ngang
|
||||
.text(function (d, i) {
|
||||
// Lấy nhãn từ dữ liệu gốc của bạn
|
||||
return data[i].detail; // Hoặc d.data.label
|
||||
})
|
||||
.style("fill", function (d, i) {
|
||||
// Lấy màu của lát cắt hiện tại từ bảng màu của bạn
|
||||
const sliceColor = color(i);
|
||||
// Logic để chọn màu chữ tương phản với màu nền của lát cắt
|
||||
// Bạn có thể cần điều chỉnh các giá trị màu hex cụ thể để phù hợp hơn
|
||||
return '#fff';
|
||||
})
|
||||
.style("font-size", "1.2rem") // Điều chỉnh kích thước font để phù hợp với ảnh
|
||||
.style("font-family", "Baloo Paaji");
|
||||
}
|
||||
|
||||
// container.on("click", spin);
|
||||
function spin(d) {
|
||||
// check lại 1 lần nữa xem đã từng quay hay chưa
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
var url = "{{route('checkspined')}}";
|
||||
$.ajax({
|
||||
// dataType: 'json',
|
||||
url: url,
|
||||
type: 'GET',
|
||||
contentType: false,
|
||||
processData: false,
|
||||
success: function (result) {
|
||||
if (result.error) {
|
||||
alert(result.message);
|
||||
return;
|
||||
} else if (result.success) {
|
||||
if (result.spined == 1) {
|
||||
alert('Mỗi người dùng chỉ được quay 1 lần');
|
||||
return;
|
||||
}
|
||||
if (isSpinning) return; // Ngăn chặn nhiều lần quay đồng thời
|
||||
isSpinning = true;
|
||||
container.selectAll(".animated-dot").classed("spinning", true);
|
||||
container.on("click", null);
|
||||
//all slices have been seen, all done
|
||||
console.log("OldPick: " + oldpick.length, "Data length: " + data.length);
|
||||
if (oldpick.length == data.length) {
|
||||
console.log("done");
|
||||
container.on("click", null);
|
||||
return;
|
||||
}
|
||||
var ps = 360 / data.length,
|
||||
pieslice = Math.round(1440 / data.length),
|
||||
rng = Math.floor((Math.random() * 1440 * 3) + 360 * 5);
|
||||
// Nhân 1440 với 3 (tối đa 12 vòng quay ngẫu nhiên)
|
||||
// Cộng thêm 360 * 5 (thêm 5 vòng quay ban đầu)
|
||||
|
||||
rotation = (Math.round(rng / ps) * ps);
|
||||
|
||||
picked = Math.round(data.length - (rotation % 360) / ps);
|
||||
picked = picked >= data.length ? (picked % data.length) : picked;
|
||||
// if (oldpick.indexOf(picked) !== -1) {
|
||||
// container.selectAll(".animated-dot").classed("spinning", false);
|
||||
// container.selectAll(".animated-dot").style("fill", defaultColor);
|
||||
// isSpinning = false;
|
||||
|
||||
// container.select("#spinCircle").on("click", spin);
|
||||
// alert('Kết quả trùng, quay lại');
|
||||
// return;
|
||||
// } else {
|
||||
// oldpick.push(picked);
|
||||
// }
|
||||
if (oldpick.indexOf(picked) == -1) {
|
||||
oldpick.push(picked);
|
||||
}
|
||||
rotation += 90 - Math.round(ps / 2);
|
||||
vis.transition()
|
||||
.duration(5000)
|
||||
.ease("easeOutBounce")
|
||||
.attrTween("transform", rotTween)
|
||||
.each("start", function () {
|
||||
container.select("#spinCircle").on("click", null);
|
||||
})
|
||||
.each("end", function () {
|
||||
//mark question as seen
|
||||
d3.select(".slice:nth-child(" + (picked + 1) + ") path")
|
||||
.attr("fill", "#ff9800");
|
||||
//populate question
|
||||
d3.select("#question h1")
|
||||
.text(data[picked].question);
|
||||
// $('#answer_value').html(data[picked].answer);
|
||||
oldrotation = rotation;
|
||||
|
||||
setTimeout(function () {
|
||||
update_prize_user(data[picked].id, data[picked].label, data[picked].detail)
|
||||
}, 1500); // Chờ 2000 milliseconds (2 giây) trước khi hiển thị modal
|
||||
|
||||
/* Comment the below line for restrict spin to sngle time */
|
||||
container.selectAll(".animated-dot").classed("spinning", false);
|
||||
container.selectAll(".animated-dot").style("fill", defaultColor);
|
||||
isSpinning = false;
|
||||
|
||||
container.select("#spinCircle").on("click", spin);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// container.on("click", spin);
|
||||
//make arrow
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h / 2) + padding.top) + ")")
|
||||
.append("path")
|
||||
.attr("d", "M-" + (r * .25) + ",0L0," + (r * .15) + "L0,-" + (r * .15) + "Z")
|
||||
.style({
|
||||
"fill": "red",
|
||||
"stroke": "#ff9800",
|
||||
"stroke-width": 5
|
||||
});
|
||||
//draw spin circle
|
||||
var gradientMetal = svg.append("defs")
|
||||
.append("radialGradient")
|
||||
.attr("id", "metalGradient")
|
||||
.attr("cx", "50%")
|
||||
.attr("cy", "50%")
|
||||
.attr("r", "50%")
|
||||
.attr("fx", "50%")
|
||||
.attr("fy", "50%");
|
||||
|
||||
gradientMetal.append("stop")
|
||||
.attr("offset", "0%")
|
||||
.style("stop-color", "#ff0000");
|
||||
|
||||
gradientMetal.append("stop")
|
||||
.attr("offset", "5%")
|
||||
.style("stop-color", "#ff0000");
|
||||
|
||||
gradientMetal.append("stop")
|
||||
.attr("offset", "40%")
|
||||
.style("stop-color", "#ff0000");
|
||||
|
||||
gradientMetal.append("stop")
|
||||
.attr("offset", "60%")
|
||||
.style("stop-color", "#ff0000");
|
||||
|
||||
gradientMetal.append("stop")
|
||||
.attr("offset", "95%")
|
||||
.style("stop-color", "#d30808");
|
||||
|
||||
gradientMetal.append("stop")
|
||||
.attr("offset", "100%")
|
||||
.style("stop-color", "#d30808");
|
||||
|
||||
if (is_login && spined == 0) {
|
||||
if (screenWidth <= 991) {
|
||||
const spinCircle = container.append("circle")
|
||||
.attr("id", "spinCircle")
|
||||
.attr("cx", 0)
|
||||
.attr("cy", 0)
|
||||
.attr("r", 40)
|
||||
.style({
|
||||
"fill": "#ff9800",
|
||||
"cursor": "pointer",
|
||||
"filter": "drop-shadow(px 3px 8px red)",
|
||||
"transition": "filter 0.3s ease-in-out, stroke 0.3s ease-in-out",
|
||||
"stroke": "#fff",
|
||||
"stroke-width": 8
|
||||
}).on("click", spin)
|
||||
.on("mouseover", function () {
|
||||
d3.select(this).style("filter", "drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.7))").style("stroke", "#aaa");
|
||||
})
|
||||
.on("mouseout", function () {
|
||||
d3.select(this).style("filter", "drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.5))").style("stroke", "#777");
|
||||
}).on("click", spin);
|
||||
|
||||
container.append("text")
|
||||
.attr("x", 0)
|
||||
.attr("y", 10)
|
||||
.attr("text-anchor", "middle")
|
||||
.text("QUAY")
|
||||
.style({
|
||||
"font-weight": "800",
|
||||
"font-size": "1.3rem",
|
||||
"fill": "red",
|
||||
"font-family": "sans-serif",
|
||||
"cursor": "pointer",
|
||||
// "filter": "drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.7))"
|
||||
}).on("click", spin);
|
||||
} else {
|
||||
const spinCircle = container.append("circle")
|
||||
.attr("id", "spinCircle")
|
||||
.attr("cx", 0)
|
||||
.attr("cy", 0)
|
||||
.attr("r", 50)
|
||||
.style({
|
||||
"fill": "#ffd63b",
|
||||
"cursor": "pointer",
|
||||
"filter": "drop-shadow(px 3px 8px red)",
|
||||
"transition": "filter 0.3s ease-in-out, stroke 0.3s ease-in-out",
|
||||
"stroke": "#f80000",
|
||||
"stroke-width": 5
|
||||
}).on("click", spin)
|
||||
.on("mouseover", function () {
|
||||
d3.select(this).style("filter", "drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.7))").style("stroke", "#aaa");
|
||||
})
|
||||
.on("mouseout", function () {
|
||||
d3.select(this).style("filter", "drop-shadow(3px 3px 8px rgba(0, 0, 0, 0.5))").style("stroke", "#777");
|
||||
}).on("click", spin);
|
||||
|
||||
container.append("text")
|
||||
.attr("x", 0)
|
||||
.attr("y", 10)
|
||||
.attr("text-anchor", "middle")
|
||||
.text("QUAY")
|
||||
.style({
|
||||
"font-weight": "600",
|
||||
"font-size": "1.8rem",
|
||||
"fill": "#eb0a0a",
|
||||
"font-family": "Baloo Paaji",
|
||||
"cursor": "pointer",
|
||||
// "filter": "drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.7))"
|
||||
}).on("click", spin);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function rotTween(to) {
|
||||
var i = d3.interpolate(oldrotation % 360, rotation);
|
||||
return function (t) {
|
||||
return "rotate(" + i(t) + ")";
|
||||
};
|
||||
}
|
||||
|
||||
function getRandomNumbers() {
|
||||
var array = new Uint16Array(1000);
|
||||
var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]);
|
||||
if (window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function") {
|
||||
window.crypto.getRandomValues(array);
|
||||
console.log("works");
|
||||
} else {
|
||||
//no support for crypto, get crappy random numbers
|
||||
for (var i = 0; i < 1000; i++) {
|
||||
array[i] = Math.floor(Math.random() * 100000) + 1;
|
||||
}
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function update_prize_user(prize_id, prize_label, prize_detail) {
|
||||
var csrfToken = $('meta[name="csrf-token"]').attr('content');
|
||||
|
||||
$.ajax({
|
||||
url: "{{ route('updateprizeuser') }}",
|
||||
type: 'POST',
|
||||
data: {
|
||||
prize_id: prize_id,
|
||||
_token: csrfToken // Bao gồm CSRF token
|
||||
},
|
||||
dataType: 'json', // Mong đợi dữ liệu trả về là JSON
|
||||
success: function (response) {
|
||||
if (response.success) {
|
||||
const prizeListItems = document.querySelectorAll('#prize-list li.blinking-bg');
|
||||
|
||||
prizeListItems.forEach(item => {
|
||||
// Cập nhật background color
|
||||
item.style.backgroundColor = '#858585 !important'; // Thay 'your-new-background-color' bằng màu bạn muốn
|
||||
|
||||
// Bỏ animation bằng cách xóa thuộc tính animation trong style
|
||||
item.style.animation = '';
|
||||
|
||||
// Hoặc bạn có thể xóa class 'blinking-bg' nếu không muốn bất kỳ style nào liên quan đến nó nữa
|
||||
// item.classList.remove('blinking-bg');
|
||||
});
|
||||
var winModalID = document.getElementById('winModal');
|
||||
var winModal = new bootstrap.Modal(winModalID, {
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
});
|
||||
winModal.show();
|
||||
$('#prize_label_cloud').html(prize_label + ' - ' + prize_detail);
|
||||
} else {
|
||||
alert('Có lỗi xảy ra');
|
||||
}
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
alert('Có lỗi xảy ra');
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<div class="modal fade" id="winModal" tabindex="-1" aria-labelledby="winModalLabel" aria-hidden="true"
|
||||
data-bs-backdrop="static" data-bs-keyboard="false">>
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content cloud-popup">
|
||||
<div class="cloud-top">
|
||||
<img src="{{ asset('frontend/imgs/LogoSIS.png') }}" alt="Đỉnh mây">
|
||||
</div>
|
||||
<div class="cloud-body">
|
||||
<div class="prize-info">
|
||||
<h5 class="modal-title" id="winModalLabel">🎉 XIN CHÚC MỪNG! 🎉</h5>
|
||||
<p>giải thưởng của bạn là</p>
|
||||
<span class="prize-name">🎁 <span id="prize_label_cloud"></span> 🎁</span>
|
||||
<div style="background-color: transparent;
|
||||
color: #000;
|
||||
text-align: center;">
|
||||
<p style="font-size: 1.5rem;
|
||||
margin-bottom: 10px;
|
||||
color: #000;
|
||||
font-family: sans-serif;">Thích trang Facebook của chúng tôi để cập nhật những thông
|
||||
tin mới nhất và ưu đãi hấp dẫn!</p>
|
||||
<div class="facebook-container">
|
||||
<iframe src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/benhviendotquycantho&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
|
||||
style="border:none;overflow:hidden"
|
||||
scrolling="no"
|
||||
frameborder="0"
|
||||
allowfullscreen="true"
|
||||
allowTransparency="true"
|
||||
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="facebook-container">
|
||||
<iframe src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/Quytuthienbenhnhanngheodotquysis&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
|
||||
style="border:none;overflow:hidden"
|
||||
scrolling="no"
|
||||
frameborder="0"
|
||||
allowfullscreen="true"
|
||||
allowTransparency="true"
|
||||
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="facebook-container">
|
||||
<script>
|
||||
(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = 'https://sp.zalo.me/plugins/sdk.js';
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'zalo-jssdk'));
|
||||
</script>
|
||||
<div class="slogan">Chat với chúng tôi</div>
|
||||
<div class="zalo-chat-widget" data-oaid="264535885405684753"
|
||||
data-welcome-msg="Chào bạn, chúng tôi có thể giúp gì cho bạn?"
|
||||
data-autopopup="0" data-width="350px" data-height="1000px">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="custom btn btn-secondary" data-bs-dismiss="modal" id="close_btn">
|
||||
ĐÓNG <i class="fas fa-window-close"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
#prize_label {
|
||||
font-size: 3rem;
|
||||
color: #695aa6;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#close_btn {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
background-color: #e60012;
|
||||
border-radius: 0.5rem;
|
||||
top: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
box-shadow: 1px 1px 20px #fff;
|
||||
animation: blinker 1s linear infinite;
|
||||
}
|
||||
|
||||
#close_btn i {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 0;
|
||||
/* Tại 50% thời gian, độ mờ là 0 (ẩn) */
|
||||
}
|
||||
}
|
||||
|
||||
.zalo-chat-widget {
|
||||
height: 100vh !important;
|
||||
}
|
||||
.zalo-chat-widget iframe {
|
||||
height: 100% !important;
|
||||
width: 30rem !important;
|
||||
}
|
||||
.za-chat .chat-wrapper .box__header {
|
||||
background-color: #ed3a54 !important;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$('#close_btn').on('click', function () {
|
||||
window.location.reload();
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,90 @@
|
||||
<div class="prize-info">
|
||||
<a href="{{ route('/') }}" style="color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
font-weight: normal;
|
||||
background-color: #bd021b;
|
||||
margin: auto;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
width: fit-content;
|
||||
padding: 0.3rem 3rem;
|
||||
border-radius: 3rem;
|
||||
box-shadow: 1px 1px 6px #000;">Trở lại</a>
|
||||
<h5 class="prize_title" id="winModalLabel">🎉 XIN CHÚC MỪNG! 🎉</h5>
|
||||
<p>giải thưởng của bạn là</p>
|
||||
<span class="prize-name">🎁 {{ $prize_obj->prize_name ?? '' }} 🎁</span>
|
||||
<div style="background-color: transparent;
|
||||
color: #000;
|
||||
text-align: center;">
|
||||
<p>Thích trang Facebook của chúng tôi để cập nhật những thông
|
||||
tin mới nhất và ưu đãi hấp dẫn!</p>
|
||||
<div class="facebook-container">
|
||||
<iframe src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/benhviendotquycantho&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
|
||||
style="border:none;overflow:hidden"
|
||||
scrolling="no"
|
||||
frameborder="0"
|
||||
allowfullscreen="true"
|
||||
allowTransparency="true"
|
||||
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="facebook-container">
|
||||
<iframe src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/Quytuthienbenhnhanngheodotquysis&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
|
||||
style="border:none;overflow:hidden"
|
||||
scrolling="no"
|
||||
frameborder="0"
|
||||
allowfullscreen="true"
|
||||
allowTransparency="true"
|
||||
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
|
||||
</iframe>
|
||||
</div>
|
||||
<a href="https://zalo.me/264535885405684753" target="_blank" rel="noopener noreferrer" style="color: #fff; font-size: 2rem;">
|
||||
Liên hệ với chúng tôi qua Zalo <img src="{{ asset('frontend/imgs/zalo_icon.webp') }}"
|
||||
alt="Chat Zalo"
|
||||
style="width: 50px; height: 50px; cursor: pointer;">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
#prize_label {
|
||||
font-size: 3rem;
|
||||
color: #695aa6;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#close_btn {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
background-color: #e60012;
|
||||
border-radius: 0.5rem;
|
||||
top: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
box-shadow: 1px 1px 20px #fff;
|
||||
animation: blinker 1s linear infinite;
|
||||
}
|
||||
|
||||
#close_btn i {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 0;
|
||||
/* Tại 50% thời gian, độ mờ là 0 (ẩn) */
|
||||
}
|
||||
}
|
||||
|
||||
.zalo-chat-widget {
|
||||
height: 100vh !important;
|
||||
}
|
||||
.zalo-chat-widget iframe {
|
||||
height: 100% !important;
|
||||
width: 30rem !important;
|
||||
}
|
||||
.za-chat .chat-wrapper .box__header {
|
||||
background-color: #ed3a54 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,28 @@
|
||||
<div class="modal fade" id="ruleModal" tabindex="-1" role="dialog" aria-labelledby="ruleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog default_dialog full-modal-dialog" role="document">
|
||||
<div class="modal-content" style="margin-top: 0;">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="myModalLabel" style="line-height: 1.5;
|
||||
font-size: 3rem;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin: auto;">THỂ LỆ THAM DỰ</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="padding: 0.5rem 3rem;
|
||||
background-color: #ff0000;
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
border-radius: 3rem;
|
||||
box-shadow: 1px 1px 6px #000;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 6rem;
|
||||
position: absolute;
|
||||
font-weight: normal;">
|
||||
Đóng
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body" id="gamerule">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
<div class="bg"></div>
|
||||
<div class="bg bg2"></div>
|
||||
<div class="bg bg3"></div>
|
||||
<div class="bg_content">
|
||||
{!! $data->parameter_value ?? '' !!}
|
||||
</div>
|
||||
Reference in New Issue
Block a user