58 lines
1.7 KiB
HTML
58 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="h-full bg-gray-100">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Restaurant Management</title>
|
|
|
|
<script type="module" src="src/main.js" defer></script>
|
|
</head>
|
|
<body class="h-full flex items-center justify-center">
|
|
|
|
<div x-data="mainApp()" class="w-72 bg-white shadow-lg rounded-lg overflow-hidden font-mono">
|
|
|
|
<div class="bg-gray-200 text-gray-800 p-4 h-96 flex flex-col justify-between">
|
|
|
|
<!-- Menu Options -->
|
|
<ul id="feature-menu" class="space-y-2">
|
|
<template x-for="(opt, idx) in options" :key="opt.view">
|
|
<li
|
|
:class="idx === selected
|
|
? 'bg-gray-800 text-gray-100'
|
|
: 'text-gray-700'"
|
|
class="px-3 py-2 rounded cursor-pointer"
|
|
@click="select(idx)"
|
|
>
|
|
<span x-text="`${idx + 1}. ${opt.label}`"></span>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
|
|
<!-- Soft-Key “Open” -->
|
|
<div class="flex justify-center">
|
|
<button
|
|
@click="openSelected()"
|
|
class="bg-green-600 text-white px-4 py-1 rounded hover:bg-green-700 focus:outline-none"
|
|
>
|
|
Open
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Views Container -->
|
|
<div class="p-4">
|
|
<template x-if="view === 'dashboard'">
|
|
<h2 class="text-xl font-semibold">Dashboard</h2>
|
|
</template>
|
|
<template x-if="view === 'menu'">
|
|
<h2 class="text-xl font-semibold">Menu Manager</h2>
|
|
</template>
|
|
<template x-if="view === 'invoices'">
|
|
<h2 class="text-xl font-semibold">Invoices</h2>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|