multipleof4/GitRight
1
0
Fork 0
mirror of https://github.com/multipleof4/GitRight.git synced 2026-02-04 02:47:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Add Account button and PAT management modal

Browse Source
This commit is contained in:
multipleof4
2026-01-20 10:49:23 -08:00
parent 21ecb6a29e
commit 97a0782bde
1 changed files with 72 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
index.html
View File

@@ -13,7 +13,12 @@
</head>
<body class="bg-white antialiased text-slate-900">
<div x-data="{ leftSidebar: false, rightSidebar: false }" class="min-h-screen flex flex-col">
<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">
@@ -52,20 +57,79 @@
</div>
</main>
<!-- Mobile Sidebars (Placeholders for functionality) -->
<!-- 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">
<h2 class="font-bold mb-4">Left Menu</h2>
<button @click="leftSidebar = false" class="text-sm text-blue-600">Close</button>
<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-64 bg-white h-full shadow-xl p-4">
<h2 class="font-bold mb-4">Right Menu</h2>
<button @click="rightSidebar = false" class="text-sm text-blue-600">Close</button>
<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>