debesocial/biiproject-kit-v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add resources and view components

Browse Source
This commit is contained in:
debesocial
2026-05-21 16:05:19 +07:00
parent 28a06315b8
commit b2d60e680d
249 changed files with 37379 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/pages/system_settings/maintenance-mode.blade.php
+542
View File
@@ -0,0 +1,542 @@
<x-app-layout>
@push('styles')
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet" />
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
rel="stylesheet" />
<style>
/* Shared Styles from Backup & Storage */
.status-widget-dark {
border-radius: 24px;
background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
padding: 1.5rem;
color: white;
margin-bottom: 1.5rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}
/* Attached Design Preview Styles */
.mockup-container {
position: sticky;
top: 100px;
}
.browser-mockup-frame {
background: #e2e8f0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.4);
}
.browser-top-bar {
background: #f8fafc;
padding: 10px 18px;
border-bottom: 1px solid #e2e8f0;
display: flex;
align-items: center;
gap: 12px;
}
.browser-dots {
display: flex;
gap: 6px;
}
.browser-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.browser-url-field {
background: #ffffff;
border-radius: 6px;
padding: 3px 15px;
font-size: 11px;
color: #94a3b8;
flex-grow: 1;
max-width: 450px;
text-align: center;
border: 1px solid #f1f5f9;
}
/* VISITOR VIEW BACKGROUND (STRICT AS PER IMAGE) */
.viewport-preview {
height: 700px;
background: #f4f4f4;
/* Base light gray */
background-image: repeating-linear-gradient(45deg, #f0f2f5, #f0f2f5 10px, #ffffff 10px, #ffffff 20px);
display: flex;
align-items: center;
justify-content: center;
padding: 3rem;
position: relative;
}
/* WHITE CARD (STRICT AS PER IMAGE) */
.visitor-card-premium {
background: #ffffff;
border-radius: 42px;
padding: 4rem 3rem;
text-align: center;
width: 100%;
max-width: 440px;
box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.04);
z-index: 2;
}
.under-maintenance-pill {
background: #ffffff;
border: 1px solid #eef0f3;
border-radius: 100px;
padding: 8px 18px;
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 2.5rem;
font-size: 11px;
font-weight: 800;
color: #1a1c1e;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}
.pulse-dot-red {
width: 8px;
height: 8px;
background-color: #ef4444;
border-radius: 50%;
animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
0% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
}
70% {
box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
}
}
/* COUNTDOWN SQUARES (STRICT AS PER IMAGE) */
.countdown-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 2rem;
}
.countdown-square {
background: #1a1c1e;
border-radius: 20px;
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
transition: all 0.3s ease;
}
.countdown-square:hover {
transform: scale(1.05);
}
.countdown-number {
font-size: 1.25rem;
font-weight: 800;
line-height: 1;
margin-bottom: 2px;
}
.countdown-label {
font-size: 7px;
text-transform: uppercase;
opacity: 0.5;
letter-spacing: 1px;
font-weight: 700;
}
.custom-switch-premium .form-check-input {
width: 3rem;
height: 1.5rem;
cursor: pointer;
}
.filepond--root {
margin-bottom: 0;
}
.filepond--panel-root {
background-color: #f8fafc;
border: 2px dashed #e2e8f0;
border-radius: 16px;
}
</style>
@endpush
<div class="container-fluid pb-5">
{{-- Page Header --}}
<div class="d-flex align-items-center justify-content-between mb-4 animate__animated animate__fadeIn">
<div>
<h4 class="fw-bold mb-1" style="font-family: 'Outfit', sans-serif; letter-spacing: -0.5px;">
{{ __('Maintenance Mode') }}
</h4>
<p class="text-muted small mb-0">
{{ __('Take your application offline for scheduled updates and optimization.') }}
</p>
</div>
</div>
<form id="maintenanceConfigForm" action="{{ route('system-config.update') }}" method="POST"
enctype="multipart/form-data" autocomplete="off" class="ajax-form" data-reset="false">
@csrf
@method('PUT')
<div class="row gx-4">
{{-- Left: Controls (Col-4) --}}
<div class="col-lg-4 animate__animated animate__fadeIn">
{{-- Status Card (Backup Styling) --}}
<div class="status-widget-dark">
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="d-flex align-items-center gap-2">
<div class="bg-white bg-opacity-10 rounded-circle p-2">
<i class="bi bi-broadcast text-info"></i>
</div>
<span class="small fw-bold opacity-75 text-uppercase tracking-wider">Storage
Health</span>
</div>
@if($is_down)
<span class="badge rounded-pill bg-danger text-white fw-bold px-3 py-2"
style="font-size: 10px;">Maintenance</span>
@else
<span class="badge rounded-pill bg-info text-dark fw-bold px-3 py-2"
style="font-size: 10px;">Operational</span>
@endif
</div>
<div class="mb-4">
<h2 class="mb-1 fw-bold" style="font-family: 'Outfit', sans-serif;">
@if($is_down)
System Offline
@else
Systems Ready
@endif
</h2>
<p class="small opacity-50 mb-0">Public access control center.</p>
</div>
<div
class="form-check form-switch custom-switch-premium p-0 d-flex align-items-center justify-content-between bg-white bg-opacity-5 p-3 rounded-4 border border-white border-opacity-10">
<label class="form-check-label fw-semibold small text-white"
for="maintenance_mode_enabled">{{ __('ENABLE MODE') }}</label>
<input class="form-check-input ms-0" type="checkbox" role="switch"
id="maintenance_mode_enabled" name="maintenance_mode_enabled" value="1"
@checked(old('maintenance_mode_enabled', $settings['maintenance_mode_enabled'] ?? false))>
</div>
</div>
{{-- Config Sections --}}
<div class="card adminuiux-card mb-4">
<div class="card-body">
<h6 class="fw-bold mb-4 d-flex align-items-center gap-2">
<i class="bi bi-palette-fill text-primary"></i>
{{ __('Visual & Branding') }}
</h6>
<div class="mb-3">
<label class="form-label fw-semibold">{{ __('Main Headline') }}</label>
<input type="text" class="form-control" name="maintenance_mode_title"
value="{{ $settings['maintenance_mode_title'] ?? 'biiproject.com' }}">
</div>
<div class="mb-3">
<label class="form-label fw-semibold">{{ __('Description') }}</label>
<textarea class="form-control" name="maintenance_mode_message"
rows="3">{{ $settings['maintenance_mode_message'] ?? 'We are currently performing scheduled maintenance. We will be back shortly!' }}</textarea>
</div>
<div class="mb-0">
<label class="form-label fw-semibold mb-2">{{ __('Illustration / Logo') }}</label>
<input type="file" id="maintenance_mode_image" name="maintenance_mode_image"
accept="image/png,image/jpeg,image/svg+xml">
</div>
</div>
</div>
<div class="card adminuiux-card mb-4">
<div class="card-body">
<h6 class="fw-bold mb-4 d-flex align-items-center gap-2">
<i class="bi bi-clock-fill text-primary"></i>
{{ __('Time & Access') }}
</h6>
<div class="mb-3">
<label class="form-label fw-semibold">{{ __('Secret Bypass Key') }}</label>
<input type="text" class="form-control" name="maintenance_mode_secret"
placeholder="e.g. admin-only"
value="{{ $settings['maintenance_mode_secret'] ?? '' }}">
</div>
<div class="row g-2">
<div class="col-12 mb-2">
<label class="form-label fw-semibold">{{ __('End Time') }}</label>
<input type="datetime-local" class="form-control" name="maintenance_mode_end_at"
value="{{ !empty($settings['maintenance_mode_end_at']) ? date('Y-m-d\TH:i', strtotime($settings['maintenance_mode_end_at'])) : '' }}">
</div>
<div class="col-12">
<label class="form-label fw-semibold">{{ __('Retry Interval (Seconds)') }}</label>
<input type="number" class="form-control" name="maintenance_mode_retry"
value="{{ $settings['maintenance_mode_retry'] ?? 3600 }}">
</div>
</div>
</div>
</div>
<div class="card adminuiux-card mb-4 border-warning border-opacity-25 bg-warning bg-opacity-5">
<div class="card-body">
<h6 class="fw-bold mb-3 d-flex align-items-center gap-2 text-warning-emphasis">
<i class="bi bi-megaphone-fill"></i>
{{ __('Broadcast Warning') }}
</h6>
<p class="extra-small text-muted mb-4">
{{ __('Alert all active users before shutting down the system. They will receive a real-time notification.') }}
</p>
<div class="input-group">
<select class="form-select" id="broadcast_minutes">
<option value="1">1 {{ __('Minute') }}</option>
<option value="5" selected>5 {{ __('Minutes') }}</option>
<option value="10">10 {{ __('Minutes') }}</option>
<option value="30">30 {{ __('Minutes') }}</option>
</select>
<button type="button" class="btn btn-warning fw-bold px-3" id="btn-broadcast-warning">
<i class="bi bi-send-fill me-1"></i> {{ __('Send Alert') }}
</button>
</div>
</div>
</div>
@can('manage maintenance mode')
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-primary rounded-pill px-4 shadow-sm">
{{ __('Apply Configuration') }}
</button>
</div>
@endcan
</div>
{{-- Right: Live Preview (Col-8) --}}
<div class="col-lg-8 animate__animated animate__fadeIn">
<div class="mockup-container">
<div class="browser-mockup-frame">
{{-- Toolbar --}}
<div class="browser-top-bar">
<div class="browser-dots">
<div class="browser-dot" style="background: #ff5f56;"></div>
<div class="browser-dot" style="background: #ffbd2e;"></div>
<div class="browser-dot" style="background: #27c93f;"></div>
</div>
<div class="browser-url-field">
{{ url('/') }}
</div>
</div>
{{-- Viewport (Design from Image) --}}
<div class="viewport-preview">
<div class="visitor-card-premium">
{{-- Maintenance Pill --}}
<div class="under-maintenance-pill">
<span class="pulse-dot-red"></span>
{{ __('UNDER MAINTENANCE') }}
</div>
{{-- Logo Container --}}
<div class="mb-4 mx-auto" id="preview-mnt-image-container"
style="max-width: 140px; min-height: 80px; display: flex; align-items: center; justify-content: center;">
@php
$mnt_img = $settings['maintenance_mode_image'] ?? '';
$display_img = null;
if (!empty($mnt_img)) {
$display_img = str_starts_with($mnt_img, 'assets/') ? asset($mnt_img) : asset('storage/' . $mnt_img);
} elseif (!empty($settings['app_logo'])) {
$display_img = str_starts_with($settings['app_logo'], 'assets/') ? asset($settings['app_logo']) : asset('storage/' . $settings['app_logo']);
}
@endphp
@if($display_img)
<img src="{{ $display_img }}" class="img-fluid" id="mnt-preview-img" alt="Logo">
@else
<i class="bi bi-gear-wide-connected fs-1 text-secondary opacity-25"
style="font-size: 3.5rem !important;"></i>
@endif
</div>
{{-- Content --}}
<h2 class="fw-black mb-3 text-dark" id="preview-mnt-title"
style="font-family: 'Outfit', sans-serif;">
{{ $settings['maintenance_mode_title'] ?? 'biiproject.com' }}
</h2>
<p class="text-secondary small mb-5" id="preview-mnt-message"
style="line-height: 1.6; opacity: 0.8; font-weight: 500;">
{{ $settings['maintenance_mode_message'] ?? 'We are currently performing scheduled maintenance. We will be back shortly!' }}
</p>
{{-- Countdown Grid (Image Style) --}}
<div class="countdown-grid" id="preview-mnt-countdown">
@foreach(['Days', 'Hours', 'Mins', 'Secs'] as $label)
<div class="countdown-square shadow-lg">
<div class="countdown-number" id="cd-{{ strtolower($label) }}">00</div>
<div class="countdown-label">{{ $label }}</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
@push('scripts')
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
// Initialize FilePond
FilePond.registerPlugin(FilePondPluginImagePreview);
const pond = FilePond.create(document.querySelector('#maintenance_mode_image'), {
name: 'maintenance_mode_image',
labelIdle: '<span class="text-muted small">Drop Logo or <span class="text-primary fw-bold">Browse</span></span>',
imagePreviewHeight: 120,
stylePanelLayout: 'compact',
});
// Form Handling
$('#maintenanceConfigForm').on('ajaxForm:beforeSend', function (e, formData) {
const files = pond.getFiles();
if (files.length > 0) {
formData.set('maintenance_mode_image', files[0].file);
}
});
$('#maintenanceConfigForm').on('ajaxForm:success', function (e, response) {
StandardSwal.fire({ title: 'Success!', text: response.message, icon: 'success', timer: 1500, showConfirmButton: false });
if (response.settings && response.settings.maintenance_mode_image) {
const path = response.settings.maintenance_mode_image;
const newUrl = path.startsWith('assets/') ? `/${path}` : `/storage/${path}`;
originalImgSrc = `${newUrl}?v=${new Date().getTime()}`;
}
if (response.hasOwnProperty('is_down')) {
setTimeout(() => location.reload(), 1000);
}
pond.removeFiles();
});
// Live Preview Sync
$('input[name="maintenance_mode_title"]').on('input', function () {
$('#preview-mnt-title').text($(this).val() || 'biiproject.com');
});
$('textarea[name="maintenance_mode_message"]').on('input', function () {
$('#preview-mnt-message').text($(this).val() || 'Maintenance in progress...');
});
// Countdown Logic
let countdownInterval;
function updateCountdown() {
const val = $('input[name="maintenance_mode_end_at"]').val();
if (!val) {
$('#preview-mnt-countdown').addClass('opacity-25');
return;
}
$('#preview-mnt-countdown').removeClass('opacity-25');
if (countdownInterval) clearInterval(countdownInterval);
const target = new Date(val).getTime();
countdownInterval = setInterval(() => {
const now = new Date().getTime();
const diff = target - now;
if (diff < 0) {
clearInterval(countdownInterval);
$('#cd-days, #cd-hours, #cd-mins, #cd-secs').text('00');
return;
}
const d = Math.floor(diff / (1000 * 60 * 60 * 24));
const h = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const s = Math.floor((diff % (1000 * 60)) / 1000);
$('#cd-days').text(d.toString().padStart(2, '0'));
$('#cd-hours').text(h.toString().padStart(2, '0'));
$('#cd-mins').text(m.toString().padStart(2, '0'));
$('#cd-secs').text(s.toString().padStart(2, '0'));
}, 1000);
}
$('input[name="maintenance_mode_end_at"]').on('change', updateCountdown);
updateCountdown();
// Image Swap
let originalImgSrc = $('#mnt-preview-img').attr('src');
pond.on('addfile', (error, file) => {
if (!error) {
const url = URL.createObjectURL(file.file);
$('#preview-mnt-image-container').html(`<img src="${url}" class="img-fluid" id="mnt-preview-img" alt="Logo">`);
}
});
pond.on('removefile', () => {
if (originalImgSrc) {
$('#preview-mnt-image-container').html(`<img src="${originalImgSrc}" class="img-fluid" id="mnt-preview-img" alt="Logo">`);
} else {
$('#preview-mnt-image-container').html(`<i class="bi bi-gear-wide-connected fs-1 text-secondary opacity-25" style="font-size: 3.5rem !important;"></i>`);
}
});
// Broadcast Warning
$('#btn-broadcast-warning').on('click', function () {
const minutes = $('#broadcast_minutes').val();
const $btn = $(this);
StandardSwal.fire({
title: "{{ __('Send Broadcast Alert?') }}",
text: "{{ __('All active users will receive a warning about the upcoming maintenance.') }}",
icon: 'warning',
showCancelButton: true,
confirmButtonText: "{{ __('Send Alert') }}"
}).then((result) => {
if (result.isConfirmed) {
$btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>');
$.post("{{ route('maintenance-mode.broadcast') }}", {
_token: "{{ csrf_token() }}",
minutes: minutes
}, function (response) {
StandardSwal.fire({ title: "{{ __('Success') }}", text: response.message, icon: 'success' });
}).always(() => $btn.prop('disabled', false).html('<i class="bi bi-send-fill me-1"></i> {{ __("Send Alert") }}'));
}
});
});
});
</script>
<style>
.x-small {
font-size: 11px;
}
</style>
@endpush
</x-app-layout>