diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..e69de29 diff --git a/assets/custom.css b/assets/custom.css deleted file mode 100644 index 55c5ea3..0000000 --- a/assets/custom.css +++ /dev/null @@ -1,104 +0,0 @@ -:root { - ::-webkit-scrollbar { - height: 10px; - width: 10px - } - - ::-webkit-scrollbar-track { - background: #efefef; - border-radius: 6px - } - - ::-webkit-scrollbar-thumb { - background: #d5d5d5; - border-radius: 6px - } - - ::-webkit-scrollbar-thumb:hover { - background: #c4c4c4 - } -} - -.smooth { - transition: box-shadow 0.3s ease-in-out; -} - -::selection { - background-color: aliceblue -} - -:root { - ::-webkit-scrollbar { - height: 10px; - width: 10px; - } - - ::-webkit-scrollbar-track { - background: #efefef; - border-radius: 6px - } - - ::-webkit-scrollbar-thumb { - background: #d5d5d5; - border-radius: 6px - } - - ::-webkit-scrollbar-thumb:hover { - background: #c4c4c4 - } -} - -/*scroll to top*/ -.scroll-top { - position: fixed; - z-index: 50; - padding: 0; - right: 30px; - bottom: 100px; - opacity: 0; - visibility: hidden; - transform: translateY(15px); - height: 46px; - width: 46px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - transition: all .4s ease; - border: none; - box-shadow: inset 0 0 0 2px #ccc; - color: #ccc; - background-color: #fff; -} - -.scroll-top.is-active { - opacity: 1; - visibility: visible; - transform: translateY(0); -} - -.scroll-top .icon-tabler-arrow-up { - position: absolute; - stroke-width: 2px; - stroke: #333; -} - -.scroll-top svg path { - fill: none; -} - -.scroll-top svg.progress-circle path { - stroke: #333; - stroke-width: 4; - transition: all .4s ease; -} - -.scroll-top:hover { - color: var(--ghost-accent-color); -} - -.scroll-top:hover .progress-circle path, -.scroll-top:hover .icon-tabler-arrow-up { - stroke: var(--ghost-accent-color); -} \ No newline at end of file diff --git a/assets/custom.js b/assets/custom.js deleted file mode 100644 index f02f6b5..0000000 --- a/assets/custom.js +++ /dev/null @@ -1,90 +0,0 @@ -document.addEventListener("DOMContentLoaded", (event) => { - // init tinymce - /* tinymce.init({ - selector: '#tinymce', - plugins: 'autolink lists link image charmap preview anchor pagebreak', - toolbar_mode: 'floating', - }) */ - // init tippy - tippy(".avatar") -}) - -/* Progress bar */ -//Source: https://alligator.io/js/progress-bar-javascript-css-variables/ -var h = document.documentElement, - b = document.body, - st = "scrollTop", - sh = "scrollHeight", - progress = document.querySelector("#progress"), - scroll; -var scrollpos = window.scrollY; -var header = document.getElementById("header"); - -document.addEventListener("scroll", function () { - /*Refresh scroll % width*/ - scroll = ((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100; - progress?.style.setProperty("--scroll", scroll + "%"); - - /*Apply classes for slide in bar*/ - scrollpos = window.scrollY; - - if (scrollpos > 100) { - header?.classList.remove("hidden"); - header?.classList.remove("fadeOutUp"); - header?.classList.add("slideInDown"); - } else { - header?.classList.remove("slideInDown"); - header?.classList.add("fadeOutUp"); - header?.classList.add("hidden"); - } -}) - -// scroll to top -const t = document.querySelector(".js-scroll-top"); -if (t) { - t.onclick = () => { - window.scrollTo({ top: 0, behavior: "smooth" }); - }; - const e = document.querySelector(".scroll-top path"), - o = e.getTotalLength(); - (e.style.transition = e.style.WebkitTransition = "none"), - (e.style.strokeDasharray = `${o} ${o}`), - (e.style.strokeDashoffset = o), - e.getBoundingClientRect(), - (e.style.transition = e.style.WebkitTransition = - "stroke-dashoffset 10ms linear"); - const n = function () { - const t = - window.scrollY || - window.scrollTopBtn || - document.documentElement.scrollTopBtn, - n = Math.max( - document.body.scrollHeight, - document.documentElement.scrollHeight, - document.body.offsetHeight, - document.documentElement.offsetHeight, - document.body.clientHeight, - document.documentElement.clientHeight - ), - s = Math.max( - document.documentElement.clientHeight, - window.innerHeight || 0 - ); - var l = o - (t * o) / (n - s); - e.style.strokeDashoffset = l; - }; - n(); - const s = 100; - window.addEventListener( - "scroll", - function (e) { - n(); - (window.scrollY || - window.scrollTopBtn || - document.getElementsByTagName("html")[0].scrollTopBtn) > s - ? t.classList.add("is-active") - : t.classList.remove("is-active"); - }, - !1 - ); -} diff --git a/assets/js/custom.js b/assets/js/custom.js new file mode 100644 index 0000000..e69de29 diff --git a/assets/js/mod.js b/assets/js/mod.js new file mode 100644 index 0000000..1ffb8f6 --- /dev/null +++ b/assets/js/mod.js @@ -0,0 +1,79 @@ +/*! + * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) + * Copyright 2011-2024 The Bootstrap Authors + * Licensed under the Creative Commons Attribution 3.0 Unported License. + */ + +(() => { + 'use strict' + + const getStoredTheme = () => localStorage.getItem('theme') + const setStoredTheme = theme => localStorage.setItem('theme', theme) + + const getPreferredTheme = () => { + const storedTheme = getStoredTheme() + if (storedTheme) { + return storedTheme + } + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + } + + const setTheme = theme => { + if (theme === 'auto') { + document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')) + } else { + document.documentElement.setAttribute('data-bs-theme', theme) + } + } + + setTheme(getPreferredTheme()) + + const showActiveTheme = (theme, focus = false) => { + const themeSwitcher = document.querySelector('#bd-theme') + + if (!themeSwitcher) { + return + } + + const themeSwitcherText = document.querySelector('#bd-theme-text') + const activeThemeIcon = document.querySelector('.theme-icon-active use') + const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`) + const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href') + + document.querySelectorAll('[data-bs-theme-value]').forEach(element => { + element.classList.remove('active') + element.setAttribute('aria-pressed', 'false') + }) + + btnToActive.classList.add('active') + btnToActive.setAttribute('aria-pressed', 'true') + activeThemeIcon.setAttribute('href', svgOfActiveBtn) + const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})` + themeSwitcher.setAttribute('aria-label', themeSwitcherLabel) + + if (focus) { + themeSwitcher.focus() + } + } + + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { + const storedTheme = getStoredTheme() + if (storedTheme !== 'light' && storedTheme !== 'dark') { + setTheme(getPreferredTheme()) + } + }) + + window.addEventListener('DOMContentLoaded', () => { + showActiveTheme(getPreferredTheme()) + + document.querySelectorAll('[data-bs-theme-value]') + .forEach(toggle => { + toggle.addEventListener('click', () => { + const theme = toggle.getAttribute('data-bs-theme-value') + setStoredTheme(theme) + setTheme(theme) + showActiveTheme(theme, true) + }) + }) + }) +})() \ No newline at end of file diff --git a/views/index.gohtml b/views/index.gohtml index 7d0d75f..472de0b 100644 --- a/views/index.gohtml +++ b/views/index.gohtml @@ -8,35 +8,68 @@ - - + - - + + + {{block "css" .}}{{end}} - + + + + + + + + + + + + + + + + + +
+ + +
- {{block "content" .}}{{end}} - - - + +
+ {{block "content" .}}{{end}} +
- - - + + + {{block "js" .}}{{end}} diff --git a/views/pages/login.gohtml b/views/pages/login.gohtml index e9f7b85..18f2d38 100644 --- a/views/pages/login.gohtml +++ b/views/pages/login.gohtml @@ -1,28 +1,25 @@ {{template "base" .}} {{define "content"}} -
-

Sign In

-
-
- - +
+
+
+ + {{/* */}} +

Sign In

+
+ + +
+
+ + +
+ + Please register if you don't have an account. + +
-
- - -
-
- - please register if you don't have an account. -
- - +
{{end}} \ No newline at end of file diff --git a/views/pages/register.gohtml b/views/pages/register.gohtml index aa0ec05..dd85502 100644 --- a/views/pages/register.gohtml +++ b/views/pages/register.gohtml @@ -1,40 +1,33 @@ {{template "base" .}} {{define "content"}} -
-

Sign Up

-
-
- - +
+
+
+ + {{/* */}} +

Sign In

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + Please login if you have an account. + +
-
- - -
-
- - -
-
- - -
-
- - please login if you have an account. -
- - +
{{end}} \ No newline at end of file