70 lines
2.8 KiB
HTML
70 lines
2.8 KiB
HTML
|
<div class="card card-side w-fit bg-base-300 shadow-xl m-1">
|
||
|
|
|
||
|
|
<div class="relative">
|
||
|
|
<img src="{mapImage}" style="height: 10.5rem; width: 13rem; object-fit: cover">
|
||
|
|
|
||
|
|
<div class="absolute bottom-0 text-left text-sm font-mono drop-shadow-[0_0px_2px_rgba(0,0,0,1)]">
|
||
|
|
<div class="bg-black bg-opacity-30 p-1 px-2">
|
||
|
|
<a class="link link-warning link-hover hover:text-red-700 text-white" target="_blank" href="https://steamcommunity.com/sharedfiles/filedetails/?id={mapID}">{courseMap}</a><br>
|
||
|
|
{elementsCount}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="card-body w-96 font-mono p-2">
|
||
|
|
<div class="ml-2 flex items-center h-full">
|
||
|
|
<div class="space-y-1 pt-1 w-full">
|
||
|
|
<div class="tooltip w-full" data-tip="{courseName}">
|
||
|
|
<h2 class="text-left card-title w-10/12 text-ellipsis overflow-hidden whitespace-nowrap">{courseName}</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="text-left">
|
||
|
|
<div class="tooltip" data-tip="Click to copy">
|
||
|
|
<i class="fa-solid fa-file w-4"></i>
|
||
|
|
<a class="hover:text-red-700" href="#" onclick="event.preventDefault(); navigator.clipboard.writeText('{courseCode}'); const text = this.innerText; this.innerText = 'Copied!'; setTimeout(() => { this.innerText = text }, 1000);">{courseCode}</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-left">
|
||
|
|
<div class="tooltip" data-tip="Open Steam Profile">
|
||
|
|
<i class="fa-solid fa-user w-4"></i>
|
||
|
|
<a class="hover:text-red-700" href="https://steamcommunity.com/profiles/{uploaderID}">{uploaderName}</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="text-left">
|
||
|
|
<i class="fa-solid fa-upload w-4"></i>
|
||
|
|
<span>{uploadDate}</span>
|
||
|
|
</div>
|
||
|
|
<div class="text-left">
|
||
|
|
<i class="fa-solid fa-download w-4"></i>
|
||
|
|
<span>{plays}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="">
|
||
|
|
<div class="absolute bottom-0 right-2">
|
||
|
|
<a class="btn btn-md btn-square btn-ghost hover:text-red-700" href="#" id="{courseCode}" onclick="event.preventDefault(); like(this)">
|
||
|
|
<span id="{courseCode}-likes">{likesCount}</span> <i class="fa-solid fa-thumbs-up"></i>
|
||
|
|
</a>
|
||
|
|
<a class="btn btn-md btn-square btn-ghost hover:text-red-700" href="#" id="{courseCode}" onclick="event.preventDefault(); dislike(this)">
|
||
|
|
<span id="{courseCode}-dislikes">{dislikesCount}</span> <i class="fa-solid fa-thumbs-down"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="absolute top-0 right-0">
|
||
|
|
<div class="tooltip tooltip-left" data-tip="Download">
|
||
|
|
<a class="btn btn-square btn-ghost hover:text-red-700" href="{downloadLink}" download>
|
||
|
|
<i class="fa-solid fa-download"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<br>
|
||
|
|
<div class="tooltip tooltip-left" data-tip="Open stats">
|
||
|
|
<a class="btn btn-square btn-ghost hover:text-red-700" href="/stats/{courseCode}">
|
||
|
|
<i class="fa-solid fa-info"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|