mirror of
https://github.com/multipleof4/GitRight.git
synced 2026-02-04 02:47:57 +00:00
215 lines
9.7 KiB
HTML
215 lines
9.7 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; }
|
|
/* Custom scrollbar for a cleaner look, Meowster */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: #e2e8f0;
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-white antialiased text-slate-900">
|
|
|
|
<div x-data="{
|
|
leftSidebar: false,
|
|
rightSidebar: false,
|
|
accountModal: false,
|
|
githubPat: localStorage.getItem('github_pat') || '',
|
|
repos: JSON.parse(localStorage.getItem('github_repos') || '[]'),
|
|
|
|
addRepo() {
|
|
const repo = prompt('Enter repository (owner/repo@branch):', 'multipleof4/GitRight@master');
|
|
if (repo && repo.includes('/')) {
|
|
this.repos.push(repo);
|
|
this.saveRepos();
|
|
this.$nextTick(() => lucide.createIcons());
|
|
} else if (repo) {
|
|
alert('Invalid format, Meowster. Please use owner/repo@branch');
|
|
}
|
|
},
|
|
|
|
removeRepo(index) {
|
|
this.repos.splice(index, 1);
|
|
this.saveRepos();
|
|
},
|
|
|
|
saveRepos() {
|
|
localStorage.setItem('github_repos', JSON.stringify(this.repos));
|
|
}
|
|
}" 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">
|
|
<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">
|
|
|
|
<!-- New Repo Button -->
|
|
<button
|
|
@click="addRepo()"
|
|
class="flex items-center justify-center space-x-2 w-full p-3 mb-6 bg-blue-600 hover:bg-blue-700 text-white rounded-2xl transition-all shadow-lg shadow-blue-100"
|
|
>
|
|
<i data-lucide="plus-circle" class="w-5 h-5"></i>
|
|
<span class="font-semibold">New Repo</span>
|
|
</button>
|
|
|
|
<!-- Repositories List (Scrollable) -->
|
|
<div class="flex-1 flex flex-col min-h-0">
|
|
<h2 class="font-bold mb-4 text-slate-800 flex items-center">
|
|
<i data-lucide="github" class="w-4 h-4 mr-2"></i>
|
|
Repositories
|
|
</h2>
|
|
|
|
<div class="flex-1 overflow-y-auto pr-2 space-y-2 custom-scrollbar">
|
|
<template x-for="(repo, index) in repos" :key="index">
|
|
<div class="group flex items-center justify-between p-3 bg-slate-50 hover:bg-slate-100 rounded-xl border border-slate-100 transition-colors">
|
|
<div class="flex items-center space-x-3 truncate">
|
|
<i data-lucide="git-fork" class="w-4 h-4 text-slate-400"></i>
|
|
<span class="text-sm font-medium text-slate-600 truncate" x-text="repo"></span>
|
|
</div>
|
|
<button @click="removeRepo(index)" class="opacity-0 group-hover:opacity-100 p-1 text-slate-400 hover:text-red-500 transition-all">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="repos.length === 0">
|
|
<div class="text-center py-8">
|
|
<p class="text-xs text-slate-400 italic">No repositories added yet, Meowster.</p>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Button -->
|
|
<div class="pt-4 mt-4 border-t border-slate-100">
|
|
<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>
|
|
</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>
|