basketballcantho/-S.I.S-QuaySo_v2
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
hienp
2026-03-26 09:28:14 +07:00
commit fa46a144d8
20180 changed files with 2692766 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/frontend/customer/account.blade.php
+247
View File
@@ -0,0 +1,247 @@
@extends('frontend.layout')
@section('content')
<div class="container page_container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
@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'}}
@php
Session::forget('errors');
@endphp
</div>
@endif
<div class="customer_form">
@if (Auth::check())
<div class="title">Cập nhật thông tin cá nhân</div>
<form action="{{ route('updateaccount') }}" method="POST">
{{ csrf_field() }}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="name">Tên người dùng:</label>
@php
$name = Auth::user()->name ?? '';
if (old('name') != '') {
$name = old('name');
}
@endphp
<input class="form-control" name="name" id="name" value="{{ $name ?? '' }}" />
@if ($errors->has('name'))
<span class="text-danger">{{ $errors->first('name') }}</span>
@endif
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="phone">Số điện thoại:</label>
@php
$phone = Auth::user()->phone ?? '';
if (old('phone') != '') {
$phone = old('phone');
}
@endphp
<input class="form-control" name="phone" id="phone" value="{{ $phone ?? '' }}" />
@if ($errors->has('phone'))
<span class="text-danger">{{ $errors->first('phone') }}</span>
@endif
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="address">Nơi sinh sống:</label>
@php
$address = Auth::user()->address ?? '';
if (old('address') != '') {
$address = old('address');
}
@endphp
<input class="form-control" name="address" id="address" value="{{ $address ?? '' }}" />
@if ($errors->has('address'))
<span class="text-danger">{{ $errors->first('address') }}</span>
@endif
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Nếu trước đó đã biết Bệnh viện ĐKQT S.I.S Cần Thơ?</label>
@php
$known_sis = old('known_sis', Auth::user()->known_sis ?? '');
@endphp
<div class="form-check">
<input class="form-check-input" type="radio" name="known_sis" id="known_sis_yes" value="1" {{ $known_sis === '1' ? 'checked' : '' }}>
<label class="form-check-label" for="known_sis_yes">Có</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="known_sis" id="known_sis_no" value="0" {{ $known_sis === '0' ? 'checked' : '' }}>
<label class="form-check-label" for="known_sis_no">Không</label>
</div>
@if ($errors->has('known_sis'))
<span class="text-danger">{{ $errors->first('known_sis') }}</span>
@endif
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="job">Nghề nghiệp:</label>
@php
$job = Auth::user()->job ?? '';
if (old('job') != '') {
$job = old('job');
}
@endphp
<input class="form-control" name="job" id="job" value="{{ $job ?? '' }}" />
@if ($errors->has('job'))
<span class="text-danger">{{ $errors->first('job') }}</span>
@endif
</div>
</div>
<div class="col-md-12" style="display: none;">
<div class="form-group">
<label for="password">Mật khẩu:</label>
<input class="form-control" name="password" id="password" value="" />
@if ($errors->has('password'))
<span class="text-danger">{{ $errors->first('password') }}</span>
@endif
</div>
</div>
<div class="col-md-12">
<button type="submit" class="custom_btn align-right">Cập nhật</button>
<a href="{{ route('logout') }}" type="button" class="custom_btn red_btn align-right">Đăng
xuất</a>
</div>
</div>
</form>
@else
<div class="title">Nhập thông tin cá nhân</div>
<div class="alert alert-danger">
(*) Nhập thông tin cá nhân trước khi quay số
</div>
<form action="{{ route('createaccount') }}" method="POST">
{{ csrf_field() }}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="name">Tên người dùng:</label>
@php
$name = '';
if (old('name') != '') {
$name = old('name');
}
@endphp
<input class="form-control" name="name" id="name" value="{{ $name ?? '' }}" />
@if ($errors->has('name'))
<span class="text-danger">{{ $errors->first('name') }}</span>
@endif
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="phone">Số điện thoại:</label>
@php
$phone = '';
if (old('phone') != '') {
$phone = old('phone');
}
@endphp
<input class="form-control" name="phone" id="phone" value="{{ $phone ?? '' }}" />
@if ($errors->has('phone'))
<span class="text-danger">{{ $errors->first('phone') }}</span>
@endif
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="address">Nơi sinh sống:</label>
@php
$address = '';
if (old('address') != '') {
$address = old('address');
}
@endphp
<input class="form-control" name="address" id="address" value="{{ $address ?? '' }}" />
@if ($errors->has('address'))
<span class="text-danger">{{ $errors->first('address') }}</span>
@endif
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Nếu trước đó đã biết Bệnh viện ĐKQT S.I.S Cần Thơ?</label>
@php
$known_sis = old('known_sis', '');
@endphp
<div class="form-check">
<input class="form-check-input" type="radio" name="known_sis" id="known_sis_yes" value="1" {{ $known_sis === '1' ? 'checked' : '' }}>
<label class="form-check-label" for="known_sis_yes">Có</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="known_sis" id="known_sis_no" value="0" {{ $known_sis === '0' ? 'checked' : '' }}>
<label class="form-check-label" for="known_sis_no">Không</label>
</div>
@if ($errors->has('known_sis'))
<span class="text-danger">{{ $errors->first('known_sis') }}</span>
@endif
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="job">Nghề nghiệp:</label>
@php
$job = '';
if (old('job') != '') {
$job = old('job');
}
@endphp
<input class="form-control" name="job" id="job" value="{{ $job ?? '' }}" />
@if ($errors->has('job'))
<span class="text-danger">{{ $errors->first('job') }}</span>
@endif
</div>
</div>
<div class="col-md-12">
<button type="submit" class="custom_btn align-right">Gửi thông tin</button>
</div>
</div>
</form>
@endif
</div>
</div>
<div class="col-md-4">
<div class="prize_history">
<a class="blinking-border-button mx-auto" href="{{route('game')}}">Quay lại chức năng quay số</a>
<div class="title">LỊCH SỬ HOẠT ĐỘNG</div>
<ul class="list-group">
@if (isset($history_data))
@foreach ($history_data as $history_item)
<li class="list-group-item">
Trúng thưởng {{ $history_item->prize_name ?? '' }} vào lúc
{{ date_format(date_create($history_item->created_at), "d/m/Y H:i") }}
</li>
@endforeach
@endif
</ul>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
@endsection
resources/views/frontend/customer/login.blade.php
+60
View File
@@ -0,0 +1,60 @@
@extends('frontend.layout')
@section('content')
<script src="{{asset('frontend/js/login.js')}}"></script>
<header id="home" class="header">
<div class="overlay"></div>
<div class="header-content login-header-content container">
<div class="custom_form">
@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'}}
@php
Session::forget('errors');
@endphp
</div>
@endif
<form action="{{route('login')}}" method="POST">
<div class="title">Đăng nhập</div>
{{ csrf_field() }}
<div class="form-group">
<label for="email">Tên đăng nhập <span class="required">(*)</span></label>
<input class="form-control" name="email" id="email" placeholder="Tên đăng nhập ..." value="{{old('email')}}" />
@if ($errors->has('email'))
<span class="text-danger">{{ $errors->first('email') }}</span>
@endif
</div>
<div class="form-group">
<label for="password">Mật khẩu <span class="required">(*)</span></label>
<div class="form-control input-group">
<input type="password" placeholder="Mật khẩu ..." name="password" id="password"
autocomplete="new-password" class="form-control" >
<button type="button" id="btnToggle" class="toggle"><i id="eyeIcon" class="fa fa-eye"></i></button>
</div>
@if ($errors->has('password'))
<span class="text-danger">{{ $errors->first('password') }}</span>
@endif
</div>
<button class="custom_btn" type="submit">Đăng nhập</button>
<div class="custom_line"></div>
<p>Nếu chưa có tài khoản, <a class="custom_btn" href="{{route('register')}}">Đăng ký</a> tại đây</p>
</form>
</div>
</div>
</header>
@endsection
resources/views/frontend/game/customprize_popup.blade.php
+133
View File
@@ -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
resources/views/frontend/game/layout.blade.php
+41
View File
@@ -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>
resources/views/frontend/game/luckywheel.blade.php
+392
View File
@@ -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(/&quot;/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>
resources/views/frontend/game/luckywheel_old.blade.php
+841
View File
@@ -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(/&quot;/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>
resources/views/frontend/game/luckywheel_popup.blade.php
+111
View File
@@ -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>
resources/views/frontend/game/luckywheel_prize.blade.php
+90
View File
@@ -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>
resources/views/frontend/game/rule.blade.php
+28
View File
@@ -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>
resources/views/frontend/game/rule_popup.blade.php
+6
View File
@@ -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>
resources/views/frontend/index.blade.php
+8
View File
@@ -0,0 +1,8 @@
@extends('frontend.layout')
@section('content')
<!-- about me -->
@include('frontend.game.luckywheel')
<!-- footer -->
<!-- end of page footer -->
@endsection
resources/views/frontend/layout.blade.php
+39
View File
@@ -0,0 +1,39 @@
<!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="Cứu tinh cho bệnh nhân đột quỵ">
<meta name="author" content="Devcrud">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="icon" href="{{asset('frontend/imgs/LogoSIS.png')}}" type="image/x-icon">
<title>S.I.S</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.9')}}">
<link href="{{asset('frontend/fontawesome/all.css')}}" rel="stylesheet">
<script src="{{asset('frontend/vendors/jquery/jquery-3.4.1.js')}}"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="40" id="home">
<!-- menu -->
@include('frontend.parts.menu')
<!-- end menu -->
@yield('content')
<!-- 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>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v22.0"></script>
</body>
</html>
resources/views/frontend/parts/book.blade.php
+215
View File
@@ -0,0 +1,215 @@
<div class="book">
<div class="page">
<div class="front cover">
<h1>FlipBook</h1>
<p>2024.<br>Second edition</p>
</div>
<div class="back">
<h2>Responsive</h2>
<p>Fully responsive CSS flip book, thanks to the <code>cqmin</code> unit.</p>
</div>
</div>
<div class="page">
<div class="front">
<p>Even more, the book height is dicated by the amount of content in the tallest page.
The only thing you need to take care of is how much text you put into a page.</p>
</div>
<div class="back">
<img src="https://picsum.photos/id/24/600/600" alt="Img 1">
</div>
</div>
<div class="page">
<div class="front">
<h2>JS at its minimum</h2>
<p>JavaScript is at its minimum. Basically it's only used to set the initial
page index and assign click listeners to the pages. Modifies the CSS <b>Var</b>
for the <i>current</i> page, and the rest is handled entirely by CSS.</p>
</div>
<div class="back">
<p>Additionally JavaScript allows you to click on an anchor link in your
text — without turning the page. You can also have multiple independent
flip books in a single document. You're all covered.</p>
</div>
</div>
<div class="page">
<div class="front">
<h2>Crafting CSS magic</h2>
<p>The opened (<i>viewing</i>) pages of the flip book are always kept at the same elevation.
This is necessary if your book has no inclination (is top-down-view).
Have you noticed that you can also click on the pages edge? CSS will nicely animate the group
of pages to skip with a staggered animation.</p>
</div>
<div class="back">
<p>Like in this demo, you can change the perspective of the parent container and change the
X axis rotation of the book for extra effect.</p>
</div>
</div>
<div class="page">
<div class="front">
<p>The necessary FlipBook's CSS is barely 30 lines, there is no swipe, natural page flip angling,
complex shadows, etc. in order to keep it as simple as possible.</p>
</div>
<div class="back">
<p>Feel free to use and abuse this code. Drop me a line if you find it cool or useful, or just
want to say <i>hi</i>.</p>
</div>
</div>
<div class="page">
<div class="front">
<img src="https://picsum.photos/id/1073/600/600" alt="Img 2">
</div>
<div class="back cover">
<h3>That's all, folks</h3>
<p>FlipBook code and content:<br><a href="https://stackoverflow.com/users/383904/roko-c-buljan"
target="_blank" rel="nofollow">Roko C. Buljan</a>
<br>Original idea:<br><a href="https://stackoverflow.com/a/76978444/383904" target="_blank"
rel="nofollow">Stack Overflow answer</a>
<br>Images by: picsum.photos
</p>
</div>
</div>
</div>
<style>
.book {
position: absolute;
display: flex;
margin: auto;
width: 40cqmin;
pointer-events: none;
transform-style: preserve-3d;
transition: translate 1s;
translate: calc(min(var(--c), 1) * 50%) 0%;
rotate: 1 0 0 40deg;
top: 4rem;
left: 4rem;
}
.page {
/* PS: Don't go below thickness 0.5 or the pages might transpare */
--thickness: 4;
flex: none;
display: flex;
width: 100%;
font-size: 2cqmin;
/*1* allow pointer events on pages */
pointer-events: all;
user-select: none;
transform-style: preserve-3d;
transform-origin: left center;
transition:
transform 1s,
rotate 1s ease-in calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms);
translate: calc(var(--i) * -100%) 0px 0px;
transform: translateZ(calc((var(--c) - var(--i) - 0.5) * calc(var(--thickness) * .23cqmin)));
rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);
}
.front,
.back {
position: relative;
flex: none;
width: 100%;
backface-visibility: hidden;
overflow: hidden;
background-color: #fff;
/* Fix backface visibility Firefox: */
translate: 0px;
}
.back {
translate: -100% 0;
rotate: 0 1 0 180deg;
}
/* That's it. Your FlipBook customization styles: */
.book {
counter-reset: page -1;
& a {
color: inherit;
}
}
.page {
box-shadow: 0em .5em 1em -.2em #00000020;
}
.front,
.back {
display: flex;
flex-flow: column wrap;
justify-content: space-between;
padding: 2em;
border: 1px solid #0002;
&:has(img) {
padding: 0;
}
& img {
width: 100%;
height: 100%;
object-fit: cover;
}
&::after {
position: absolute;
bottom: 1em;
counter-increment: page;
content: counter(page) ".";
font-size: 0.8em;
}
}
.cover {
&::after {
content: "";
}
}
.front {
&::after {
right: 1em;
}
background: linear-gradient(to left, #f7f7f7 80%, #eee 100%);
border-radius: .1em .5em .5em .1em;
}
.back {
&::after {
left: 1em;
}
background-image: linear-gradient(to right, #f7f7f7 80%, #eee 100%);
border-radius: .5em .1em .1em .5em;
}
.cover {
background: radial-gradient(circle farthest-corner at 80% 20%, hsl(150 80% 20% / .3) 0%, hsl(170 60% 10% / .1) 100%),
hsl(231, 32%, 29%) url("https://picsum.photos/id/984/800/900") 50% / cover;
color: hsl(200 30% 98%);
}
</style>
<script>
const flipBook = (elBook) => {
elBook.style.setProperty("--c", 0); // Set current page
elBook.querySelectorAll(".page").forEach((page, idx) => {
page.style.setProperty("--i", idx);
page.addEventListener("click", (evt) => {
if (evt.target.closest("a")) return;
const curr = evt.target.closest(".back") ? idx : idx + 1;
elBook.style.setProperty("--c", curr);
});
});
};
document.querySelectorAll(".book").forEach(flipBook);
</script>
resources/views/frontend/parts/menu.blade.php
+30
View File
@@ -0,0 +1,30 @@
<nav class="custom-navbar" data-spy="affix" data-offset-top="20">
<div class="container">
<a class="logo" href="{{route('game')}}">
@if (isset($parameter_data['logo_image']) && $parameter_data['logo_image'] != '')
<img src="{{asset('images/' . $parameter_data['logo_image'])}}" />
@else
<img src="{{asset('frontend/imgs/LogoSIS.png')}}" />
@endif
<div class="logo_title">BỆNH VIỆN ĐA KHOA QUỐC TẾ S.I.S CẦN THƠ</div>
</a>
<ul id="menu_nav" class="nav">
<li class="item border_btn">
<a class="link" href="{{route('login')}}">
@if (Auth::check())
<!-- đã đăng nhập -->
<i class="fas fa-user"></i> {{Auth::user()->name ?? ''}}
@else
<!-- chưa đăng nhập -->
<i class="fas fa-sign-in"></i> Đăng nhập
@endif
</a>
</li>
</ul>
<a href="javascript:void(0)" id="nav-toggle" class="hamburger hamburger--elastic">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</a>
</div>
</nav>