Spaces:

usezivvy
/

setings

Running

App Files Files Community

setings / index.html

usezivvy

<!DOCTYPE html>

579d8d3 verified 10 months ago

Raw

History Blame Contribute Delete

13.9 kB

	<!DOCTYPE html>
	<html lang="en" class="h-full">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Zivvy Settings</title>

	<!-- Tailwind CSS -->
	<script src="https://cdn.tailwindcss.com"></script>

	<!-- HTMX -->
	<script src="https://unpkg.com/htmx.org@1.9.10"></script>

	<!-- Material Symbols -->
	<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">

	<!-- Zivvy Brand Colors -->
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	brand: {
	50: '#eff6ff',
	100: '#dbeafe',
	200: '#bfdbfe',
	300: '#93c5fd',
	400: '#60a5fa',
	500: '#256eff', // Main brand color
	600: '#2563eb',
	700: '#1d4ed8',
	800: '#1e40af',
	900: '#1e3a8a'
	}
	}
	}
	}
	}
	</script>

	<style>
	/* Material Symbols with fill */
	.material-symbols-outlined {
	font-variation-settings:
	'FILL' 1,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24;
	}
	</style>
	</head>

	<body class="h-full bg-gray-50 dark:bg-gray-950">
	<!-- Settings Shell -->
	<div class="min-h-screen">
	<!-- Settings Header - No Global Nav, No Vertical Nav -->
	<header class="h-16 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-40">
	<div class="flex items-center justify-between h-full px-6">
	<!-- Settings Breadcrumbs -->
	<nav class="flex items-center space-x-2 text-sm">
	<span class="text-gray-900 dark:text-gray-100 font-semibold">Settings</span>
	</nav>

	<!-- Settings Actions -->
	<div class="flex items-center space-x-3">
	<!-- Back to App Button -->
	<button
	hx-get="/dashboard"
	hx-push-url="true"
	hx-target="body"
	class="flex items-center px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition-all"
	>
	<span class="material-symbols-outlined text-[16px] mr-1.5">arrow_back</span>
	Back to App
	</button>

	<!-- Help Button -->
	<button class="flex items-center px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
	<span class="material-symbols-outlined text-[16px] mr-1.5">help</span>
	Help
	</button>

	<!-- Theme Toggle -->
	<button
	onclick="toggleTheme()"
	class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition-all"
	>
	<span class="material-symbols-outlined text-[20px]">dark_mode</span>
	</button>
	</div>
	</div>
	</header>

	<!-- Settings Content -->
	<main class="flex-1">
	<div class="max-w-4xl mx-auto px-6 py-8">
	<!-- Quick Start Banner -->
	<div class="bg-gradient-to-r from-brand-50 to-brand-100 border border-brand-200 rounded-lg p-6 mb-8">
	<div class="flex items-start justify-between">
	<div class="flex-1">
	<div class="flex items-center mb-2">
	<span class="material-symbols-outlined text-brand-600 mr-2">rocket_launch</span>
	<h3 class="text-lg font-semibold text-brand-900">Complete Your Setup</h3>
	</div>
	<p class="text-brand-700 mb-4">You're 67% done! Finish setting up your account to unlock all features.</p>

	<!-- Progress Bar -->
	<div class="w-full bg-brand-200 rounded-full h-2 mb-4">
	<div class="bg-brand-600 h-2 rounded-full transition-all duration-500" style="width: 67%"></div>
	</div>

	<button hx-get="/settings/quick-start" hx-push-url="true" hx-target="body" class="inline-flex items-center px-4 py-2 bg-brand-600 hover:bg-brand-700 text-white rounded-md transition-colors">
	<span class="material-symbols-outlined text-[16px] mr-1.5">play_arrow</span>
	Quick Start Guide
	</button>
	</div>
	<button onclick="this.parentElement.parentElement.style.display='none'" class="text-brand-400 hover:text-brand-600">
	<span class="material-symbols-outlined">close</span>
	</button>
	</div>
	</div>

	<!-- Settings Header -->
	<div class="flex items-center justify-between mb-8">
	<div>
	<h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Settings</h1>
	<p class="text-gray-600 dark:text-gray-400 mt-1">Manage your account, business profile, and preferences</p>
	</div>

	<!-- Search -->
	<div class="relative w-80">
	<span class="material-symbols-outlined absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">search</span>
	<input type="text" placeholder="Search settings..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md bg-white text-gray-900 focus:ring-2 focus:ring-brand-500">
	<kbd class="absolute right-3 top-1/2 transform -translate-y-1/2 px-2 py-0.5 text-xs text-gray-500 bg-gray-100 rounded border">⌘K</kbd>
	</div>
	</div>

	<!-- Settings Grid -->
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<!-- Business Profile -->
	<button hx-get="/settings/business-profile" hx-push-url="true" hx-target="body" class="bg-white border border-gray-200 rounded-lg p-6 hover:border-brand-300 hover:shadow-md transition-all group text-left">
	<div class="flex items-start justify-between mb-4">
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-lg flex items-center justify-center mr-4 bg-red-100">
	<span class="material-symbols-outlined text-[20px] text-red-600">business</span>
	</div>
	<div>
	<h3 class="font-semibold text-gray-900 group-hover:text-brand-600 transition-colors">Business Profile</h3>
	<p class="text-sm text-gray-600 mt-1">Basic business information, locations, and contact details</p>
	</div>
	</div>
	<span class="material-symbols-outlined text-gray-400 group-hover:text-brand-600 transition-all">arrow_forward</span>
	</div>
	</button>

	<!-- Billing & Payments -->
	<button hx-get="/settings/billing" hx-push-url="true" hx-target="body" class="bg-white border border-gray-200 rounded-lg p-6 hover:border-brand-300 hover:shadow-md transition-all group text-left">
	<div class="flex items-start justify-between mb-4">
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-lg flex items-center justify-center mr-4 bg-green-100">
	<span class="material-symbols-outlined text-[20px] text-green-600">credit_card</span>
	</div>
	<div>
	<h3 class="font-semibold text-gray-900 group-hover:text-brand-600 transition-colors">Billing & Payments</h3>
	<p class="text-sm text-gray-600 mt-1">Subscription, payment methods, and billing history</p>
	</div>
	</div>
	<div class="flex items-center space-x-2">
	<span class="material-symbols-outlined text-green-600 text-[20px]">check_circle</span>
	<span class="material-symbols-outlined text-gray-400 group-hover:text-brand-600 transition-all">arrow_forward</span>
	</div>
	</div>
	<div class="flex items-center text-xs text-gray-500">
	<span class="material-symbols-outlined text-[12px] mr-1">schedule</span>
	Last updated 2 days ago
	</div>
	</button>

	<!-- Users & Permissions -->
	<button hx-get="/settings/users" hx-push-url="true" hx-target="body" class="bg-white border border-gray-200 rounded-lg p-6 hover:border-brand-300 hover:shadow-md transition-all group text-left">
	<div class="flex items-start justify-between mb-4">
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-lg flex items-center justify-center mr-4 bg-green-100">
	<span class="material-symbols-outlined text-[20px] text-green-600">people</span>
	</div>
	<div>
	<h3 class="font-semibold text-gray-900 group-hover:text-brand-600 transition-colors">Users & Permissions</h3>
	<p class="text-sm text-gray-600 mt-1">Team members, roles, and access controls</p>
	</div>
	</div>
	<div class="flex items-center space-x-2">
	<span class="material-symbols-outlined text-green-600 text-[20px]">check_circle</span>
	<span class="material-symbols-outlined text-gray-400 group-hover:text-brand-600 transition-all">arrow_forward</span>
	</div>
	</div>
	</button>

	<!-- Security -->
	<button hx-get="/settings/security" hx-push-url="true" hx-target="body" class="bg-white border border-gray-200 rounded-lg p-6 hover:border-brand-300 hover:shadow-md transition-all group text-left">
	<div class="flex items-start justify-between mb-4">
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-lg flex items-center justify-center mr-4 bg-green-100">
	<span class="material-symbols-outlined text-[20px] text-green-600">security</span>
	</div>
	<div>
	<h3 class="font-semibold text-gray-900 group-hover:text-brand-600 transition-colors">Security</h3>
	<p class="text-sm text-gray-600 mt-1">Two-factor authentication, session management, and audit logs</p>
	</div>
	</div>
	<div class="flex items-center space-x-2">
	<span class="material-symbols-outlined text-green-600 text-[20px]">check_circle</span>
	<span class="material-symbols-outlined text-gray-400 group-hover:text-brand-600 transition-all">arrow_forward</span>
	</div>
	</div>
	</button>
	</div>
	</div>
	</main>
	</div>

	<script>
	// Theme toggle functionality
	function toggleTheme() {
	document.documentElement.classList.toggle('dark');
	localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
	}

	// Initialize theme from localStorage
	if (localStorage.getItem('theme') === 'dark' \|\| (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
	document.documentElement.classList.add('dark');
	}

	// Keyboard shortcut for search
	document.addEventListener('keydown', function(e) {
	if ((e.metaKey \|\| e.ctrlKey) && e.key === 'k') {
	e.preventDefault();
	document.querySelector('input[placeholder="Search settings..."]').focus();
	}
	});
	</script>
	</body>
	</html>