chore: synchronize project dependencies and update vendor directory files

This commit is contained in:
2026-07-15 13:15:05 +07:00
parent 2ab9f65c99
commit 3203c6e129
10000 changed files with 1501312 additions and 0 deletions
+3
View File
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+1
View File
@@ -0,0 +1 @@
import './bootstrap';
+4
View File
@@ -0,0 +1,4 @@
import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
@@ -0,0 +1,11 @@
<?php
return [
'facebook' => '<li><a href=":url" class="social-button :class" id=":id" title=":title" rel=":rel"><span class="fab fa-facebook-square"></span></a></li>',
'twitter' => '<li><a href=":url" class="social-button :class" id=":id" title=":title" rel=":rel"><span class="fab fa-twitter"></span></a></li>',
'linkedin' => '<li><a href=":url" class="social-button :class" id=":id" title=":title" rel=":rel"><span class="fab fa-linkedin"></span></a></li>',
'whatsapp' => '<li><a target="_blank" href=":url" class="social-button :class" id=":id" title=":title" rel=":rel"><span class="fab fa-whatsapp"></span></a></li>',
'pinterest' => '<li><a href=":url" class="social-button :class" id=":id" title=":title" rel=":rel"><span class="fab fa-pinterest"></span></a></li>',
'reddit' => '<li><a target="_blank" href=":url" class="social-button :class" id=":id" title=":title" rel=":rel"><span class="fab fa-reddit"></span></a></li>',
'telegram' => '<li><a target="_blank" href=":url" class="social-button :class" id=":id" title=":title" rel=":rel"><span class="fab fa-telegram"></span></a></li>',
];
+64
View File
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Bệnh viện SIS</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="format-detection" content="telephone=yes">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{asset('public/libs/bootstrap/css/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{asset('public/backend/css/style.css')}}">
<script src="{{asset('public/libs/jquery/jquery.min.js')}}"></script>
<script src="{{asset('public/libs/bootstrap/js/bootstrap.js')}}"></script>
<script src="{{asset('public/libs/bootstrap/js/bootstrap.min.js')}}"></script>
<script src="{{asset('public/backend/js/main.js')}}"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="{{asset('public/libs/datatable/dataTables.bootstrap4.css')}}"/>
<link rel="stylesheet" href="{{asset('public/libs/datatable/responsive.bootstrap4.css')}}"/>
</head>
<body>
<div class='dashboard'>
<div class="dashboard-nav">
<!-- menu left header -->
<header>
<a href="#!" class="menu-toggle">
<i class="fas fa-bars"></i>
</a>
<a href="#" class="brand-logo">
<img src="{{asset('public/frontend/imgs/LogoSIS.png')}}" />
</a>
</header>
<!-- end menu left header -->
<!-- menu left -->
@include('backend.menu_left')
<!-- end menu left -->
</div>
<div class='dashboard-app'>
<!-- main header -->
<header class='dashboard-toolbar'>
<a href="#!" class="menu-toggle">
<i class="fas fa-bars"></i>
</a>
</header>
<!-- end main header -->
<div class='dashboard-content'>
<div class='container'>
<div class='card'>
@yield('content')
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" language="javascript" src="{{asset('public/libs/datatable/dataTables.js')}}"></script>
<script type="text/javascript" language="javascript" src="{{asset('public/libs/datatable/dataTables.bootstrap4.js')}}"></script>
<script type="text/javascript" language="javascript" src="{{asset('public/libs/datatable/dataTables.responsive.js')}}"></script>
</body>
</html>
+70
View File
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bệnh viện S.I.S</title>
<link rel="stylesheet" href="{{asset('public/libs/bootstrap/css/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{asset('public/backend/css/login.css')}}">
<script src="{{asset('public/libs/jquery/jquery.min.js')}}"></script>
<script src="{{asset('public/libs/bootstrap/js/bootstrap.js')}}"></script>
<script src="{{asset('public/libs/bootstrap/js/bootstrap.min.js')}}"></script>
<link href='https://fonts.googleapis.com/css?family=Ubuntu:500' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<div class="login_box">
<div class="login-header">
<span>S.I.S</span>
</div>
@if(Session::has('errors'))
<div class="alert alert-danger">
{{ 'Đăng nhập thất bại' }}
@php
Session::forget('errors');
@endphp
</div>
@endif
@if(Session::has('error'))
<div class="alert alert-danger">
{{ Session::get('error') ?? ''}}
@php
Session::forget('error');
@endphp
</div>
@endif
<form class="login-form" action="{{route('adminlogin')}}" method="POST">
{{ csrf_field() }}
<div class="input_box">
@php
$email = '';
if (old('email') != '') {
$email = old('email');
}
@endphp
<input type="text" id="email" name="email" class="input-field" value="{{ $email ?? '' }}" required
autocomplete="off">
<label for="email" class="label">Tên đăng nhập</label>
<i class="bx bx-user icon"></i>
</div>
@if ($errors->has('email'))
<span class="text-danger">{{ $errors->first('email') }}</span>
@endif
<div class="input_box">
<input type="password" id="pass" name="password" class="input-field" required autocomplete="new-password">
<label for="pass" class="label">Mật khẩu</label>
<i class="bx bx-lock-alt icon"></i>
</div>
@if ($errors->has('password'))
<span class="text-danger">{{ $errors->first('password') }}</span>
@endif
<div class="input_box">
<input type="submit" class="input-submit" value="Login">
</div>
</div>
</div>
</body>
</html>
@@ -0,0 +1,31 @@
<nav class="dashboard-nav-list">
@php
$menu_data = [];
if (Auth::check()) {
$menu_data = constructMenuLeft('backend_menu', Auth::user()->id);
}
@endphp
@foreach ($menu_data as $menu_item)
@php
$menu_route = route($menu_item['route']);
@endphp
<a href="{{$menu_route ?? ''}}" class="dashboard-nav-item {{str_contains(Route::currentRouteName(), $menu_item['route']) ? 'active' : ''}}">
<i class="{{$menu_item['icon'] ?? ''}}"></i> {{$menu_item['menu_name'] ?? ''}}
</a>
@endforeach
<!-- <div class='dashboard-nav-dropdown'>
<a href="#!" class="dashboard-nav-item dashboard-nav-dropdown-toggle">
<i class="fas fa-users"></i> Users
</a>
<div class='dashboard-nav-dropdown-menu'>
<a href="#" class="dashboard-nav-dropdown-item">All</a>
<a href="#" class="dashboard-nav-dropdown-item">Subscribed</a>
<a href="#" class="dashboard-nav-dropdown-item">Non-subscribed</a>
<a href="#" class="dashboard-nav-dropdown-item">Banned</a>
<a href="#" class="dashboard-nav-dropdown-item">New</a>
</div>
</div> -->
<a href="{{route('admin/logout')}}" class="dashboard-nav-item">
<i class="fas fa-sign-out-alt"></i> Logout
</a>
</nav>
@@ -0,0 +1,167 @@
@extends('backend.layout')
@section('content')
<script src="{{asset('public/libs/ckeditor/ckeditor.js')}}"></script>
<div class='card-header'>
<h1>{{$title ?? ''}}</h1>
</div>
@if(Session::has('success'))
<div class="alert alert-success">
{{ Session::get('success') }}
@php
Session::forget('success');
@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 class='card-body'>
<form action="{{route('admin/parameter')}}" method="POST" enctype="multipart/form-data">
<button type="submit" class="btn btn-primary btn-custom">Cập nhật</button>
{{ csrf_field() }}
<div class="row">
@foreach ($data as $item)
@if ($item->parameter_key == 'logo_image')
<div class="col-md-6">
<p style="text-transform: uppercase; text-align: center;"><b>Logo:</b></p>
<div class="custom-file">
<input type="file" name="logo_image" class="custom-file-input" id="logo-upload-image">
<label class="upload-image-file-label" for="logo-upload-image" id="logo-upload-image-label">
<i class='fa fa-camera'></i>
</label>
<div class="imgPreviewLogo">
@if(isset($item->parameter_value) && $item->parameter_value != '')
<img src="{{asset('public/images/' . $item->parameter_value)}}" />
@endif
</div>
<span class="text-danger" id="logo-image_ErrorMsg"></span>
</div>
</div>
@elseif ($item->parameter_key == 'banner_image')
<div class="col-md-6">
<p style="text-transform: uppercase; text-align: center;"><b>Banner:</b></p>
<div class="custom-file">
<input type="file" name="banner_image" class="custom-file-input" id="banner-upload-image">
<label class="upload-image-file-label" for="banner-upload-image" id="banner-upload-image-label">
<i class='fa fa-camera'></i>
</label>
<div class="imgPreviewBanner">
@if(isset($item->parameter_value) && $item->parameter_value != '')
<img src="{{asset('public/images/' . $item->parameter_value)}}" />
@endif
</div>
<span class="text-danger" id="banner-image_ErrorMsg"></span>
</div>
<div class="text-danger text-center">(*) Kích thước khuyến nghị 626 x 401, định dạng hình: PNG, JPG</div>
</div>
@else
<div class="form-group">
<label for="{{$item->parameter_key ?? ''}}" style="text-transform: uppercase;">
<b>{{$item->parameter_name ?? ''}}</b>
</label>
<textarea class="form-control" name="{{$item->parameter_key ?? ''}}" id="{{$item->parameter_key ?? ''}}"
style="height: 10rem;">{{$item->parameter_value ?? ''}}</textarea>
</div>
@endif
@endforeach
</div>
<br>
<button type="submit" class="btn btn-primary btn-custom">Cập nhật</button>
</form>
</div>
<script>
CKEDITOR.editorConfig = function (config) {
config.versionCheck = false;
};
var post_content = CKEDITOR.replace('game_rule', {
filebrowserBrowseUrl: '{{ asset('public/libs/ckfinder/ckfinder.html') }}',
filebrowserImageBrowseUrl: '{{ asset('public/libs/ckfinder/ckfinder.html?type=Images') }}',
filebrowserFlashBrowseUrl: '{{ asset('public/libs/ckfinder/ckfinder.html?type=Flash') }}',
filebrowserUploadUrl: '{{ asset('public/libs/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files') }}',
filebrowserImageUploadUrl: '{{ asset('public/libs/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images') }}',
filebrowserFlashUploadUrl: '{{ asset('public/libs/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash') }}'
});
post_content.config.height = 800;
$(document).ready(function () {
var multiImgPreview = function (input, imgPreviewPlaceholder, className) {
if (input.files) {
$('.' + className).empty();
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function (event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#logo-upload-image').on('change', function () {
multiImgPreview(this, 'div.imgPreviewLogo', 'imgPreviewLogo');
});
$('#banner-upload-image').on('change', function () {
multiImgPreview(this, 'div.imgPreviewBanner', 'imgPreviewBanner');
});
});
</script>
<style>
#logo-upload-image,
#banner-upload-image {
display: none;
}
#logo-upload-image-label,
#banner-upload-image-label {
font-size: 3rem;
}
.custom-file {
text-align: center;
min-height: 15rem;
}
.imgPreviewLogo {
width: 8rem;
height: 8rem;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border: 0.1rem solid;
border-radius: 1rem;
margin: auto;
}
.imgPreviewLogo img {
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
}
.imgPreviewBanner {
width: 8rem;
height: 8rem;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border: 0.1rem solid;
border-radius: 1rem;
margin: auto;
}
.imgPreviewBanner img {
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
}
</style>
@endsection
@@ -0,0 +1,157 @@
@extends('backend.layout')
@section('content')
<script src="{{asset('public/libs/ckeditor/ckeditor.js')}}"></script>
@if(Session::has('success'))
<div class="alert alert-success">
{{ Session::get('success') }}
@php
Session::forget('success');
@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 class='card-header'>
<h1>{{$title ?? ''}}</h1>
</div>
<div class='card-body'>
<a class="btn btn-primary btn-custom right default" href="{{route('admin/prizes')}}">Trở về danh sách</a><br>
<form enctype="multipart/form-data" action="{{route('admin/prize/update')}}" method="POST">
{{ csrf_field() }}
<input type="hidden" name="id" value="{{$data->id ?? 0}}" />
<button class="btn btn-primary btn-custom" type="submit">
@if (isset($data->id) && $data->id != '')
Cập nhật
@else
Thêm mới
@endif
</button>
<br>
<div class="row">
<div class="col-md-12">
<div class="custom-file">
<input type="file" name="prize_image" class="custom-file-input" id="upload-image">
<label class="upload-image-file-label" for="upload-image" id="upload-image-label">
<i class='fa fa-camera'></i>
</label>
<div class="imgPreview">
@if(isset($data->prize_image) && $data->prize_image != '')
<img src="{{asset('public/images/' . $data->prize_image)}}" />
@endif
</div>
<span class="text-danger" id="prize-image_ErrorMsg"></span>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="prize_name">Tên giải thưởng</label>
@php
$prize_name = $data->prize_name ?? '';
if (old('prize_name') != '') {
$prize_name = old('prize_name');
}
@endphp
<input class="form-control" id="prize_name" name="prize_name" value="{{$prize_name ?? ''}}" />
@if ($errors->has('prize_name'))
<span class="text-danger">{{ $errors->first('prize_name') }}</span>
@endif
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="prize_number">Số lượng giải thưởng</label>
@php
$prize_number = $data->prize_number ?? '';
if (old('prize_number') != '') {
$prize_number = old('prize_number');
}
@endphp
<input class="form-control" id="prize_number" name="prize_number" value="{{$prize_number ?? ''}}" />
@if ($errors->has('prize_number'))
<span class="text-danger">{{ $errors->first('prize_number') }}</span>
@endif
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="prize_order">STT giải thưởng</label>
@php
$prize_order = $data->prize_order ?? '';
if (old('prize_order') != '') {
$prize_order = old('prize_order');
}
@endphp
<input class="form-control" id="prize_order" name="prize_order" value="{{$prize_order ?? ''}}" />
@if ($errors->has('prize_order'))
<span class="text-danger">{{ $errors->first('prize_order') }}</span>
@endif
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="prize_status">Trạng thái</label>
@php
$prize_status = $data->prize_status ?? '';
if (old('prize_status') != '') {
$prize_status = old('prize_status');
}
@endphp
<select class="form-control" id="prize_status" name="prize_status">
<option value="">Chưa chọn</option>
<option value="1" {{isset($prize_status) && $prize_status == 1 ? 'selected' : ''}}>Hiển thị
</option>
<option value="0" {{isset($prize_status) && $prize_status == 0 ? 'selected' : ''}}>Ẩn</option>
</select>
@if ($errors->has('prize_status'))
<span class="text-danger">{{ $errors->first('prize_status') }}</span>
@endif
</div>
</div>
<div class="col-md-12" style="display: none;">
<div class="form-group">
<label for="prize_content">Nội dung giải thưởng</label>
@php
$prize_content = $data->prize_content ?? '';
if (old('prize_content') != '') {
$prize_content = old('prize_content');
}
@endphp
<textarea class="form-control" id="prize_content" name="prize_content"
rows="10">{{$prize_content ?? ''}}</textarea>
@if ($errors->has('prize_content'))
<span class="text-danger">{{ $errors->first('prize_content') }}</span>
@endif
</div>
</div>
</div>
<br>
<button class="btn btn-primary btn-custom" type="submit">
@if (isset($data->id) && $data->id != '')
Cập nhật
@else
Thêm mới
@endif
</button>
</form>
</div>
<script>
CKEDITOR.editorConfig = function (config) {
config.versionCheck = false;
};
var post_content = CKEDITOR.replace('prize_content', {
filebrowserBrowseUrl: '{{ asset('public/libs/ckfinder/ckfinder.html') }}',
filebrowserImageBrowseUrl: '{{ asset('public/libs/ckfinder/ckfinder.html?type=Images') }}',
filebrowserFlashBrowseUrl: '{{ asset('public/libs/ckfinder/ckfinder.html?type=Flash') }}',
filebrowserUploadUrl: '{{ asset('public/libs/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files') }}',
filebrowserImageUploadUrl: '{{ asset('public/libs/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images') }}',
filebrowserFlashUploadUrl: '{{ asset('public/libs/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash') }}'
});
post_content.config.height = 800;
</script>
@endsection
@@ -0,0 +1,9 @@
@extends('backend.layout')
@section('content')
<div class='card-header'>
<h1>{{$title ?? ''}}</h1>
</div>
<div class='card-body'>
@include('backend.prize.table')
</div>
@endsection
@@ -0,0 +1,50 @@
@php
$order_number = 0;
@endphp
<div class="row">
<div class="col-md-12">
<a class="btn btn-primary btn-custom right small" href="{{route($route_name_update)}}?id=0">Thêm mới</a>
</div>
</div>
<br>
<div class="container">
<table class="datatable table table-striped table-bordered" id="table">
<thead>
<tr>
<th class="text-center">STT</th>
<th>TÊN GIẢI THƯỞNG</th>
<th class="text-center">HÌNH ẢNH</th>
<th class="text-center">SỐ NGƯỜI NHẬN GIẢI</th>
<th class="text-center">Trạng thái</th>
</tr>
</thead>
<tbody>
@foreach ($data as $item)
<tr>
<td class="text-center">{{++$order_number ?? ''}}</td>
<td>
<a class="custom-link" href="{{route($route_name_update)}}?id={{$item->id ?? ''}}">
Giải {{$item->prize_order ?? ''}} - {{$item->prize_name ?? ''}}
</a>
</td>
<td class="text-center">
@if ($item->prize_image != '')
<img src="{{asset('public/images/' . $item->prize_image)}}" />
@endif
</td>
<td class="text-center">
{{ $item->prize_count ?? 0 }} / {{ $item->prize_number ?? 0 }}
@if ($item->prize_count >= $item->prize_number)
<span class="text-danger"> (Số lượng hết)</span>
@endif
</td>
<td class="text-center">
<p>{{$item->prize_status == 1 ? 'Hiển thị' : 'Ẩn'}}</p>
<a href="{{route('admin/prize/delete', $item->id)}}" class="custom-danger-link"
onclick="return confirm('Bạn có chắc muốn xóa ?')">Xóa</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@@ -0,0 +1,157 @@
@extends('backend.layout')
@section('content')
<script src="{{asset('public/libs/ckeditor/ckeditor.js')}}"></script>
@if(Session::has('success'))
<div class="alert alert-success">
{{ Session::get('success') }}
@php
Session::forget('success');
@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 class='card-header'>
<h1>{{$title ?? ''}}</h1>
</div>
<div class='card-body'>
<a class="btn btn-primary btn-custom right default" href="{{route('admin/prize')}}">Trở về danh sách</a><br>
<form enctype="multipart/form-data" action="{{route('admin/prize/update')}}" method="POST">
{{ csrf_field() }}
<input type="hidden" name="id" value="{{$data->id ?? 0}}" />
<button class="btn btn-primary btn-custom" type="submit">
@if (isset($data->id) && $data->id != '')
Cập nhật
@else
Thêm mới
@endif
</button>
<br>
<div class="row">
<div class="col-md-12">
<div class="custom-file">
<input type="file" name="prize_image" class="custom-file-input" id="upload-image">
<label class="upload-image-file-label" for="upload-image" id="upload-image-label">
<i class='fa fa-camera'></i>
</label>
<div class="imgPreview">
@if(isset($data->prize_image) && $data->prize_image != '')
<img src="{{asset('public/images/' . $data->prize_image)}}" />
@endif
</div>
<span class="text-danger" id="prize-image_ErrorMsg"></span>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="prize_name">Tên giải thưởng</label>
@php
$prize_name = $data->prize_name ?? '';
if (old('prize_name') != '') {
$prize_name = old('prize_name');
}
@endphp
<input class="form-control" id="prize_name" name="prize_name" value="{{$prize_name ?? ''}}" />
@if ($errors->has('prize_name'))
<span class="text-danger">{{ $errors->first('prize_name') }}</span>
@endif
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="prize_number">Số lượng giải thưởng</label>
@php
$prize_number = $data->prize_number ?? '';
if (old('prize_number') != '') {
$prize_number = old('prize_number');
}
@endphp
<input class="form-control" id="prize_number" name="prize_number" value="{{$prize_number ?? ''}}" />
@if ($errors->has('prize_number'))
<span class="text-danger">{{ $errors->first('prize_number') }}</span>
@endif
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="prize_order">STT giải thưởng</label>
@php
$prize_order = $data->prize_order ?? '';
if (old('prize_order') != '') {
$prize_order = old('prize_order');
}
@endphp
<input class="form-control" id="prize_order" name="prize_order" value="{{$prize_order ?? ''}}" />
@if ($errors->has('prize_order'))
<span class="text-danger">{{ $errors->first('prize_order') }}</span>
@endif
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="prize_status">Trạng thái</label>
@php
$prize_status = $data->prize_status ?? '';
if (old('prize_status') != '') {
$prize_status = old('prize_status');
}
@endphp
<select class="form-control" id="prize_status" name="prize_status">
<option value="">Chưa chọn</option>
<option value="1" {{isset($prize_status) && $prize_status == 1 ? 'selected' : ''}}>Hiển thị
</option>
<option value="0" {{isset($prize_status) && $prize_status == 0 ? 'selected' : ''}}>Ẩn</option>
</select>
@if ($errors->has('prize_status'))
<span class="text-danger">{{ $errors->first('prize_status') }}</span>
@endif
</div>
</div>
<div class="col-md-12" style="display: none;">
<div class="form-group">
<label for="prize_content">Nội dung giải thưởng</label>
@php
$prize_content = $data->prize_content ?? '';
if (old('prize_content') != '') {
$prize_content = old('prize_content');
}
@endphp
<textarea class="form-control" id="prize_content" name="prize_content"
rows="10">{{$prize_content ?? ''}}</textarea>
@if ($errors->has('prize_content'))
<span class="text-danger">{{ $errors->first('prize_content') }}</span>
@endif
</div>
</div>
</div>
<br>
<button class="btn btn-primary btn-custom" type="submit">
@if (isset($data->id) && $data->id != '')
Cập nhật
@else
Thêm mới
@endif
</button>
</form>
</div>
<script>
CKEDITOR.editorConfig = function (config) {
config.versionCheck = false;
};
var post_content = CKEDITOR.replace('prize_content', {
filebrowserBrowseUrl: '{{ asset('public/libs/ckfinder/ckfinder.html') }}',
filebrowserImageBrowseUrl: '{{ asset('public/libs/ckfinder/ckfinder.html?type=Images') }}',
filebrowserFlashBrowseUrl: '{{ asset('public/libs/ckfinder/ckfinder.html?type=Flash') }}',
filebrowserUploadUrl: '{{ asset('public/libs/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files') }}',
filebrowserImageUploadUrl: '{{ asset('public/libs/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images') }}',
filebrowserFlashUploadUrl: '{{ asset('public/libs/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash') }}'
});
post_content.config.height = 800;
</script>
@endsection
@@ -0,0 +1,81 @@
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
// require '../../../vendor/autoload.php';
use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Writer\Xlsx;
use PhpOffice\PhpSpreadsheet\Style\Border;
use PhpOffice\PhpSpreadsheet\Style\Alignment;
$spreadsheet = new Spreadsheet();
$sheet = $spreadsheet->getActiveSheet();
$sheet->setTitle('Danh sách');
$sheet->setCellValue('A1', 'STT');
$sheet->setCellValue('B1', 'HỌ TÊN');
$sheet->setCellValue('C1', 'SỐ ĐIỆN THOẠI');
$sheet->setCellValue('D1', 'EMAIL');
$sheet->setCellValue('E1', 'NĂM SINH');
$sheet->setCellValue('F1', 'NGHỀ NGHIỆP');
$sheet->setCellValue('G1', 'TÊN GIẢI THƯỞNG');
$sheet->setCellValue('H1', 'NGÀY QUAY SỐ');
$sheet->setCellValue('I1', 'ĐỊA CHỈ');
$sheet->setCellValue('J1', 'BIẾT VỀ SIS');
$row = 1;// Initialize row counter
$stt = 1;
// $newsheet = new \PhpOffice\PhpSpreadsheet\Worksheet\Worksheet($spreadsheet, str_replace("/", "-", $date));
// $spreadsheet->addSheet($newsheet, 0);
// $sheet->mergeCells('A' . $row . ':X' . $row);
$sheet->getStyle('A' . $row)->applyFromArray(array(
'font' => array(
'name' => 'Calibri',
'size' => 14,
'bold' => true
),
'alignment' => [
'horizontal' => \PhpOffice\PhpSpreadsheet\Style\Alignment::HORIZONTAL_LEFT,
'vertical' => \PhpOffice\PhpSpreadsheet\Style\Alignment::VERTICAL_CENTER,
'wrapText' => true,
],
));
$row++;
foreach ($data as $item) {
$sheet->setTitle('DS Nhận Giải');
$sheet->setCellValue('A' . $row, $stt);
$sheet->setCellValue('B' . $row, $item->name ?? '');
$sheet->setCellValue('C' . $row, $item->phone ?? '');
$sheet->setCellValue('D' . $row, $item->user_email ?? '');
$sheet->setCellValue('E' . $row, $item->birth_year ?? '');
$sheet->setCellValue('F' . $row, $item->job ?? '');
$sheet->setCellValue('G' . $row, $item->prize_name ?? '');
$sheet->setCellValue('H' . $row, $item->created_at != '' ? date_format(date_create($item->created_at), "d/m/Y H:i") : '');
$sheet->setCellValue('I' . $row, $item->address ?? '');
$sheet->setCellValue('J' . $row, isset($item->known_sis) ? ($item->known_sis == 1 ? 'Có' : 'Không') : '');
$row++;
$stt++;
}
$sheet->getStyle('A1:J1')->applyFromArray(array(
'font' => array(
'name' => 'Calibri',
'size' => 14,
'bold' => true
)
));
$sheet->getStyle('A1:J' . ($row - 1))->applyFromArray(array(
'borders' => [
'allBorders' => [
'borderStyle' => Border::BORDER_THIN,
'color' => ['rgb' => '000000'],
],
]
));
foreach (range('A', 'J') as $column) {
$sheet->getColumnDimension($column)->setAutoSize(true);
}
$writer = new Xlsx($spreadsheet);
$fileName = "Danh sách nhận giải.xlsx";
header("Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
header("Content-Disposition: attachment;filename=\"$fileName\"");
$writer->save("php://output");
exit();
?>
@@ -0,0 +1,149 @@
@extends('backend.layout')
@section('content')
<link rel="stylesheet" href="{{asset('public/backend/css/jquery-ui.css')}}">
<link href="{{asset('public/backend/css/bootstrap-datepicker.css')}}" rel="stylesheet">
<script src="{{asset('public/backend/js/bootstrap-datepicker.js')}}"></script>
<script src="{{asset('public/backend/js/bootstrap-datepicker.vi.min.js')}}"></script>
<script src="{{asset('public/backend/js/jquery-ui.min.js')}}"></script>
<div class='card-header'>
<h1>{{$title ?? ''}}</h1>
</div>
<div class='card-body'>
<div class="row" style="padding: 1rem 0;">
<div class="col-md-2">
<label for="fromDateTime">Từ ngày</label>
<input type="text" id="fromDateTime" class="form-control datepicker" placeholder="dd/mm/yyyy"
value="{{ $fromdate }}" />
</div>
<div class="col-md-2">
<label for="toDateTime">Đến ngày</label>
<input type="text" id="toDateTime" class="form-control datepicker" placeholder="dd/mm/yyyy"
value="{{ $todate }}" />
</div>
<div class="col-md-2"><br>
<button type="button" class="btn btn-primary btn-custom" id="datetime_filter">Lọc dữ liệu</button>
<a id="excel_export" class="btn btn-primary btn-custom">Xuất excel</a>
</div>
</div>
@include('backend.prizeuser.table')
</div>
<script>
$(document).ready(function () {
$('#datetime_filter').on('click', function () {
let tungay = $('#fromDateTime').val();
let denngay = $('#toDateTime').val();
if ((tungay != '' && !isValidDDMMYYYY(tungay)) || (denngay != '' && !isValidDDMMYYYY(denngay))) {
alert('Ngày không đúng định dạng');
return;
}
let url = "{{ route('admin/prizeuser') }}?tungay=" + tungay + '&denngay=' + denngay;
window.location.href = url;
});
$('#excel_export').on('click', function(e) {
let fromdate = $('#fromDateTime').val();
let todate = $('#toDateTime').val();
let a = document.createElement("a");
a.href = "{{route('admin/prizeuser/export')}}?fromdate=" + fromdate +
'&todate=' + todate;
document.body.appendChild(a);
a.click();
});
});
function isValidDDMMYYYY(dateString) {
// Kiểm tra định dạng bằng regex
const regex = /^(0[1-9]|[12]\d|3[01])\/(0[1-9]|1[0-2])\/(\d{4})$/;
if (!regex.test(dateString)) {
return false; // Sai định dạng
}
// Tách ngày, tháng, năm
const parts = dateString.split('/');
const day = parseInt(parts[0], 10);
const month = parseInt(parts[1], 10);
const year = parseInt(parts[2], 10);
// Kiểm tra tháng hợp lệ (1-12)
if (month < 1 || month > 12) {
return false;
}
// Kiểm tra số ngày hợp lệ trong tháng
const daysInMonth = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// Kiểm tra năm nhuận cho tháng 2
if (year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)) {
daysInMonth[2] = 29;
}
if (day < 1 || day > daysInMonth[month]) {
return false;
}
return true; // Định dạng hợp lệ và ngày tháng năm hợp lệ
}
function update_spined(user_id) {
var csrfToken = $('meta[name="csrf-token"]').attr('content');
$.ajax({
url: "{{ route('updatespined') }}",
type: 'POST',
data: {
user_id: user_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) {
alert('Thành công');
window.location.reload();
} else {
alert('Thất bại');
}
},
error: function (xhr, status, error) {
alert('Thất bại');
}
});
}
$(document).ready(function () {
$.datepicker.regional['vi'] = {
closeText: 'Đóng',
prevText: '&#x3c;Trước',
nextText: 'Tiếp&#x3e;',
currentText: 'Hôm nay',
monthNames: ['Tháng Một', 'Tháng Hai', 'Tháng Ba', 'Tháng Tư', 'Tháng Năm', 'Tháng Sáu',
'Tháng Bảy', 'Tháng Tám', 'Tháng Chín', 'Tháng Mười', 'Tháng Mười Một', 'Tháng Mười Hai'],
monthNamesShort: ['Th1', 'Th2', 'Th3', 'Th4', 'Th5', 'Th6',
'Th7', 'Th8', 'Th9', 'Th10', 'Th11', 'Th12'],
dayNames: ['Chủ Nhật', 'Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy'],
dayNamesShort: ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'],
dayNamesMin: ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'],
weekHeader: 'Tu',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['vi']);
$(".datepicker").datepicker({
dateFormat: "dd/mm/yy",
weekStart: 0,
calendarWeeks: true,
autoclose: true,
todayHighlight: true,
rtl: true,
orientation: "auto"
// minDate: new Date()
});
});
</script>
@endsection
@@ -0,0 +1,56 @@
@php
$order_number = 0;
@endphp
<div class="container">
<table class="datatable table table-striped table-bordered" id="table">
<thead>
<tr>
<th class="text-center">STT</th>
<th>TÊN NGƯỜI DÙNG</th>
<th class="text-center">SỐ ĐIỆN THOẠI</th>
<th>EMAIL</th>
<th class="text-center">NĂM SINH</th>
<th>ĐỊA CHỈ</th>
<th>BIẾT SIS</th>
<th>NGHỀ NGHIỆP</th>
<th>TÊN GIẢI THƯỞNG</th>
<th class="text-center">NGÀY QUAY THƯỞNG</th>
</tr>
</thead>
<tbody>
@foreach ($data as $item)
<tr>
<td class="text-center">{{++$order_number ?? ''}}</td>
<td>
<p>{{$item->name ?? ''}}</p>
<button class="btn btn-danger btn-custom" onclick="update_spined({{ $item->id ?? '' }})">Thêm lượt quay</button>
</td>
<td class="text-center">
{{$item->phone ?? ''}}
</td>
<td>
{{$item->user_email ?? ''}}
</td>
<td class="text-center">
{{$item->birth_year ?? ''}}
</td>
<td>
{{ $item->address ?? '' }}
</td>
<td>
{{ isset($item->known_sis) ? ($item->known_sis ? 'Có' : 'Không') : '' }}
</td>
<td>
{{ $item->job ?? '' }}
</td>
<td>
{{ $item->prize_name ?? '' }}
</td>
<td class="text-center">
{{ date_format(date_create($item->created_at),"d/m/Y H:i") }}
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@@ -0,0 +1,70 @@
@extends('backend.layout')
@section('content')
@if(Session::has('success'))
<div class="alert alert-success">
{{ Session::get('success') }}
@php
Session::forget('success');
@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 class='card-header'>
<h1>{{$title ?? ''}}</h1>
</div>
<div class='card-body'>
<a class="btn btn-primary btn-custom right default" href="{{route('admin/users')}}">Trở về danh sách</a><br>
<form action="{{route('admin/users/update')}}" method="POST">
{{ csrf_field() }}
<input type="hidden" name="type" value="account" />
<input type="hidden" name="id" value="{{$data->id ?? 0}}" />
<div class="form-group">
<label for="name">Tên hiển thị</label>
@php
$name = $data->name ?? '';
if (old('name') != '') {
$name = old('name');
}
@endphp
<input class="form-control" id="name" name="name" value="{{$name ?? ''}}" />
@if ($errors->has('name'))
<span class="text-danger">{{ $errors->first('name') }}</span>
@endif
</div>
<div class="form-group">
<label for="email">Tên đăng nhập</label>
@php
$email = $data->email ?? '';
if (old('email') != '') {
$email = old('email');
}
@endphp
<input class="form-control" id="email" name="email" value="{{$email ?? ''}}" {{$data->id != '' ? 'readonly' : ''}} />
@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</label>
<input class="form-control" id="password" name="password" value="" />
@if ($errors->has('password'))
<span class="text-danger">{{ $errors->first('password') }}</span>
@endif
</div><br>
<button class="btn btn-primary btn-custom" type="submit">
@if (isset($data->id) && $data->id != '')
Cập nhật
@else
Thêm mới
@endif
</button>
</form>
</div>
@endsection
@@ -0,0 +1,119 @@
@extends('backend.layout')
@section('content')
@if(Session::has('success'))
<div class="alert alert-success">
{{ Session::get('success') }}
@php
Session::forget('success');
@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 class='card-header'>
<h1>{{$title ?? ''}}</h1>
</div>
<div class='card-body'>
<a class="btn btn-primary btn-custom right default" href="{{route('admin/users')}}">Trở về danh sách</a><br>
<form action="{{route('admin/users/update')}}" method="POST">
{{ csrf_field() }}
<input type="hidden" name="id" value="{{$data->id ?? 0}}" />
<div class="form-group">
<label for="name">Tên hiển thị</label>
@php
$name = $data->name ?? '';
if (old('name') != '') {
$name = old('name');
}
@endphp
<input class="form-control" id="name" name="name" value="{{$name ?? ''}}" />
@if ($errors->has('name'))
<span class="text-danger">{{ $errors->first('name') }}</span>
@endif
</div>
<div class="form-group">
<label for="email">Tên đăng nhập</label>
@php
$email = $data->email ?? '';
if (old('email') != '') {
$email = old('email');
}
@endphp
<input class="form-control" id="email" name="email" value="{{$email ?? ''}}" {{isset($data->id) && $data->id != '' ? 'readonly' : ''}} />
@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</label>
<input class="form-control" id="password" name="password" value="" />
@if ($errors->has('password'))
<span class="text-danger">{{ $errors->first('password') }}</span>
@endif
</div>
<div class="form-group">
<label for="status">Trạng thái</label>
@php
$status = $data->status ?? '';
if (old('status') != '') {
$status = old('status');
}
@endphp
<select class="form-control" id="status" name="status">
<option value="">Chưa chọn</option>
<option value="1" {{isset($status) && $status == 1 ? 'selected' : ''}}>Đang hoạt động</option>
<option value="0" {{isset($status) && $status == 0 ? 'selected' : ''}}>Ngừng hoạt động</option>
</select>
@if ($errors->has('status'))
<span class="text-danger">{{ $errors->first('status') }}</span>
@endif
</div>
<div class="form-group">
<label for="account_type">Loại tài khoản</label>
@php
$account_type = $data->account_type ?? '';
if (old('account_type') != '') {
$account_type = old('account_type');
}
@endphp
<select class="form-control" id="account_type" name="account_type">
<option value="">Chưa chọn</option>
<option value="1" {{isset($account_type) && $account_type == 1 ? 'selected' : ''}}>Tài khoản thông thường</option>
<option value="2" {{isset($account_type) && $account_type == 2 ? 'selected' : ''}}>Tài khoản VIP</option>
<option value="3" {{isset($account_type) && $account_type == 3 ? 'selected' : ''}}>Chờ xác nhận</option>
<option value="4" {{isset($account_type) && $account_type == 4 ? 'selected' : ''}}>Từ chối xác nhận</option>
</select>
@if ($errors->has('account_type'))
<span class="text-danger">{{ $errors->first('account_type') }}</span>
@endif
</div>
@if (isset($data->id) && $data->id != '')
<div class="form-group">
<label>Phân quyền:</label><br>
@foreach ($role_data as $role_item)
<div class="form-check form-check-inline">
<input name="user_role[]" value="{{$role_item->id ?? ''}}" class="form-check-input"
type="checkbox" id="chk_role_{{$role_item->id ?? ''}}"
{{in_array($role_item->id, $user_role) ? 'checked' : ''}} >
<label class="form-check-label" for="chk_role_{{$role_item->id ?? ''}}">{{$role_item->role_name ?? ''}}</label>
</div>
@endforeach
</div>
@endif
<br>
<button class="btn btn-primary btn-custom" type="submit">
@if (isset($data->id) && $data->id != '')
Cập nhật
@else
Thêm mới
@endif
</button>
</form>
</div>
@endsection
@@ -0,0 +1,35 @@
@extends('backend.layout')
@section('content')
<div class='card-header'>
<h1>{{$title ?? ''}}</h1>
</div>
<div class='card-body'>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="account_type">Loại tài khoản</label>
<select class="form-control" id="account_type" name="account_type">
<option value="">Tất cả</option>
<option value="1" {{ isset($request_type) && $request_type == 1 ? 'selected' : '' }}>Tài khoản thông thường</option>
<option value="2" {{ isset($request_type) && $request_type == 2 ? 'selected' : '' }}>Tài khoản VIP</option>
<option value="3" {{ isset($request_type) && $request_type == 3 ? 'selected' : '' }}>Chờ xác nhận</option>
<option value="4" {{ isset($request_type) && $request_type == 4 ? 'selected' : '' }}>Từ chối xác nhận</option>
</select>
</div>
</div>
</div>
@include('backend.user.table')
</div>
<script>
$(document).ready(function() {
$('#account_type').on('change', function() {
let type = $(this).val();
let redirect_url = "{{route('admin/users')}}";
if (type != '') {
redirect_url = redirect_url + '?type=' + type;
}
window.location.href = redirect_url;
});
});
</script>
@endsection
@@ -0,0 +1,32 @@
@php
$order_number = 0;
@endphp
<a class="btn btn-primary btn-custom" href="{{route($route_name_update)}}?id=0">Thêm mới</a>
<div class="container">
<table class="datatable table table-striped table-bordered" id="table">
<thead>
<tr>
<th class="text-center">STT</th>
<th>Tên hiển thị</th>
<th>Tên đăng nhập</th>
<th class="text-center">Trạng thái</th>
</tr>
</thead>
<tbody>
@foreach ($data as $item)
<tr>
<td class="text-center">{{++$order_number ?? ''}}</td>
<td>
<a class="custom-link" href="{{route($route_name_update)}}?id={{$item->id ?? ''}}">{{$item->name ?? ''}}</a>
</td>
<td>
{{$item->email ?? ''}}
</td>
<td class="text-center">
{{$item->status == 1 ? 'Đang hoạt động' : 'Ngừng hoạt động'}}
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
+99
View File
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="description" content="HTML/CSS">
<meta name="author" content="Anil">
<title> CHÂU THANH</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{{asset('public/frontend/css/bootstrap.min.css')}}">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<link href="{{asset('public/frontend/fontawesome/all.css')}}" rel="stylesheet">
<script src="{{asset('public/libs/jquery/jquery.min.js')}}"></script>
<link rel="stylesheet" href="{{asset('public/libs/OwlCarousel2/2.3.4/owl.carousel.min.css')}}">
<script defer src="{{asset('public/libs/OwlCarousel2/2.3.4/owl.carousel.min.js')}}"></script>
<link rel="stylesheet" href="{{asset('public/frontend/css/main.css')}}">
</head>
<body>
<section class="page_404">
<div class="container">
<div class="row">
<div class="col-sm-12 ">
<div class="col-sm-12 col-sm-offset-1 text-center">
<div class="four_zero_four_bg">
<h1 class="text-center ">NỘI DUNG KHÔNG TỒN TẠI</h1>
</div>
<div class="contant_box_404">
<h3 class="h2">
vẻ nội dung này đã bị ẩn hoặc xóa đi.
</h3>
<p>Vui lòng trở lại trang chủ để xem nội dung khác</p>
<a href="{{route('/')}}" class="link_404">Về trang chủ</a>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="{{asset('public/frontend/js/jquery.waypoints.min.js')}}"
integrity="sha256-jDnOKIOq2KNsQZTcBTEnsp76FnfMEttF6AV2DF2fFNE="
crossorigin="anonymous">
</script>
<script src="{{asset('public/frontend/js/jquery.counterup.min.js')}}"
integrity="sha256-JtQPj/3xub8oapVMaIijPNoM0DHoAtgh/gwFYuN5rik="
crossorigin="anonymous">
</script>
<script src="{{asset('public/frontend/js/popper.min.js')}}"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="{{asset('public/frontend/js/bootstrap.min.js')}}"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous">
</script>
</body>
</html>
<style>
/*======================
404 page
=======================*/
.page_404{ padding:40px 0; background:#fff; font-family: 'Arvo', serif;
}
.page_404 img{ width:100%;}
.four_zero_four_bg{
background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
height: 400px;
background-position: center;
}
.four_zero_four_bg h1{
font-size:80px;
}
.four_zero_four_bg h3{
font-size:80px;
}
.link_404{
color: #fff!important;
padding: 10px 20px;
background: #39ac31;
margin: 20px 0;
display: inline-block;}
.contant_box_404{ margin-top:-50px;}
</style>
@@ -0,0 +1,307 @@
@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 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="user_email">Email:</label>
@php
$user_email = Auth::user()->user_email ?? '';
if (old('user_email') != '') {
$user_email = old('user_email');
}
@endphp
<input class="form-control" type="email" name="user_email" id="user_email" value="{{ $user_email ?? '' }}" />
@if ($errors->has('user_email'))
<span class="text-danger">{{ $errors->first('user_email') }}</span>
@endif
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="birth_year">Năm sinh:</label>
@php
$birth_year = Auth::user()->birth_year ?? '';
if (old('birth_year') != '') {
$birth_year = old('birth_year');
}
@endphp
<input class="form-control" type="number" name="birth_year" id="birth_year" value="{{ $birth_year ?? '' }}" min="1900" max="{{ date('Y') }}" placeholder="VD: 1990" />
@if ($errors->has('birth_year'))
<span class="text-danger">{{ $errors->first('birth_year') }}</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"></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 nhân</div>
<div class="alert alert-danger">
(*) Nhập thông tin 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="user_email">Email:</label>
@php
$user_email = '';
if (old('user_email') != '') {
$user_email = old('user_email');
}
@endphp
<input class="form-control" type="email" name="user_email" id="user_email" value="{{ $user_email ?? '' }}" />
@if ($errors->has('user_email'))
<span class="text-danger">{{ $errors->first('user_email') }}</span>
@endif
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="birth_year">Năm sinh:</label>
@php
$birth_year = '';
if (old('birth_year') != '') {
$birth_year = old('birth_year');
}
@endphp
<input class="form-control" type="number" name="birth_year" id="birth_year" value="{{ $birth_year ?? '' }}" min="1900" max="{{ date('Y') }}" placeholder="VD: 1990" />
@if ($errors->has('birth_year'))
<span class="text-danger">{{ $errors->first('birth_year') }}</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"></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
@@ -0,0 +1,60 @@
@extends('frontend.layout')
@section('content')
<script src="{{asset('public/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 tài khoản, <a class="custom_btn" href="{{route('register')}}">Đăng </a> tại đây</p>
</form>
</div>
</div>
</header>
@endsection
@@ -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> Gia Thạnh</title>
<!-- font icons -->
<link rel="stylesheet" href="{{asset('public/frontend/vendors/themify-icons/css/themify-icons.css')}}">
<!-- Bootstrap + Meyawo main styles -->
<link rel="stylesheet" href="{{asset('public/frontend/css/main.css?version=1.8')}}">
<link rel="stylesheet" href="{{asset('public/frontend/css/game.css?version=1.8')}}">
<link href="{{asset('public/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('public/frontend/vendors/jquery/jquery-3.4.1.js')}}"></script>
<script src="{{asset('public/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('public/frontend/vendors/bootstrap/bootstrap.bundle.js')}}"></script>
<!-- bootstrap 3 affix -->
<script src="{{asset('public/frontend/vendors/bootstrap/bootstrap.affix.js')}}"></script>
<!-- Meyawo js -->
<script src="{{asset('public/frontend/js/main.js')}}"></script>
<script src="{{asset('public/frontend/js/game.js')}}"></script>
</body>
</html>
@@ -0,0 +1,392 @@
<link rel="stylesheet" href="{{asset('/public/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('/public/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('/public/images/' . $parameter_data['banner_image'])}}" alt="Demonstration img">
@else
<img src="{{asset('/public/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> để 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('/public/frontend/js/game.js')}}"></script>
@@ -0,0 +1,841 @@
<link rel="stylesheet" href="{{asset('public/frontend/css/game.css?version=1.5')}}" />
<div class="row chart_containter">
<div class="background-left" style="display: none;">
<img src="{{ asset('public/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> để 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('public/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('public/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('public/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('public/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('public/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 </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 ư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 </p>
<span class="prize-name">🎁 {{ $prize_obj ? $prize_obj->prize_name : 'Giải ngẫu nhiên' }} 🎁</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 ư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('public/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>
+8
View File
@@ -0,0 +1,8 @@
@extends('frontend.layout')
@section('content')
<!-- about me -->
@include('frontend.game.luckywheel')
<!-- footer -->
<!-- end of page footer -->
@endsection
+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('public/frontend/imgs/LogoSIS.png')}}" type="image/x-icon">
<title>S.I.S</title>
<!-- font icons -->
<link rel="stylesheet" href="{{asset('public/frontend/vendors/themify-icons/css/themify-icons.css')}}">
<!-- Bootstrap + Meyawo main styles -->
<link rel="stylesheet" href="{{asset('public/frontend/css/main.css?version=1.9')}}">
<link href="{{asset('public/frontend/fontawesome/all.css')}}" rel="stylesheet">
<script src="{{asset('public/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('public/frontend/vendors/bootstrap/bootstrap.bundle.js')}}"></script>
<!-- bootstrap 3 affix -->
<script src="{{asset('public/frontend/vendors/bootstrap/bootstrap.affix.js')}}"></script>
<!-- Meyawo js -->
<script src="{{asset('public/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>
@@ -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>
@@ -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('public/images/' . $parameter_data['logo_image'])}}" />
@else
<img src="{{asset('public/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>