2020-02-20 16:28:55 +03:00
< html >
< head >
2020-02-20 17:39:56 +03:00
< title > Wakapi – < / title >
2020-02-20 18:05:08 +03:00
< base href = "/" >
2020-02-20 17:39:56 +03:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" / >
2020-02-20 16:28:55 +03:00
< link rel = "icon" data-emoji = "📊" type = "image/png" >
2020-02-20 17:39:56 +03:00
< link href = "https://fonts.googleapis.com/css?family=Roboto&display=swap" rel = "stylesheet" >
< link href = "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel = "stylesheet" >
2020-02-20 17:57:09 +03:00
< link href = "assets/app.css" rel = "stylesheet" >
2020-02-20 16:28:55 +03:00
< / head >
2020-03-31 11:47:22 +03:00
< body class = "bg-gray-800 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-xl mx-auto justify-center" >
2020-02-20 17:39:56 +03:00
< div class = "flex items-center justify-center" >
< h1 class = "font-semibold text-2xl text-white m-0 border-b-4 border-green-700" > Your Coding Statistics 🤓< / h1 >
2020-02-20 16:28:55 +03:00
< / div >
2020-02-20 17:39:56 +03:00
< div class = "text-white text-sm flex items-center justify-center mt-4" >
2020-02-20 17:57:09 +03:00
< a href = "?interval=today" class = "m-1 border-b border-green-700" > Today (live)< / a >
< a href = "?interval=day" class = "m-1 border-b border-green-700" > Yesterday< / a >
< a href = "?interval=week" class = "m-1 border-b border-green-700" > This Week< / a >
< a href = "?interval=month" class = "m-1 border-b border-green-700" > This Month< / a >
< a href = "?interval=year" class = "m-1 border-b border-green-700" > This Year< / a >
< a href = "?interval=any" class = "m-1 border-b border-green-700" > All Time< / a >
2020-02-20 16:28:55 +03:00
< / div >
2020-03-31 11:47:22 +03:00
< main class = "mt-10 flex-grow" id = "grid-container" >
2020-02-20 17:39:56 +03:00
< div class = "flex justify-center" >
< div class = "p-1" >
< div class = "flex justify-center p-4 bg-white rounded shadow" >
< p class = "mx-2" > < strong > ▶️< / strong > < span title = "Start Time" > {{ .FromTime | date }}< / span > < / p >
< p class = "mx-2" > < strong > ⏹< / strong > < span title = "End Time" > {{ .ToTime | date }}< / span > < / p >
< p class = "mx-2" > < strong > ⏱< / strong > < span id = "total-span" title = "Total Hours" > < / span > < / p >
< / div >
< / div >
< / div >
< div class = "flex flex-wrap justify-center" >
< div class = "w-full lg:w-1/2 p-1" >
2020-03-31 11:47:22 +03:00
< div class = "p-4 bg-white rounded shadow m-2" id = "projects-container" style = "height: 300px" >
2020-02-20 17:39:56 +03:00
< canvas id = "chart-projects" > < / canvas >
< / div >
< / div >
< div class = "w-full lg:w-1/2 p-1" >
2020-03-31 11:47:22 +03:00
< div class = "p-4 bg-white rounded shadow m-2" id = "os-container" style = "height: 300px" >
2020-02-20 17:39:56 +03:00
< canvas id = "chart-os" > < / canvas >
< / div >
< / div >
< div class = "w-full lg:w-1/2 p-1" >
2020-03-31 11:47:22 +03:00
< div class = "p-4 bg-white rounded shadow m-2 relative" id = "language-container" style = "height: 300px" >
< canvas id = "chart-language" > < / canvas >
2020-02-20 17:39:56 +03:00
< / div >
< / div >
< div class = "w-full lg:w-1/2 p-1" >
2020-03-31 11:47:22 +03:00
< div class = "p-4 bg-white rounded shadow m-2" id = "editor-container" style = "height: 300px" >
< canvas id = "chart-editor" > < / canvas >
2020-02-20 17:39:56 +03:00
< / div >
< / div >
< / div >
< / main >
< footer class = "w-full text-center text-gray-300 text-xs mt-12" >
2020-03-31 13:22:17 +03:00
Made 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 > .
2020-02-20 17:39:56 +03:00
< / footer >
2020-02-20 16:28:55 +03:00
2020-02-20 17:39:56 +03:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.4/seedrandom.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js" > < / script >
2020-02-20 16:28:55 +03:00
2020-02-20 17:39:56 +03:00
< script >
let wakapiData = {}
2020-03-31 12:24:44 +03:00
let languageColors = {{ .LanguageColors | json }}
wakapiData.projects = {{ .Projects | json }}
2020-02-20 17:39:56 +03:00
wakapiData.operatingSystems = {{ .OperatingSystems | json }}
wakapiData.editors = {{ .Editors | json }}
wakapiData.languages = {{ .Languages | json }}
< / script >
2020-02-20 17:57:09 +03:00
< script src = "assets/app.js" > < / script >
2020-02-20 16:28:55 +03:00
< / body >
< / html >
