Files

1781 lines
59 KiB
PHP
Executable File

<?php
use App\Models\User;
use App\Models\Setting;
if(isset($_COOKIE['token-0']))
$user_p = User::select('name')->where('user_name', $_COOKIE['user_identity'])->first();
$primaryColor = Setting::where('key', 'primary_color')->value('value') ?? '#16c8ce';
//dd($user_p);
?>
<!doctype html>
<html lang="en" dir="rtl">
<script>
(function () {
var saved = localStorage.getItem('montask-theme');
if (saved === 'dark' || (saved !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.setAttribute('data-theme', 'dark');
}
})();
</script>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="{{url('/src/tailwindcss.js')}}"></script>
<title>سامانه حضور و غیاب</title>
{{--ساعت--}}
<link rel="stylesheet" href="{{ asset('/packages/clockpicker/bootstrap-clockpicker.min.css') }}">
<script src="{{ asset('/packages/clockpicker/jquery.min.js')}}"></script>
<script src="{{ asset('/packages/clockpicker/bootstrap-clockpicker.min.js')}}"></script>
{{-- --}}{{--تاریخ--}}
<link rel="stylesheet" href="{{ asset('/packages/datepicker/persian-datepicker.css')}}">
<script src="{{ asset("/packages/datepicker/persian-date.js")}}"></script>
<script src="{{ asset('/packages/datepicker/persian-datepicker.js') }}"></script>
{{-- <link rel="manifest" href="manifest.json">--}}
{{-- font awesome--}}
<link href="{{url('fontawesome-pro-6.5.2/css/all.css')}}" rel="stylesheet"/>
{{-- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>--}}
{{-- <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@600&display=swap" rel="stylesheet">--}}
<style>
/* Ignore CSS variable inspection */
:root {
/* @phpstorm-ignore */
--primary-color: {{ $primaryColor }};
--text-color: #ffffff;
--surface-glass: rgba(255, 255, 255, 0.72);
--border-glass: rgba(255, 255, 255, 0.45);
--shadow-soft: 0 8px 32px rgba(15, 23, 42, 0.08);
--radius-lg: 1.25rem;
--radius-xl: 1.5rem;
--glass-panel-bg: color-mix(in srgb, var(--primary-color) 58%, rgba(255, 255, 255, 0.32));
--glass-panel-border: color-mix(in srgb, var(--primary-color) 38%, rgba(255, 255, 255, 0.55));
--glass-panel-inset: rgba(255, 255, 255, 0.38);
--glass-tint: 44%;
--glass-fallback: color-mix(in srgb, var(--primary-color) 82%, rgba(255, 255, 255, 0.78));
--text-primary: #0f172a;
--text-secondary: #334155;
--text-muted: #64748b;
--text-faint: #94a3b8;
--surface-card: rgba(255, 255, 255, 0.82);
--surface-card-hover: rgba(255, 255, 255, 0.98);
--surface-input: rgba(255, 255, 255, 0.85);
--surface-tabs: rgba(255, 255, 255, 0.45);
--surface-tab-hover: rgba(255, 255, 255, 0.65);
--surface-tab-active: rgba(255, 255, 255, 0.92);
--border-subtle: rgba(226, 232, 240, 0.9);
--border-input: rgba(148, 163, 184, 0.35);
--badge-bg: rgba(148, 163, 184, 0.18);
--badge-text: #475569;
--form-bg: #ffffff;
--form-title: #424e54;
--form-message: rgba(88, 87, 87, 0.822);
--form-input-border: rgba(105, 105, 105, 0.397);
--tab-btn-bg: #cfcfcf;
--tab-btn-hover: #ededed;
--tab-btn-active: #feffff;
--modal-bg: rgba(255, 255, 255, 0.94);
--modal-border: rgba(255, 255, 255, 0.6);
--modal-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
--row-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
--glass-btn-bg: rgba(255, 255, 255, 0.3);
--glass-btn-border: rgba(255, 255, 255, 0.46);
--glass-btn-hover: rgba(255, 255, 255, 0.44);
--header-label-bg: rgba(255, 255, 255, 0.28);
--header-label-border: rgba(255, 255, 255, 0.42);
--header-label-hover: rgba(255, 255, 255, 0.44);
}
[data-theme="dark"] {
color-scheme: dark;
--surface-glass: #2a3447;
--border-glass: rgba(148, 163, 184, 0.22);
--shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.45);
--glass-panel-bg: rgba(20, 28, 42, 0.82);
--glass-panel-border: rgba(148, 163, 184, 0.18);
--glass-panel-inset: rgba(255, 255, 255, 0.08);
--glass-tint: 20%;
--glass-fallback: color-mix(in srgb, var(--primary-color) 42%, #141c2a);
--text-primary: #f8fafc;
--text-secondary: #e2e8f0;
--text-muted: #b6c2d3;
--text-faint: #8b9bb3;
--surface-card: #2f3b52;
--surface-card-hover: #3a4862;
--surface-input: #222b3c;
--surface-tabs: #252f42;
--surface-tab-hover: #334155;
--surface-tab-active: #3d4f6a;
--border-subtle: rgba(148, 163, 184, 0.28);
--border-input: rgba(148, 163, 184, 0.38);
--badge-bg: rgba(148, 163, 184, 0.22);
--badge-text: #e2e8f0;
--form-bg: #2a3447;
--form-title: #f1f5f9;
--form-message: #cbd5e1;
--form-input-border: rgba(148, 163, 184, 0.38);
--tab-btn-bg: #334155;
--tab-btn-hover: #475569;
--tab-btn-active: #3d4f6a;
--modal-bg: #2f3b52;
--modal-border: rgba(148, 163, 184, 0.24);
--modal-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
--row-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
--glass-btn-bg: rgba(255, 255, 255, 0.12);
--glass-btn-border: rgba(255, 255, 255, 0.18);
--glass-btn-hover: rgba(255, 255, 255, 0.22);
--header-label-bg: rgba(255, 255, 255, 0.12);
--header-label-border: rgba(255, 255, 255, 0.2);
--header-label-hover: rgba(255, 255, 255, 0.22);
}
body {
background:
radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--primary-color) 18%, transparent), transparent 42%),
radial-gradient(circle at 80% 90%, color-mix(in srgb, var(--primary-color) 12%, transparent), transparent 38%),
linear-gradient(165deg, #eef2f7 0%, #e4ebf2 45%, #f4f6f9 100%);
display: flex;
justify-content: center;
align-items: flex-start;
margin: 0;
min-height: 100vh;
color: var(--text-primary);
transition: background 0.35s ease, color 0.25s ease;
}
[data-theme="dark"] body {
background:
radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--primary-color) 28%, transparent), transparent 44%),
radial-gradient(circle at 82% 92%, color-mix(in srgb, var(--primary-color) 16%, transparent), transparent 40%),
linear-gradient(165deg, #0b1120 0%, #1e293b 42%, #0f172a 100%);
}
.app-shell {
max-width: 420px;
width: 100%;
min-height: 100vh;
position: relative;
}
/* Frosted glass: محتوا از پشت blur دیده شود */
.glass-header {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
max-width: 420px;
width: 100%;
z-index: 30;
padding: 0.65rem 0.85rem 0.85rem;
isolation: isolate;
border: 1px solid var(--glass-panel-border);
border-top: none;
border-radius: 0 0 1.35rem 1.35rem;
background: var(--glass-panel-bg);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
box-shadow:
0 8px 32px rgba(15, 23, 42, 0.08),
inset 0 1px 0 var(--glass-panel-inset);
}
[data-theme="dark"] .glass-header {
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.35),
inset 0 1px 0 var(--glass-panel-inset);
}
:root:not([data-theme="dark"]) .glass-header,
:root:not([data-theme="dark"]) .glass-footer-wrap {
box-shadow:
0 8px 28px color-mix(in srgb, var(--primary-color) 28%, rgba(15, 23, 42, 0.14)),
inset 0 1px 0 var(--glass-panel-inset);
}
:root:not([data-theme="dark"]) .glass-footer-wrap {
box-shadow:
0 -8px 28px color-mix(in srgb, var(--primary-color) 28%, rgba(15, 23, 42, 0.14)),
inset 0 1px 0 var(--glass-panel-inset);
}
:root:not([data-theme="dark"]) .glass-header .headerItems,
:root:not([data-theme="dark"]) .glass-footer button {
text-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
}
:root:not([data-theme="dark"]) .fab-btn {
box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-color) 58%, transparent);
}
:root:not([data-theme="dark"]) .fab-btn:hover {
box-shadow: 0 14px 32px color-mix(in srgb, var(--primary-color) 68%, transparent);
}
.glass-header::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: color-mix(in srgb, var(--primary-color) var(--glass-tint), transparent);
pointer-events: none;
z-index: 0;
}
.glass-header > div {
position: relative;
z-index: 1;
}
.glass-header .headerItems {
color: #fff;
text-shadow: 0 1px 4px rgba(15, 23, 42, 0.35);
}
.glass-footer-wrap {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
max-width: 420px;
width: 100%;
z-index: 20;
padding: 0.65rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
isolation: isolate;
border: 1px solid var(--glass-panel-border);
border-bottom: none;
border-radius: 1.35rem 1.35rem 0 0;
background: var(--glass-panel-bg);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
box-shadow:
0 -8px 32px rgba(15, 23, 42, 0.1),
inset 0 1px 0 var(--glass-panel-inset);
}
[data-theme="dark"] .glass-footer-wrap {
box-shadow:
0 -8px 32px rgba(0, 0, 0, 0.35),
inset 0 1px 0 var(--glass-panel-inset);
}
.glass-footer-wrap::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: color-mix(in srgb, var(--primary-color) var(--glass-tint), transparent);
pointer-events: none;
z-index: 0;
}
.glass-footer-wrap .glass-footer {
position: relative;
z-index: 1;
pointer-events: auto;
}
.glass-footer {
width: 100%;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.glass-footer::before {
display: none;
}
.app-content-bottom-space {
height: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass-header,
.glass-footer-wrap {
background: var(--glass-fallback);
}
}
.glass-footer button {
width: 2.75rem;
height: 2.75rem;
border-radius: 9999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
text-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
background: var(--glass-btn-bg);
border: 1px solid var(--glass-btn-border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform 0.2s ease, background-color 0.2s ease;
}
.glass-footer button:hover {
transform: translateY(-2px);
background: var(--glass-btn-hover);
}
.fab-btn {
box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-color) 45%, transparent);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fab-btn:hover {
transform: scale(1.06);
box-shadow: 0 14px 32px color-mix(in srgb, var(--primary-color) 55%, transparent);
}
#error-box {
border-radius: var(--radius-lg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-panel-border);
box-shadow: var(--shadow-soft);
}
.headerItems {
width: 100%;
}
.headerItems label {
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: var(--header-label-bg);
border: 1px solid var(--header-label-border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.headerItems label.mx-auto {
width: auto;
height: auto;
background: transparent;
border: none;
box-shadow: none;
padding: 0 0.5rem;
}
.headerItems label:not(.mx-auto):hover {
background: var(--header-label-hover);
border-color: var(--glass-btn-border);
}
.theme-switch {
position: relative;
width: 3.35rem;
height: 1.85rem;
padding: 0.15rem;
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(15, 23, 42, 0.22);
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.18);
cursor: pointer;
display: inline-flex;
align-items: center;
flex-shrink: 0;
transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.theme-switch:hover {
border-color: rgba(255, 255, 255, 0.42);
background: rgba(15, 23, 42, 0.3);
}
.theme-switch:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.55);
outline-offset: 2px;
}
.theme-switch-track {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.28rem;
pointer-events: none;
}
.theme-switch-icon {
width: 0.85rem;
height: 0.85rem;
opacity: 0.55;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.theme-switch-icon-sun {
color: #fde68a;
}
.theme-switch-icon-moon {
color: #cbd5e1;
}
[data-theme="dark"] .theme-switch-icon-sun {
opacity: 1;
transform: scale(1.08);
}
[data-theme="dark"] .theme-switch-icon-moon {
opacity: 0.35;
}
:root:not([data-theme="dark"]) .theme-switch-icon-moon {
opacity: 1;
transform: scale(1.08);
}
:root:not([data-theme="dark"]) .theme-switch-icon-sun {
opacity: 0.35;
}
.theme-switch-thumb {
position: absolute;
top: 0.15rem;
inset-inline-start: 0.15rem;
width: 1.45rem;
height: 1.45rem;
border-radius: 9999px;
background: linear-gradient(145deg, #ffffff 0%, #eef2f7 100%);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
transition: inset-inline-start 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s ease, box-shadow 0.28s ease;
}
[data-theme="dark"] .theme-switch-thumb {
inset-inline-start: calc(100% - 1.6rem);
background: linear-gradient(145deg, #475569 0%, #334155 100%);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .theme-switch {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.16);
}
.clockpicker-popover {
position: fixed !important;
/* مهم: fixed نسبت به viewport */
left: 50% !important;
/* افقی وسط */
top: 50% !important;
/* عمودی وسط */
transform: translate(-50%, -50%) !important;
/* دقیقاً وسط */
z-index: 99999 !important;
direction: ltr !important;
/* چپ به راست */
background-color: #c8c8c8 !important;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.hidden-row {
display: none;
}
.form {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 350px;
background-color: var(--form-bg);
padding: 20px;
border-radius: 20px;
position: relative;
border: 1px solid var(--border-glass);
box-shadow: var(--shadow-soft);
}
.title {
padding-right: 28px;
font-size: 28px;
color: var(--form-title);
font-weight: 600;
letter-spacing: -1px;
display: flex;
align-items: center;
padding-left: 30px;
position: relative;
}
.title::before,
.title::after {
content: "";
position: absolute;
height: 16px;
width: 16px;
border-radius: 50%;
right: 0;
background-color: {{ $primaryColor }};
}
.title::before {
width: 18px;
height: 18px;
}
.title::after {
width: 18px;
height: 18px;
animation: pulse 1s linear infinite;
}
.message,
.signin {
color: var(--form-message);
font-size: 14px;
}
.signin {
text-align: center;
}
.signin a {
color: royalblue;
}
.signin a:hover {
text-decoration: underline royalblue;
}
.flex {
display: flex;
width: 100%;
gap: 6px;
}
.form label {
position: relative;
}
.form label .input {
width: 100%;
padding: 10px 10px 14px 10px;
outline: 0;
border: 1px solid var(--form-input-border);
border-radius: 10px;
background: var(--surface-input);
color: var(--text-primary);
}
.form label .input + span {
position: absolute;
right: 10px;
color: grey;
font-size: 0.9em;
cursor: text;
transition: 0.3s ease;
}
.form label .input:placeholder-shown + span {
top: 15px;
font-size: 0.9em;
}
.form label .input:focus + span,
.form label .input:valid + span {
left: 10px;
top: 30px;
font-size: 0.7em;
font-weight: 600;
}
.form label .input:valid + span {
color: green;
}
.submit {
border: none;
outline: none;
background-color: {{ $primaryColor }};
padding: 10px;
border-radius: 10px;
color: #fff;
font-size: 16px;
transform: .3s ease;
}
.submit:hover {
background-color: rgb(255, 0, 0);
}
@keyframes pulse {
from {
transform: scale(0.9);
opacity: 1;
}
to {
transform: scale(1.8);
opacity: 0;
}
}
@font-face {
font-family: 'MyCustomFont';
src: url('{{url('/src/fonts/woff/iranyekanwebregularfanum.woff')}}') format('woff2'),
url('{{url('/src/fonts/woff/iranyekanwebregularfanum.woff')}}') format('woff');
font-weight: normal;
font-style: normal;
}
* {
font-family: "MyCustomFont", cursive;
letter-spacing: 0 !important;
}
/* Style the tab */
.tab {
overflow: hidden;
/*border: 1px solid #ccc;*/
/*background-color: #f1f1f1;*/
}
/* Style the buttons inside the tab */
.tab button {
background-color: var(--tab-btn-bg);
float: left;
border: 1px solid rgba(0, 0, 0, 0);
outline: none;
cursor: pointer;
padding: 10px 16px 8px 16px;
transition: 0.3s;
font-size: 17px;
color: var(--text-secondary);
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: var(--tab-btn-hover);
}
/* Create an active/current tablink class */
.tab button.active {
background-color: var(--tab-btn-active);
color: var(--text-primary);
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 0px 0px;
/*border: 1px solid #ccc;*/
border-top: none;
}
.btn {
display: flex !important;
justify-content: center !important;
width: 100%;
}
.btn-sm {
display: flex !important;
justify-content: center !important;
}
/* ── Shared UI components ── */
.ui-card {
width: min(350px, calc(100vw - 2rem));
background: var(--surface-glass);
border: 1px solid var(--border-glass);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
color: var(--text-primary);
overflow: visible;
}
.ui-card-header {
background: var(--primary-color);
color: #fff;
text-align: center;
padding: 0.55rem 0.75rem;
font-weight: 800;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
overflow: hidden;
}
.ui-card-body {
padding: 1.25rem 1.5rem;
overflow: visible;
}
.ui-form-stack {
display: flex;
flex-direction: column;
gap: 1rem;
}
.ui-form-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
width: 100%;
position: relative;
z-index: 1;
}
.ui-form-field--dropdown.is-open {
z-index: 40;
}
.ui-form-dropdown-panel {
width: 100%;
margin-top: 0.35rem;
border-radius: 0.875rem;
border: 1px solid var(--border-input);
background: var(--surface-card);
box-shadow: var(--row-shadow);
}
.ui-form-dropdown-panel .user-item:hover {
background: var(--surface-card-hover);
}
.ui-form-field label {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary);
text-align: right;
}
.ui-form-field textarea.ui-input {
min-height: 5.5rem;
resize: vertical;
}
.ui-form-actions {
display: flex;
justify-content: center;
padding-top: 0.25rem;
}
.ui-input-wrap {
position: relative;
width: 100%;
}
.ui-input-wrap .ui-input {
padding-left: 2.25rem;
}
.ui-input-clear {
position: absolute;
left: 0.5rem;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
}
.ui-input-clear:hover {
color: #ef4444;
}
.ui-modal-backdrop {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 2.5rem 1rem 1rem;
background: rgba(2, 6, 23, 0.58);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
overflow-y: auto;
}
.ui-modal-backdrop.centered {
align-items: center;
padding-top: 1rem;
}
.ui-modal-panel {
position: relative;
width: min(350px, calc(100vw - 2rem));
max-height: calc(100vh - 5rem);
overflow-y: auto;
padding: 1.25rem;
text-align: center;
background: var(--modal-bg);
border: 1px solid var(--modal-border);
border-radius: var(--radius-xl);
box-shadow: var(--modal-shadow);
color: var(--text-primary);
}
.ui-modal-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
border: 1px solid var(--border-input);
background: var(--surface-tabs);
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s ease;
}
.ui-modal-close:hover {
color: var(--text-primary);
background: var(--surface-tab-hover);
}
.ui-title {
font-size: 1.125rem;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 0.75rem;
}
.ui-subtitle {
font-size: 0.875rem;
color: var(--text-muted);
margin-bottom: 1rem;
}
.ui-input {
width: 100%;
padding: 0.65rem 0.85rem;
border-radius: 0.875rem;
border: 1px solid var(--border-input);
background: var(--surface-input);
color: var(--text-primary);
font-size: 0.875rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ui-input:focus {
outline: none;
border-color: color-mix(in srgb, var(--primary-color) 55%, white);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 22%, transparent);
}
.ui-task-list {
max-height: calc(100vh - 320px);
overflow-y: auto;
margin: 0.75rem 0;
padding: 0.15rem;
}
.ui-task-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin: 0.45rem 0;
padding: 0.7rem 0.8rem;
border-radius: 0.875rem;
border: 1px solid var(--border-subtle);
background: var(--surface-card);
color: var(--text-primary);
cursor: pointer;
transition: all 0.2s ease;
text-align: right;
}
.ui-task-item:hover {
background: var(--surface-card-hover);
border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-subtle));
}
.ui-task-item:has(input:checked) {
background: color-mix(in srgb, var(--primary-color) 16%, var(--surface-card));
border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-subtle));
}
.ui-task-item:has(input:disabled) {
opacity: 0.55;
cursor: not-allowed;
}
.ui-month-tabs {
display: flex;
gap: 0.35rem;
overflow: visible;
position: relative;
z-index: 50;
max-width: 350px;
width: 100%;
padding: 0.45rem;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background: var(--surface-tabs);
border: 1px solid var(--border-glass);
border-bottom: none;
scrollbar-width: none;
}
.ui-month-tabs::-webkit-scrollbar {
display: none;
}
.ui-month-more {
position: relative;
flex-shrink: 0;
z-index: 60;
}
.ui-month-more-menu {
position: absolute;
top: calc(100% + 0.35rem);
right: 0;
left: auto;
z-index: 100;
min-width: 9rem;
max-height: 16rem;
overflow-y: auto;
padding: 0.35rem;
border-radius: 0.75rem;
background: var(--surface-panel, #fff);
border: 1px solid var(--border-glass, #e5e7eb);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.ui-month-more-menu.hidden {
display: none !important;
}
.ui-month-more-item {
width: 100%;
text-align: right;
justify-content: flex-start;
}
.ui-month-tab,
.tablinks {
flex-shrink: 0;
padding: 0.5rem 0.85rem;
border: none;
border-radius: 0.75rem;
background: transparent;
color: var(--text-muted);
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
}
.ui-month-tab:hover,
.tablinks:hover {
color: var(--text-primary);
background: var(--surface-tab-hover);
}
.ui-month-tab.active,
.tablinks.active {
color: color-mix(in srgb, var(--primary-color) 78%, var(--text-primary));
background: var(--surface-tab-active);
box-shadow: var(--shadow-soft);
}
.ui-attendance-card,
.tabcontent {
width: min(350px, calc(100vw - 2rem));
background: var(--surface-glass);
border: 1px solid var(--border-glass);
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
box-shadow: var(--shadow-soft);
overflow: hidden;
position: relative;
z-index: 1;
color: var(--text-primary);
}
.ui-attendance-table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.ui-attendance-table thead th {
padding: 0.65rem 0.35rem;
font-size: 0.72rem;
font-weight: 700;
color: var(--text-muted);
background: var(--surface-tabs);
border-bottom: 1px solid var(--border-subtle);
}
.ui-attendance-table thead th:not(:last-child),
.ui-attendance-table tbody td:not(:last-child) {
border-left: 1px solid var(--border-subtle);
}
.ui-attendance-table tbody td {
padding: 0.5rem 0.25rem;
font-size: 0.82rem;
color: var(--text-primary);
border-bottom: 1px solid var(--border-subtle);
font-variant-numeric: tabular-nums;
}
.ui-attendance-table tbody tr:hover td {
background: var(--surface-tab-hover);
}
.ui-attendance-table tfoot td,
.ui-attendance-table .table-summary td {
padding: 0.75rem 0.5rem;
font-size: 0.85rem;
font-weight: 800;
color: var(--text-primary);
background: color-mix(in srgb, var(--primary-color) 10%, var(--surface-card));
border-top: 2px solid var(--border-subtle);
}
.ui-panel {
background: var(--surface-glass);
border: 1px solid var(--border-glass);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-soft);
color: var(--text-primary);
}
.ui-page {
width: 100%;
max-width: 420px;
margin: 0 auto;
padding: 0 0.5rem 1.5rem;
}
.ui-empty {
margin-top: 5rem;
text-align: center;
color: var(--text-muted);
font-weight: 700;
}
.ui-user-card {
background: var(--surface-glass);
border: 2px solid var(--border-glass);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
padding: 0.75rem;
text-align: center;
color: var(--text-primary);
transition: border-color 0.2s ease, transform 0.2s ease;
}
.ui-user-card:hover {
transform: translateY(-1px);
}
.ui-user-card.is-active {
border-color: #22c55e;
}
.ui-user-card.is-working {
border-color: var(--primary-color);
}
.ui-user-card.is-break {
border-color: #f97316;
}
.ui-user-card a {
color: inherit;
text-decoration: none;
}
.ui-user-card .ui-user-name {
font-weight: 800;
color: var(--text-primary);
margin-bottom: 0.35rem;
}
.ui-user-card p {
font-size: 0.82rem;
color: var(--text-secondary);
margin: 0.2rem 0;
}
.ui-requests-card {
width: min(350px, calc(100vw - 2rem));
margin-top: 2rem;
padding: 1rem;
background: var(--surface-glass);
border: 1px solid var(--border-glass);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-soft);
color: var(--text-primary);
}
.ui-requests-card > p {
text-align: center;
font-weight: 800;
margin-bottom: 0.75rem;
color: var(--text-primary);
}
.ui-chip-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 150px;
padding: 0.65rem 1rem;
margin: 0.5rem 0;
border: none;
border-radius: 0.875rem;
background: var(--primary-color);
color: #fff;
font-weight: 700;
cursor: pointer;
transition: filter 0.2s ease, transform 0.2s ease;
}
.ui-chip-btn:hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
.ui-table-wrap {
width: min(350px, calc(100vw - 2rem));
margin: 0 auto;
overflow: hidden;
border-radius: var(--radius-lg);
border: 1px solid var(--border-glass);
}
.ui-table-wrap table {
width: 100%;
border-collapse: collapse;
text-align: center;
color: var(--text-primary);
}
.ui-table-wrap thead th {
padding: 0.55rem 0.35rem;
font-size: 0.75rem;
background: color-mix(in srgb, var(--primary-color) 72%, #0f172a);
color: #fff;
border: 1px solid var(--border-subtle);
}
.ui-table-wrap tbody td {
padding: 0.45rem 0.35rem;
font-size: 0.8rem;
border: 1px solid var(--border-subtle);
background: var(--surface-card);
}
.ui-table-wrap tbody tr.is-new td {
background: color-mix(in srgb, var(--primary-color) 14%, var(--surface-card));
}
.ui-btn-approve,
.ui-btn-reject {
width: 100%;
border: none;
border-radius: 0.5rem;
padding: 0.35rem 0.5rem;
font-weight: 700;
cursor: pointer;
color: #0f172a;
}
.ui-btn-approve {
background: #86efac;
margin-bottom: 0.35rem;
}
.ui-btn-reject {
background: #fca5a5;
}
[data-theme="dark"] .ui-btn-approve {
background: rgba(74, 222, 128, 0.35);
color: #bbf7d0;
}
[data-theme="dark"] .ui-btn-reject {
background: rgba(248, 113, 113, 0.32);
color: #fecaca;
}
[data-theme="dark"] .bg-gray-200,
[data-theme="dark"] .bg-gray-300 {
background-color: var(--surface-tabs) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .bg-gray-50 {
background-color: color-mix(in srgb, var(--primary-color) 8%, var(--surface-card)) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"] {
color: var(--text-primary) !important;
}
[data-theme="dark"] .text-stone-600 {
color: var(--text-muted) !important;
}
[data-theme="dark"] .hover\:bg-cyan-500:hover,
[data-theme="dark"] .hover\:bg-cyan-100:hover {
background-color: var(--surface-tab-hover) !important;
}
[data-theme="dark"] .bg-white {
background-color: var(--surface-card) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .app-shell,
[data-theme="dark"] .app-shell p,
[data-theme="dark"] .app-shell td,
[data-theme="dark"] .app-shell th,
[data-theme="dark"] .app-shell li,
[data-theme="dark"] .app-shell label:not(.headerItems label) {
color: inherit;
}
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
color: var(--text-primary) !important;
}
[data-theme="dark"] .text-gray-600 {
color: var(--text-secondary) !important;
}
[data-theme="dark"] .text-gray-500 {
color: var(--text-muted) !important;
}
[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-gray-300 {
color: var(--text-faint) !important;
}
[data-theme="dark"] .hover\:text-gray-600:hover {
color: var(--text-primary) !important;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
background-color: var(--surface-input) !important;
color: var(--text-primary) !important;
border-color: var(--border-input) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
color: var(--text-faint) !important;
}
[data-theme="dark"] option {
background-color: #1e293b;
color: #f8fafc;
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300,
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-200\/70 {
border-color: var(--border-subtle) !important;
}
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg {
box-shadow: var(--shadow-soft) !important;
}
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-slate-100 {
background-color: var(--surface-tabs) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-slate-100:hover,
[data-theme="dark"] .hover\:bg-gray-200:hover {
background-color: var(--surface-tab-hover) !important;
}
[data-theme="dark"] .bg-red-100 {
background-color: rgba(248, 113, 113, 0.22) !important;
}
[data-theme="dark"] .text-red-800,
[data-theme="dark"] .text-red-700 {
color: #fecaca !important;
}
[data-theme="dark"] .bg-yellow-100,
[data-theme="dark"] .bg-yellow-50 {
background-color: rgba(250, 204, 21, 0.18) !important;
}
[data-theme="dark"] .text-yellow-800 {
color: #fde68a !important;
}
[data-theme="dark"] .bg-green-100 {
background-color: rgba(74, 222, 128, 0.18) !important;
}
[data-theme="dark"] .text-green-800 {
color: #bbf7d0 !important;
}
[data-theme="dark"] table td,
[data-theme="dark"] table th {
color: var(--text-primary);
}
[data-theme="dark"] table tr[style*="#ffffff"] td,
[data-theme="dark"] table tr[style*="#ffffff"],
[data-theme="dark"] table td[style*="#ffffff"],
[data-theme="dark"] table tbody tr[style*="background-color: white"] td,
[data-theme="dark"] table tbody tr[style*="background-color: white"] {
background-color: var(--surface-card) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] table tr[style*="244,244,244"] th,
[data-theme="dark"] table tr[style*="rgba(244"] {
background: var(--surface-tabs) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] table td[style*="#e6e6e6"] {
background-color: var(--surface-tabs) !important;
color: var(--text-secondary) !important;
}
[data-theme="dark"] table td[style*="#d1fae5"] {
background-color: rgba(16, 185, 129, 0.24) !important;
color: #a7f3d0 !important;
}
[data-theme="dark"] table td[style*="#fad1d1"] {
background-color: rgba(248, 113, 113, 0.22) !important;
color: #fecaca !important;
}
[data-theme="dark"] table tr[style*="#bfdbfe"],
[data-theme="dark"] table td[style*="#bfdbfe"] {
background-color: rgba(96, 165, 250, 0.22) !important;
color: #bfdbfe !important;
}
[data-theme="dark"] table td[style*="#edae80"] {
background-color: rgba(251, 146, 60, 0.24) !important;
color: #fed7aa !important;
}
[data-theme="dark"] table td[style*="border"],
[data-theme="dark"] table th[style*="border"],
[data-theme="dark"] table tr[style*="border"] {
border-color: var(--border-subtle) !important;
}
[data-theme="dark"] [style*="color: #959595"],
[data-theme="dark"] [style*="color:#959595"] {
color: var(--text-muted) !important;
}
[data-theme="dark"] table tbody tr[style*="lightblue"] td {
background-color: color-mix(in srgb, var(--primary-color) 18%, var(--surface-card)) !important;
}
[data-theme="dark"] .clockpicker-popover {
background-color: #1e293b !important;
color: #f1f5f9 !important;
border: 1px solid #475569 !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] .clockpicker-popover .popover-title {
background-color: #0f172a !important;
color: #e2e8f0 !important;
border-bottom: 1px solid #334155 !important;
}
[data-theme="dark"] .clockpicker-popover .popover-content {
background-color: #1e293b !important;
}
[data-theme="dark"] .clockpicker-popover .clockpicker-plate {
background-color: #0f172a !important;
border-color: #475569 !important;
}
[data-theme="dark"] .clockpicker-popover .clockpicker-tick {
color: #e2e8f0 !important;
}
[data-theme="dark"] .clockpicker-popover .clockpicker-tick.active,
[data-theme="dark"] .clockpicker-popover .clockpicker-tick:hover {
background-color: rgba(34, 211, 238, 0.28) !important;
color: #fff !important;
}
[data-theme="dark"] .clockpicker-popover .clockpicker-button,
[data-theme="dark"] .clockpicker-popover button.clockpicker-button,
[data-theme="dark"] .clockpicker-popover .btn.clockpicker-button,
[data-theme="dark"] .clockpicker-popover .btn-default {
background-color: #0f172a !important;
background-image: none !important;
color: #f8fafc !important;
border-color: #475569 !important;
border-top: 1px solid #475569 !important;
}
[data-theme="dark"] .clockpicker-popover .clockpicker-button:hover,
[data-theme="dark"] .clockpicker-popover button.clockpicker-button:hover,
[data-theme="dark"] .clockpicker-popover .btn.clockpicker-button:hover,
[data-theme="dark"] .clockpicker-popover .btn-default:hover {
background-color: #334155 !important;
color: #ffffff !important;
}
[data-theme="dark"] .clockpicker-popover .clockpicker-canvas-bearing,
[data-theme="dark"] .clockpicker-popover .clockpicker-canvas-fg {
fill: #22d3ee !important;
}
[data-theme="dark"] .clockpicker-popover .clockpicker-canvas-bg {
fill: rgba(34, 211, 238, 0.35) !important;
}
[data-theme="dark"] .clockpicker-popover .clockpicker-canvas line {
stroke: #22d3ee !important;
}
[data-theme="dark"] .datepicker-plot-area,
[data-theme="dark"] .datepicker-container,
[data-theme="dark"] .datepicker-navigator {
background-color: var(--surface-card) !important;
color: var(--text-primary) !important;
border-color: var(--border-input) !important;
}
[data-theme="dark"] .datepicker-plot-area .datepicker-navigator .pwt-btn-next,
[data-theme="dark"] .datepicker-plot-area .datepicker-navigator .pwt-btn-switch,
[data-theme="dark"] .datepicker-plot-area .datepicker-navigator .pwt-btn-prev {
background-color: var(--surface-input) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row-cell {
color: var(--text-secondary) !important;
}
[data-theme="dark"] .datepicker-plot-area .datepicker-day-view .table-days td span,
[data-theme="dark"] .datepicker-plot-area .datepicker-month-view .month-item,
[data-theme="dark"] .datepicker-plot-area .datepicker-year-view .year-item {
background-color: var(--surface-input) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .datepicker-plot-area .datepicker-day-view .table-days td.disabled span,
[data-theme="dark"] .datepicker-plot-area .datepicker-day-view .table-days td span.other-month,
[data-theme="dark"] .datepicker-plot-area .datepicker-year-view .year-item-disable,
[data-theme="dark"] .datepicker-plot-area .datepicker-month-view .month-item-disable {
background-color: var(--surface-tabs) !important;
color: var(--text-faint) !important;
}
[data-theme="dark"] .datepicker-plot-area .datepicker-day-view .table-days td.today span {
background-color: var(--primary-color) !important;
color: #fff !important;
}
[data-theme="dark"] .datepicker-plot-area .datepicker-day-view .table-days td.selected span,
[data-theme="dark"] .datepicker-plot-area .datepicker-month-view .month-item.selected,
[data-theme="dark"] .datepicker-plot-area .datepicker-year-view .year-item.selected {
background-color: #2563eb !important;
color: #fff !important;
}
[data-theme="dark"] .datepicker-plot-area .datepicker-day-view .table-days td span:hover,
[data-theme="dark"] .datepicker-plot-area .datepicker-month-view .month-item:hover,
[data-theme="dark"] .datepicker-plot-area .datepicker-year-view .year-item:hover {
background-color: var(--surface-tab-hover) !important;
color: var(--text-primary) !important;
}
[data-theme="dark"] .datepicker-plot-area .toolbox .pwt-btn-submit,
[data-theme="dark"] .datepicker-plot-area .toolbox .pwt-btn-calendar,
[data-theme="dark"] .datepicker-plot-area .toolbox .pwt-btn-today {
background-color: var(--surface-input) !important;
color: var(--text-primary) !important;
border-color: var(--border-input) !important;
}
</style>
@yield('style')
</head>
<body>
@if (session('message'))
<center>
<div id="error-box"
class="bg-red-500 text-white p-4 rounded shadow-md fixed top-5 left-1/2 transform -translate-x-1/2 transition-opacity
duration-1000 ease-in-out opacity-100"
style="z-index: 100; background:{{ session('message.color') }};width: 90%;">
{{ session('message.text') }}
</div>
</center>
@endif
<div class="app-shell">
@if(url()->current() == url('/tasks'))
<div class="flex mr-6 object-right-bottom bottom-[5.75rem] fixed z-10 w-14">
<a class="fab-btn bg-[var(--primary-color)] rounded-full size-14 flex justify-center items-center"
href="/create_task">
<i class="fa-solid fa-plus" style="color: white"></i>
</a>
</div>
@endif
@if(url()->current() != url('/tasks'))
<div class="flex mr-6 object-right-bottom bottom-[5.75rem] fixed z-10 w-14">
<a class="fab-btn bg-[var(--primary-color)] rounded-full size-14 flex justify-center items-center"
href="/tasks">
<i class="fa-solid fa-list-check" style="color: white"></i>
</a>
</div>
@endif
<header class="glass-header">
<div class="px-4 py-1 flex justify-center">
<div class="headerItems flex items-center justify-between text-white text-xl font-semibold">
<label class="cursor-pointer"
onclick="window.location.href = '{{url('attendance/logMeOut')}}'">
<i class="fa-solid fa-right-from-bracket"></i>
</label>
@if(isset($_COOKIE['token-0']))
<label class="mx-auto font-bold text-center leading-tight">{{ $user_p->name ?? 'مُنتسک' }}</label>
@else
<label class="mx-auto font-bold">مُنتسک</label>
@endif
<button type="button"
class="theme-switch"
id="themeToggle"
aria-label="فعال‌سازی تم تاریک">
<span class="theme-switch-track" aria-hidden="true">
<svg class="theme-switch-icon theme-switch-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
</svg>
<svg class="theme-switch-icon theme-switch-icon-moon" viewBox="0 0 24 24" fill="currentColor">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</span>
<span class="theme-switch-thumb" aria-hidden="true"></span>
</button>
</div>
</div>
</header>
<div class="h-[4.5rem]"></div>
{{-- @if(isset($attendance_recorder) and $attendance_recorder == 1 or true)--}}
{{-- @else--}}
<script>
function submitForm(action, method = 'POST') {
const form = document.getElementById('actionForm');
form.action = `${action}`;
form.method = method;
if (method === 'GET') {
window.location.href = form.action;
} else {
form.submit();
}
}
</script>
{{-- {{dd(session('admin'))}}--}}
{{-- <div class="flex justify-center items-center mt-20">--}}
{{-- @if(!request()->is("admin") && (isset($_COOKIE['ad']) && $_COOKIE['ad']==1))--}}
{{-- onclick="window.location.href='{{ route('admin.dashboard') }}'">--}}
{{-- ورود به پنل ادمین--}}
{{-- </button>--}}
{{-- @elseif(request()->is("admin") && (isset($_COOKIE['ad']) && $_COOKIE['ad']==1))--}}
{{-- <button class=" bg-white rounded-[23px] shadow-lg flex justify-center px-4 py-2"--}}
{{-- style="max-width: 150px; margin: 0 0 20px 0"--}}
{{-- onclick="window.location.href='/'">--}}
{{-- ثبت ساعت کاری--}}
{{-- </button>--}}
{{-- @endif--}}
{{-- </div>--}}
@yield('content')
<div class="app-content-bottom-space" aria-hidden="true"></div>
<div class="glass-footer-wrap">
<form id="actionForm" method="POST"
class="glass-footer flex justify-around gap-4 items-center px-2 py-1 text-2xl">
@csrf
@if(isset($_COOKIE['token_0']) || isset($_COOKIE['token_1']) || isset($_COOKIE['token_2']))
<button type="button" onclick="submitForm('up')"><i class="fa-solid fa-arrow-up text-white"></i></button>
@endif
@if(isset($_COOKIE['user_identity']))
<button type="button" onclick="submitForm('{{ route('attendance.show') }}','')">
<i class="fa-solid fa-clipboard-user text-white"></i>
</button>
@endif
<button type="button" onclick="submitForm('/', 'GET')">
<i class="fa-solid fa-house text-white"></i>
</button>
@if(!request()->is('admin') && (isset($_COOKIE['ad']) && $_COOKIE['ad'] != null))
<button type="button" onclick="submitForm('{{ route('admin.dashboard') }}', 'GET')">
<i class="fa-solid fa-users text-white"></i>
</button>
@elseif(request()->is('admin') && (isset($_COOKIE['ad']) && $_COOKIE['ad'] != null))
<button type="button" onclick="submitForm('/', 'GET')">
<i class="fa-solid fa-users text-white"></i>
</button>
@endif
@if(isset($_COOKIE['user_identity']))
<button type="button" onclick="submitForm('{{ route('user.profile') }}', 'GET')">
<i class="fa-solid fa-user text-white"></i>
</button>
@endif
</form>
</div>
<script>
function openModal(title, id) {
// Set the modal content
const modalTitle = document.getElementById('modal-title')
const modalBody = document.getElementById('modal-body')
modalTitle.innerText = title
// Set the correct link for Panel Access based on the item's ID
const panelLink = document.getElementById('panel-access-link')
panelLink.href = `/go_down/${id}`
// Show the modal
document.getElementById('modal-container').classList.remove('hidden')
}
// Close modal function
function closeModal() {
document.getElementById('modal-container').classList.add('hidden')
}
// Close modal when clicking outside the modal content
const modalContainer = document.getElementById('modal-container')
if (modalContainer) {
modalContainer.addEventListener('click', (e) => {
if (e.target === modalContainer) {
closeModal()
}
})
}
function autoDismissFlashMessage() {
const errorBox = document.getElementById('error-box')
if (!errorBox) return
setTimeout(() => {
errorBox.classList.add('opacity-0')
errorBox.addEventListener('transitionend', () => {
errorBox.remove()
})
}, 5000)
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', autoDismissFlashMessage)
} else {
autoDismissFlashMessage()
}
function initThemeToggle() {
const toggle = document.getElementById('themeToggle')
if (!toggle) return
function updateToggleState() {
const isDark = document.documentElement.getAttribute('data-theme') === 'dark'
toggle.setAttribute('aria-label', isDark ? 'فعال‌سازی تم روشن' : 'فعال‌سازی تم تاریک')
}
function setTheme(theme) {
if (theme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark')
} else {
document.documentElement.removeAttribute('data-theme')
}
localStorage.setItem('montask-theme', theme)
updateToggleState()
}
updateToggleState()
toggle.addEventListener('click', () => {
const next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
setTheme(next)
})
}
initThemeToggle()
</script>
@yield('script')
</div>
</body>
</html>