diff --git a/data/colors.json b/data/colors.json index 6151c59..4d0e2bc 100644 --- a/data/colors.json +++ b/data/colors.json @@ -243,83 +243,5 @@ "Zephir": "#118f9e", "Zig": "#ec915c", "ZIL": "#dc75e5" - }, - "editors": { - "Android Studio": "#99cd00", - "AppCode": "#04dbde", - "Aptana": "#ec8623", - "Atom": "#49b77e", - "Azure Data Studio": "#0271c6", - "Blender": "#fb8007", - "Brackets": "#067dc3", - "Chrome": "#fdd308", - "CLion": "#14c9a5", - "Cloud9": "#25a6d9", - "Coda": "#3e8e1c", - "CodeTasty": "#7368a8", - "DataGrip": "#907cf2", - "DBeaver": "#897363", - "Eclipse": "#443582", - "Emacs": "#8c76c3", - "Eric": "#423f13", - "Excel": "#0f753c", - "Flash Builder": "#aca3a4", - "Gedit": "#872114", - "GoLand": "#bd4ffc", - "HBuilder X": "#1ba334", - "IntelliJ IDEA": "#237ce2", - "IntelliJ": "#237ce2", - "Kakoune": "#dd5f4a", - "Kate": "#3f4040", - "Komodo": "#fcb414", - "Micro": "#2c3494", - "MonoDevelop": "#6185b3", - "NetBeans": "#f1f6e2", - "Notepad++": "#9ecf54", - "Nova": "#ff054a", - "Onivim": "#ee848e", - "PhpStorm": "#d93ac1", - "PowerPoint": "#c6421f", - "Processing": "#6a7152", - "PyCharm": "#d2ee5c", - "Pymakr": "#323d4f", - "Rider": "#f7a415", - "RubyMine": "#ff6336", - "Sketch": "#fdad00", - "SlickEdit": "#57ca57", - "SQL Server Management Studio": "#ffb901", - "Sublime Text": "#ff9800", - "Terminal": "#133f1c", - "TeXstudio": "#652d96", - "TextMate": "#822b7a", - "Unity": "#222d36", - "Vim": "#068304", - "Visual Studio": "#9460cd", - "VS Code": "#027acd", - "VSCode": "#027acd", - "WebStorm": "#00c6d7", - "Word": "#0f4091", - "WPS Office": "#fc6143", - "Xamarin": "#3598db", - "Xcode": "#3fa7e4", - "Adobe XD": "#fd27bc", - "Code::Blocks": "#d0ce71", - "Embarcadero Delphi": "#d9242a", - "EmEditor": "#ed3103", - "Figma": "#c7b9ff", - "Firefox": "#d96527", - "Geany": "#fbec75", - "Light Table": "#007ac1", - "MacRabbit Espresso": "#e6593f", - "MySQL Workbench": "#245279", - "Photoshop": "#0a0054", - "QtCreator": "#7fc342", - "RStudio": "#2369c7", - "WebMatrix": "#aeaeae" - }, - "operating_systems": { - "Linux": "#f0b912", - "Windows": "#00b7ee", - "Mac": "#4d66cb" } } \ No newline at end of file diff --git a/models/summary.go b/models/summary.go index e9cfcc0..bc5548e 100644 --- a/models/summary.go +++ b/models/summary.go @@ -55,8 +55,6 @@ type SummaryViewModel struct { User *User AvatarURL string LanguageColors map[string]string - EditorColors map[string]string - OSColors map[string]string Error string Success string ApiKey string @@ -225,6 +223,27 @@ func (s *Summary) TotalTimeByFilters(filters *Filters) time.Duration { return 0 } +func (s *Summary) MaxBy(entityType uint8) *SummaryItem { + var max *SummaryItem + mappedItems := s.MappedItems() + if items := mappedItems[entityType]; len(*items) > 0 { + for _, item := range *items { + if max == nil || item.Total > max.Total { + max = item + } + } + } + return max +} + +func (s *Summary) MaxByToString(entityType uint8) string { + max := s.MaxBy(entityType) + if max == nil { + return "-" + } + return max.Key +} + func (s *Summary) WithResolvedAliases(resolve AliasResolver) *Summary { processAliases := func(origin []*SummaryItem) []*SummaryItem { target := make([]*SummaryItem, 0) diff --git a/routes/summary.go b/routes/summary.go index e18a84a..fd4deed 100644 --- a/routes/summary.go +++ b/routes/summary.go @@ -66,8 +66,6 @@ func (h *SummaryHandler) GetIndex(w http.ResponseWriter, r *http.Request) { SummaryParams: summaryParams, User: user, LanguageColors: utils.FilterColors(h.config.App.GetLanguageColors(), summary.Languages), - EditorColors: utils.FilterColors(h.config.App.GetEditorColors(), summary.Editors), - OSColors: utils.FilterColors(h.config.App.GetOSColors(), summary.OperatingSystems), ApiKey: user.ApiKey, RawQuery: rawQuery, } diff --git a/scripts/bundle_icons.js b/scripts/bundle_icons.js index 369e2f7..296f951 100755 --- a/scripts/bundle_icons.js +++ b/scripts/bundle_icons.js @@ -33,7 +33,18 @@ let icons = [ 'eva:corner-right-down-fill', 'bi:heart-fill', 'fxemoji:running', - 'ic:round-person' + 'ic:round-person', + 'bx:bxs-bar-chart-alt-2', + 'bi:people-fill', + 'fluent:data-bar-horizontal-24-filled', + 'ic:round-dashboard', + 'ci:settings-filled', + 'akar-icons:chevron-down', + 'ls:logout', + 'fluent:key-32-filled', + 'majesticons:clipboard-copy', + 'fa-regular:calendar-alt', + 'ph:books-bold' ] const output = path.normalize(path.join(__dirname, '../static/assets/icons.js')) diff --git a/static/assets/app.css b/static/assets/app.css index b42a0af..25ca624 100644 --- a/static/assets/app.css +++ b/static/assets/app.css @@ -6,7 +6,20 @@ body { background-color: #242b3a; } +.hover\:bg-gray-850:hover { + --bg-opacity: 1; + background-color: #242b3a; +} + ::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; +} + +.text-xxs { + font-size: 0.65rem; +} + +.mt-14 { + margin-top: 3.5rem; } \ No newline at end of file diff --git a/static/assets/app.js b/static/assets/app.js index 6810257..35410b8 100644 --- a/static/assets/app.js +++ b/static/assets/app.js @@ -1,4 +1,11 @@ -const CHART_TARGET_SIZE = 200 +const LEGEND_MAX_ENTRIES = 9 +// dirty hack to vertically align legends across multiple charts +// however, without monospace font, it's still not perfectly aligned +// waiting for https://github.com/chartjs/Chart.js/discussions/9890 +const LEGEND_CHARACTERS = 20 + +// https://hihayk.github.io/scale/#4/6/50/80/-51/67/20/14/276749/39/103/73/white +const baseColors = [ '#112836', '#163B43', '#1C4F4D', '#215B4C', '#276749', '#437C57', '#5F9167', '#7DA67C', '#9FBA98', '#BFCEB5', '#DCE2D3' ] const projectsCanvas = document.getElementById('chart-projects') const osCanvas = document.getElementById('chart-os') @@ -30,9 +37,8 @@ let charts = [] let showTopN = [] let resizeCount = 0 -charts.color = "#E2E8F0" -charts.borderColor = "#E2E8F0" -charts.backgroundColor = "#E2E8F0" +Chart.defaults.color = "#E2E8F0" +Chart.defaults.borderColor = "#242b3a" String.prototype.toHHMMSS = function () { const sec_num = parseInt(this, 10) @@ -52,15 +58,6 @@ String.prototype.toHHMMSS = function () { return `${hours}:${minutes}:${seconds}` } -String.prototype.toHHMM = function () { - const sec_num = parseInt(this, 10) - const hours = Math.floor(sec_num / 3600) - const minutes = Math.floor((sec_num - (hours * 3600)) / 60) - return `${hours}:${minutes}` -} - - - function draw(subselection) { function getTooltipOptions(key) { return { @@ -74,6 +71,12 @@ function draw(subselection) { } } + function filterLegendItem(item) { + item.text = item.text.length > LEGEND_CHARACTERS ? item.text.slice(0, LEGEND_CHARACTERS - 3).padEnd(LEGEND_CHARACTERS, '.') : item.text + item.text = item.text.padEnd(LEGEND_CHARACTERS + 3) + return item.index < LEGEND_MAX_ENTRIES + } + function shouldUpdate(index) { return !subselection || (subselection.includes(index) && data[index].length >= showTopN[index]) } @@ -91,19 +94,14 @@ function draw(subselection) { data: wakapiData.projects .slice(0, Math.min(showTopN[0], wakapiData.projects.length)) .map(p => parseInt(p.total)), - backgroundColor: wakapiData.projects.map(p => { - const c = hexToRgb(getRandomColor(p.key)) - return `rgba(${c.r}, ${c.g}, ${c.b}, 0.6)` - }), - hoverBackgroundColor: wakapiData.projects.map(p => { - const c = hexToRgb(getRandomColor(p.key)) - return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` - }), - borderColor: wakapiData.projects.map(p => { - const c = hexToRgb(getRandomColor(p.key)) + backgroundColor: wakapiData.projects.map((p, i) => { + const c = hexToRgb(getColor(p.key, i % baseColors.length)) return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` }), - borderWidth: 2 + hoverBackgroundColor: wakapiData.projects.map((p, i) => { + const c = hexToRgb(getColor(p.key, i % baseColors.length)) + return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` + }), }], labels: wakapiData.projects .slice(0, Math.min(showTopN[0], wakapiData.projects.length)) @@ -115,7 +113,7 @@ function draw(subselection) { xAxes: { title: { display: true, - text: 'Duration (hh:mm:ss)' + text: 'Duration (hh:mm:ss)', }, ticks: { callback: (label) => label.toString().toHHMMSS(), @@ -124,12 +122,11 @@ function draw(subselection) { }, plugins: { legend: { - display: false + display: false, }, tooltip: getTooltipOptions('projects'), }, maintainAspectRatio: false, - onResize: onChartResize } }) : null @@ -142,18 +139,15 @@ function draw(subselection) { data: wakapiData.operatingSystems .slice(0, Math.min(showTopN[1], wakapiData.operatingSystems.length)) .map(p => parseInt(p.total)), - backgroundColor: wakapiData.operatingSystems.map(p => { - const c = hexToRgb(osColors[p.key.toLowerCase()] || getRandomColor(p.key)) - return `rgba(${c.r}, ${c.g}, ${c.b}, 0.6)` - }), - hoverBackgroundColor: wakapiData.operatingSystems.map(p => { - const c = hexToRgb(osColors[p.key.toLowerCase()] || getRandomColor(p.key)) - return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` - }), - borderColor: wakapiData.operatingSystems.map(p => { - const c = hexToRgb(osColors[p.key.toLowerCase()] || getRandomColor(p.key)) + backgroundColor: wakapiData.operatingSystems.map((p, i) => { + const c = hexToRgb(getColor(p.key, i)) return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` }), + hoverBackgroundColor: wakapiData.operatingSystems.map((p, i) => { + const c = hexToRgb(getColor(p.key, i)) + return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` + }), + borderWidth: 0 }], labels: wakapiData.operatingSystems .slice(0, Math.min(showTopN[1], wakapiData.operatingSystems.length)) @@ -162,9 +156,14 @@ function draw(subselection) { options: { plugins: { tooltip: getTooltipOptions('operatingSystems'), + legend: { + position: 'right', + labels: { + filter: filterLegendItem + }, + }, }, maintainAspectRatio: false, - onResize: onChartResize } }) : null @@ -177,18 +176,15 @@ function draw(subselection) { data: wakapiData.editors .slice(0, Math.min(showTopN[2], wakapiData.editors.length)) .map(p => parseInt(p.total)), - backgroundColor: wakapiData.editors.map(p => { - const c = hexToRgb(editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) - return `rgba(${c.r}, ${c.g}, ${c.b}, 0.6)` - }), - hoverBackgroundColor: wakapiData.editors.map(p => { - const c = hexToRgb(editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) - return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` - }), - borderColor: wakapiData.editors.map(p => { - const c = hexToRgb(editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) + backgroundColor: wakapiData.editors.map((p, i) => { + const c = hexToRgb(getColor(p.key, i)) return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` }), + hoverBackgroundColor: wakapiData.editors.map((p, i) => { + const c = hexToRgb(getColor(p.key, i)) + return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` + }), + borderWidth: 0 }], labels: wakapiData.editors .slice(0, Math.min(showTopN[2], wakapiData.editors.length)) @@ -197,9 +193,14 @@ function draw(subselection) { options: { plugins: { tooltip: getTooltipOptions('editors'), + legend: { + position: 'right', + labels: { + filter: filterLegendItem + }, + }, }, maintainAspectRatio: false, - onResize: onChartResize } }) : null @@ -214,16 +215,13 @@ function draw(subselection) { .map(p => parseInt(p.total)), backgroundColor: wakapiData.languages.map(p => { const c = hexToRgb(languageColors[p.key.toLowerCase()] || getRandomColor(p.key)) - return `rgba(${c.r}, ${c.g}, ${c.b}, 0.6)` + return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` }), hoverBackgroundColor: wakapiData.languages.map(p => { const c = hexToRgb(languageColors[p.key.toLowerCase()] || getRandomColor(p.key)) return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` }), - borderColor: wakapiData.languages.map(p => { - const c = hexToRgb(languageColors[p.key.toLowerCase()] || getRandomColor(p.key)) - return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` - }), + borderWidth: 0 }], labels: wakapiData.languages .slice(0, Math.min(showTopN[3], wakapiData.languages.length)) @@ -232,9 +230,17 @@ function draw(subselection) { options: { plugins: { tooltip: getTooltipOptions('languages'), + legend: { + position: 'right', + labels: { + filter: filterLegendItem + }, + title: { + display: true, + } + }, }, maintainAspectRatio: false, - onResize: onChartResize } }) : null @@ -247,18 +253,15 @@ function draw(subselection) { data: wakapiData.machines .slice(0, Math.min(showTopN[4], wakapiData.machines.length)) .map(p => parseInt(p.total)), - backgroundColor: wakapiData.machines.map(p => { - const c = hexToRgb(getRandomColor(p.key)) - return `rgba(${c.r}, ${c.g}, ${c.b}, 0.6)` - }), - hoverBackgroundColor: wakapiData.machines.map(p => { - const c = hexToRgb(getRandomColor(p.key)) - return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` - }), - borderColor: wakapiData.machines.map(p => { - const c = hexToRgb(getRandomColor(p.key)) + backgroundColor: wakapiData.machines.map((p, i) => { + const c = hexToRgb(getColor(p.key, i)) return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` }), + hoverBackgroundColor: wakapiData.machines.map((p, i) => { + const c = hexToRgb(getColor(p.key, i)) + return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` + }), + borderWidth: 0 }], labels: wakapiData.machines .slice(0, Math.min(showTopN[4], wakapiData.machines.length)) @@ -267,9 +270,14 @@ function draw(subselection) { options: { plugins: { tooltip: getTooltipOptions('machines'), + legend: { + position: 'right', + labels: { + filter: filterLegendItem + }, + }, }, maintainAspectRatio: false, - onResize: onChartResize } }) : null @@ -282,18 +290,15 @@ function draw(subselection) { data: wakapiData.labels .slice(0, Math.min(showTopN[5], wakapiData.labels.length)) .map(p => parseInt(p.total)), - backgroundColor: wakapiData.labels.map(p => { - const c = hexToRgb(getRandomColor(p.key)) - return `rgba(${c.r}, ${c.g}, ${c.b}, 0.6)` - }), - hoverBackgroundColor: wakapiData.labels.map(p => { - const c = hexToRgb(getRandomColor(p.key)) - return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` - }), - borderColor: wakapiData.labels.map(p => { - const c = hexToRgb(getRandomColor(p.key)) + backgroundColor: wakapiData.labels.map((p, i) => { + const c = hexToRgb(getColor(p.key, i)) return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` }), + hoverBackgroundColor: wakapiData.labels.map((p, i) => { + const c = hexToRgb(getColor(p.key, i)) + return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` + }), + borderWidth: 0 }], labels: wakapiData.labels .slice(0, Math.min(showTopN[5], wakapiData.labels.length)) @@ -302,26 +307,24 @@ function draw(subselection) { options: { plugins: { tooltip: getTooltipOptions('labels'), + legend: { + position: 'right', + labels: { + filter: filterLegendItem + }, + }, }, maintainAspectRatio: false, - onResize: onChartResize } }) : null - getTotal(wakapiData.operatingSystems) - charts[0] = projectChart ? projectChart : charts[0] charts[1] = osChart ? osChart : charts[1] charts[2] = editorChart ? editorChart : charts[2] charts[3] = languageChart ? languageChart : charts[3] charts[4] = machineChart ? machineChart : charts[4] charts[5] = labelChart ? labelChart : charts[5] - - if (!subselection) { - charts.forEach(c => c.options.onResize(c)) - equalizeHeights() - } } function parseTopN() { @@ -354,45 +357,9 @@ function getContainer(chart) { return chart.canvas.parentNode } -function onChartResize(chart) { - let container = getContainer(chart) - let targetHeight = Math.min(chart.width, CHART_TARGET_SIZE) -// let actualHeight = chart.height - chart.chartArea.top - let actualHeight = chart.height - chart.top - let containerTargetHeight = container.clientHeight += (targetHeight - actualHeight) - container.style.height = parseInt(containerTargetHeight) + 'px' - - resizeCount++ - watchEqualize() -} - -function watchEqualize() { - if (resizeCount === charts.length) { - equalizeHeights() - resizeCount = 0 - } -} - -function equalizeHeights() { - let maxHeight = 0 - charts.forEach(c => { - let container = getContainer(c) - if (maxHeight < container.clientHeight) { - maxHeight = container.clientHeight - } - }) - charts.forEach(c => { - let container = getContainer(c) - container.style.height = parseInt(maxHeight) + 'px' - }) -} - -function getTotal(items) { - const el = document.getElementById('total-span') - if (!el) return - const total = items.reduce((acc, d) => acc + d.total, 0) - const formatted = total.toString().toHHMM() - el.innerText = `${formatted.split(':')[0]} hours, ${formatted.split(':')[1]} minutes` +function getColor(seed, index) { + if (index < baseColors.length) return baseColors[(index + 5) % baseColors.length] + return getRandomColor(seed) } function getRandomColor(seed) { @@ -427,6 +394,25 @@ function showUserMenuPopup(event) { 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') + if (el.classList.contains('hidden')) { + el.classList.remove('hidden') + el.classList.add('block') + } else { + el.classList.add('hidden') + el.classList.remove('block') + } + event.stopPropagation() +} + function showApiKeyPopup(event) { const el = document.getElementById('api-key-popup') el.classList.remove('hidden') @@ -442,6 +428,27 @@ function copyApiKey(event) { event.stopPropagation() } +function submitTimePicker(event) { + const el = document.getElementById('time-picker-form') + el.submit() +} + +function swapCharts(showEntity, hideEntity) { + document.getElementById(`${showEntity}-container`).parentElement.classList.remove('hidden') + document.getElementById(`${hideEntity}-container`).parentElement.classList.add('hidden') +} + +function updateTimeSelection() { + const query = new URLSearchParams(window.location.search) + if (query.has('interval')) { + const targetEl = document.getElementById('current-time-selection') + const refEl = document.getElementById(`time-option-${query.get('interval')}`) + targetEl.innerText = refEl ? refEl.innerText : 'Unknown' + } +} + + + // Click outside window.addEventListener('click', function (event) { if (event.target.classList.contains('popup')) { @@ -454,6 +461,8 @@ window.addEventListener('click', function (event) { }) window.addEventListener('load', function () { + updateTimeSelection() + topNPickers.forEach(e => e.addEventListener('change', () => { parseTopN() draw([parseInt(e.attributes['data-entity'].value)]) diff --git a/static/assets/icons.js b/static/assets/icons.js index 0809245..613bcff 100644 --- a/static/assets/icons.js +++ b/static/assets/icons.js @@ -4,7 +4,15 @@ Iconify.addCollection({"prefix":"codicon","icons":{"github-inverted":{"body":""}},"width":1024,"height":1024}); Iconify.addCollection({"prefix":"emojione-v1","icons":{"white-heavy-check-mark":{"body":""},"alarm-clock":{"body":""},"warning":{"body":""},"backhand-index-pointing-right":{"body":""}},"width":64,"height":64}); Iconify.addCollection({"prefix":"twemoji","icons":{"light-bulb":{"body":""},"gear":{"body":""}},"width":36,"height":36}); -Iconify.addCollection({"prefix":"noto","icons":{"play-button":{"body":""},"stop-button":{"body":""}},"width":128,"height":128}); +Iconify.addCollection({"prefix":"noto","icons":{"play-button":{"body":""},"stop-button":{"body":""}},"width":128,"height":128}); Iconify.addCollection({"prefix":"eva","icons":{"corner-right-down-fill":{"body":""}},"width":24,"height":24}); -Iconify.addCollection({"prefix":"bi","icons":{"heart-fill":{"body":""}},"width":16,"height":16}); -Iconify.addCollection({"prefix":"ic","icons":{"round-person":{"body":""}},"width":24,"height":24}); +Iconify.addCollection({"prefix":"bi","icons":{"heart-fill":{"body":""},"people-fill":{"body":""}},"width":16,"height":16}); +Iconify.addCollection({"prefix":"ic","icons":{"round-person":{"body":""},"round-dashboard":{"body":""}},"width":24,"height":24}); +Iconify.addCollection({"prefix":"bx","icons":{"bxs-bar-chart-alt-2":{"body":""}},"width":24,"height":24}); +Iconify.addCollection({"prefix":"fluent","icons":{"data-bar-horizontal-24-filled":{"body":""},"key-32-filled":{"body":"","width":32,"height":32}},"width":24,"height":24}); +Iconify.addCollection({"prefix":"ci","icons":{"settings-filled":{"body":""}},"width":24,"height":24}); +Iconify.addCollection({"prefix":"akar-icons","icons":{"chevron-down":{"body":""}},"width":24,"height":24}); +Iconify.addCollection({"prefix":"ls","icons":{"logout":{"body":"","height":672}},"width":717,"height":717,"inlineHeight":1086,"inlineTop":-205,"verticalAlign":-0.2}); +Iconify.addCollection({"prefix":"majesticons","icons":{"clipboard-copy":{"body":""}},"width":24,"height":24}); +Iconify.addCollection({"prefix":"fa-regular","icons":{"calendar-alt":{"body":"","width":448}},"width":512,"height":512}); +Iconify.addCollection({"prefix":"ph","icons":{"books-bold":{"body":""}},"width":256,"height":256}); diff --git a/static/assets/images/unknown.svg b/static/assets/images/unknown.svg new file mode 100644 index 0000000..59ab100 --- /dev/null +++ b/static/assets/images/unknown.svg @@ -0,0 +1,46 @@ + + + + + + + + diff --git a/views/header.tpl.html b/views/header.tpl.html index 8299314..6fb81a5 100644 --- a/views/header.tpl.html +++ b/views/header.tpl.html @@ -1,5 +1,3 @@
- - Logo - + {{ template "logo.tpl.html" . }}
\ No newline at end of file diff --git a/views/imprint.tpl.html b/views/imprint.tpl.html index b6fc42e..7211f71 100644 --- a/views/imprint.tpl.html +++ b/views/imprint.tpl.html @@ -3,7 +3,7 @@ {{ template "head.tpl.html" . }} - + {{ template "header.tpl.html" . }} diff --git a/views/index.tpl.html b/views/index.tpl.html index 0ef5a0c..f68cd14 100644 --- a/views/index.tpl.html +++ b/views/index.tpl.html @@ -3,7 +3,7 @@ {{ template "head.tpl.html" . }} - + {{ template "header.tpl.html" . }} @@ -11,17 +11,17 @@
- +  Login️
-
+

Keep Track of Your Coding Time

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. Ideal for + time you have spent coding on different projects in different programming languages and more.
Ideal for statistics freaks and anyone else.

@@ -39,19 +39,19 @@

- - - diff --git a/views/login.tpl.html b/views/login.tpl.html index 4972f2e..4236c06 100644 --- a/views/login.tpl.html +++ b/views/login.tpl.html @@ -3,44 +3,38 @@ {{ template "head.tpl.html" . }} - + {{ template "header.tpl.html" . }} -
-
- -

Login

-
-
-
- {{ template "alerts.tpl.html" . }}
+
+

Welcome!

+ Log in to continue using Wakapi +
-
- - + + name="username" placeholder="Username" minlength="1" required autofocus>
-
- - + + name="password" placeholder="Password" minlength="6" required>
- + Forgot password?
- + - +
diff --git a/views/logo.tpl.html b/views/logo.tpl.html new file mode 100644 index 0000000..dfdda4e --- /dev/null +++ b/views/logo.tpl.html @@ -0,0 +1,3 @@ + + Logo + \ No newline at end of file diff --git a/views/menu-main.tpl.html b/views/menu-main.tpl.html new file mode 100644 index 0000000..1cff1a2 --- /dev/null +++ b/views/menu-main.tpl.html @@ -0,0 +1,84 @@ +
+
+ {{ template "logo.tpl.html" }} +
+ +
+ + Dashboard +
+ +
+ + + Team
+ (coming soon) + +
+ +
+ + + Leaderboard
+ (coming soon) + +
+ +
+ + Resources + +
+ +
+ + Settings +
+ +
+ +
+
+ {{ .User.ID }} + {{ if .User.Email }} + {{ .User.Email }} + {{ end }} +
+ {{ if avatarUrlTemplate }} + User Profile Avatar + {{ else }} + + {{ end }} +
+ + + + +
\ No newline at end of file diff --git a/views/reset-password.tpl.html b/views/reset-password.tpl.html index aea3e77..483ba1b 100644 --- a/views/reset-password.tpl.html +++ b/views/reset-password.tpl.html @@ -3,7 +3,7 @@ {{ template "head.tpl.html" . }} - + {{ template "header.tpl.html" . }} diff --git a/views/set-password.tpl.html b/views/set-password.tpl.html index df37b1e..27d0b30 100644 --- a/views/set-password.tpl.html +++ b/views/set-password.tpl.html @@ -3,7 +3,7 @@ {{ template "head.tpl.html" . }} - + {{ template "header.tpl.html" . }} diff --git a/views/settings.tpl.html b/views/settings.tpl.html index 5c56a69..a001b81 100644 --- a/views/settings.tpl.html +++ b/views/settings.tpl.html @@ -4,7 +4,7 @@ {{ template "head.tpl.html" . }} - +