Diffstat (limited to 'views/pages')
| -rw-r--r-- | views/pages/blog-page.html | 9 | ||||
| -rw-r--r-- | views/pages/global-map.html | 2 | ||||
| -rw-r--r-- | views/pages/home-page.html | 99 |
3 files changed, 106 insertions, 4 deletions
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html index b121cc6..863b417 100644 --- a/views/pages/blog-page.html +++ b/views/pages/blog-page.html @@ -1,7 +1,7 @@ {{ define "top-embeds" }} <script> - var galleryMap = new Map(); - var map; + let galleryMap = new Map(); + let map; window.addEventListener('popout', (e) => { map.remove(); @@ -9,6 +9,8 @@ g.destroy(); }); galleryMap.clear(); + map = null; + galleryMap = null; }, {once: true}); </script> {{ end }} @@ -87,7 +89,8 @@ window.addEventListener('resize', resizeCb); document.addEventListener('popout', (e) => { - window.removeEventListener('resize', resizeCb, {once: true}); + window.removeEventListener('resize', resizeCb); + galleryResizeTimeout = null; }); </script> {{ end }}
\ No newline at end of file diff --git a/views/pages/global-map.html b/views/pages/global-map.html index d6e7281..a844e06 100644 --- a/views/pages/global-map.html +++ b/views/pages/global-map.html @@ -45,7 +45,7 @@ saya.today </div> <div class="text-[3vw] ar-lt-1.1:text-[5vh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-1.1:flex-row gap-0 relative z-20"> - <i onclick="location.href='/';" class="fas fa-home w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> + <i onclick="location.href='/{{ .Lang }}';" class="fas fa-home w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> <i onclick="location.href='/{{ .Lang }}/blog';" class="fas fa-search w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> diff --git a/views/pages/home-page.html b/views/pages/home-page.html new file mode 100644 index 0000000..9775ac3 --- /dev/null +++ b/views/pages/home-page.html @@ -0,0 +1,99 @@ +{{ define "body" }} +<div class="bg-background-light flex flex-row ar-lt-0.6:flex-col w-full h-full inset-shadow overflow-y-auto text-[1vmax]/[2] tracking-[0.04vmin]"> + <div class="ar-gt-0.6:flex-3/5 justify-center content-start p-[5%]"> + <div class="flex flex-col justify-start items-start bg-background-dark mb-[2vmax]"> + <p class="text-[3vmax]/[2] tracking-[0.2vmin] uppercase w-full font-spectral italic text-left + border-l-[0.4vmax] border-solid border-(--background-dark-color) + bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.Hymn1 }}</p> + <hr class="w-full border-t-[0.2vmax] border-dotted border-main-dark mb-[0.8vmin]"> + <p class="text-[2vmax]/[2] -indent-[2vmax] ml-[2vmax] p-[0.4vmax]">{{ .L.HomePage.Hymn2 }}</p> + <p class="text-[2vmax]/[2] -indent-[2vmax] ml-[2vmax] p-[0.4vmax]">{{ .L.HomePage.Hymn3 }}</p> + <p class="text-[2vmax]/[2] -indent-[2vmax] ml-[2vmax] p-[0.4vmax]">{{ .L.HomePage.Hymn4 }}</p> + </div> + <div class="flex flex-col justify-center items-center"> + <p class="text-[2vmax] w-full font-spectral italic text-left + border-l-[0.4vmax] border-solid border-(--background-dark-color) + bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.DidYouKnowThat }}</p> + <hr class="w-full border-t-[0.2vmax] border-dotted border-main-dark mb-[0.8vmin]"> + <ul class="w-full text-left list-[circle]"> + <li class="ml-[2vmax] mb-[0.8vmin]">{{ index .FunFacts 0 }}</li> + <li class="ml-[2vmax] mb-[0.8vmin]">{{ index .FunFacts 1 }}</li> + <li class="ml-[2vmax]">{{ index .FunFacts 2 }}</li> + </ul> + </div> + </div> + + <div class="ar-gt-0.6:flex-2/5 justify-center content-start p-[5%]"> + <div class="flex relative aspect-square justify-center content-center mb-[2vmax]"> + {{- range $_ := iterate .FilledHeartCount }} + <div class="home-page-heart z-50">♥</div> + {{- end }} + {{- range $_ := iterate .OutlineHeartCount }} + <div class="home-page-heart z-50">♡</div> + {{- end }} + <img src="https://f003.backblazeb2.com/file/sayana-static/home-page-gifs/{{ .GifName }}" + class="home-page-gif z-49 -rotate-12 max-w-[70%] max-h-[70%] border-[1vmin] border-(--background-dark-color) border-inset"> + </div> + + <script> + function shuffleHearts() { + vmin = calculateVmin(1); + document.querySelectorAll('.home-page-heart').forEach((e) => { + let top, left; + do { + top = Math.floor(rand() * 90) + 5; + left = Math.floor(rand() * 90) + 5; + } while (top > 30 && top < 70 && left > 30 && left < 70); + const opacity = rand() * 0.7 + 0.2; + const size = rand() * 3.2 + 0.8; + e.style["top"] = `calc(${top}% - ${size}vmin / 2)`; + e.style["left"] = `calc(${left}% - ${size}vmin / 2)`; + e.style["opacity"] = `${opacity}`; + e.style["font-size"] = `${size}vmin`; + }); + } + + let shuffleHeartsResizeTimeout; + function shuffleHeartsResizeCb() { + clearTimeout(shuffleHeartsResizeTimeout); + shuffleHeartsResizeTimeout = setTimeout(shuffleHearts, 300); + } + window.addEventListener('resize', shuffleHeartsResizeCb); + + document.addEventListener('popout', (e) => { + window.removeEventListener('resize', shuffleHeartsResizeCb); + shuffleHeartsResizeCb = null; + }); + </script> + + <script> + document.addEventListener('htmx:afterRequest', (e) => { + if (e.detail.xhr.status == 404 || e.detail.successful != true) { + return console.error(e); + } + if (e.detail.target.id == 'general-page-body') { + shuffleHearts(); + } + }, {once: true}); + </script> + + <div class="flex flex-col justify-center items-center"> + <p class="text-[2vmax] w-full font-spectral italic text-left + border-l-[0.4vmax] border-solid border-(--background-dark-color) + bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.SidebarDescription }}</p> + <hr class="w-full border-t-[0.2vmax] border-dotted border-main-dark mb-[0.8vmin]"> + <div class="w-full grid grid-cols-[1fr_4fr] content-center items-center + [&>*:nth-child(4n+2)]:bg-(--background-medium-color) [&>*:nth-child(4n+3)]:bg-(--background-medium-color)" style="container-type: inline-size;"> + <i class="fas fa-home w-full h-full text-[10cqi] content-center text-center text-main-dark"></i> + <p class="p-[0.4vmax]">{{ .L.HomePage.HomePageDescription }}</p> + <i class="fas fa-search w-full h-full text-[10cqi] content-center text-center text-main-dark"></i> + <p class="p-[0.4vmax]">{{ .L.HomePage.BlogSearchDescription }}</p> + <i class="fas fa-map w-full h-full text-[10cqi] content-center text-center text-main-dark"></i> + <p class="p-[0.4vmax]">{{ .L.HomePage.MarkerMapDescription }}</p> + <i class="fas fa-swatchbook w-full h-full text-[10cqi] content-center text-center text-main-dark"></i> + <p class="p-[0.4vmax]">{{ .L.HomePage.ThemeSwitchDescription }}</p> + </div> + </div> + </div> +</div> +{{ end }} |