jonny_bro/beatrun-courses-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: simple theme selector

Browse source
This commit is contained in:
Jonny_Bro (Nikita) 2025-02-24 18:53:27 +05:00
parent 560c615f24
commit 76d825f9c5
No known key found for this signature in database
GPG key ID: A18808B38428F7C4
8 changed files with 43 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
components/course_card_orig.html
View file

@ -1,58 +0,0 @@
<div class="flex flex-row flex-shrink-0 m-2 p-2 w-fit font-mono
bg-red-700
drop-shadow-[0_0px_10px_rgba(0,0,0,0.5)]">
<div class="flex w-52">
<div class="relative">
<img src="{mapimagesrc}" style="height: 7.25rem; width: 12.93rem" class="object-cover">
<div class="absolute bottom-0 text-xl font-semibold
drop-shadow-[0_0px_2px_rgba(0,0,0,1)]">
<div class=" bg-black bg-opacity-30 pr-2 pl-1 py-0.5 pt-0" style="max-width: 12rem; overflow: hidden;">
<a class="hover:text-yellow-200 transition-all" target="_blank" href="https://steamcommunity.com/sharedfiles/filedetails/?id={mapwid}">{coursemap}</a>
</div>
</div>
<div class="absolute top-0 text-sm font-semibold
drop-shadow-[0_0px_2px_rgba(0,0,0,1)]">
<div class="bg-black bg-opacity-30 p-1">
{elementcount}
</div>
</div>
</div>
</div>
<div class="flex w-96 ml-2">
<div class="relative w-full text-left">
<div class="h-full w-full grid grid-rows-3 grid-cols-1">
<div class="flex flex-col justify-center text-lg font-bold w-11/12">
<p class="truncate">{coursename}</p>
</div>
<div class="flex flex-col justify-center">
<div class="truncate w-3/4" style="overflow:hidden;">
<i class="fa-solid fa-file w-4"></i>
<a title="Click to copy" onclick="event.preventDefault(); navigator.clipboard.writeText('{coursecode}'); const text = this.innerText; this.innerText = 'Copied!'; setTimeout(() => { this.innerText = text }, 1000);" class="hover:text-yellow-200 transition-all" href="#">{coursecode}</a>
</div>
</div>
<div class="flex flex-col justify-center">
<div class="truncate w-3/4" style="overflow:hidden;">
<i class="fa-solid fa-user w-4"></i>
<a title="Click to see SteamID/Name" href="#" onclick="event.preventDefault(); this.innerText === '{uploadername}' ? this.innerText = '{uploaderuid}' : this.innerText = '{uploadername}'">{uploadername}</a>
</div>
</div>
<div class="flex flex-col justify-center">
<div class="truncate w-3/4" style="overflow:hidden;">
<i class="fa-solid fa-upload w-4"></i>
<span>{fdate}</span>
</div>
</div>
<div id="rating" class="text-center absolute bottom-0 right-0">
<span id="{coursecode}-likes" class="font-bold">{likecount}</span>
<a title="Like" href="#" id="{coursecode}" onclick="event.preventDefault(); like(this)"><i class="hover:text-yellow-200 transition-all fa-solid fa-thumbs-up"></i></a>
/
<span id="{coursecode}-dislikes" class="font-bold">{dislikecount}</span>
<a title="Dislike" href="#" id="{coursecode}" onclick="event.preventDefault(); dislike(this)"><i class="hover:text-yellow-200 transition-all fa-solid fa-thumbs-down"></i></a>
</div>
<div class="absolute -top-1 right-0 hover:text-yellow-200 transition-all">
<a title="Download course file" href="{coursedownload}" download><i class="fa-solid fa-download"></i></a>
</div>
</div>
</div>
</div>
</div>

1
components/footer.html
View file

@ -1,6 +1,7 @@
<footer class="footer footer-center p-4 bg-base-300 text-base-content font-mono">
<div class="block">
Coperight @ Jonny_Bro & rlx 2023-<%= new Date().getFullYear() %>
<br>
<a class="link link-hover" target="_blank" href="https://git.jonnybro.ru/jonny_bro/beatrun-courses-server-docker">[Full source code available here!]</a>
</div>
</footer>

33
components/navbar.html
View file

@ -22,6 +22,11 @@
Our Discord
</a>
</li>
<label class="cursor-pointer grid place-items-center">
<input id="themeSelector" type="checkbox" class="toggle bg-base-content row-start-1 col-start-1 col-span-2"/>
<svg class="col-start-2 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
<svg class="col-start-1 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
</label>
<% if (user) { %>
<a class="btn btn-sm btn-primary hover:bg-red-700" href="/key"><%= user.personaname %></a>
<a class="btn btn-sm btn-primary hover:bg-red-700" href="/upload">Upload</a>
@ -48,11 +53,11 @@
Our Discord
</a>
</li>
<!-- <label class="cursor-pointer grid place-items-center">
<label class="cursor-pointer grid place-items-center">
<input id="themeSelector" type="checkbox" class="toggle bg-base-content row-start-1 col-start-1 col-span-2"/>
<svg class="col-start-2 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
<svg class="col-start-1 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
</label> -->
</label>
<% if (user) { %>
<a class="btn btn-sm btn-primary hover:bg-red-700" href="/key"><%= user.personaname %></a>
<a class="btn btn-sm btn-primary hover:bg-red-700" href="/upload">Upload</a>
@ -64,21 +69,23 @@
<a class="btn btn-sm btn-primary hover:bg-red-700" href="/admin">Admin</a>
<% } %>
</ul>
<!-- <script>
const e = document.getElementById("themeSelector");
e.addEventListener("change", () => {
<script>
const element = document.getElementById("themeSelector");
element.addEventListener("change", () => {
event.preventDefault();
const theme = localStorage.getItem("theme")
const theme = localStorage.getItem("theme");
if (!theme) localStorage.setItem("theme", "black");
theme === "nord" ? localStorage.setItem("theme", "black") : localStorage.setItem("theme", "nord");
document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
})
if (localStorage.getItem("theme") === "black")
document.getElementById("themeSelector").checked = "checked"
else
document.getElementById("themeSelector").checked = null
</script> -->
document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
});
if (localStorage.getItem("theme") === "black") document.getElementById("themeSelector").checked = "checked";
else document.getElementById("themeSelector").checked = null;
</script>
</nav>

3
views/admin.ejs
View file

@ -25,6 +25,9 @@
</style>
<script>
// Apply user's theme
document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
function sendAction(args) {
const { action } = args;
const responseBox = document.getElementById("responseBox");

3
views/index.ejs
View file

@ -26,6 +26,9 @@
</style>
<script>
// Apply user's theme
document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
function update() {
const page = document.getElementById("pageSelect");
const sort = document.getElementById("sortValue");

5
views/key.ejs
View file

@ -24,6 +24,11 @@
-ms-overflow-style: none;
}
</style>
<script>
// Apply user's theme
document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
</script>
</head>
<body class="w-screen font-mono">

6
views/stats.ejs
View file

@ -24,10 +24,16 @@
-ms-overflow-style: none;
}
</style>
<script>
// Apply user's theme
document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
</script>
</head>
<body class="w-screen font-mono">
<% include ../components/navbar.html %>
<div class="hero min-h-screen bg-base-200">
<div class="hero-content text-center">
<div class="text-center align-top w-full">

5
views/upload.ejs
View file

@ -24,6 +24,11 @@
-ms-overflow-style: none;
}
</style>
<script>
// Apply user's theme
document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"));
</script>
</head>
<body class="w-screen font-mono">