2022-10-03 11:53:27 +03:00
<!DOCTYPE html>
< html lang = "en" >
{{ template "head.tpl.html" . }}
< script >
const defaultTab = 'total'
< / script >
< body class = "relative bg-gray-900 text-gray-700 p-4 pt-10 flex flex-col min-h-screen {{ if .User }} max-w-screen-xl {{ else }} max-w-screen-lg {{end}} mx-auto justify-center" >
{{ template "alerts.tpl.html" . }}
{{ if .User }}
{{ template "menu-main.tpl.html" . }}
{{ else }}
{{ template "header.tpl.html" . }}
{{ template "login-btn.tpl.html" . }}
{{ end }}
2022-10-03 21:38:19 +03:00
< main class = "mt-10 flex-grow flex justify-center w-full" id = "leaderboard-page" >
2022-10-03 11:53:27 +03:00
< div class = "flex flex-col flex-grow mt-10" >
2022-10-04 00:52:22 +03:00
< h1 class = "h1" style = "margin-bottom: 0.5rem" > Leaderboard< / h1 >
2022-10-03 11:53:27 +03:00
2022-10-04 00:52:22 +03:00
< p class = "block text-sm text-gray-300 w-full lg:w-3/4 mb-8" > Wakapi's leaderboard shows a ranking of the most active users on this servers, given they opted in to get listed on the public leaderboard (see < i > Settings 🠒 Data< / i > ). Statistics are updated at least every 12 hours and are based on the users' total coding time in the past seven days. < / p >
< ul class = "flex space-x-4 mb-4 text-gray-600" >
< li class = "font-semibold text-xl {{ if eq .By " " } } text-gray-300 { { else } } hover:text-gray-500 { { end } } " >
2022-10-03 21:38:19 +03:00
< a href = "leaderboard" > Total< / a >
2022-10-03 11:53:27 +03:00
< / li >
2022-10-04 00:52:22 +03:00
< li class = "font-semibold text-xl {{ if eq .By " language " } } text-gray-300 { { else } } hover:text-gray-500 { { end } } " >
2022-10-03 21:38:19 +03:00
< a href = "leaderboard?by=language" > By Language< / a >
2022-10-03 11:53:27 +03:00
< / li >
< / ul >
2022-10-04 00:52:22 +03:00
{{ if ne .By "" }}
< div class = "flex space-x-2 mb-4" >
{{ range $i, $key := (strslice .TopKeys 0 20) }}
< div class = "inline-block" >
2022-10-06 00:36:57 +03:00
< a href = "leaderboard?by={{ $.By }}&key={{ $key }}" class = "{{ if eq $.Key (lower $key) }} btn-primary {{ else }} btn-default {{ end }} btn-small cursor-pointer" >
{{ if and (eq (lower $.By) "language") ($.LangIcon $key) }}
< span class = "align-middle leading-none" > < span class = "iconify inline text-white text-base" data-icon = "{{ ($.LangIcon $key) | urlSafe }}" > < / span > < / span >
{{ end }}
< span > {{ $key }}< / span >
< / a >
2022-10-04 00:52:22 +03:00
< / div >
{{ end }}
< / div >
{{ end }}
< div class = "flex flex-col space-y-4 mt-8 text-gray-300 w-full lg:w-3/4" >
2022-10-03 11:53:27 +03:00
< ol >
{{ range $i, $item := .Items }}
2022-10-04 00:52:22 +03:00
< li class = "px-4 py-2 my-2 rounded-md border-2 leaderboard-{{ ($.ColorModifier $item $.User) }} flex justify-between" >
2022-10-06 00:36:57 +03:00
< div class = "w-1/12 mr-1" > < strong > # {{ $item.Rank }}< / strong > < / div >
< div class = "flex w-3/12 mx-1 justify-start items-center space-x-4 align-middle" >
2022-10-04 00:52:22 +03:00
{{ if avatarUrlTemplate }}
< img src = "{{ $item.User.AvatarURL avatarUrlTemplate }}" width = "24px" class = "rounded-full border-green-700" alt = "User Profile Avatar" / >
{{ else }}
< span class = "iconify inline cursor-pointer text-gray-500 rounded-full border-green-700" style = "width: 24px; height: 24px" data-icon = "ic:round-person" > < / span >
{{ end }}
2022-10-06 00:36:57 +03:00
< strong class = "text-ellipsis truncate" > @{{ $item.UserID }}< / strong >
2022-10-04 00:52:22 +03:00
< / div >
2022-10-06 00:36:57 +03:00
< span class = "w-5/12 mx-1 truncate leading-6 align-middle" >
{{ range $i, $lang := (index $.UserLanguages $item.UserID) }}
{{ if $.LangIcon $lang }}
< span class = "align-middle leading-none" > < span class = "iconify inline text-white text-base" data-icon = "{{ ($.LangIcon $lang) | urlSafe }}" > < / span > < / span >
{{ end }}
< span class = "text-sm leading-6" > {{ $lang }}{{ if lt $i (add (len (index $.UserLanguages $item.UserID)) -1) }}, {{ end }}< / span >
{{ end }}
2022-10-05 22:52:10 +03:00
< / span >
2022-10-06 00:36:57 +03:00
< div class = "w-3/12 ml-1 text-right" > < span > {{ $item.Total | duration }}< / span > < / div >
2022-10-04 00:52:22 +03:00
< / li >
2022-10-03 11:53:27 +03:00
{{ end }}
< / ol >
< / div >
< / div >
< / main >
{{ template "footer.tpl.html" . }}
{{ template "foot.tpl.html" . }}
< / body >
< / html >
