beatrun-courses-server-docker/components/course_card_orig.html
2024-08-29 09:48:27 +05:00

58 lines
No EOL
2.9 KiB
HTML

<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>