fix(web): move inline tags to bottom, make 18+ tag smaller, matching …

…colors
Aidoku · Jul 27, 2023 · 1af548d · 1af548d
1 parent e297223
commit 1af548d
Showing 1 changed file with 1 addition and 1 deletion.
diff --git a/internal/build/web/index.html.tmpl b/internal/build/web/index.html.tmpl
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex">{{ if ne (len .Title) 0 }}<title>{{ .Title }}</title>{{ end }}{{ if ne (len .Description) 0 }}<meta name="description" content="{{ .Description }}">{{ end }}<meta name="theme-color" content="#ff375f">{{ if ne (len .Icon) 0 }}<link rel="icon" href="{{ .Icon }}">{{ end }}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/themes/light.css" integrity="sha384-0usmJJJTG5wZwRFlxdECle5gNAqtRYVm8rHBHjGO0+Cpgp83KTGEANVIFUYafjaO" crossorigin="anonymous"><style>*{--aidoku-color:#ff375f;font-family:-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif}.add-to-aidoku::part(base){background:#ff375f0f;border:none}.add-to-aidoku::part(base):hover{background:rgba(255,55,95,.15)}.add-to-aidoku::part(base):active{background:rgba(255,55,95,.25)}.add-to-aidoku::part(base):focus-visible{box-shadow:0 0 0 3px solid rgba(255,55,95,.33)}.add-to-aidoku::part(label){color:var(--aidoku-color)}body{margin:.75rem auto;max-width:42rem;visibility:hidden}body.ready{visibility:visible}@media only screen and (max-width:767px){body{max-width:22rem}}@media only screen and (max-width:376px){body{max-width:20rem}}header{margin:1rem auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:1.25rem;line-height:1.75rem}header p{color:var(--aidoku-color);font-weight:600;padding-bottom:.5rem;margin-bottom:.5rem;margin-top:.5rem}.description{margin:auto 2rem}.description a{color:var(--aidoku-color);text-decoration:none}.base-url{width:91.6667%;margin:.75rem auto;padding:.75rem 1rem;border-style:solid;border-radius:.125rem;border-width:1px;border-color:rgb(96 165 250);background-color:rgb(239 246 255)}.base-url__description{font-weight:600;margin:0;margin-bottom:.5rem}.base-url__url{margin:0}.sources{margin:.75rem auto}.sources h1{font-weight:600;font-size:1.875rem;line-height:2.25rem;padding-bottom:1rem;margin:0}.sources__search{padding-bottom:.25rem}.sources__search *{margin-bottom:.25rem}.sources__status{display:flex;align-items:center;justify-content:center}.sources__item{display:flex;align-items:center;padding:.5rem .5rem}.sources__item:target{background-color:rgba(255,55,95,.25);border-radius:.5rem;transition:background-color .5s}@media (min-width:1024px){.sources__item{padding-left:1.5rem;padding-right:1.5rem}}.sources__item:hover .sources__anchor{opacity:1}.sources__anchor{opacity:0;float:left;margin-top:auto;margin-bottom:auto;margin-left:-1.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1.25rem;font-weight:400;line-height:1.75rem;color:var(--aidoku-color)}.sources__anchor:hover{text-decoration-line:underline}.sources__icon-wrapper{margin-top:auto;margin-bottom:auto}.sources__icon{display:block;max-width:100%;margin-right:.5rem;border-radius:.5rem}.sources__info{display:flex;flex:1 1 0%;flex-direction:column}.sources__name{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.25rem;font-weight:600}.sources__name sl-badge{font-size:.75rem;line-height:.875rem}.sources__version{font-size:.875rem;line-height:1.25rem;color:rgb(156 163 175)}.sources__download{margin:auto auto}.sources__download sl-button::part(base){background:var(--sl-color-gray-100);border:none}.sources__download sl-button::part(base):hover{background:var(--sl-color-gray-200)}.sources__download sl-button::part(base):active{background:var(--sl-color-gray-300)}.sources__download sl-button::part(base):focus-visible{box-shadow:0 0 0 3px rgba(156,163,175,.33)}.sources__download sl-button::part(label){color:var(--aidoku-color)}@keyframes fade{from{opacity:1}to{opacity:.25}}.spinner{position:relative;display:inline-block;height:3.5rem;width:3.5rem}.spinner>div{position:absolute;left:49%;top:43%;height:16%;width:6%;border-radius:50px;background-color:#78787a;opacity:0;box-shadow:0 0 3px rgba(0,0,0,.2);animation:fade 1s linear infinite}.spinner>div.bar0{transform:rotate(0) translate(0,-130%);animation-delay:0s}.spinner>div.bar1{transform:rotate(45deg) translate(0,-130%);animation-delay:125ms}.spinner>div.bar2{transform:rotate(90deg) translate(0,-130%);animation-delay:.25s}.spinner>div.bar3{transform:rotate(135deg) translate(0,-130%);animation-delay:375ms}.spinner>div.bar4{transform:rotate(180deg) translate(0,-130%);animation-delay:.5s}.spinner>div.bar5{transform:rotate(225deg) translate(0,-130%);animation-delay:625ms}.spinner>div.bar6{transform:rotate(270deg) translate(0,-130%);animation-delay:.75s}.spinner>div.bar7{transform:rotate(315deg) translate(0,-130%);animation-delay:875ms}</style><script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/shoelace-autoloader.js" integrity="sha384-ILzDiPYY4je5i95gGzpVe0e88rFqVnoz3i7HPBsRbtEHxfkA7wR8E+PwjCgt1Bin" crossorigin="anonymous"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js" integrity="sha384-mPO6U7t0sNHfI1UIWNf5U6FDzprqWgAMKfOGW86JVGCKoU/7HPdy6DwBaWOsi4eV" crossorigin="anonymous"></script></head><body><header><p>{{ .Title }}</p><sl-button class="add-to-aidoku" x-data :href="$store.addUrl">Add to Aidoku</sl-button></header><div class="description">On a device with Aidoku installed, tap <a x-data :href="$store.addUrl">Add to Aidoku</a> or use the base URL to add this source list.</div><div class="base-url" variant="primary"><p class="base-url__description">Base URL:</p><p class="base-url__url" x-data x-text="$store.sourceUrl"></p></div><div class="sources" x-data="sourceList"><h1>Sources</h1><template x-if="loading === LoadingStatus.Loading"><div class="sources__status"><div aria-label="Loading" class="spinner"><div class="bar0"></div><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div><div class="bar4"></div><div class="bar5"></div><div class="bar6"></div><div class="bar7"></div></div></div></template><template x-if="loading === LoadingStatus.Error"><div class="sources__status">Could not load sources. This source list might not work in the app.</div></template><template x-if="loading === LoadingStatus.Loaded"><div><div class="sources__search" x-effect="updateFilteredList"><sl-input placeholder="Search by name or ID..." x-model="query"></sl-input><sl-select multiple clearable placeholder="Filter by languages" @sl-change="selectedLanguages = event.target.value"><template x-for="(language, index) in languages" :key="language"><sl-option :value="language" x-text="languageName(language)"></sl-option></template></sl-select><sl-checkbox @sl-change="nsfw = event.target.checked" :checked="nsfw">Show NSFW sources?</sl-checkbox></div><div class="sources__list"><template x-for="source in filtered" :key="source.id"><div class="sources__item" :id="source.id"><a :href="`#${source.id}`" class="sources__anchor">#</a><div class="sources__icon-wrapper"><img class="sources__icon" :alt="`Icon for ${source.name}`" :src="`./icons/${source.icon}`" loading="lazy" width="42" height="42"></div><div class="sources__info"><div class="sources__name"><span x-text="source.name"></span> <span class="sources__version" x-text="`v${source.version}`"></span><sl-badge pill x-cloak variant="danger" x-show="source.nsfw === 2">18+</sl-badge></div><div class="sources__version" x-text="simpleLanguageName(source.lang)"></div></div><div class="sources__download"><sl-button pill size="small" download :href="`./sources/${source.file}`">Download</sl-button></div></div></template></div></div></template></div><script>Promise.allSettled([customElements.whenDefined("sl-button")]).then((()=>{document.body.classList.add("ready")}))</script><script>!function(e){const n=new Intl.DisplayNames(["en"],{type:"language"});function t(e){return"multi"===e?"Multi-Language":n.of(e)}function a(e){if("multi"===e)return"Multi-Language";if("en"===e)return"English";const t=new Intl.DisplayNames([e],{type:"language"});return`${n.of(e)} - ${t.of(e)}`}const i={Loading:"loading",Loaded:"loaded",Error:"error"};document.addEventListener("alpine:init",(()=>{Alpine.store("sourceUrl",e.location.href.replace(e.location.hash,"")),Alpine.store("addUrl",`aidoku://addSourceList?url=${e.location.href.replace(e.location.hash,"")}`),Alpine.data("sourceList",(()=>({LoadingStatus:i,simpleLanguageName:t,languageName:a,sources:[],languages:[],loading:i.Loading,filtered:[],query:"",selectedLanguages:[],nsfw:!0,async init(){try{const e=await fetch("./index.min.json");this.sources=(await e.json()).sort(((e,n)=>{if("multi"===e.lang&&"multi"!==n.lang)return-1;if("multi"!==e.lang&&"multi"===n.lang)return 1;if("en"===e.lang&&"en"!==n.lang)return-1;if("en"===n.lang&&"en"!==e.lang)return 1;const a=t(e.lang),i=t(n.lang);return a.localeCompare(i)||e.name.localeCompare(n.name)})),this.languages=[...new Set(this.sources.map((e=>e.lang)))],this.loading=i.Loaded}catch{this.loading=i.Error}0===this.filtered.length&&this.updateFilteredList(),this.$nextTick((()=>{e.location.hash&&e.location.replace(e.location.hash)}))},updateFilteredList(){this.filtered=this.sources.filter((e=>!this.query||(e.name.toLowerCase().includes(this.query.toLowerCase())||e.id.toLowerCase().includes(this.query.toLowerCase())))).filter((e=>!!this.nsfw||(e.nsfw??0)<=1)).filter((e=>!this.selectedLanguages.length||this.selectedLanguages.includes(e.lang)))}})))}))}("undefined"!=typeof self?self:this)</script></body></html>
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex">{{ if ne (len .Title) 0 }}<title>{{ .Title }}</title>{{ end }}{{ if ne (len .Description 0 }}<meta name="description" content="{{ .Description }}">{{ end }}<meta name="theme-color" content="#ff375f">{{ if ne (len .Icon) 0 }}<link rel="icon" href="{{ .Icon }}">{{ end }}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/themes/light.css" integrity="sha384-0usmJJJTG5wZwRFlxdECle5gNAqtRYVm8rHBHjGO0+Cpgp83KTGEANVIFUYafjaO" crossorigin="anonymous"><script async type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/shoelace-autoloader.js" integrity="sha384-ILzDiPYY4je5i95gGzpVe0e88rFqVnoz3i7HPBsRbtEHxfkA7wR8E+PwjCgt1Bin" crossorigin="anonymous"></script><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js" integrity="sha384-mPO6U7t0sNHfI1UIWNf5U6FDzprqWgAMKfOGW86JVGCKoU/7HPdy6DwBaWOsi4eV" crossorigin="anonymous"></script></head><body><header class="header">{{ if ne (len .Title) 0 }}<p class="header__title">{{ .Title }}</p>{{ end }}<sl-button class="add-to-aidoku" x-data :href="$store.addUrl">Add to Aidoku</sl-button></header><div class="description">On a device with Aidoku installed, tap <a class="description__anchor" x-data :href="$store.addUrl">Add to Aidoku</a> or use the base URL to add this source list.</div><div class="base-url" variant="primary"><p class="base-url__title">Base URL:</p><p class="base-url__url" x-data x-text="$store.sourceUrl"></p></div><div class="sources" x-data="sourceList"><h1 class="sources__title">Sources</h1><template x-if="loading === LoadingStatus.Loading"><div class="sources__status"><div aria-label="Loading" class="spinner"><div class="bar0"></div><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div><div class="bar4"></div><div class="bar5"></div><div class="bar6"></div><div class="bar7"></div></div></div></template><template x-if="loading === LoadingStatus.Error"><div class="sources__status">Could not load sources. This source list might not work in Aidoku.</div></template><template x-if="loading === LoadingStatus.Loaded"><div><div class="source-search" x-effect="updateFilteredList"><sl-input class="source-search__title" placeholder="Search by name or ID..." x-model="query"></sl-input><sl-select class="source-search__language" multiple clearable placeholder="Filter by languages" @sl-change="selectedLanguages = event.target.value"><template x-for="(language, index) in languages" :key="index"><sl-option :value="language" x-text="languageName(language)"></sl-option></template></sl-select><sl-checkbox class="source-search__content-rating" @sl-change="nsfw = event.target.checked" :checked="nsfw">Show NSFW sources?</sl-checkbox></div><template x-for="source in filtered" :key="source.id"><div class="source" :id="source.id"><a :href="`#${source.id}`" class="source__anchor">#</a> <img class="source__icon" :alt="`Icon for ${source.name}`" :src="`./icons/${source.icon}`" loading="lazy" width="42" height="42"><div class="source__info"><div class="source__name"><span x-text="source.name"></span> <span class="source__version" x-text="`v${source.version}`"></span><sl-badge x-cloak variant="danger" class="content-rating content-rating--nsfw" x-show="source.nsfw === 2">18+</sl-badge></div><div class="sources__version" x-text="simpleLanguageName(source.lang)"></div></div><sl-button pill size="small" download class="download-button" :href="`./sources/${source.file}`">Download</sl-button></div></template></div></template></div><style>*{font-family:-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif}body{margin:.75rem auto;max-width:42rem;visibility:hidden}body.ready{visibility:visible}@media only screen and (max-width:767px){body{max-width:22rem}}@media only screen and (max-width:376px){body{max-width:20rem}}.header{margin:1rem auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:1.25rem;line-height:1.75rem}.header__title{color:#ff375f;font-weight:600;padding-bottom:.5rem;margin-top:.5rem;margin-bottom:.5rem}.add-to-aidoku::part(base){background:rgba(255,55,95,.06);border:none}.add-to-aidoku::part(base):hover{background:rgba(255,55,95,.08)}.add-to-aidoku::part(base):active{background:rgba(255,55,95,.15)}.add-to-aidoku::part(base):focus-visible{outline:solid 3px rgba(255,55,95,.5)}.add-to-aidoku::part(label){color:#ff375f}.description{margin:auto 2rem}.description__anchor{color:#ff375f;text-decoration:none}.base-url{margin:.75rem auto;padding:.75rem 1rem;border-style:solid;border-radius:.125rem;border-width:1px;border-color:#60a5fa;background-color:#eff6ff}.base-url__title{font-weight:600;margin:0;margin-bottom:.5rem}.base-url__url{margin:0}.sources{margin:.75rem auto}.sources__title{font-weight:600;font-size:1.875rem;line-height:2.25rem;padding-bottom:1rem;margin:0}.sources__status{display:flex;align-items:center;justify-content:center}.source-search{padding-bottom:.25rem}.source-search__title{margin-bottom:.25rem}.source-search__language{margin-bottom:.25rem}.source-search__content-rating{margin-bottom:.25rem}.source{display:flex;align-items:center;padding:.5rem .5rem}@media only screen and (min-width:1024px){.source{padding-left:1.5rem;padding-right:1.5rem}}.source:target{background-color:rgba(255,55,95,.25);border-radius:.5rem;transition:background-color .5s}.source:hover .source__anchor{opacity:1}.source__anchor{opacity:0;float:left;margin-top:auto;margin-bottom:auto;margin-left:-1.5rem;padding-left:.5rem;padding-right:.5rem;font-size:1.25rem;font-weight:400;line-height:1.75rem;color:#ff375f}.source__anchor:hover{text-decoration-line:underline}.source__icon{margin-top:auto;margin-bottom:auto;display:block;max-width:100%;margin-right:.5rem;border-radius:.5rem}.source__info{display:flex;flex:1 1 0%;flex-direction:column}.source__name{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.25rem;font-weight:600}.source__version{font-size:.875rem;line-height:1.25rem;color:#3c3c4399}.content-rating::part(base){color:#3c3c4399;padding:.16rem .26rem;font-size:.7rem;border-radius:.375rem}.content-rating--suggestive::part(base){background-color:rgba(255,204,0,.3)}.content-rating--nsfw::part(base){background-color:rgba(255,59,48,.3)}.download-button{margin:auto auto}.download-button::part(base){background:#7676801e;border:none}.download-button::part(base):hover{background:rgba(118,118,128,.18)}.download-button::part(base):active{background:rgba(118,118,128,.26)}.download-button::part(base):focus-visible{outline:solid 3px rgba(118,118,128,.5)}.download-button::part(label){color:#ff375f}@keyframes fade{from{opacity:1}to{opacity:.25}}.spinner{position:relative;display:inline-block;height:3.5rem;width:3.5rem}.spinner>div{position:absolute;left:49%;top:43%;height:16%;width:6%;border-radius:50px;background-color:#78787a;opacity:0;box-shadow:0 0 3px rgba(0,0,0,.2);animation:fade 1s linear infinite}.spinner>div.bar0{transform:rotate(0) translate(0,-130%);animation-delay:0 s}.spinner>div.bar1{transform:rotate(45deg) translate(0,-130%);animation-delay:.125 s}.spinner>div.bar2{transform:rotate(90deg) translate(0,-130%);animation-delay:.25 s}.spinner>div.bar3{transform:rotate(135deg) translate(0,-130%);animation-delay:.375 s}.spinner>div.bar4{transform:rotate(180deg) translate(0,-130%);animation-delay:.5 s}.spinner>div.bar5{transform:rotate(225deg) translate(0,-130%);animation-delay:.625 s}.spinner>div.bar6{transform:rotate(270deg) translate(0,-130%);animation-delay:.75 s}.spinner>div.bar7{transform:rotate(315deg) translate(0,-130%);animation-delay:.875 s}</style><script>Promise.allSettled([customElements.whenDefined("sl-button")]).then((()=>{document.body.classList.add("ready")}))</script><script>!function(e){const n=new Intl.DisplayNames(["en"],{type:"language"});function t(e){return"multi"===e?"Multi-Language":n.of(e)}function a(e){if("multi"===e)return"Multi-Language";if("en"===e)return"English";const t=new Intl.DisplayNames([e],{type:"language"});return`${n.of(e)} - ${t.of(e)}`}const i={Loading:"loading",Loaded:"loaded",Error:"error"};document.addEventListener("alpine:init",(()=>{Alpine.store("sourceUrl",e.location.href.replace(e.location.hash,"")),Alpine.store("addUrl",`aidoku://addSourceList?url=${e.location.href.replace(e.location.hash,"")}`),Alpine.data("sourceList",(()=>({LoadingStatus:i,simpleLanguageName:t,languageName:a,sources:[],languages:[],loading:i.Loading,filtered:[],query:"",selectedLanguages:[],nsfw:!0,async init(){try{const e=await fetch("./index.min.json");this.sources=(await e.json()).sort(((e,n)=>{if("multi"===e.lang&&"multi"!==n.lang)return-1;if("multi"!==e.lang&&"multi"===n.lang)return 1;if("en"===e.lang&&"en"!==n.lang)return-1;if("en"===n.lang&&"en"!==e.lang)return 1;const a=t(e.lang),i=t(n.lang);return a.localeCompare(i)||e.name.localeCompare(n.name)})),this.languages=[...new Set(this.sources.map((e=>e.lang)))],this.loading=i.Loaded}catch{this.loading=i.Error}0===this.filtered.length&&this.updateFilteredList(),this.$nextTick((()=>{e.location.hash&&e.location.replace(e.location.hash)}))},updateFilteredList(){this.filtered=this.sources.filter((e=>!this.query||(e.name.toLowerCase().includes(this.query.toLowerCase())||e.id.toLowerCase().includes(this.query.toLowerCase())))).filter((e=>!!this.nsfw||(e.nsfw??0)<=1)).filter((e=>!this.selectedLanguages.length||this.selectedLanguages.includes(e.lang)))}})))}))}("undefined"!=typeof self?self:this)</script></body></html>