HyperNet/Passport
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

♻️ Refactored web ui with bootstrap and jQuery

Browse Source
This commit is contained in:
LittleSheep
2024-06-02 22:13:41 +08:00
parent 1c36b429ea
commit f1ab0f203f
16 changed files with 543 additions and 1072 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
pkg/views/partials/header.gohtml
View File

@ -1,89 +1,56 @@
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<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"
/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script type="importmap">
{
"imports": {
"@material/web/": "https://esm.run/@material/web/"
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="module">
import "@material/web/all.js";
import {styles as typescaleStyles} from "@material/web/typography/md-typescale-styles.js";
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
</script>
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="info-fill" viewBox="0 0 16 16">
<path
d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</symbol>
</svg>
<title>Solarpass</title>
<title>Solarpass</title>
<style>
:root, :host {
--md-sys-color-background: #fbf8ff;
--md-sys-color-on-background: #1b1b20;
--md-sys-color-surface: #fbf8ff;
--md-sys-color-surface-dim: #dcd9df;
--md-sys-color-surface-bright: #fbf8ff;
--md-sys-color-surface-container-lowest: #ffffff;
--md-sys-color-surface-container-low: #f6f2f9;
--md-sys-color-surface-container: #f0edf3;
--md-sys-color-surface-container-high: #eae7ed;
--md-sys-color-surface-container-highest: #e4e1e8;
--md-sys-color-on-surface: #1b1b20;
--md-sys-color-surface-variant: #e3e1ee;
--md-sys-color-on-surface-variant: #464650;
--md-sys-color-inverse-surface: #303035;
--md-sys-color-inverse-on-surface: #f3eff6;
--md-sys-color-outline: #777681;
--md-sys-color-outline-variant: #c7c5d2;
--md-sys-color-shadow: #000000;
--md-sys-color-scrim: #000000;
--md-sys-color-surface-tint: #53589d;
--md-sys-color-primary: #373c7e;
--md-sys-color-on-primary: #ffffff;
--md-sys-color-primary-container: #5b60a5;
--md-sys-color-on-primary-container: #ffffff;
--md-sys-color-inverse-primary: #bec2ff;
--md-sys-color-secondary: #5b5c79;
--md-sys-color-on-secondary: #ffffff;
--md-sys-color-secondary-container: #e2e1ff;
--md-sys-color-on-secondary-container: #454662;
--md-sys-color-tertiary: #662d5e;
--md-sys-color-on-tertiary: #ffffff;
--md-sys-color-tertiary-container: #8e5084;
--md-sys-color-on-tertiary-container: #ffffff;
--md-sys-color-error: #ba1a1a;
--md-sys-color-on-error: #ffffff;
--md-sys-color-error-container: #ffdad6;
--md-sys-color-on-error-container: #410002;
}
<style>
html,
body {
padding: 0;
margin: 0;
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24
}
.alert {
padding: 16px 48px;
display: flex;
align-items: center;
gap: 8px;
}
html, body {
padding: 0;
margin: 0;
background-color: var(--md-sys-color-surface-container);
}
</style>
.alert .bi {
aspect-ratio: 1;
width: 16px;
fill: var(--bs-alert-color);
}
.alert .content {
flex-grow: 1;
text-transform: capitalize;
}
</style>
</head>