157 lines
No EOL
6 KiB
HTML
157 lines
No EOL
6 KiB
HTML
<!DOCTYPE HTML5>
|
|
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta
|
|
name="htmx-config"
|
|
content='{
|
|
"responseHandling":[
|
|
{"code":"204", "swap": false},
|
|
{"code":"[23]..", "swap": true},
|
|
{"code":"404", "swap": true},
|
|
{"code":"[45]..", "swap": false, "error":true},
|
|
{"code":"...", "swap": true}
|
|
],
|
|
"selfRequestsOnly": false
|
|
}'
|
|
/>
|
|
<title>MDUI</title>
|
|
<link rel="icon" href="/app/static/favicon.png" />
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css"/>
|
|
|
|
<link rel="stylesheet" media="(prefers-color-scheme:light)"
|
|
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/themes/light.css" />
|
|
<link rel="stylesheet" media="(prefers-color-scheme:dark)"
|
|
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/themes/dark.css"
|
|
onload="document.documentElement.classList.add('sl-theme-dark');" />
|
|
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/shoelace.js"></script>
|
|
|
|
<link rel="stylesheet" href="/app/static/styles.css" />
|
|
<script defer="defer" src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script defer="defer" src="/app/static/htmx/2.0.4/htmx.min.js"></script>
|
|
<script defer="defer" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha256-y3ibfOyBqlgBd+GzwFYQEVOZdNJD06HeDXihongBXKs=" crossorigin="anonymous"></script>
|
|
<script defer="defer" src="/app/static/script.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
<body hx-boost="true" hx-indicator="#indicator" data-bs-theme="light" >
|
|
<div class='App'>
|
|
<header id="header">
|
|
|
|
<nav class="navbar navbar-expand-lg ">
|
|
<div class="container-fluid">
|
|
|
|
<a class="navbar-brand" href="/app">MDUI</a>
|
|
<sl-icon id="indicator" class="htmx-indicator" src="/app/static/loader.svg" ></sl-icon>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
|
|
aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="/app/home">Home</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/app/pdfs">pdf</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/app/jobs">jobs</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/app/dev">dev</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/app/tweets">tweets</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/app/components">components</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/app/test">test</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<sl-input placeholder="search..." clearable="clearable" aria-label="Search">
|
|
<sl-icon name="search" slot="prefix"></sl-icon>
|
|
</sl-input>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="/app/profile">
|
|
<sl-avatar label="User avatar" style="--size: 2.0rem;"></sl-avatar>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="/app/notifications">
|
|
<sl-avatar label="User avatar" style="--size: 2.0rem;">
|
|
<sl-icon slot="icon" name="bell"></sl-icon>
|
|
</sl-avatar>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<sl-dropdown>
|
|
<sl-avatar slot="trigger" label="theme" style="--size: 2.0rem;">
|
|
<sl-icon slot="icon" name="circle-half"></sl-icon>
|
|
</sl-avatar>
|
|
|
|
<sl-menu>
|
|
<sl-menu-item> <sl-icon slot="prefix" name="sun-fill"></sl-icon>Light</sl-menu-item>
|
|
<sl-menu-item> <sl-icon slot="prefix" name="moon-fill"></sl-icon>Dark</sl-menu-item>
|
|
<sl-divider></sl-divider>
|
|
<sl-menu-item type="checkbox" checked="checked"> <sl-icon slot="prefix"
|
|
name="circle-half"></sl-icon>System</sl-menu-item>
|
|
|
|
</sl-menu>
|
|
</sl-dropdown>
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
</header>
|
|
<main id="main" class="App-main">
|
|
<p layout:fragment="content">MAIN</p>
|
|
</main>
|
|
<footer id="footer">
|
|
<button onclick="toast('Hi. '+new Date())">toast</button>
|
|
<sl-alert>hi</sl-alert>
|
|
LoggedIn: ??
|
|
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
|
|
|
|
<sl-tooltip>
|
|
<div id="server-timing" slot="content"/>
|
|
<sl-icon name="stopwatch"></sl-icon>
|
|
</sl-tooltip>
|
|
|
|
</footer>
|
|
</div>
|
|
<!-- bootstrap toast -->
|
|
<div class="position-fixed bottom-0 end-0 p-3">
|
|
<div id="toast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
|
|
|
<div class="toast-header">
|
|
<strong class="me-auto">Bootstrap</strong>
|
|
<small>? mins ago</small>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div id="toast-body" class="toast-body">detail here</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |