50 lines
2.4 KiB
HTML
50 lines
2.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<script type="module" src="/src/presentation/app.js" defer></script>
|
|
<link rel="stylesheet" href="/src/presentation/styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div x-data="menu" class="min-h-screen h-screen bg-base-300">
|
|
<template x-if="open === null">
|
|
<div id="app" class="flex flex-col items-center justify-center p-4 h-full" x-cloak>
|
|
<h1 class="text-4xl font-extrabold text-center mb-8">Welcome to <span class="text-nowrap">TeleAuto
|
|
V2</span>
|
|
</h1>
|
|
<p class="text-center text-lg mb-6">Your automation companion.</p>
|
|
<div class="flex flex-col w-full xs:w-md grow bg-base-100 rounded-xl shadow-xl overflow-hidden">
|
|
<div class="flex justify-between items-center bg-accent rounded-t-xl">
|
|
<span class="font-bold pl-6" x-text="(user?.name || 'Guest') + '\'s Main Menu!'"></span>
|
|
<button @click="user ? handleLogout() : window.location.href = '/auth'"
|
|
class="btn btn-error px-6 py-2 rounded-none rounded-tr-xl">Logout</button>
|
|
</div>
|
|
<div class="grow p-2">
|
|
<template x-for="item in menu" :key="item.route">
|
|
<button @click="active === item.route ? open = active : active = item.route"
|
|
:class="active === item.route ? 'btn-primary' : 'btn-ghost'"
|
|
class="btn w-full mb-2 justify-start">
|
|
<span x-text="item.item"></span>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
<div class="flex justify-between items-center bg-accent rounded-b-xl">
|
|
<span class="font-semibold pl-6 py-2"
|
|
x-text="active ? menu.find(m => m.route === active).text : 'Select a menu item'"></span>
|
|
<button x-show="active !== null" @click="open = active"
|
|
class="btn btn-primary px-6 py-2 rounded-none rounded-br-xl">Open</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|