302 lines
17 KiB
PHP
302 lines
17 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en" data-theme="corporate">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DaisyUI Static 5-Page App</title>
|
|
<!-- Tailwind CSS CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- NOTE: Alpine.js CDN removed as requested. -->
|
|
<style>
|
|
/* Configure Tailwind to use DaisyUI styles */
|
|
/* @tailwind directives are removed because the CDN handles the base imports */
|
|
|
|
/* Set a default font */
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
/* Custom scrollbar for table container */
|
|
.overflow-x-auto::-webkit-scrollbar {
|
|
height: 8px;
|
|
}
|
|
.overflow-x-auto::-webkit-scrollbar-thumb {
|
|
background-color: #a0aec0; /* daisyui neutral-content color */
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
<script>
|
|
// Fix: Use the correct syntax to load DaisyUI as a plugin in the browser's Tailwind config.
|
|
tailwind.config = {
|
|
plugins: [
|
|
// DaisyUI is loaded as a global object/function in the browser environment
|
|
// when included via CDN or local script, so we reference it directly here.
|
|
// If using a CDN that exposes a global 'daisyui', this is the correct syntax.
|
|
// If it's a simple utility, just listing its name often works, but we stick
|
|
// to the standard array format for future compatibility.
|
|
// We assume the Tailwind CDN supports loading external libraries like DaisyUI this way.
|
|
'daisyui',
|
|
],
|
|
daisyui: {
|
|
// 'corporate' theme is professional and clean
|
|
themes: ["corporate"],
|
|
},
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Main application container (No x-data) -->
|
|
<div class="min-h-screen flex flex-col">
|
|
|
|
<!-- Top Navigation Bar (DaisyUI Navbar) -->
|
|
<header class="navbar bg-base-100 shadow-md sticky top-0 z-10">
|
|
<!-- Left Side: Title -->
|
|
<div class="flex-1">
|
|
<a class="btn btn-ghost text-xl font-bold text-primary">App Dashboard</a>
|
|
</div>
|
|
|
|
<!-- Right Side: User Menu & Dropdown -->
|
|
<div class="flex-none gap-2">
|
|
<!-- Username Display -->
|
|
<span class="hidden sm:inline text-sm font-medium mr-2">Hello, <span class="font-semibold text-primary">Willow Smith</span></span>
|
|
|
|
<!-- Dropdown Menu -->
|
|
<div class="dropdown dropdown-end">
|
|
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
|
|
<div class="w-10 rounded-full bg-base-300 ring ring-primary ring-offset-base-100 ring-offset-2">
|
|
<!-- Placeholder Image -->
|
|
<img src="https://placehold.co/40x40/570DF8/ffffff?text=U" alt="User Avatar" />
|
|
</div>
|
|
</div>
|
|
<!-- Menu items are static links/placeholders -->
|
|
<ul tabindex="0" class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
|
|
<li>
|
|
<a class="justify-between">
|
|
Profile (Static)
|
|
<span class="badge badge-primary badge-outline">New</span>
|
|
</a>
|
|
</li>
|
|
<li><a>Settings (Static)</a></li>
|
|
<li><a>Logout (Static)</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content Area with Tabs (Responsive) -->
|
|
<main class="flex-grow p-4 md:p-8">
|
|
<div class="max-w-7xl mx-auto">
|
|
|
|
<!-- Responsive Tab/Navigation Menu (Only the first tab is active for static display) -->
|
|
<div role="tablist" class="tabs tabs-boxed tabs-lg shadow-lg mb-8 bg-white">
|
|
<a role="tab" class="tab tab-active text-white font-bold shadow-lg transition duration-300">Dashboard</a>
|
|
<a role="tab" class="tab transition duration-300">Data Table</a>
|
|
<a role="tab" class="tab transition duration-300">Analytics</a>
|
|
<a role="tab" class="tab transition duration-300">Settings</a>
|
|
<a role="tab" class="tab transition duration-300">Support</a>
|
|
</div>
|
|
|
|
<!-- Page Content Rendering -->
|
|
<div class="bg-white p-6 rounded-xl shadow-lg">
|
|
<!-- Note: Since we removed Alpine.js, all pages are stacked vertically.
|
|
In a pure HTML/CSS setup, you would typically use an ID system and
|
|
CSS `:target` or radio buttons for true tab-switching without JS.
|
|
For this static output, we show the main pages one after the other.
|
|
-->
|
|
|
|
<!-- 1. Dashboard Page -->
|
|
<div>
|
|
<h2 class="text-3xl font-bold mb-4 text-gray-800">Welcome to the Dashboard (Page 1)</h2>
|
|
<p class="mb-4 text-gray-600">This is the landing page structure. The tabs above are static visual elements without JavaScript functionality.</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="stats shadow bg-primary text-primary-content">
|
|
<div class="stat">
|
|
<div class="stat-title">Total Users</div>
|
|
<div class="stat-value">89,400</div>
|
|
<div class="stat-desc">21% more than last month</div>
|
|
</div>
|
|
</div>
|
|
<div class="stats shadow bg-secondary text-secondary-content">
|
|
<div class="stat">
|
|
<div class="stat-title">New Tasks</div>
|
|
<div class="stat-value">4,200</div>
|
|
<div class="stat-desc">25% more than yesterday</div>
|
|
</div>
|
|
</div>
|
|
<div class="stats shadow bg-accent text-accent-content">
|
|
<div class="stat">
|
|
<div class="stat-title">Revenue</div>
|
|
<div class="stat-value">$1,200k</div>
|
|
<div class="stat-desc">8% YoY growth</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider my-10">Static Page Separator</div>
|
|
|
|
<!-- 2. Data Table Page (Page 2 - Static Content) -->
|
|
<div>
|
|
<h2 class="text-3xl font-bold mb-6 text-gray-800">Operational Data Table (Static Content)</h2>
|
|
|
|
<!-- Search and Filter Bar (Static Input) -->
|
|
<div class="flex flex-col md:flex-row gap-4 mb-6">
|
|
<label class="input input-bordered flex items-center gap-2 flex-grow max-w-lg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.094 2.093a.75.75 0 0 1-1.06 1.06l-2.094-2.093ZM10 6.25a3.75 3.75 0 1 0-7.5 0 3.75 3.75 0 0 0 7.5 0Z" clip-rule="evenodd" /></svg>
|
|
<input type="text" class="grow" placeholder="Search is decorative..." />
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Static Data Table Container -->
|
|
<div class="overflow-x-auto border rounded-xl shadow-inner">
|
|
<table class="table table-lg w-full">
|
|
<!-- Table Head -->
|
|
<thead class="bg-base-200 text-base-content uppercase">
|
|
<tr>
|
|
<!-- Removed Alpine sorting icons/handlers -->
|
|
<th>#</th>
|
|
<th>Client Name</th>
|
|
<th>Project</th>
|
|
<th>Status</th>
|
|
<th>Progress</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Static Table Rows -->
|
|
<tr class="hover:bg-base-100 transition duration-150">
|
|
<td>101</td>
|
|
<td class="font-medium text-primary">Alpha Corp</td>
|
|
<td>Website Redesign</td>
|
|
<td><div class="badge badge-success">Completed</div></td>
|
|
<td>100%</td>
|
|
<td><button class="btn btn-sm btn-ghost text-xs">View Details</button></td>
|
|
</tr>
|
|
<tr class="hover:bg-base-100 transition duration-150">
|
|
<td>102</td>
|
|
<td class="font-medium text-primary">Beta Labs</td>
|
|
<td>API Integration</td>
|
|
<td><div class="badge badge-info">In Progress</div></td>
|
|
<td>65%</td>
|
|
<td><button class="btn btn-sm btn-ghost text-xs">View Details</button></td>
|
|
</tr>
|
|
<tr class="hover:bg-base-100 transition duration-150">
|
|
<td>103</td>
|
|
<td class="font-medium text-primary">Gamma Systems</td>
|
|
<td>Mobile App Launch</td>
|
|
<td><div class="badge badge-warning">Pending</div></td>
|
|
<td>10%</td>
|
|
<td><button class="btn btn-sm btn-ghost text-xs">View Details</button></td>
|
|
</tr>
|
|
<tr class="hover:bg-base-100 transition duration-150">
|
|
<td>104</td>
|
|
<td class="font-medium text-primary">Delta Group</td>
|
|
<td>Cloud Migration</td>
|
|
<td><div class="badge badge-success">Completed</div></td>
|
|
<td>100%</td>
|
|
<td><button class="btn btn-sm btn-ghost text-xs">View Details</button></td>
|
|
</tr>
|
|
<tr class="hover:bg-base-100 transition duration-150">
|
|
<td>105</td>
|
|
<td class="font-medium text-primary">Epsilon Tech</td>
|
|
<td>Security Audit</td>
|
|
<td><div class="badge badge-error">Stuck</div></td>
|
|
<td>30%</td>
|
|
<td><button class="btn btn-sm btn-ghost text-xs">View Details</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider my-10">Static Page Separator</div>
|
|
|
|
<!-- 3. Analytics Page (Page 3 - Placeholder) -->
|
|
<div>
|
|
<h2 class="text-3xl font-bold mb-4 text-gray-800">Advanced Analytics (Page 3)</h2>
|
|
<p class="mb-6 text-gray-600">Visualize key metrics and trends over time.</p>
|
|
<div class="alert alert-info">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
<span>This is a static placeholder for the Analytics content.</span>
|
|
</div>
|
|
<div class="h-64 bg-base-200 rounded-lg mt-6 flex items-center justify-center text-gray-500 italic">
|
|
[ Placeholder for Chart Visualization ]
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider my-10">Static Page Separator</div>
|
|
|
|
<!-- 4. Settings Page (Page 4 - Static Inputs) -->
|
|
<div>
|
|
<h2 class="text-3xl font-bold mb-4 text-gray-800">User Settings (Page 4)</h2>
|
|
<p class="mb-6 text-gray-600">Manage your account preferences and application configuration.</p>
|
|
|
|
<div class="form-control max-w-xl">
|
|
<label class="label cursor-pointer">
|
|
<span class="label-text">Enable Email Notifications</span>
|
|
<input type="checkbox" class="toggle toggle-primary" checked />
|
|
</label>
|
|
<label class="label cursor-pointer">
|
|
<span class="label-text">Dark Mode Toggle (Static)</span>
|
|
<input type="checkbox" class="toggle toggle-secondary" />
|
|
</label>
|
|
<label class="label">
|
|
<span class="label-text">Default Locale</span>
|
|
</label>
|
|
<select class="select select-bordered w-full">
|
|
<option disabled selected>Select Locale</option>
|
|
<option>English (US)</option>
|
|
<option>Spanish (MX)</option>
|
|
<option>French (FR)</option>
|
|
</select>
|
|
<button class="btn btn-primary mt-6 max-w-xs">Save Settings (Static)</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="divider my-10">Static Page Separator</div>
|
|
|
|
<!-- 5. Support Page (Page 5 - Static Collapse) -->
|
|
<div>
|
|
<h2 class="text-3xl font-bold mb-4 text-gray-800">Help & Support (Page 5)</h2>
|
|
<p class="mb-6 text-gray-600">Find answers to frequently asked questions or submit a support ticket.</p>
|
|
|
|
<!-- DaisyUI Collapse/Accordion (uses radio buttons for pure CSS toggle) -->
|
|
<div class="join join-vertical w-full max-w-3xl">
|
|
<div class="collapse collapse-arrow join-item border border-base-300">
|
|
<input type="radio" name="my-accordion-4" checked="checked" />
|
|
<div class="collapse-title text-xl font-medium">
|
|
How do I reset my password?
|
|
</div>
|
|
<div class="collapse-content">
|
|
<p>Click the 'Profile' option in the top right dropdown menu, then navigate to 'Security' and follow the 'Forgot Password' instructions.</p>
|
|
</div>
|
|
</div>
|
|
<div class="collapse collapse-arrow join-item border border-base-300">
|
|
<input type="radio" name="my-accordion-4" />
|
|
<div class="collapse-title text-xl font-medium">
|
|
Can I export the data table?
|
|
</div>
|
|
<div class="collapse-content">
|
|
<p>Currently, the data is only viewable on this page. Export functionality is planned for the next update!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer footer-center p-4 bg-base-300 text-base-content mt-8">
|
|
<aside>
|
|
<p>Built with Tailwind CSS, DaisyUI (Static Demo) | © 2024 App Demo</p>
|
|
</aside>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html> |