gitkwesi/Subscription-Content-Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added sync button, improved UI

Browse Source
This commit is contained in:
Kwesi Banson
2026-09-25 16:44:37 +00:00
parent b4fcf65293
commit ebf11d38ed
7 changed files with 277 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
resources/views/layouts/app.blade.php
View File

@@ -11,66 +11,110 @@
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<link href="https://fonts.bunny.net/css?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Scripts -->
<!-- Scripts & Styles -->
<link rel="stylesheet" href="{{ url('public/assets/libs/bootstrap/css/bootstrap5.3.2.css') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
@stack('styles')
<script>
var base_url = "{!! url('/') !!}";
</script>
<!-- Lighter Sea/Sky Blue Theme Customizations -->
<style>
:root {
--bs-primary: #0096c7;
--bs-primary-rgb: 0, 150, 199;
}
body {
font-family: 'Nunito', sans-serif;
background-color: #f0f7ff; /* Very soft bright ice blue */
color: #333333;
}
.navbar-sea {
background: linear-gradient(135deg, #0077b6, #00b4d8); /* Brighter, lighter sea blue gradient */
box-shadow: 0 4px 12px rgba(0, 150, 199, 0.2);
}
.navbar-sea .navbar-brand,
.navbar-sea .nav-link {
color: #ffffff !important;
font-weight: 600;
}
.navbar-sea .nav-link:hover {
color: #caf0f8 !important;
}
.card {
border: none;
border-radius: 0.75rem;
box-shadow: 0 0.5rem 1rem rgba(0, 119, 182, 0.05);
transition: transform 0.2s ease-in-out;
}
.btn-primary {
background-color: #0096c7;
border-color: #0077b6;
}
.btn-primary:hover {
background-color: #0077b6;
border-color: #03045e;
}
.dropdown-menu {
border-radius: 0.5rem;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
border: none;
}
</style>
@stack('styles')
<script>
var base_url = "{!! url('/') !!}";
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">CML</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Project Statuses</a>
</li>
-->
</ul>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
User Profile
<!-- Lighter Sea Blue Gradient Navbar -->
<nav class="navbar navbar-expand-lg navbar-sea py-3">
<div class="container-fluid px-4">
<a class="navbar-brand d-flex align-items-center gap-2" href="{{ url('/') }}">
<i class="bi bi-layers-fill fs-4"></i>
<span>CML Subscriptions</span>
</a>
<button class="navbar-toggler border-0 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" style="filter: invert(1);"></span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
<li><a class="dropdown-item" href="#">My Profile</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li>
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</li>
</ul>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">
<i class="bi bi-house-door me-1"></i> Home
</a>
</li>
</ul>
<div class="dropdown">
<button class="btn btn-light text-primary fw-bold dropdown-toggle px-3 py-2 rounded-pill shadow-sm" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> User Profile
</button>
<ul class="dropdown-menu dropdown-menu-end mt-2 p-2" aria-labelledby="userDropdown">
<li><a class="dropdown-item rounded py-2" href="#"><i class="bi bi-person me-2 text-muted"></i> My Profile</a></li>
<li><a class="dropdown-item rounded py-2" href="#"><i class="bi bi-gear me-2 text-muted"></i> Settings</a></li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item rounded py-2 text-danger" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
<i class="bi bi-box-arrow-right me-2"></i> {{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</nav>
<main class="py-4">
<main class="py-4 px-2">
@yield('content')
</main>
</div>
@stack('modals')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="{{ url('public/assets/libs/bootstrap/js/bootstrap5.3.2.js') }}" defer></script>
@@ -78,4 +122,4 @@
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@stack('scripts')
</body>
</html>
</html>