Current (non-working-frontend) state

This commit is contained in:
2023-05-22 18:39:47 +02:00
parent b29550f429
commit cfc28c5959
13 changed files with 354 additions and 89 deletions

View File

@ -1,39 +1,32 @@
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 test-white-50" onclick="doTheConfetti()">AssetFlow</a>
<script>
function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
function doTheConfetti() {
confetti({
angle: randomInRange(40, 150),
spread: randomInRange(50, 100),
particleCount: randomInRange(50, 150),
origin: { y: 0.6 }
});
}
</script>
<button
class="navbar-toggler position-absolute d-md-none collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#sidebarMenu"
aria-controls="sidebarMenu"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100 bg-secondary" type="text" placeholder="Search" aria-label="Search" id="SearchBox" />
<div class="autocomplete-items bg-secondary w-75 border-primary me-5 p-2" id="autocomplete-items" style="left: 16.7%"></div>
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" id="logoutButton">Sign out</a>
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top" style="z-index: 9999">
<div class="container-fluid">
<img src="/logo/Design_icon.svg" height="10%">
<a class="navbar-brand" href="#" onclick="doTheConfetti()">AssetFlow</a>
<!-- <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> -->
<button
class="navbar-toggler position-absolute d-md-none collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#sidebarMenu"
aria-controls="sidebarMenu"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" id="SearchBox" />
<div class="autocomplete-items bg-secondary w-75 border-primary me-5 p-2" id="autocomplete-items" style="left: 16.7%"></div>
</form>
</div>
</div>
</header>
</nav>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="masterToast" style="z-index: 2000">
<div class="d-flex">
<div class="toast-body">Hello, world! This is a toast message.</div>
@ -49,37 +42,6 @@
</div>
</div>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Notification</strong>
<small>Just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body" id="toastText">The button you just pressed is very useless.</div>
</div>
</div>
<script>
let texti = 0;
alltexts = ['Nope, still useless', 'Stop pressing me!', 'There are NO USERS!', 'Please stop.', 'PLEASE!', 'Do you want an achivment or what?', 'This is not a game, please stop.', 'This is not the stanley parable.'];
const toastLiveExample = document.getElementById('liveToast');
const logoutButton = document.getElementById('logoutButton');
logoutButton.addEventListener('click', () => {
toastFunction();
texti++;
if (texti >= alltexts.length) texti = 0;
});
function toastFunction() {
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
toastBootstrap.show();
setTimeout(function () {
toastBootstrap.hide();
document.getElementById('toastText').innerHTML = alltexts[texti];
}, 3000);
}
</script>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block sidebar collapse">
@ -187,17 +149,17 @@
}
modeLight.addEventListener('click', () => {
localStorage.setItem('bs.theme', 'light');
updateColorMode()
updateColorMode();
//document.documentElement.setAttribute('data-bs-theme', 'light');
});
modeAuto.addEventListener('click', () => {
localStorage.setItem('bs.theme', 'auto');
updateColorMode()
updateColorMode();
//document.documentElement.setAttribute('data-bs-theme', 'auto');
});
modeDark.addEventListener('click', () => {
localStorage.setItem('bs.theme', 'dark');
updateColorMode()
updateColorMode();
//document.documentElement.setAttribute('data-bs-theme', 'dark');
});
</script>