mirror of
https://github.com/multipleof4/GitRight.git
synced 2026-02-04 10:57:56 +00:00
149 lines
6.6 KiB
HTML
149 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GitRight Mobile UI</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
[x-cloak] { display: none !important; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-white antialiased text-slate-900">
|
|
|
|
<div x-data="{
|
|
leftSidebar: false,
|
|
rightSidebar: false,
|
|
accountModal: false,
|
|
githubPat: localStorage.getItem('github_pat') || ''
|
|
}" class="min-h-screen flex flex-col">
|
|
|
|
<!-- Header -->
|
|
<header class="flex items-center justify-between px-4 py-3 border-b border-gray-100 sticky top-0 bg-white z-50">
|
|
<!-- Left Action -->
|
|
<button
|
|
@click="leftSidebar = !leftSidebar"
|
|
class="p-2 hover:bg-gray-50 rounded-lg transition-colors text-slate-600 border border-gray-200"
|
|
aria-label="Toggle Left Sidebar"
|
|
>
|
|
<i data-lucide="panel-left" class="w-5 h-5"></i>
|
|
</button>
|
|
|
|
<!-- Center Logo/Icon -->
|
|
<div class="flex items-center justify-center">
|
|
<div class="bg-slate-100 p-2 rounded-full">
|
|
<i data-lucide="sun" class="w-5 h-5 text-slate-600"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Action -->
|
|
<button
|
|
@click="rightSidebar = !rightSidebar"
|
|
class="p-2 hover:bg-gray-50 rounded-lg transition-colors text-slate-600 border border-gray-200"
|
|
aria-label="Toggle Right Sidebar"
|
|
>
|
|
<i data-lucide="panel-right" class="w-5 h-5"></i>
|
|
</button>
|
|
</header>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 flex flex-col items-center justify-center p-6">
|
|
<!-- Content goes here, Meowster -->
|
|
<div class="text-center space-y-4">
|
|
<h1 class="text-xl font-medium text-slate-400">Empty State</h1>
|
|
<p class="text-sm text-slate-300">Ready for your commands, Master.</p>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Mobile Sidebars -->
|
|
<div x-show="leftSidebar" x-cloak class="fixed inset-0 z-[60] flex">
|
|
<div @click="leftSidebar = false" class="fixed inset-0 bg-black/20 backdrop-blur-sm"></div>
|
|
<div class="relative w-64 bg-white h-full shadow-xl p-4 flex flex-col">
|
|
<div class="flex-1">
|
|
<h2 class="font-bold mb-4">Left Menu</h2>
|
|
</div>
|
|
<button @click="leftSidebar = false" class="text-sm text-blue-600 text-left">Close</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div x-show="rightSidebar" x-cloak class="fixed inset-0 z-[60] flex justify-end">
|
|
<div @click="rightSidebar = false" class="fixed inset-0 bg-black/20 backdrop-blur-sm"></div>
|
|
<div class="relative w-72 bg-white h-full shadow-xl p-4 flex flex-col">
|
|
<div class="flex-1">
|
|
<h2 class="font-bold mb-4 text-slate-800">Right Menu</h2>
|
|
<!-- Menu items could go here -->
|
|
</div>
|
|
|
|
<!-- Account Button -->
|
|
<button
|
|
@click="accountModal = true; rightSidebar = false"
|
|
class="flex items-center justify-between w-full p-3 bg-slate-50 hover:bg-slate-100 rounded-2xl transition-colors group"
|
|
>
|
|
<div class="flex items-center space-x-3">
|
|
<div class="bg-slate-900 rounded-full p-2">
|
|
<i data-lucide="user" class="w-4 h-4 text-blue-400 fill-blue-400"></i>
|
|
</div>
|
|
<span class="font-medium text-slate-700">Account</span>
|
|
</div>
|
|
<i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 group-hover:text-slate-600"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Modal -->
|
|
<div x-show="accountModal" x-cloak class="fixed inset-0 z-[70] flex items-center justify-center p-4">
|
|
<div @click="accountModal = false" class="fixed inset-0 bg-black/40 backdrop-blur-sm"></div>
|
|
<div class="relative bg-white rounded-3xl shadow-2xl w-full max-w-sm overflow-hidden">
|
|
<div class="p-6 space-y-6">
|
|
<div class="space-y-2">
|
|
<h3 class="text-xl font-semibold text-slate-900">GitHub Settings</h3>
|
|
<p class="text-sm text-slate-500">Provide your Personal Access Token to enable repository access.</p>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<label for="pat" class="block text-xs font-bold uppercase tracking-wider text-slate-400 ml-1">
|
|
Personal Access Token
|
|
</label>
|
|
<input
|
|
id="pat"
|
|
type="password"
|
|
x-model="githubPat"
|
|
placeholder="ghp_xxxxxxxxxxxx"
|
|
class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all"
|
|
>
|
|
</div>
|
|
|
|
<div class="flex flex-col space-y-3">
|
|
<button
|
|
@click="localStorage.setItem('github_pat', githubPat); accountModal = false"
|
|
class="w-full py-3 bg-slate-900 text-white font-medium rounded-xl hover:bg-slate-800 transition-colors"
|
|
>
|
|
Save Changes
|
|
</button>
|
|
<button
|
|
@click="accountModal = false"
|
|
class="w-full py-3 bg-white text-slate-500 font-medium rounded-xl hover:bg-slate-50 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
|
|
// Re-initialize icons if Alpine updates the DOM
|
|
document.addEventListener('alpine:initialized', () => {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|