mirror
/
wakapi
mirror of https://github.com/muety/wakapi.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: replace roboto by source sans 3 font 

chore: minor front page styling
This commit is contained in:
Ferdinand Mütsch 2021-12-15 23:59:40 +01:00
parent 44a2e609fb
commit af0d2e84e1
17 changed files with 173 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
scripts/bundle_icons.js
View File

@ -44,7 +44,16 @@ let icons = [
'fluent:key-32-filled',
'majesticons:clipboard-copy',
'fa-regular:calendar-alt',
'ph:books-bold'
'ph:books-bold',
'fa-solid:external-link-alt',
'bx:bx-code-curly',
'simple-icons:wakatime',
'bx:bxs-heart',
'heroicons-solid:light-bulb',
'ion:rocket',
'heroicons-solid:server',
'eva:checkmark-circle-2-fill',
'fluent:key-24-filled'
]
const output = path.normalize(path.join(__dirname, '../static/assets/icons.js'))

12
static/assets/app.css
View File

@ -1,5 +1,5 @@
body {
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
font-family: 'Source Sans 3', 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
.bg-gray-850 {
@ -22,4 +22,14 @@ body {
.mt-14 {
margin-top: 3.5rem;
}
.text-7xl {
font-size: 4.5rem;
line-height: 1.1;
}
.text-8xl {
font-size: 5rem;
line-height: 1.1;
}

26
static/assets/app.js
View File

@ -39,6 +39,7 @@ let resizeCount = 0
Chart.defaults.color = "#E2E8F0"
Chart.defaults.borderColor = "#242b3a"
Chart.defaults.font.family = 'Source Sans 3, Roboto, Helvetica Neue, Arial, sens-serif'
String.prototype.toHHMMSS = function () {
const sec_num = parseInt(this, 10)
@ -387,22 +388,8 @@ function hexToRgb(hex) {
} : null;
}
function showUserMenuPopup(event) {
const el = document.getElementById('user-menu-popup')
el.classList.remove('hidden')
el.classList.add('block')
event.stopPropagation()
}
function hideUserMenuPopup(event) {
const el = document.getElementById('user-menu-popup')
el.classList.remove('block')
el.classList.add('hidden')
event.stopPropagation()
}
function toggleTimePickerPopup(event) {
const el = document.getElementById('time-picker-popup')
function togglePopup(event, id) {
const el = document.getElementById(id)
if (el.classList.contains('hidden')) {
el.classList.remove('hidden')
el.classList.add('block')
@ -413,13 +400,6 @@ function toggleTimePickerPopup(event) {
event.stopPropagation()
}
function showApiKeyPopup(event) {
const el = document.getElementById('api-key-popup')
el.classList.remove('hidden')
el.classList.add('block')
event.stopPropagation()
}
function copyApiKey(event) {
const el = document.getElementById('api-key-container')
el.select()

10
static/assets/icons.js
View File

File diff suppressed because one or more lines are too long

BIN
static/assets/vendor/roboto-latin-ext.woff2 vendored
View File

Binary file not shown.

BIN
static/assets/vendor/roboto-latin.woff2 vendored
View File

Binary file not shown.

18
static/assets/vendor/roboto.css vendored
View File

@ -1,18 +0,0 @@
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(roboto-latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(roboto-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

36
static/assets/vendor/source-sans-3.css vendored Normal file
View File

@ -0,0 +1,36 @@
/* latin-ext */
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(source-sans-3_latin-ext_400.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(source-sans-3_latin_400.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(source-sans-3_latin-ext_600.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(source-sans-3_latin_600.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

BIN
static/assets/vendor/source-sans-3_latin-ext_400.woff2 vendored Normal file
View File

Binary file not shown.

BIN
static/assets/vendor/source-sans-3_latin-ext_600.woff2 vendored Normal file
View File

Binary file not shown.

BIN
static/assets/vendor/source-sans-3_latin_400.woff2 vendored Normal file
View File

Binary file not shown.

BIN
static/assets/vendor/source-sans-3_latin_600.woff2 vendored Normal file
View File

Binary file not shown.

14
views/footer.tpl.html
View File

@ -1,13 +1,13 @@
<footer class="flex justify-between w-full text-center text-gray-500 text-xs mt-12">
<div class="text-xs font-mono">
<footer class="flex justify-between w-full text-center text-gray-500 text-xs mt-20">
<div class="text-xs font-mono font-semibold">
v{{ getVersion }} @ {{ getDbType }}
</div>
<div>
Made with &nbsp; <span class="iconify inline" data-icon="bi:heart-fill"></span> &nbsp; by <a href="https://muetsch.io" class="border-b border-green-700">Ferdinand Mütsch</a> as <a
href="https://github.com/muety/wakapi" class="border-b border-green-700">open-source</a> software
<div class="font-semibold text-sm">
Made with &nbsp; <span class="iconify inline" data-icon="bi:heart-fill"></span> &nbsp; by <a href="https://muetsch.io" class="text-gray-400 hover:text-gray-300">Ferdinand Mütsch</a> as <a
href="https://github.com/muety/wakapi" class="text-gray-400 hover:text-gray-300">open-source</a> software
</div>
<div>
<a href="imprint" class="border-b border-green-700">Imprint, Cookies & Data Privacy</a>
<div class="text-sm">
<a href="imprint" class="font-semibold hover:text-gray-400">Imprint, Cookies & Data Privacy</a>
</div>
</footer>

2
views/head.tpl.html
View File

@ -10,7 +10,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png">
<link rel="manifest" href="assets/site.webmanifest">
<link href="assets/vendor/roboto.css" rel="stylesheet">
<link href="assets/vendor/source-sans-3.css" rel="stylesheet">
{{ if isDev }}
<link href="assets/vendor/tailwind.css" rel="stylesheet">
{{ else }}

68
views/index.tpl.html
View File

@ -11,43 +11,31 @@
<div class="absolute flex top-0 right-0 mr-8 mt-10 py-2">
<div class="mx-1">
<a href="login" class="py-2 px-4 block rounded bg-green-700 hover:bg-green-800 text-white text-sm">
<span class="iconify inline" data-icon="fxemoji:key"></span> &nbsp;Login️</a>
<a href="login" class="py-2 px-4 block rounded bg-green-700 hover:bg-green-800 text-white text-sm font-semibold">
<span class="iconify inline" data-icon="fluent:key-24-filled"></span> &nbsp;Login️</a>
</div>
</div>
<main class="mt-10 px-16 flex-grow flex justify-center w-full">
<main class="mt-10 px-4 md:px-10 lg:px-24 flex-grow flex justify-center w-full">
<div class="flex flex-col text-white">
<h1 class="text-4xl font-semibold antialiased text-center mb-2">Keep Track of <span
class="text-green-700">Your</span> Coding Time <span class="iconify inline" data-icon="flat-color-icons:clock"></span></h1>
<h1 class="text-8xl font-semibold antialiased text-center mb-10 leading-snug">Keep Track of<br><span
class="text-green-700">Your</span> Coding Time</h1>
<p class="text-center text-gray-500 text-xl my-2">Wakapi is an open-source tool that helps you keep track of the
time you have spent coding on different projects in different programming languages and more.<br>Ideal for
statistics freaks and anyone else.</p>
<p class="text-center text-gray-500 text-xl my-4">
<span class="mr-1"><span class="iconify inline" data-icon="twemoji:light-bulb"></span> The system has tracked a total of </span>
{{ range $d := .TotalHours | printf "%d" | toRunes }}
<span class="bg-gray-900 rounded-sm p-1 border border-gray-700 font-mono" style="margin: auto -2px;" title="{{ $.TotalHours }} hours (updated every hour)">{{ $d }}</span>
{{ end }}
<span class="mx-1">hours of coding from</span>
{{ range $d := .TotalUsers | printf "%d" | toRunes }}
<span class="bg-gray-900 rounded-sm p-1 border border-gray-700 font-mono" style="margin: auto -2px;" title="{{ $.TotalUsers }} users (updated every hour)">{{ $d }}</span>
{{ end }}
<span class="ml-1">users.</span>
</p>
<div class="flex justify-center mt-4 mb-8 space-x-2">
<div class="flex justify-center mt-8 mb-4 space-x-2">
<a href="login">
<button type="button"
class="py-2 px-4 rounded bg-green-700 hover:bg-green-800 text-white font-semibold"><span class="iconify inline" data-icon="fxemoji:rocket"></span> Try it!
class="py-2 px-4 rounded bg-green-700 hover:bg-green-800 text-white font-semibold"><span class="iconify inline" data-icon="ion:rocket"></span> Let's Go!
</button>
</a>
<a href="https://github.com/muety/wakapi#%EF%B8%8F-how-to-use" target="_blank" rel="noopener noreferrer">
<button type="button" class="py-2 px-4 rounded bg-gray-800 hover:bg-gray-850 text-white"><span class="iconify inline" data-icon="fxemoji:satelliteantenna"></span> Host it
<button type="button" class="py-2 px-4 rounded bg-gray-800 hover:bg-gray-850 text-white"><span class="iconify inline" data-icon="heroicons-solid:server"></span> Get Your Own
</button>
</a>
<a href="https://github.com/sponsors/muety" target="_blank" rel="noopener noreferrer">
<button type="button" class="py-2 px-4 rounded bg-gray-800 hover:bg-gray-850 text-white"><span class="iconify inline" data-icon="flat-color-icons:donate"></span> Support it
<button type="button" class="py-2 px-4 rounded bg-gray-800 hover:bg-gray-850 text-white"><span class="iconify inline" data-icon="bx:bxs-heart"></span> Support Us
</button>
</a>
<a href="https://github.com/muety/wakapi" target="_blank" rel="noopener noreferrer">
@ -57,25 +45,37 @@
</a>
</div>
<p class="text-center text-gray-500 text-sm mb-4">
This system has tracked a total of </span>
{{ range $d := .TotalHours | printf "%d" | toRunes }}
<span class="bg-gray-900 rounded-sm p-1 border border-gray-700 font-mono text-gray-400" style="margin: auto -1px;" title="{{ $.TotalHours }} hours (updated every hour)">{{ $d }}</span>
{{ end }}
<span class="mx-1">hours of coding from</span>
{{ range $d := .TotalUsers | printf "%d" | toRunes }}
<span class="bg-gray-900 rounded-sm p-1 border border-gray-700 font-mono text-gray-400" style="margin: auto -1px;" title="{{ $.TotalUsers }} users (updated every hour)">{{ $d }}</span>
{{ end }}
<span class="ml-1">users.</span>
</p>
<div class="flex justify-center my-8">
<img alt="App screenshot" src="assets/images/screenshot.png">
</div>
<div class="flex flex-col items-center mt-10">
<h1 class="font-semibold text-xl text-white m-0 border-b-4 border-green-700">Features</h1>
<div class="mt-4 text-lg">
<h1 class="font-semibold text-3xl text-white m-0">Features</h1>
<div class="mt-4 text-lg text-gray-500">
<ul>
<li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; 100 % free and open-source</li>
<li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Built by developers for developers</li>
<li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Fancy statistics and plots</li>
<li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Cool badges for readmes</li>
<li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Weekly e-mail reports</li>
<li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Intuitive REST API</li>
<li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Compatible with <a href="https://wakatime.com" target="_blank" rel="noopener noreferrer" class="underline">Wakatime</a></li>
<li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; <a href="https://prometheus.io" target="_blank" rel="noopener noreferrer" class="underline">Prometheus</a> metrics</li>
<li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Lightning fast</li>
<li title="Wakapi.dev is hosted in Germany, none of your data will leave the EU"><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; GDPR-compliant</li>
<li><span class="iconify inline text-green-700" data-icon="ant-design:check-square-filled"></span> &nbsp; Self-hosted</li>
<li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; 100 % free and open-source</li>
<li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Built by developers for developers</li>
<li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Fancy statistics and plots</li>
<li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Cool badges for readmes</li>
<li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Weekly e-mail reports</li>
<li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Intuitive REST API</li>
<li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Compatible with <a href="https://wakatime.com" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-gray-300">Wakatime</a></li>
<li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; <a href="https://prometheus.io" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-gray-300">Prometheus</a> metrics</li>
<li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Lightning fast</li>
<li title="Wakapi.dev is hosted in Germany, none of your data will leave the EU"><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; GDPR-compliant</li>
<li><span class="iconify inline text-green-700" data-icon="eva:checkmark-circle-2-fill"></span> &nbsp; Self-hosted</li>
</ul>
</div>
</div>

66
views/menu-main.tpl.html
View File

@ -24,10 +24,39 @@
</a>
</div>
<div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer">
<div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer relative" onclick="togglePopup(event, 'resources-menu-dropdown')">
<span class="iconify inline text-2xl text-gray-400" data-icon="ph:books-bold"></span>
<a class="text-gray-400">Resources</a>
<span class="iconify inline text-xl text-gray-400" data-icon="akar-icons:chevron-down"></span>
<div class="hidden flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-12 w-full" id="resources-menu-dropdown">
<div class="flex-grow flex flex-col">
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/muety/wakapi" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
<span class="text-sm">GitHub</span>
<span class="iconify inline" data-icon="codicon:github-inverted"></span>
</a>
</div>
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="swagger-ui" onclick="togglePopup(event, 'resources-menu-dropdown')">
<span class="text-sm">API Docs</span>
<span class="iconify inline" data-icon="bx:bx-code-curly"></span>
</a>
</div>
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://wakatime.com" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
<span class="text-sm">WakaTime</span>
<span class="iconify inline" data-icon="simple-icons:wakatime"></span>
</a>
</div>
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/sponsors/muety" rel="noreferrer noopener" onclick="togglePopup(event, 'resources-menu-dropdown')">
<span class="text-sm">Donate</span>
<span class="iconify inline" data-icon="bx:bxs-heart"></span>
</a>
</div>
</div>
</div>
</div>
<div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer">
@ -37,7 +66,7 @@
<div class="flex-grow"></div>
<div class="menu-item flex items-center text-sm font-semibold space-x-3 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer" onclick="showUserMenuPopup(event)">
<div class="menu-item flex items-center text-sm font-semibold space-x-3 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer relative" onclick="togglePopup(event, 'user-menu-popup')">
<div class="flex flex-col text-right">
<a class="text-gray-300">{{ .User.ID }}</a>
{{ if .User.Email }}
@ -47,26 +76,25 @@
{{ if avatarUrlTemplate }}
<img src="{{ .User.AvatarURL avatarUrlTemplate }}" width="32px" class="rounded-full border-green-700" alt="User Profile Avatar" title="Looks like you, doesn't it?"/>
{{ else }}
<span class="iconify inline cursor-pointer text-gray-500 rounded-full border-green-700" style="width: 32px; height: 32px" data-icon="ic:round-person" onclick="showUserMenuPopup(event)"></span>
<span class="iconify inline cursor-pointer text-gray-500 rounded-full border-green-700" style="width: 32px; height: 32px" data-icon="ic:round-person" onclick="togglePopup(event, 'user-menu-popup')"></span>
{{ end }}
</div>
<div class="hidden flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-14"
id="user-menu-popup" style="min-width: 156px;">
<div class="flex-grow flex flex-col">
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<button class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" onclick="showApiKeyPopup(event); hideUserMenuPopup(event)">
<span class="text-sm">Show API Key</span>
<span class="iconify inline" data-icon="fluent:key-32-filled"></span>
</button>
</div>
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<form action="logout" method="post" class="flex-grow">
<button type="submit" class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold">
<span class="text-sm">Logout</span>
<span class="iconify inline" data-icon="ls:logout"></span>
<div class="hidden flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-14 w-full" id="user-menu-popup" style="min-width: 156px;">
<div class="flex-grow flex flex-col">
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<button class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" onclick="togglePopup(event, 'api-key-popup'); togglePopup(event, 'user-menu-popup')">
<span class="text-sm">Show API Key</span>
<span class="iconify inline" data-icon="fluent:key-32-filled"></span>
</button>
</form>
</div>
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<form action="logout" method="post" class="flex-grow">
<button type="submit" class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold">
<span class="text-sm">Logout</span>
<span class="iconify inline" data-icon="ls:logout"></span>
</button>
</form>
</div>
</div>
</div>
</div>

35
views/summary.tpl.html
View File

@ -10,23 +10,23 @@
{{ if .User.HasData }}
<div class="flex justify-end mt-12 relative">
<div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer justify-end" onclick="toggleTimePickerPopup(event)">
<div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer justify-end" onclick="togglePopup(event, 'time-picker-dropdown')">
<span class="iconify inline text-2xl text-gray-400 flex-grow" data-icon="fa-regular:calendar-alt"></span>
<a id="current-time-selection" class="text-gray-300 -mb-1">{{ .From | datetime }} - {{ .To | ceildate | datetime }}</a>
<span class="iconify inline text-2xl text-gray-400" data-icon="akar-icons:chevron-down"></span>
</div>
<div class="hidden z-10 absolute top-0 right-0 popup mt-12 w-40" id="time-picker-popup">
<div class="hidden z-10 absolute top-0 right-0 popup mt-12 w-40" id="time-picker-dropdown">
<div class="flex-grow flex flex-col flex bg-gray-850 shadow-md rounded w-40 p-1 ">
<a id="time-option-today" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=today" onclick="toggleTimePickerPopup(event)">Today</a>
<a id="time-option-yesterday" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=yesterday" onclick="toggleTimePickerPopup(event)">Yesterday</a>
<a id="time-option-week" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=week" onclick="toggleTimePickerPopup(event)">This Week</a>
<a id="time-option-month" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=month" onclick="toggleTimePickerPopup(event)">This Month</a>
<a id="time-option-year" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=year" onclick="toggleTimePickerPopup(event)">This Year</a>
<a id="time-option-last_7_days" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=last_7_days" onclick="toggleTimePickerPopup(event)">Past 7 Days</a>
<a id="time-option-last_30_days" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=last_30_days" onclick="toggleTimePickerPopup(event)">Past 30 Days</a>
<a id="time-option-last_12_months" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=last_12_months" onclick="toggleTimePickerPopup(event)">Past 12 Months</a>
<a id="time-option-any" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=any" onclick="toggleTimePickerPopup(event)">All Time</a>
<a id="time-option-today" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=today" onclick="togglePopup(event, 'time-picker-dropdown')">Today</a>
<a id="time-option-yesterday" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=yesterday" onclick="togglePopup(event, 'time-picker-dropdown')">Yesterday</a>
<a id="time-option-week" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=week" onclick="togglePopup(event, 'time-picker-dropdown')">This Week</a>
<a id="time-option-month" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=month" onclick="togglePopup(event, 'time-picker-dropdown')">This Month</a>
<a id="time-option-year" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=year" onclick="togglePopup(event, 'time-picker-dropdown')">This Year</a>
<a id="time-option-last_7_days" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=last_7_days" onclick="togglePopup(event, 'time-picker-dropdown')">Past 7 Days</a>
<a id="time-option-last_30_days" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=last_30_days" onclick="togglePopup(event, 'time-picker-dropdown')">Past 30 Days</a>
<a id="time-option-last_12_months" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=last_12_months" onclick="togglePopup(event, 'time-picker-dropdown')">Past 12 Months</a>
<a id="time-option-any" class="submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href="summary?interval=any" onclick="togglePopup(event, 'time-picker-dropdown')">All Time</a>
<hr class="my-2">
<form id="time-picker-form" class="flex flex-col space-y-1">
<div class="flex flex-col space-x-1 bg-gray-900 rounded p-1 border-2 border-gray-800">
@ -82,7 +82,7 @@
<div class="flex justify-between">
<span class="font-semibold text-lg w-1/2 flex-1 whitespace-no-wrap">Projects</span>
<div class="flex justify-end flex-1 text-xs items-center">
<input type="number" min="1" id="project-top-picker" data-entity="0" class="top-picker bg-gray-800 rounded-md text-center" value="10">
<input type="number" min="1" id="project-top-picker" data-entity="0" class="top-picker bg-gray-800 rounded-md text-center w-12" value="10">
</div>
</div>
<canvas id="chart-projects" class="mt-2"></canvas>
@ -98,7 +98,7 @@
<div class="flex justify-between">
<span class="font-semibold text-lg w-1/2 flex-1 whitespace-no-wrap">Languages</span>
<div class="flex justify-end flex-1 text-xs items-center">
<input type="number" min="1" id="language-top-picker" data-entity="3" class="top-picker bg-gray-800 rounded-md text-center" value="10">
<input type="number" min="1" id="language-top-picker" data-entity="3" class="top-picker bg-gray-800 rounded-md text-center w-12" value="10">
</div>
</div>
<canvas id="chart-language" class="mt-4"></canvas>
@ -111,7 +111,7 @@
<div class="flex justify-between">
<span class="font-semibold text-lg w-1/2 flex-1 whitespace-no-wrap">Editors</span>
<div class="flex justify-end flex-1 text-xs items-center">
<input type="number" min="1" id="editor-top-picker" data-entity="2" class="top-picker bg-gray-800 rounded-md text-center" value="10">
<input type="number" min="1" id="editor-top-picker" data-entity="2" class="top-picker bg-gray-800 rounded-md text-center w-12" value="10">
</div>
</div>
<canvas id="chart-editor" class="mt-4"></canvas>
@ -131,7 +131,7 @@
<span class="font-semibold text-lg w-1/2 flex-1 whitespace-no-wrap ml-1 cursor-pointer text-gray-600" onclick="swapCharts('machine', 'os')">Machines</span>
</div>
<div class="flex justify-end flex-1 text-xs items-center">
<input type="number" min="1" id="os-top-picker" data-entity="1" class="top-picker bg-gray-800 rounded-md text-center" value="10">
<input type="number" min="1" id="os-top-picker" data-entity="1" class="top-picker bg-gray-800 rounded-md text-center w-12" value="10">
</div>
</div>
<canvas id="chart-os" class="mt-4"></canvas>
@ -148,7 +148,7 @@
<span class="font-semibold text-lg w-1/2 flex-1 whitespace-no-wrap ml-1 cursor-pointer">Machines</span>
</div>
<div class="flex justify-end flex-1 text-xs items-center">
<input type="number" min="1" id="machine-top-picker" data-entity="4" class="top-picker bg-gray-800 rounded-md text-center" value="10">
<input type="number" min="1" id="machine-top-picker" data-entity="4" class="top-picker bg-gray-800 rounded-md text-center w-12" value="10">
</div>
</div>
<canvas id="chart-machine" class="mt-4"></canvas>
@ -165,8 +165,7 @@
<span class="iconify inline" data-icon="twemoji:gear"></span>
</a>
<div class="flex justify-end flex-1 text-xs items-center">
<label for="label-top-picker" class="mr-1">Show:&nbsp;</label>
<input type="number" min="1" id="label-top-picker" data-entity="5" class="top-picker bg-gray-800 rounded-md text-center" value="10">
<input type="number" min="1" id="label-top-picker" data-entity="5" class="top-picker bg-gray-800 rounded-md text-center w-12" value="10">
</div>
</div>
<canvas id="chart-label" class="mt-4"></canvas>