homepage.html
html
<html data-theme="dark"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI Project Manager - HackNight</title> <!-- HTMX --> <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js" integrity="sha384-/TgkGk7p307TH7EXJDuUlgG3Ce1UVolAOFopFekQkkXihi5u/6OCvVKyz1W+idaz" crossorigin="anonymous"></script> <!-- Tailwind CSS & Daisy UI --> <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <!-- Sortable.js for drag-and-drop --> <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script></head><body class="bg-base-200"> <div class="min-h-screen"> <!-- Navbar --> <div class="navbar bg-base-100 shadow-lg"> <div class="flex-1"> <a class="btn btn-ghost text-xl">🤖 AI Project Manager</a> </div> <div class="flex-none"> <button class="btn btn-primary" onclick="create_project_modal.showModal()"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /> </svg> New Project </button> </div> </div> <!-- Main Content --> <div class="container mx-auto p-6 max-w-7xl"> <div class="mb-8"> <h1 class="text-4xl font-bold mb-2">Your Projects</h1> <p class="text-base-content/70">Manage your projects with AI-powered insights</p> </div> <!-- Projects Grid --> {{if home.Projects}} <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> {{range home.Projects}} <a href="{{hostPrefix}}/project/{{.ID}}" class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all hover:scale-105 duration-200"> <div class="card-body"> <h2 class="card-title">{{.Name}}</h2> {{if .Description}} <p class="text-sm opacity-70 line-clamp-2">{{.Description}}</p> {{end}} <div class="card-actions justify-end mt-4"> <div class="badge badge-outline">{{.CreatedAt.Format "Jan 2, 2006"}}</div> </div> </div> </a> {{end}} </div> {{else}} <div class="hero bg-base-100 rounded-box shadow-xl"> <div class="hero-content text-center"> <div class="max-w-md py-12"> <h1 class="text-5xl font-bold mb-4">👋 Welcome!</h1> <p class="py-6">You don't have any projects yet. Create your first project to get started with AI-powered project management.</p> <button class="btn btn-primary btn-lg" onclick="create_project_modal.showModal()">Create Your First Project</button> </div> </div> </div> {{end}} </div> </div> <!-- Create Project Modal --> <dialog id="create_project_modal" class="modal"> <div class="modal-box"> <h3 class="font-bold text-lg mb-4">Create New Project</h3> <form hx-post="{{hostPrefix}}/api/projects/create" hx-swap="none"> <div class="form-control mb-4"> <label class="label"> <span class="label-text">Project Name</span> </label> <input type="text" name="name" placeholder="My Awesome Project" class="input input-bordered" required /> </div> <div class="form-control mb-4"> <label class="label"> <span class="label-text">Description</span> </label> <textarea name="description" placeholder="What's this project about?" class="textarea textarea-bordered h-24" rows="3"></textarea> </div> <div class="modal-action"> <button type="button" class="btn" onclick="create_project_modal.close()">Cancel</button> <button type="submit" class="btn btn-primary">Create Project</button> </div> </form> </div> <form method="dialog" class="modal-backdrop"> <button>close</button> </form> </dialog></body></html>
No comments yet.