feat: add resources and view components
This commit is contained in:
@@ -0,0 +1,597 @@
|
||||
<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>
|
||||
:root {
|
||||
--admin-bg: #f5f7fb;
|
||||
--tab-active-bg: #ffffff;
|
||||
--text-dark: #1e293b;
|
||||
--text-muted: #64748b;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--admin-bg);
|
||||
}
|
||||
|
||||
.ck-editor__editable {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
/* FilePond Sleek Styling */
|
||||
.filepond--root {
|
||||
margin-bottom: 0;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.filepond--panel-root {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.filepond--drop-label {
|
||||
color: #64748b;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.filepond--label-action {
|
||||
color: #2563eb;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.filepond--credits {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Asset Card Styling */
|
||||
.asset-item-group {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.asset-preview-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.asset-preview-card img {
|
||||
max-height: 80px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.form-control-sleek {
|
||||
border-radius: 50rem;
|
||||
padding: 0.6rem 1.5rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-control-sleek:focus {
|
||||
border-color: #94a3b8;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-save-floating {
|
||||
background: #111827;
|
||||
color: white;
|
||||
border-radius: 50rem;
|
||||
padding: 10px 30px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.btn-save-floating:hover {
|
||||
transform: translateY(-2px);
|
||||
background: #000000;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Color Picker Styling */
|
||||
.color-preview-circle {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #ffffff;
|
||||
box-shadow: 0 0 0 1px #e2e8f0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.color-preview-circle:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 0 1px #cbd5e1, 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.input-group-text-color {
|
||||
background-color: #f8fafc !important;
|
||||
border-right: none !important;
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
|
||||
.color-input-field {
|
||||
border-left: none !important;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Sticky Bottom Bar */
|
||||
.sticky-bottom-bar {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border-top: 1px solid #e2e8f0;
|
||||
padding: 1rem 2rem;
|
||||
margin: 0 -1.5rem -1.5rem -1.5rem;
|
||||
border-bottom-left-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Mobile Mockup CSS */
|
||||
.mobile-mockup-container {
|
||||
width: 280px;
|
||||
height: 580px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-frame {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #111827;
|
||||
border-radius: 40px;
|
||||
padding: 12px;
|
||||
position: relative;
|
||||
box-shadow: 0 50px 100px -20px rgba(0,0,0,0.25), 0 30px 60px -30px rgba(0,0,0,0.3);
|
||||
border: 4px solid #374151;
|
||||
}
|
||||
|
||||
.mobile-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #f8fafc;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mobile-home-indicator {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 80px;
|
||||
height: 4px;
|
||||
background: rgba(0,0,0,0.2);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.app-content-preview {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mockup-app-name {
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.x-small {
|
||||
font-size: 0.65rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.fw-black {
|
||||
font-weight: 900 !important;
|
||||
}
|
||||
|
||||
.op-75 {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* Terminal Styling for JSON Preview */
|
||||
.terminal-box {
|
||||
background: #0c121e !important;
|
||||
border: 1px solid #1e293b !important;
|
||||
color: #10b981 !important;
|
||||
min-height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 12px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.terminal-header {
|
||||
background: #1e293b !important;
|
||||
border-bottom: 1px solid #334155 !important;
|
||||
padding: 10px 20px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.window-controls .dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.dot.red { background: #ef4444; }
|
||||
.dot.yellow { background: #f59e0b; }
|
||||
.dot.green { background: #22c55e; }
|
||||
|
||||
.terminal-content {
|
||||
padding: 20px;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.terminal-content pre {
|
||||
font-family: 'Fira Code', 'JetBrains Mono', 'Monaco', 'Consolas', monospace !important;
|
||||
color: #10b981 !important;
|
||||
font-size: 0.85rem;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
<div class="container-fluid" id="main-content">
|
||||
<div class="row gx-3 gx-lg-4">
|
||||
<div class="col-12">
|
||||
<div class="card adminuiux-card">
|
||||
<div class="card-body p-0">
|
||||
<!-- Header Section -->
|
||||
<div class="p-4 pb-0">
|
||||
<div class="row align-items-center g-3 mb-3">
|
||||
<div class="col">
|
||||
<h5 class="mb-0 fw-bold text-dark">{{ __('Mobile Settings') }}</h5>
|
||||
<small class="text-muted">
|
||||
{{ __('Manage branding and feature flags with secure, real-time mobile sync.') }}
|
||||
</small>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="input-group input-group-sm bg-light rounded-pill px-3 py-1 border">
|
||||
<i class="bi bi-search text-muted my-auto me-2"></i>
|
||||
<input type="text" id="mobileSearch" class="form-control border-0 bg-transparent" placeholder="{{ __('Search mobile settings...') }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<div class="row gx-4">
|
||||
<!-- Left Side: Settings Form -->
|
||||
<div class="col-xl-8 col-lg-7">
|
||||
<form id="mobileConfigForm" action="{{ route('mobile-settings.update') }}" method="POST" enctype="multipart/form-data"
|
||||
autocomplete="off" class="ajax-form" data-reset="false" data-alert="false">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
@php
|
||||
$groupIcons = [
|
||||
'branding' => 'bi-palette',
|
||||
'control_center' => 'bi-command',
|
||||
'app_updates' => 'bi-cloud-download',
|
||||
'features' => 'bi-stars',
|
||||
'security_auth' => 'bi-shield-lock',
|
||||
'connectivity' => 'bi-wifi',
|
||||
'notifications' => 'bi-bell',
|
||||
'support_social' => 'bi-headset',
|
||||
'analytics_system' => 'bi-cpu',
|
||||
'localization' => 'bi-translate',
|
||||
];
|
||||
@endphp
|
||||
<!-- Nav Tabs -->
|
||||
<div class="overflow-x-auto mb-4" style="ms-overflow-style: -ms-autohiding-scrollbar;">
|
||||
<ul class="nav nav-tabs border-bottom-0 flex-nowrap" id="mobileTabs" role="tablist">
|
||||
@foreach($settings as $group => $items)
|
||||
@cantab('mobile settings', $group)
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link px-3 fw-semibold text-nowrap text-capitalize @if($loop->first) active @endif"
|
||||
id="{{ $group }}-tab" data-bs-toggle="tab" data-bs-target="#{{ $group }}" type="button" role="tab" aria-selected="{{ $loop->first ? 'true' : 'false' }}">
|
||||
<i class="bi {{ $groupIcons[$group] ?? 'bi-gear' }} me-2"></i>
|
||||
{{ str_replace('_', ' ', $group) }}
|
||||
</button>
|
||||
</li>
|
||||
@endcantab
|
||||
@endforeach
|
||||
@cantab('mobile settings', 'developer')
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link px-3 fw-semibold text-nowrap"
|
||||
id="developer-tab" data-bs-toggle="tab" data-bs-target="#developer" type="button" role="tab" aria-selected="false">
|
||||
<i class="bi bi-code-square me-2 text-primary"></i>
|
||||
{{ __('Developer Console') }}
|
||||
</button>
|
||||
</li>
|
||||
@endcantab
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tab-content" id="mobileTabsContent">
|
||||
@foreach($settings as $group => $groupSettings)
|
||||
@cantab('mobile settings', $group)
|
||||
<div class="tab-pane fade @if($loop->first) show active @endif" id="{{ $group }}" role="tabpanel">
|
||||
<div class="row gx-3">
|
||||
<div class="col-12">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="avatar avatar-40 rounded-circle bg-primary-subtle text-primary me-3">
|
||||
<i class="bi {{ $groupIcons[$group] ?? 'bi-gear' }} fs-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold mb-0 text-uppercase tracking-wider text-dark">{{ str_replace('_', ' ', $group) }} {{ __('Configuration') }}</h6>
|
||||
<small class="text-muted">{{ __('Manage mobile specific ' . str_replace('_', ' ', $group) . ' settings and synchronization.') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
@foreach($groupSettings as $setting)
|
||||
@if($setting->type !== 'image_path')
|
||||
<div class="{{ $setting->type === 'boolean' ? 'col-md-6 col-lg-6' : 'col-12' }} mb-4">
|
||||
<label class="form-label fw-semibold">
|
||||
{{ str_replace(['lang_en_', 'lang_id_', '_'], ['', '', ' '], $setting->key) }}
|
||||
@if($setting->key === 'app_name')<span class="text-danger">*</span>@endif
|
||||
</label>
|
||||
|
||||
@if($setting->type === 'boolean')
|
||||
<div class="form-check form-switch mt-1">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="{{ $setting->key }}" name="{{ $setting->key }}" value="1" @checked($setting->value === 'true' || $setting->value === '1' || $setting->value === true)>
|
||||
<label class="form-check-label small text-muted ms-2" for="{{ $setting->key }}">{{ __('Enable') }}</label>
|
||||
</div>
|
||||
@elseif(str_ends_with($setting->key, '_at'))
|
||||
<input type="datetime-local" class="form-control" name="{{ $setting->key }}"
|
||||
value="{{ !empty($setting->value) ? date('Y-m-d\TH:i', strtotime($setting->value)) : '' }}">
|
||||
@elseif(str_contains($setting->key, 'color') || str_contains($setting->key, 'background'))
|
||||
<div class="input-group color-picker-container w-100">
|
||||
<span class="input-group-text color-preview-visual"
|
||||
style="background-color: {{ $setting->value ?? '#000000' }}; width: 50px; border-radius: 50rem 0 0 50rem !important; border-right: none;"></span>
|
||||
<input type="text" class="form-control color-input-field fw-bold text-center"
|
||||
name="{{ $setting->key }}" value="{{ $setting->value }}"
|
||||
placeholder="#000000" style="border-left: none; border-right: none; max-width: 110px; background: #f8fafc; font-size: 0.85rem; z-index: 2;">
|
||||
<div class="input-group-text p-0 border-start-0 flex-grow-1 position-relative" style="background: white; border-radius: 0 50rem 50rem 0 !important; overflow: hidden; min-height: 42px;">
|
||||
<input type="color" class="color-picker-sync position-absolute"
|
||||
value="{{ $setting->value ?? '#000000' }}"
|
||||
title="Choose color" style="top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; border: none; padding: 0; opacity: 0; z-index: 1;">
|
||||
<div class="w-100 h-100 color-bar-visual" style="background-color: {{ $setting->value ?? '#000000' }};"></div>
|
||||
</div>
|
||||
</div>
|
||||
@elseif(str_contains($setting->key, 'message') || str_contains($setting->key, 'description') || str_contains($setting->key, 'content') || str_contains($setting->key, 'schedule'))
|
||||
<textarea class="form-control rich-editor" id="editor-{{ $setting->key }}"
|
||||
name="{{ $setting->key }}"
|
||||
placeholder="Enter {{ str_replace('_', ' ', $setting->key) }} here...">{{ $setting->value }}</textarea>
|
||||
@elseif($setting->key === 'announcement_type')
|
||||
<select class="form-select" name="{{ $setting->key }}">
|
||||
<option value="info" @selected($setting->value === 'info')>Info (Blue)</option>
|
||||
<option value="warning" @selected($setting->value === 'warning')>Warning (Yellow)</option>
|
||||
<option value="danger" @selected($setting->value === 'danger')>Danger (Red)</option>
|
||||
</select>
|
||||
@elseif($setting->key === 'environment_selector')
|
||||
<select class="form-select" name="{{ $setting->key }}">
|
||||
<option value="production" @selected($setting->value === 'production')>Production</option>
|
||||
<option value="staging" @selected($setting->value === 'staging')>Staging</option>
|
||||
<option value="development" @selected($setting->value === 'development')>Development</option>
|
||||
</select>
|
||||
@elseif($setting->key === 'biometric_auth_type')
|
||||
<select class="form-select" name="{{ $setting->key }}">
|
||||
<option value="any" @selected($setting->value === 'any')>Any (Fingerprint/Face)</option>
|
||||
<option value="biometrics" @selected($setting->value === 'biometrics')>Biometrics Only</option>
|
||||
<option value="passcode" @selected($setting->value === 'passcode')>Passcode Only</option>
|
||||
</select>
|
||||
@elseif($setting->key === 'log_level')
|
||||
<select class="form-select" name="{{ $setting->key }}">
|
||||
<option value="debug" @selected($setting->value === 'debug')>Debug</option>
|
||||
<option value="info" @selected($setting->value === 'info')>Info</option>
|
||||
<option value="warn" @selected($setting->value === 'warn')>Warning</option>
|
||||
<option value="error" @selected($setting->value === 'error')>Error</option>
|
||||
</select>
|
||||
@elseif($setting->key === 'priority_level')
|
||||
<select class="form-select" name="{{ $setting->key }}">
|
||||
<option value="high" @selected($setting->value === 'high')>High</option>
|
||||
<option value="normal" @selected($setting->value === 'normal')>Normal</option>
|
||||
<option value="low" @selected($setting->value === 'low')>Low</option>
|
||||
</select>
|
||||
@elseif($setting->key === 'default_locale')
|
||||
<select class="form-select" name="{{ $setting->key }}">
|
||||
<option value="en" @selected($setting->value === 'en')>English (EN)</option>
|
||||
<option value="id" @selected($setting->value === 'id')>Indonesian (ID)</option>
|
||||
</select>
|
||||
@elseif($setting->type === 'integer' || $setting->type === 'int')
|
||||
<input type="number" class="form-control" name="{{ $setting->key }}" value="{{ $setting->value }}"
|
||||
placeholder="Enter {{ str_replace('_', ' ', $setting->key) }}...">
|
||||
@elseif(str_contains($setting->key, 'message') || str_contains($setting->key, 'text') || str_contains($setting->key, 'subtitle'))
|
||||
<textarea class="form-control" name="{{ $setting->key }}" rows="2"
|
||||
placeholder="Enter {{ str_replace('_', ' ', $setting->key) }}...">{{ $setting->value }}</textarea>
|
||||
@else
|
||||
<input type="text" class="form-control" name="{{ $setting->key }}" value="{{ $setting->value }}"
|
||||
placeholder="Enter {{ str_replace('_', ' ', $setting->key) }}...">
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
@foreach($groupSettings as $setting)
|
||||
@if($setting->type === 'image_path')
|
||||
<div class="col-12 mb-5">
|
||||
<label class="form-label fw-semibold text-capitalize">
|
||||
{{ str_replace(['_url', '_'], ['', ' '], $setting->key) }}
|
||||
</label>
|
||||
|
||||
<div class="asset-preview-container shadow-sm mb-3" id="preview-container-{{ $setting->key }}">
|
||||
@php
|
||||
$previewUrl = $setting->value;
|
||||
if ($previewUrl && !Str::startsWith($previewUrl, ['http', 'https', 'data:'])) {
|
||||
$previewUrl = asset($previewUrl);
|
||||
}
|
||||
@endphp
|
||||
@if($previewUrl)
|
||||
<img src="{{ $previewUrl }}" id="img-preview-{{ $setting->key }}" alt="Preview" class="img-fluid rounded" style="max-height: 120px; object-fit: contain;" loading="lazy">
|
||||
@else
|
||||
<i class="bi bi-image text-muted opacity-25 fs-1" id="icon-preview-{{ $setting->key }}"></i>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<input type="file" id="pond-{{ $setting->key }}" name="{{ $setting->key }}"
|
||||
class="filepond-mobile" data-key="{{ $setting->key }}"
|
||||
accept="image/png,image/jpeg,image/webp">
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcantab
|
||||
@endforeach
|
||||
|
||||
<!-- Developer Console Tab Content -->
|
||||
@cantab('mobile settings', 'developer')
|
||||
<div class="tab-pane fade" id="developer" role="tabpanel">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar avatar-40 rounded-circle bg-dark text-white me-3">
|
||||
<i class="bi bi-code-slash fs-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold mb-0 text-uppercase tracking-wider text-dark">{{ __('Sync Payload Preview') }}</h6>
|
||||
<small class="text-muted">{{ __('Raw JSON data being synchronized to mobile clients.') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-dark rounded-pill px-3" onclick="copyConfigJson()">
|
||||
<i class="bi bi-file-earmark-code me-1"></i> {{ __('Copy JSON') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="terminal-box shadow-lg">
|
||||
<div class="terminal-header">
|
||||
<div class="window-controls">
|
||||
<span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>
|
||||
</div>
|
||||
<span class="extra-small text-white-50 opacity-50 font-monospace">SYNC_PAYLOAD.JSON</span>
|
||||
<i class="bi bi-braces text-white-50"></i>
|
||||
</div>
|
||||
<div class="terminal-content">
|
||||
<pre id="json-viewer" class="scroll-custom" style="max-height: 500px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;">@json(app(\App\Services\MobileConfig\MobileConfigService::class)->all(), JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES)</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info mt-4 border-0 bg-info-subtle rounded-4">
|
||||
<div class="d-flex">
|
||||
<i class="bi bi-lightbulb-fill fs-4 me-3"></i>
|
||||
<div>
|
||||
<h6 class="fw-bold mb-1">{{ __('Developer Tip') }}</h6>
|
||||
<p class="small mb-0 opacity-75">
|
||||
Use this JSON to mock responses during mobile development or to verify that all system fallbacks (like branding) are working correctly before release.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endcantab
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@can('manage mobile settings')
|
||||
<div class="sticky-bottom-bar d-flex justify-content-between align-items-center">
|
||||
<div class="small text-muted d-none d-md-block">
|
||||
<i class="bi bi-shield-check me-1"></i> Changes will be synchronized to all mobile clients.
|
||||
</div>
|
||||
<button type="submit" class="btn btn-save-floating px-5">
|
||||
<i class="bi bi-cloud-arrow-up me-2"></i> {{ __('Save Configuration') }}
|
||||
</button>
|
||||
</div>
|
||||
@endcan
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Right Side: Sticky Mobile Mockup -->
|
||||
<div class="col-xl-4 col-lg-5 d-none d-lg-block">
|
||||
<div class="sticky-top" style="top: 100px; z-index: 5;">
|
||||
<div class="text-center mb-3">
|
||||
<span class="badge bg-primary-subtle text-primary rounded-pill px-3 py-2">
|
||||
<i class="bi bi-phone me-1"></i> {{ __('Live App Preview') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- iPhone Mockup Shell -->
|
||||
<div class="mobile-mockup-container mx-auto">
|
||||
<div class="mobile-frame">
|
||||
<div class="mobile-screen bg-light">
|
||||
<!-- Status Bar -->
|
||||
<div class="mobile-status-bar d-flex justify-content-between px-3 pt-2 small text-dark opacity-75">
|
||||
<span class="fw-bold">9:41</span>
|
||||
<div class="d-flex gap-1">
|
||||
<i class="bi bi-reception-4"></i>
|
||||
<i class="bi bi-wifi"></i>
|
||||
<i class="bi bi-battery-full"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic App Content -->
|
||||
<div class="app-content-preview d-flex flex-column align-items-center justify-content-center h-100 p-4 text-center">
|
||||
<div class="app-logo-preview mb-3 animate__animated animate__zoomIn">
|
||||
@php
|
||||
$logo = $settings['branding']->firstWhere('key', 'logo_url')->value ?? '';
|
||||
if ($logo && !Str::startsWith($logo, ['http', 'https', 'data:'])) $logo = asset($logo);
|
||||
@endphp
|
||||
<img src="{{ $logo ?: asset('assets/img/logo-placeholder.png') }}" id="mockup-logo" style="max-height: 80px; object-fit: contain;">
|
||||
</div>
|
||||
<h4 class="fw-black mb-1 mockup-app-name" style="color: #1a1a1a;">{{ $settings['branding']->firstWhere('key', 'app_name')->value ?? 'biiproject' }}</h4>
|
||||
<p class="text-muted small mockup-app-tagline mb-4 px-2">{{ $settings['branding']->firstWhere('key', 'app_tagline')->value ?? 'Smart Solution' }}</p>
|
||||
|
||||
<div class="w-100 px-3">
|
||||
<div class="btn w-100 rounded-pill mb-2 py-2 mockup-primary-bg text-white shadow-sm" style="background-color: {{ $settings['branding']->firstWhere('key', 'theme_color_primary')->value ?? '#C6F135' }}; border: none;">
|
||||
{{ __('Sign In') }}
|
||||
</div>
|
||||
<div class="btn w-100 rounded-pill py-2 border shadow-sm bg-white small">
|
||||
{{ __('Create Account') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto w-100 pt-4">
|
||||
<div class="d-flex justify-content-between x-small text-muted op-75 px-2">
|
||||
<span>v{{ $settings['app_updates']->firstWhere('key', 'app_version')->value ?? '2.0.0' }}</span>
|
||||
<span>{{ __('Secure Connection') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-home-indicator"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('pages.mobile-settings.scripts')
|
||||
|
||||
</x-app-layout>
|
||||
Reference in New Issue
Block a user