v0.3.0

.gitignore

@@ -1,3 +1,4 @@
 .idea/**
 holiday-api
-.env
+.env
+**/.DS_Store

assets/documentation.js

@@ -11,17 +11,15 @@ window.addEventListener('load', () => {
     }
 
     function generateQuery(query) {
-        initialQuery = `curl -H "accept: ${query['contentType']}" "https://holiday.bbr-dev.info/api/v1/holidays?country=${query['country']}`
+        initialQuery = `https://holiday.bbr-dev.info/api/v1/holidays?country=${query['country']}`
 
-        delete query['contentType'];
         delete query['country'];
 
         for(const key in query) {
             initialQuery += `&${key}=${query[key]}`
         }
-        initialQuery+='"';
+        document.querySelector('#query-link').href = initialQuery;
-
+        document.querySelector('#result-content').innerHTML = "curl \"" + initialQuery + "\"";
-        document.querySelector('#result-content').innerHTML = initialQuery;
     }
 
     let country = document.querySelector("#country");
@@ -36,10 +34,8 @@ window.addEventListener('load', () => {
     let dDate = document.querySelector("#dsd-date");
 
     let dStartRange = document.querySelector("#dsr-start-range");
-    let dStartRangeRequired = document.querySelector("#dsr-start-range-required");
 
     let dEndRange = document.querySelector("#dsr-end-range");
-    let dEndRangeRequired = document.querySelector("#dsr-end-range-required");
 
     let queryGenerator = document.querySelector("#query-generator");
 
@@ -53,6 +49,7 @@ window.addEventListener('load', () => {
         if(religiousHoliday.value === 'true' || religiousHoliday.value === 'false') {
             query['religiousHoliday'] = parseBoolean(religiousHoliday.value);
         }
+        console.log(dateSelector.value,  dStartRange.value,  dEndRange.value);
         switch(dateSelector.value) {
             case 'year':
                 query['year'] = dYear.value;
@@ -63,10 +60,10 @@ window.addEventListener('load', () => {
                 }
                 break;
             case 'range':
-                if(dStartRangeRequired.checked && dStartRange.value) {
+                if(dStartRange.value) {
                     query['startRange'] = dStartRange.value;
                 }
-                if(dEndRangeRequired.checked && dEndRange.value) {
+                if(dEndRange.value) {
                     query['endRange'] = dEndRange.value;
                 }
             case 'all':
@@ -79,13 +76,14 @@ window.addEventListener('load', () => {
     queryGenerator.addEventListener('change', event => {
         const query = {};
         query['country'] = country.value;
-        query['contentType'] = contentType.value;
+        query['type'] = contentType.value;
         if(stateHoliday.value === 'true' || stateHoliday.value === 'false') {
             query['stateHoliday'] = parseBoolean(stateHoliday.value);
         }
         if(religiousHoliday.value === 'true' || religiousHoliday.value === 'false') {
             query['religiousHoliday'] = parseBoolean(religiousHoliday.value);
         }
+        console.log(dateSelector.value,  dStartRange.value,  dEndRange.value);
         switch(dateSelector.value) {
             case 'year':
                 query['year'] = dYear.value;
@@ -96,10 +94,10 @@ window.addEventListener('load', () => {
                 }
                 break;
             case 'range':
-                if(dStartRangeRequired.checked && dStartRange.value) {
+                if(dStartRange.value) {
                     query['startRange'] = dStartRange.value;
                 }
-                if(dEndRangeRequired.checked && dEndRange.value) {
+                if(dEndRange.value) {
                     query['endRange'] = dEndRange.value;
                 }
             case 'all':

assets/global.css

@@ -0,0 +1,396 @@
+body {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+main {
+    background: #f3ebe6;
+    width: 640px;
+    max-width: 100%;
+    position: relative;
+}
+
+header {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 1em;
+    background: white;
+    position: sticky;
+    z-index: 10;
+    top: 0;
+    border-bottom: 1px solid #dddddd;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 1em;
+}
+
+.dialog {
+    box-sizing: border-box;
+    border: 1px solid #e0e0e0;
+    background: white;
+    margin: auto;
+    padding: 1em 0.5em;
+}
+
+
+@media screen and (min-width: 480px) {
+    .dialog {
+        padding: 1em 2em;
+    }
+}
+
+
+.background-image {
+    min-width: 100vw;
+    min-height: 100dvh;
+
+    max-width: 100vw;
+    max-height: 100dvh;
+
+    background: url("/assets/background.jpg");
+    background-position: bottom;
+    background-size: cover;
+}
+
+@font-face {
+    font-family: Quicksand;
+    src: url(fonts/Quicksand-Light.ttf);
+    font-weight: 100 200;
+}
+@font-face {
+    font-family: Quicksand;
+    src: url(fonts/Quicksand-Medium.ttf);
+    font-weight: 300 300;
+}
+@font-face {
+    font-family: Quicksand;
+    src: url(fonts/Quicksand-Regular.ttf);
+    font-weight: 400 500;
+}
+@font-face {
+    font-family: Quicksand;
+    src: url(fonts/Quicksand-Bold.ttf);
+    font-weight: 800 900;
+}
+@font-face {
+    font-family: Quicksand;
+    src: url(fonts/Quicksand-SemiBold.ttf);
+    font-weight: 600 700;
+}
+
+* {
+    font-family: Quicksand, Arial, sans-serif;
+}
+
+h1 {
+    font-size: 1.1rem;
+    margin: 0;
+}
+h1 a {
+    all: unset;
+}
+h3 {
+    margin: 0.5em 0;
+}
+
+@media screen and (min-width: 480px) {
+    h1 {
+        font-size: 1.6rem;
+    }
+}
+
+.form-field {
+    width: 100%;
+    margin-bottom: 1em;
+}
+.form-field label {
+    display: block;
+    color: #999;
+}
+.form-field input, .form-field textarea {
+    box-sizing: border-box;
+    width: 100%;
+    border: none;
+    border-bottom: 1px solid #bbb;
+
+    font-size: 1rem;
+    outline: none;
+}
+
+.form-field .checkbox {
+    display: inline;
+}
+
+.form-field input[type=checkbox] {
+    width: inherit;
+    margin-left: 1em;
+    accent-color: #6a7579;
+}
+
+.form-field input:focus, .form-field textarea:focus {
+    color: cadetblue;
+    border-bottom: 1px solid cadetblue;
+}
+
+.form-field input:not(focus), .form-field textarea:not(focus) {
+    color: #333;
+}
+
+.form-field select {
+    all: unset;
+    width: 100%;
+    border: none;
+    border-bottom: 1px solid #bbb;
+
+    font-size: 1rem;
+    outline: none;
+}
+
+.form-field select:focus {
+    color: cadetblue;
+    border-bottom: 1px solid cadetblue;
+}
+
+.form-field select:not(focus) {
+    color: #333;
+}
+
+.form-field:focus-within label {
+    color: cadetblue;
+}
+
+.button.primary, button.primary {
+    padding: 0.75em 1em;
+    background-color: cadetblue;
+    font-family: Quicksand, Arial, sans-serif;
+    border: none;
+    color: white;
+    font-size: 1rem;
+    margin-top: 1em;
+}
+
+.button.primary, button.primary:hover {
+    filter: contrast(140%);
+}
+
+.button.secondary, button.secondary {
+    padding: 0.75em 1em;
+    background-color: white;
+    font-family: Quicksand, Arial, sans-serif;
+    border: 1px solid cadetblue;
+    color: cadetblue;
+    font-size: 1rem;
+    margin-top: 1em;
+}
+
+.button.secondary:hover, button.secondary:hover {
+    filter: contrast(140%);
+}
+
+/*index.html*/
+
+.search-dialog {
+    position: relative;
+    width: 100%;
+    padding-top: 40px;
+    padding-bottom: 40px;
+    border: none;
+}
+
+@media screen and (min-width: 480px) {
+    .search-dialog {
+        position: absolute;
+        top: 50%;
+        left: 10vw;
+        transform: translateY(-50%);
+        width: 380px;
+        padding-top: 40px;
+        padding-bottom: 40px;
+    }
+}
+
+/*results.html*/
+.results-dialog {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    padding-bottom: 40px;
+    border: none;
+}
+
+.results-dialog table {
+    width: 100%;
+}
+
+.results-dialog table th, .results-dialog table td {
+    text-align: left;
+}
+
+@media screen and (min-width: 480px) {
+    .results-dialog {
+        position: relative;
+        margin: auto;
+        margin-top: 1em;
+        width: 600px;
+        padding-bottom: 40px;
+    }
+}
+
+.results td {
+    padding: 0.4em 0;
+}
+
+
+/*documentation.html*/
+.documentation-dialog {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    border: none;
+}
+
+@media screen and (min-width: 480px) {
+    .documentation-dialog {
+        position: relative;
+        margin: auto;
+        margin-top: 1em;
+        width: 600px;
+    }
+}
+
+.documentation-dialog #result-content {
+    font-family: 'Courier New', Courier, monospace;
+    background: #aaa;
+    padding: 1em;
+    word-break: break-word;
+}
+
+section.radio-group {
+    margin-bottom: 0.5em;
+}
+
+section.radio-group input {
+    display: none;
+}
+
+section.radio-group div label {
+    display: inline-block;
+    padding: 0.75em 1em;
+    border: none;
+    color: black;
+    font-size: 1rem;
+    background: #ddd;
+}
+
+section.radio-group div label {
+    min-width: 3ch;
+    text-align: center;
+    font-size: 1rem;
+}
+
+
+section.radio-group div label:first-of-type {
+    border-top-left-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+}
+
+section.radio-group div label:last-of-type {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+}
+
+section.radio-group div input:checked+label {
+    background: cadetblue;
+    color: white;
+}
+
+.documentation-dialog .range-selector {
+    display: flex;
+    gap: 1em;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.documentation-dialog .range-selector section {
+    flex-grow: 1;
+    width: initial;
+}
+
+.documentation-dialog .hide {
+    display: none;
+}
+
+.admin-dashboard {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    margin: 1em;
+    gap: 1em;
+    background: transparent;
+    width: calc(100% - 2em);
+}
+
+.admin-dashboard .filter-dialog {
+    margin: 0;
+    width: 100%;
+    flex-grow: 1;
+}
+
+.admin-dashboard .table-results table {
+    width: 100%;
+}
+
+
+.admin-dashboard .table-results table th, .admin-dashboard .table-results table td {
+    text-align: left;
+    margin: 0.4em 0;
+}
+
+.admin-dashboard .table-results table tr td:nth-child(3) {
+    display: flex;
+    flex-direction: row;
+}
+
+
+@media screen and (min-width: 480px) {
+    .admin-dashboard .filter-dialog {
+        width: 300px;
+        flex-grow: 0;
+    }
+}
+
+img.icon, button.icon svg {
+    height: 1.2em;
+    width: 1.2em;
+}
+button.icon, a.icon {
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    font-size: 1rem;
+
+    display: flex;
+    align-content: baseline;
+    gap: 0.3em;
+}
+
+button.icon svg, button.icon svg * {
+    fill: white;
+    color: white;
+    stroke: white;
+}
+
+dialog {
+    border: 1px solid rgba(95, 158, 160, 0.5);
+}
+dialog::backdrop {
+    background: rgba(151, 159, 159, 0.39);
+}
+dialog {
+    width: 400px;
+    max-width: 80vw;
+    box-sizing: border-box;
+}

assets/global.js

@@ -1,6 +1,16 @@
 const dialogContainerId = "#dialog-container"
 
 window.addEventListener('load', () => {
+    document.querySelectorAll(".dropdown").forEach(el => {
+        const action = el.querySelector(".dropdown-action");
+        const content = el.querySelector(".dropdown-content");
+
+        action.addEventListener('click', () => {
+            content.classList.toggle('selected');
+            content.style.marginLeft = `-${(content.offsetWidth - action.offsetWidth)}px`;
+        })
+    })
+
     // configure radio button groups
     document.querySelectorAll("section.radio-group").forEach(el => {
         const submittedInput = el.querySelector("input[type=hidden]");
@@ -23,7 +33,13 @@ window.addEventListener('load', () => {
             let response = await fetch(btn.dataset.url);
             if(response.ok) {
                 response = await response.text();
-                const container = document.querySelector(dialogContainerId);
+                let container = document.querySelector(dialogContainerId);
+                if(container == null) {
+                    const node = document.createElement('div');
+                    node.id = "dialog-container";
+                    document.querySelector("body").appendChild(node);
+                    container = document.querySelector(dialogContainerId);
+                }
                 container.innerHTML = response;
                 const dialogReference = document.querySelector(selector);
                 dialogReference?.showModal();

assets/icons/circle-add.svg

@@ -1,5 +1,5 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V11H8C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H11V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H13V8Z" fill="#0F1729"/>
+<path d="M13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V11H8C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H11V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V13H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H13V8Z" fill="#0F1729"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" fill="#0F1729"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z" fill="#0F1729"/>
 </svg>

assets/icons/close-x.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="#0F1729"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="#0F1729"/>
 </svg>

assets/icons/done-v.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7071 6.29289C20.0976 6.68342 20.0976 7.31658 19.7071 7.70711L10.4142 17C9.63316 17.7811 8.36683 17.781 7.58579 17L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L18.2929 6.29289C18.6834 5.90237 19.3166 5.90237 19.7071 6.29289Z" fill="#0F1729"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7071 6.29289C20.0976 6.68342 20.0976 7.31658 19.7071 7.70711L10.4142 17C9.63316 17.7811 8.36683 17.781 7.58579 17L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L18.2929 6.29289C18.6834 5.90237 19.3166 5.90237 19.7071 6.29289Z" fill="#0F1729"/>
 </svg>

assets/icons/edit.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1739 3.5968C13.8662 3.2047 14.686 3.10369 15.4528 3.31598C15.7928 3.41011 16.0833 3.57409 16.3571 3.7593C16.6172 3.9352 16.9155 4.16808 17.2613 4.43799L17.3117 4.47737C17.6575 4.74728 17.9559 4.98016 18.1897 5.18977C18.4358 5.41046 18.6654 5.65248 18.8393 5.95945C19.2314 6.65177 19.3324 7.47151 19.1201 8.23831C19.026 8.5783 18.862 8.86883 18.6768 9.14267C18.5009 9.40276 18.268 9.70112 17.998 10.0469L10.8953 19.1462C10.8773 19.1692 10.8596 19.1919 10.8421 19.2144C10.5087 19.6419 10.2566 19.9651 9.9445 20.2306C9.68036 20.4553 9.38811 20.6447 9.07512 20.794C8.70535 20.9704 8.30733 21.0685 7.78084 21.1983C7.75324 21.2051 7.72528 21.212 7.69696 21.219L5.57214 21.7435C5.42499 21.7799 5.25702 21.8215 5.10885 21.8442C4.94367 21.8696 4.68789 21.8926 4.40539 21.8022C4.06579 21.6934 3.77603 21.4672 3.58809 21.1642C3.43175 20.9121 3.39197 20.6584 3.3765 20.492C3.36262 20.3427 3.36213 20.1697 3.3617 20.0181C3.36167 20.0087 3.36165 19.9994 3.36162 19.9902L3.35475 17.8295C3.35465 17.8003 3.35455 17.7715 3.35445 17.7431C3.3525 17.2009 3.35103 16.7909 3.4324 16.3894C3.50128 16.0495 3.61406 15.72 3.76791 15.4093C3.94967 15.0421 4.20204 14.7191 4.53586 14.2918C4.55336 14.2694 4.57109 14.2467 4.58905 14.2237L11.6918 5.12435C11.9617 4.77856 12.1946 4.48019 12.4042 4.2464C12.6249 4.00025 12.8669 3.77065 13.1739 3.5968ZM14.9191 5.24347C14.6635 5.17271 14.3903 5.20638 14.1595 5.33708C14.1203 5.35928 14.0459 5.41135 13.8934 5.5815C13.7348 5.75836 13.5438 6.00211 13.2487 6.38018L16.4018 8.84145C16.697 8.46338 16.887 8.21896 17.0201 8.02221C17.1482 7.83291 17.1806 7.74808 17.1926 7.70467C17.2634 7.44907 17.2297 7.17583 17.099 6.94505C17.0768 6.90586 17.0247 6.83145 16.8546 6.6789C16.6777 6.52033 16.434 6.32938 16.0559 6.03426C15.6778 5.73914 15.4334 5.54904 15.2367 5.41597C15.0474 5.28794 14.9625 5.25549 14.9191 5.24347ZM15.1712 10.418L12.0181 7.95674L6.16561 15.4543C5.75585 15.9792 5.6403 16.135 5.56031 16.2966C5.48339 16.452 5.42699 16.6167 5.39256 16.7866C5.35675 16.9633 5.35262 17.1572 5.35474 17.8231L5.36082 19.7357L7.2176 19.2773C7.86411 19.1177 8.05119 19.0666 8.21391 18.9889C8.37041 18.9143 8.51653 18.8196 8.64861 18.7072C8.78593 18.5904 8.90897 18.4405 9.31872 17.9156L15.1712 10.418ZM12 21C12 20.4477 12.4477 20 13 20H20C20.5523 20 21 20.4477 21 21C21 21.5523 20.5523 22 20 22H13C12.4477 22 12 21.5523 12 21Z" fill="#0F1729"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1739 3.5968C13.8662 3.2047 14.686 3.10369 15.4528 3.31598C15.7928 3.41011 16.0833 3.57409 16.3571 3.7593C16.6172 3.9352 16.9155 4.16808 17.2613 4.43799L17.3117 4.47737C17.6575 4.74728 17.9559 4.98016 18.1897 5.18977C18.4358 5.41046 18.6654 5.65248 18.8393 5.95945C19.2314 6.65177 19.3324 7.47151 19.1201 8.23831C19.026 8.5783 18.862 8.86883 18.6768 9.14267C18.5009 9.40276 18.268 9.70112 17.998 10.0469L10.8953 19.1462C10.8773 19.1692 10.8596 19.1919 10.8421 19.2144C10.5087 19.6419 10.2566 19.9651 9.9445 20.2306C9.68036 20.4553 9.38811 20.6447 9.07512 20.794C8.70535 20.9704 8.30733 21.0685 7.78084 21.1983C7.75324 21.2051 7.72528 21.212 7.69696 21.219L5.57214 21.7435C5.42499 21.7799 5.25702 21.8215 5.10885 21.8442C4.94367 21.8696 4.68789 21.8926 4.40539 21.8022C4.06579 21.6934 3.77603 21.4672 3.58809 21.1642C3.43175 20.9121 3.39197 20.6584 3.3765 20.492C3.36262 20.3427 3.36213 20.1697 3.3617 20.0181C3.36167 20.0087 3.36165 19.9994 3.36162 19.9902L3.35475 17.8295C3.35465 17.8003 3.35455 17.7715 3.35445 17.7431C3.3525 17.2009 3.35103 16.7909 3.4324 16.3894C3.50128 16.0495 3.61406 15.72 3.76791 15.4093C3.94967 15.0421 4.20204 14.7191 4.53586 14.2918C4.55336 14.2694 4.57109 14.2467 4.58905 14.2237L11.6918 5.12435C11.9617 4.77856 12.1946 4.48019 12.4042 4.2464C12.6249 4.00025 12.8669 3.77065 13.1739 3.5968ZM14.9191 5.24347C14.6635 5.17271 14.3903 5.20638 14.1595 5.33708C14.1203 5.35928 14.0459 5.41135 13.8934 5.5815C13.7348 5.75836 13.5438 6.00211 13.2487 6.38018L16.4018 8.84145C16.697 8.46338 16.887 8.21896 17.0201 8.02221C17.1482 7.83291 17.1806 7.74808 17.1926 7.70467C17.2634 7.44907 17.2297 7.17583 17.099 6.94505C17.0768 6.90586 17.0247 6.83145 16.8546 6.6789C16.6777 6.52033 16.434 6.32938 16.0559 6.03426C15.6778 5.73914 15.4334 5.54904 15.2367 5.41597C15.0474 5.28794 14.9625 5.25549 14.9191 5.24347ZM15.1712 10.418L12.0181 7.95674L6.16561 15.4543C5.75585 15.9792 5.6403 16.135 5.56031 16.2966C5.48339 16.452 5.42699 16.6167 5.39256 16.7866C5.35675 16.9633 5.35262 17.1572 5.35474 17.8231L5.36082 19.7357L7.2176 19.2773C7.86411 19.1177 8.05119 19.0666 8.21391 18.9889C8.37041 18.9143 8.51653 18.8196 8.64861 18.7072C8.78593 18.5904 8.90897 18.4405 9.31872 17.9156L15.1712 10.418ZM12 21C12 20.4477 12.4477 20 13 20H20C20.5523 20 21 20.4477 21 21C21 21.5523 20.5523 22 20 22H13C12.4477 22 12 21.5523 12 21Z" fill="#0F1729"/>
 </svg>

assets/icons/search.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11 5C7.68629 5 5 7.68629 5 11C5 14.3137 7.68629 17 11 17C14.3137 17 17 14.3137 17 11C17 7.68629 14.3137 5 11 5ZM3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11C19 12.8487 18.3729 14.551 17.3199 15.9056L20.7071 19.2929C21.0976 19.6834 21.0976 20.3166 20.7071 20.7071C20.3166 21.0976 19.6834 21.0976 19.2929 20.7071L15.9056 17.3199C14.551 18.3729 12.8487 19 11 19C6.58172 19 3 15.4183 3 11Z" fill="#0F1729"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 5C7.68629 5 5 7.68629 5 11C5 14.3137 7.68629 17 11 17C14.3137 17 17 14.3137 17 11C17 7.68629 14.3137 5 11 5ZM3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11C19 12.8487 18.3729 14.551 17.3199 15.9056L20.7071 19.2929C21.0976 19.6834 21.0976 20.3166 20.7071 20.7071C20.3166 21.0976 19.6834 21.0976 19.2929 20.7071L15.9056 17.3199C14.551 18.3729 12.8487 19 11 19C6.58172 19 3 15.4183 3 11Z" fill="#0F1729"/>
 </svg>

assets/icons/trash-delete.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.10002 5H3C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7H4.06055L4.88474 20.1871C4.98356 21.7682 6.29471 23 7.8789 23H16.1211C17.7053 23 19.0164 21.7682 19.1153 20.1871L19.9395 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H19.0073C19.0018 4.99995 18.9963 4.99995 18.9908 5H16.9C16.4367 2.71776 14.419 1 12 1C9.58104 1 7.56329 2.71776 7.10002 5ZM9.17071 5H14.8293C14.4175 3.83481 13.3062 3 12 3C10.6938 3 9.58254 3.83481 9.17071 5ZM17.9355 7H6.06445L6.88085 20.0624C6.91379 20.5894 7.35084 21 7.8789 21H16.1211C16.6492 21 17.0862 20.5894 17.1192 20.0624L17.9355 7ZM14.279 10.0097C14.83 10.0483 15.2454 10.5261 15.2068 11.0771L14.7883 17.0624C14.7498 17.6134 14.2719 18.0288 13.721 17.9903C13.17 17.9517 12.7546 17.4739 12.7932 16.9229L13.2117 10.9376C13.2502 10.3866 13.7281 9.97122 14.279 10.0097ZM9.721 10.0098C10.2719 9.97125 10.7498 10.3866 10.7883 10.9376L11.2069 16.923C11.2454 17.4739 10.83 17.9518 10.2791 17.9903C9.72811 18.0288 9.25026 17.6134 9.21173 17.0625L8.79319 11.0771C8.75467 10.5262 9.17006 10.0483 9.721 10.0098Z" fill="#0F1729"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.10002 5H3C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7H4.06055L4.88474 20.1871C4.98356 21.7682 6.29471 23 7.8789 23H16.1211C17.7053 23 19.0164 21.7682 19.1153 20.1871L19.9395 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H19.0073C19.0018 4.99995 18.9963 4.99995 18.9908 5H16.9C16.4367 2.71776 14.419 1 12 1C9.58104 1 7.56329 2.71776 7.10002 5ZM9.17071 5H14.8293C14.4175 3.83481 13.3062 3 12 3C10.6938 3 9.58254 3.83481 9.17071 5ZM17.9355 7H6.06445L6.88085 20.0624C6.91379 20.5894 7.35084 21 7.8789 21H16.1211C16.6492 21 17.0862 20.5894 17.1192 20.0624L17.9355 7ZM14.279 10.0097C14.83 10.0483 15.2454 10.5261 15.2068 11.0771L14.7883 17.0624C14.7498 17.6134 14.2719 18.0288 13.721 17.9903C13.17 17.9517 12.7546 17.4739 12.7932 16.9229L13.2117 10.9376C13.2502 10.3866 13.7281 9.97122 14.279 10.0097ZM9.721 10.0098C10.2719 9.97125 10.7498 10.3866 10.7883 10.9376L11.2069 16.923C11.2454 17.4739 10.83 17.9518 10.2791 17.9903C9.72811 18.0288 9.25026 17.6134 9.21173 17.0625L8.79319 11.0771C8.75467 10.5262 9.17006 10.0483 9.721 10.0098Z" fill="#0F1729"/>
 </svg>

assets/style.css

@@ -1,297 +0,0 @@
-/* cleanup */
-
-* {
-    box-sizing: border-box;    
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    padding: 0;
-    margin: 0;
-}
-
-header {
-    padding: 1rem 2rem;
-    width: 100%;
-    background: #666;
-}
-header h1 {
-    font-size: 1.25em;
-}
-header a {
-    color: #fff;
-    text-decoration: none;
-}
-button {
-    all: unset;
-    padding: 0.25em 0.5em;
-    background: #dddddd;
-    border: solid 1px #cccccc;
-    border-radius: 0.25em;
-    font-size: 0.875em;
-}
-select {
-    all: unset;
-    color: #111;
-    padding: 0.25em 0.5em;
-    background: #dddddd;
-    border: solid 1px #cccccc;
-    border-radius: 0.25em;
-    font-size: 0.875em;
-}
-
-nav {
-    padding: 1rem 2rem;
-    width: 100%;
-    background: #f7f7f7;
-}
-nav a, nav button {
-    display: inline-block;
-    text-decoration: none;
-    color: #333;
-    font-size: 1rem;
-    border: none;
-    background: none;
-    padding: 0.5rem 1rem;
-    transition: ease-out 0.2s;
-    border-radius: 0;
-}
-nav a:hover, nav button:hover {
-    background: #e0e0e0;
-    color: #000;
-    transition: ease-out 0.2s;
-}
-nav a.selected, nav button.selected  {
-    background: #216897;
-    color: white;
-}
-
-table:not(.clean) {
-    width: 100%;
-}
-
-table th, table td {
-    text-align: left;
-}
-table {
-    border-collapse: collapse;
-}
-table thead * {
-    background: #666;
-    color: #fff;
-}
-table th, table td {
-    padding: 0.4rem 0.4rem;
-}
-
-table:not(.clean) tbody tr:nth-child(2n+1) {
-    background: #fcfcfc;
-}
-
-table:not(.clean) tbody tr:nth-child(2n) {
-    background: #f2f2f2;
-}
-
-button {
-    padding: 0.25rem 1rem;
-}
-
-.card {
-    padding: 1em;
-    background: #fff;
-    border-radius: 0.2rem;
-    border: 1px solid #bbb;
-}
-.card .card-title {
-    margin-bottom: 0.5em;
-}
-.card p {
-    margin-bottom: 0.5em;
-}
-
-form section {
-    width: fit-content;
-}
-
-/* styling */
-form section:not(.radio-group) label+:not(select) {
-    display: flex;
-}
-
-form section {
-    padding-bottom: 0.75rem;
-}
-
-form section > input {
-    width: 200px;
-    padding: 0.2em 0.5em;
-    border-radius: 0.25em;
-    border: 1px solid #aaa;
-}
-
-form section > textarea {
-    width: 200px;
-    padding: 0.2em 0.5em;
-    border: 1px solid #aaa;
-    border-radius: 0.25em;
-}
-
-form section select {
-    display: block;
-    width: 200px;
-    border: none;
-    font-size: 0.9rem;
-    padding: 0.2em 0.5em;
-    background: #ddd;
-}
-
-form section label.checkbox {
-    display: block;
-    overflow: hidden;
-    width: 200px;
-}
-form section input[type=checkbox] {
-    vertical-align: middle;
-    float: right;
-}
-
-
-section.radio-group input {
-    display: none;
-}
-
-section.radio-group div label {
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    background: #ddd;
-}
-
-section.radio-group div label {
-    min-width: 64px;
-    text-align: center;
-    font-size: 0.9rem;
-}
-
-section.radio-group div label:first-of-type {
-    border-top-left-radius: 0.25rem;
-    border-bottom-left-radius: 0.25rem;
-}
-
-section.radio-group div label:last-of-type {
-    border-top-right-radius: 0.25rem;
-    border-bottom-right-radius: 0.25rem;
-}
-
-section.radio-group div input:checked+label {
-    background: #555;
-    color: white;
-}
-
-img.icon {
-    height: 1.5em;
-    width: 1.5em;
-}
-button.icon, a.icon {
-    display: flex;
-    align-content: baseline;
-    gap: 0.3em;
-}
-
-
-main {
-    display: flex;
-    flex-wrap: wrap;
-    max-width: 1280px;
-    margin: auto;
-}
-
-.container {
-    max-width: 1280px;
-    margin: auto;
-}
-
-section#search {
-    margin: 1em;
-    width: fit-content;
-}
-
-.index-page {
-    margin: 1em auto;
-    align-content: center;
-    gap: 1em;
-}
-.index-page section {
-    flex-grow: 1;
-}
-.index-page section article {
-    margin: auto;
-    width: 300px;
-    max-width: 90vw;
-}
-
-section#results {
-    margin: 1em;
-    flex-grow: 1;
-}
-
-button.clean {
-    display: inline-block;
-    padding: 0.4rem;
-    border: none;
-    background: none;
-    text-decoration: none;
-    color: #000;
-    cursor: pointer;
-}
-
-section#results a, section#results button {
-    display: inline-block;
-    padding: 0.4rem;
-    border: none;
-    background: none;
-    text-decoration: none;
-    color: #000;
-    cursor: pointer;
-}
-
-dialog {
-    position: fixed;
-    left: 50%;
-    top: 80px;
-    transform: translate(-50%, 0);
-    max-height: calc(100vh - 160px);
-    overflow-y: scroll;
-}
-section.actions {
-    padding: 0;
-}
-article.single-holiday {
-    padding-bottom: 0.5em;
-    margin-bottom: 1em;
-    border-bottom: 2px solid #a0a0a0;
-}
-
-.optional-selector {
-    border: 1px solid #666;
-    border-radius: 0.5em;
-}
-
-.optional-selector .header {
-    padding: 1em;
-    background: #666;
-    margin-bottom: 0.5em;
-    color: white;
-    border-top-left-radius: 0.5em;
-    border-top-right-radius: 0.5em;
-}
-.optional-selector > *:not(.header) {
-    margin: 0 1em;
-}
-.hide {
-    display: none;
-}
-.source-code {
-    padding: 1em;
-}
-.source-code, .source-code * {
-    background: #777;
-    color: #fff;
-    font-family: 'Courier New', Courier, monospace;
-}

handlers.go

@@ -1,12 +1,15 @@
 package main
 
 import (
+	"bytes"
+	"encoding/csv"
 	"encoding/xml"
 	"fmt"
 	"github.com/gin-gonic/gin"
 	"github.com/google/uuid"
 	"holiday-api/holiday"
 	"net/http"
+	"strconv"
 	"time"
 )
 
@@ -26,9 +29,9 @@ func getHolidays(service holiday.HolidayService) gin.HandlerFunc {
 
 		holidays, err := service.Find(search, paging)
 		if err != nil {
-			render(c, http.StatusNotFound, ErrorResponse{Created: time.Now(), Message: "failed fetching holidays"})
+			render(c, http.StatusNotFound, ErrorResponse{Created: time.Now(), Message: "failed fetching holidays"}, nil)
 		} else {
-			render(c, http.StatusOK, mapHolidays(holidays))
+			render(c, http.StatusOK, mapHolidays(holidays), search.Type)
 		}
 	}
 }
@@ -54,6 +57,18 @@ type HolidayResponse struct {
 	Holidays []HolidayItemResponse `json:"holidays"`
 }
 
+func (h HolidayResponse) CSV() []byte {
+	buffer := bytes.Buffer{}
+	csvWriter := csv.NewWriter(&buffer)
+	csvWriter.Write([]string{"id", "date", "name", "description", "isStateHoliday", "isReligiousHoliday"})
+
+	for _, item := range h.Holidays {
+		csvWriter.Write([]string{item.Id.String(), item.Date.String(), item.Name, item.Description, strconv.FormatBool(item.IsStateHoliday), strconv.FormatBool(item.IsReligiousHoliday)})
+	}
+	csvWriter.Flush()
+	return buffer.Bytes()
+}
+
 type HolidayItemResponse struct {
 	XMLName            xml.Name     `json:"-" xml:"Holiday"`
 	Id                 uuid.UUID    `json:"id" xml:"id,attr"`

holiday/model.go

@@ -34,6 +34,7 @@ type Search struct {
 	RangeEnd         *time.Time `form:"range_end" time_format:"2006-01-02"`
 	StateHoliday     string     `form:"state_holiday,omitempty" binding:"omitempty"`
 	ReligiousHoliday string     `form:"religious_holiday,omitempty" binding:"omitempty"`
+	Type             *string    `form:"type,omitempty" binding:"omitempty"`
 }
 
 func (s Search) IsStateHoliday() *bool {

main.go

@@ -62,38 +62,26 @@ func main() {
 	setupAdminDashboard(g.Group("/admin"), holidayService, countryService, yearService)
 
 	g.GET("/", func(c *gin.Context) {
-		year := time.Now().Year()
+		search := holiday.Search{Country: "HR", Year: nil}
-		search := holiday.Search{Country: "HR", Year: &year}
 		if err := c.ShouldBindQuery(&search); err != nil {
 			c.AbortWithError(http.StatusBadRequest, err)
 			return
 		}
-		holidays, _ := holidayService.Find(search, holiday.Paging{PageSize: 100})
+
 		countries, _ := countryService.Find()
 		years, _ := yearService.Find()
-		c.HTML(http.StatusOK, "index.gohtml", gin.H{"Years": years, "Countries": countries, "Search": search, "Holidays": mapHolidays(holidays).Holidays})
+		if search.Year == nil {
+			c.HTML(http.StatusOK, "index.gohtml", gin.H{"Years": years, "Countries": countries, "Search": search})
+			return
+		}
+		holidays, _ := holidayService.Find(search, holiday.Paging{PageSize: 100})
+		c.HTML(http.StatusOK, "results.gohtml", gin.H{"Years": years, "Countries": countries, "Search": search, "Holidays": mapHolidays(holidays).Holidays})
 	})
 	g.GET("/documentation", func(c *gin.Context) {
 		countries, _ := countryService.Find()
 		years, _ := yearService.Find()
 		c.HTML(http.StatusOK, "documentation.gohtml", gin.H{"Years": years, "Countries": countries})
 	})
-	g.GET("/search", func(c *gin.Context) {
-		request := holiday.Search{}
-		if err := c.ShouldBindQuery(&request); err != nil {
-			c.AbortWithError(http.StatusBadRequest, err)
-			return
-		}
-		search := holiday.Search{Country: request.Country, Date: request.Date}
-		holidays, _ := holidayService.Find(search, holiday.Paging{PageSize: 100})
-		countries, _ := countryService.Find()
-		c.HTML(http.StatusOK, "search.gohtml", gin.H{"Countries": countries, "Search": search, "Holidays": mapHolidays(holidays).Holidays})
-	})
-	g.GET("/dialogs/check-is-a-holiday", func(c *gin.Context) {
-		countries, _ := countryService.Find()
-		c.HTML(http.StatusOK, "check-is-a-holiday.gohtml", gin.H{"Countries": countries})
-	})
-
 	log.Fatal(http.ListenAndServe(":5281", g))
 }
 
@@ -113,10 +101,11 @@ func loadTemplates(g *gin.Engine) {
 			}
 			return false
 		},
+		"importSvg": IncludeHTML,
 	})
 	g.LoadHTMLFiles(
 		"templates/index.gohtml",
-		"templates/search.gohtml",
+		"templates/results.gohtml",
 		"templates/documentation.gohtml",
 
 		"templates/admin_dashboard.gohtml",
@@ -125,13 +114,22 @@ func loadTemplates(g *gin.Engine) {
 		"templates/dialogs/add-holiday.gohtml",
 		"templates/dialogs/edit-holiday.gohtml",
 		"templates/dialogs/delete-holiday.gohtml",
-		"templates/dialogs/check-is-a-holiday.gohtml",
 
+		"templates/dialogs/add-country.gohtml",
 		"templates/dialogs/edit-country.gohtml",
 		"templates/dialogs/delete-country.gohtml",
 	)
 }
 
+func IncludeHTML(path string) template.HTML {
+	b, err := os.ReadFile(path)
+	if err != nil {
+		log.Println("includeHTML - error reading file: %v", err)
+		return ""
+	}
+	return template.HTML(string(b))
+}
+
 func setupAdminDashboard(adminDashboard *gin.RouterGroup, service holiday.HolidayService, countryService holiday.CountryService, yearService holiday.YearService) {
 	adminDashboard.Use(gin.BasicAuth(loadAuth()))
 
@@ -251,6 +249,9 @@ func setupAdminDashboard(adminDashboard *gin.RouterGroup, service holiday.Holida
 		}
 		c.Redirect(http.StatusSeeOther, "/admin/countries")
 	})
+	adminDashboard.GET("/dialogs/add-country", func(c *gin.Context) {
+		c.HTML(http.StatusOK, "add-country.gohtml", gin.H{})
+	})
 
 	adminDashboard.GET("/dialogs/add-holiday", func(c *gin.Context) {
 		countries, _ := countryService.Find()

makefile

@@ -1,7 +1,7 @@
 # scripts for building app
 # requires go 1.19+ and git installed
 
-VERSION := 0.2.3
+VERSION := 0.3.0
 
 serve:
 	go run ./...

render.go

@@ -4,12 +4,34 @@ import (
 	"github.com/gin-gonic/gin"
 )
 
-func render[T any](c *gin.Context, status int, response T) {
+type CSV interface {
-	switch c.GetHeader("accept") {
+	CSV() []byte
+}
+
+func render(c *gin.Context, status int, response any, contentType *string) {
+	value := c.GetHeader("accept")
+	if contentType != nil {
+		switch *contentType {
+		case "xml":
+			value = "text/xml"
+		case "json":
+			value = "application/json"
+		case "csv":
+			value = "text/csv"
+		}
+	}
+	switch value {
+	case "text/csv":
+		if csvResponse, ok := response.(CSV); ok {
+			c.Data(200, value+"; charset=utf-8", csvResponse.CSV())
+		} else {
+			c.Header("content-type", "application/json; charset=utf-8")
+			c.JSON(status, response)
+		}
 	case "application/xml":
 		fallthrough
 	case "text/xml":
-		c.Header("content-type", c.GetHeader("accept")+"; charset=utf-8")
+		c.Header("content-type", value+"; charset=utf-8; header=present;")
 		c.XML(status, response)
 	case "application/json":
 		fallthrough

templates/admin_dashboard.gohtml

@@ -1,101 +1,95 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
+    <title>Holiday-api | Admin</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8">
-    <title>Holiday-api | Admin dashboard</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/assets/style.css">
+
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/assets/global.css">
     <script src="/assets/global.js"></script>
 </head>
 <body>
-<div id="dialog-container"></div>
+<div class="background-image" style="position: fixed">
+</div>
 <header>
-    <section class="container">
+    <h1><a href="/admin?country=HR">Holiday-api | Admin</a></h1>
-        <h1><a href="/">Holiday-api | Admin dashboard</a></h1>
+    <div style="flex-grow: 1"></div>
-    </section>
+    <a style="all: unset;" href="/admin/countries">Države</a>
 </header>
-<nav>
+<main class="admin-dashboard">
-    <section class="container">
+    <div class="filter-dialog">
-        <a class="selected" href="#">Search</a>
+        <section class="dialog filter-dialog">
-        <a href="/admin/countries">Countries</a>
+            <h2 style="margin-top: 0.5em">Pretraga</h2>
-        <button data-type="dialog" data-trigger="#create-card" data-url="/admin/dialogs/add-holiday">Add new holiday</button>
-    </section>
-</nav>
-<main>
-    <section id="search">
-        <article class="card">
             <form action="#" method="get">
-                <section>
+                <section class="form-field">
-                    <label for="country">Country:</label>
+                    <label for="country">Država:</label>
                     <select id="country" name="country">
                         {{range $entry := .Countries}}
                             <option {{if eq $.Search.Country $entry.IsoName}}selected{{end}} value="{{$entry.IsoName}}">{{$entry.Name}}</option>
                         {{end}}
                     </select>
                 </section>
-                <section>
+                <section class="form-field">
-                    <label for="year">Year:</label>
+                    <label for="year">Za godinu:</label>
                     <select id="year" name="year">
                         {{range $entry := .Years}}
                             <option {{if intpeq $.Search.Year $entry}}selected{{end}} value="{{$entry}}">{{$entry}}</option>
                         {{end}}
                     </select>
                 </section>
-                <section class="radio-group">
+                <section class="radio-group" style="margin-top: 0.5em;">
-                    <label>Is state holiday:</label>
+                    <label>Državni praznik:</label>
                     <div>
-                        <input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">True
+                        <input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">Da
-                        </label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">False
+                        </label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">Ne
-                        </label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">All</label>
+                        </label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">Svi</label>
                     </div>
-                    <input type="hidden" value="{{.Search.StateHoliday}}" name="state_holiday">
+                    <input type="hidden" value="{{.Search.StateHoliday}}" id="state-holiday" name="state_holiday">
                 </section>
                 <section class="radio-group">
-                    <label>Is religious holiday:</label>
+                    <label>Religiozni praznik:</label>
                     <div>
-                        <input type="radio" value="true" name="rh" id="rh_true"><label for="rh_true">True
+                        <input type="radio" value="true" name="rh" id="rh_true"><label for="rh_true">Da
-                        </label><input type="radio" value="false" name="rh" id="rh_false"><label for="rh_false">False
+                        </label><input type="radio" value="false" name="rh" id="rh_false"><label for="rh_false">Ne
-                        </label><input type="radio" value="" name="rh" id="rh_any"><label for="rh_any">All</label>
+                        </label><input type="radio" value="" name="rh" id="rh_any"><label for="rh_any">Svi</label>
                     </div>
-                    <input type="hidden" value="{{.Search.ReligiousHoliday}}" name="religious_holiday">
+                    <input type="hidden" value="{{.Search.ReligiousHoliday}}" id="religious-holiday" name="religious_holiday">
-                </section>
-                <section class="actions">
-                    <button class="icon primary" type="submit">
-                        <img class="icon" src="/assets/images/search.svg">
-                        <span>Search</span>
-                    </button>
                 </section>
+                <div class="button-actions">
+                    <button class="primary">Pretraži</button>
+                </div>
             </form>
-        </article>
+        </section>
-    </section>
+    </div>
-    <section id="results">
-        <table>
-            <thead>
-            <tr>
-                <th>Name</th>
-                <th>Date</th>
-                <th>State</th>
-                <th>Religious</th>
-                <th></th>
-            </tr>
-            </thead>
-            <tbody>
 
-            {{range $entry := .Holidays.Holidays}}
+    <div style="flex-grow: 1">
+        <button style="float: right; margin-top: 0" data-type="dialog" data-trigger="#create-card" data-url="/admin/dialogs/add-holiday" class="primary">Dodaj novi praznik</button>
+        <section class="dialog table-results" style="margin: 0; margin-top: 3.5em" id="results">
+            <table>
+                <thead>
                 <tr>
-                    <td>{{$entry.Name}}</td>
+                    <th>Ime</th>
-                    <td>{{$entry.Date.Format "2006-01-02"}}</td>
+                    <th>Datum</th>
-                    <td><img class="icon" src="{{if $entry.IsStateHoliday}}/assets/images/done-v.svg{{else}}/assets/images/close-x.svg{{end}}"></td>
+                    <th></th>
-                    <td><img class="icon" src="{{if $entry.IsReligiousHoliday}}/assets/images/done-v.svg{{else}}/assets/images/close-x.svg{{end}}"></td>
-                    <td>
-                        <button data-type="dialog" data-trigger="#update-card" data-url="/admin/dialogs/edit-holiday?id={{$entry.Id}}" class="icon"><img class="icon" src="/assets/images/edit.svg"></button>
-                        <button data-type="dialog" data-trigger="#delete-card" data-url="/admin/dialogs/delete-holiday?id={{$entry.Id}}" class="icon"><img class="icon" src="/assets/images/trash-delete.svg"></button>
-                    </td>
                 </tr>
-            {{end}}
+                </thead>
-            </tbody>
+                <tbody>
-        </table>
+
-    </section>
+                {{range $entry := .Holidays.Holidays}}
+                    <tr>
+                        <td>{{$entry.Name}}</td>
+                        <td>{{$entry.Date.Format "02.01.2006"}}</td>
+                        <td>
+                            <button data-type="dialog" data-trigger="#update-card" data-url="/admin/dialogs/edit-holiday?id={{$entry.Id}}" class="icon"><img class="icon" src="/assets/icons/edit.svg"></button>
+                            <button data-type="dialog" data-trigger="#delete-card" data-url="/admin/dialogs/delete-holiday?id={{$entry.Id}}" class="icon"><img class="icon" src="/assets/icons/trash-delete.svg"></button>
+                        </td>
+                    </tr>
+                {{end}}
+                </tbody>
+            </table>
+        </section>
+    </div>
 </main>
 </body>
 </html>

templates/countries.gohtml

@@ -1,60 +1,48 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
+    <title>Holiday-api | Države</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8">
-    <title>Holiday-api | Admin dashboard</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/assets/style.css">
+
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/assets/global.css">
     <script src="/assets/global.js"></script>
 </head>
 <body>
-<div id="dialog-container"></div>
+<div class="background-image" style="position: fixed">
+</div>
 <header>
-    <section class="container">
+    <h1><a href="/admin?country=HR">Holiday-api | Države</a></h1>
-        <h1><a href="/">Holiday-api | Countries</a></h1>
-    </section>
 </header>
-<nav>
+<main class="admin-dashboard">
-    <section class="container">
+    <div style="width: 640px; max-width: 100%; margin: auto">
-        <a href="/admin">Search</a>
+        <button style="float: right; margin-top: 0" data-type="dialog" data-trigger="#create-card" data-url="/admin/dialogs/add-country" class="primary">Dodaj državu</button>
-        <a class="selected" href="#">Countries</a>
+        <section class="dialog table-results" style="margin: 0; margin-top: 3.5em" id="results">
-        <button data-type="dialog" data-trigger="#create-card" data-url="/admin/dialogs/add-holiday">Add new holiday</button>
-    </section>
-</nav>
-<main>
-
-    <section style="margin: 1em; flex-grow: 1">
-        <form action="/admin/countries" method="post">
             <table style="width: 100%">
                 <thead>
                 <tr>
-                    <th>Iso name</th>
+                    <th>Iso ime</th>
-                    <th>Name</th>
+                    <th>Ime</th>
                     <th></th>
                 </tr>
                 </thead>
                 <tbody>
 
-                <tr>
-                    <td><section><input minlength="2" maxlength="2" required id="iso_name" type="text" name="iso_name"></section></td>
-                    <td><section><input minlength="1" maxlength="45" required id="name" type="text" name="name"></section></td>
-                    <td><button>Create country</button></td>
-                </tr>
-
                 {{range $entry := .Countries}}
                     <tr>
                         <td>{{$entry.IsoName}}</td>
                         <td>{{$entry.Name}}</td>
                         <td>
-                            <button type="button" data-type="dialog" data-trigger="#update-card" data-url="/admin/dialogs/edit-country?id={{$entry.Id}}" class="clean icon"><img class="icon" src="/assets/images/edit.svg"></button>
+                            <button type="button" data-type="dialog" data-trigger="#update-card" data-url="/admin/dialogs/edit-country?id={{$entry.Id}}" class="clean icon"><img class="icon" src="/assets/icons/edit.svg"></button>
-                            <button type="button" data-type="dialog" data-trigger="#delete-card" data-url="/admin/dialogs/delete-country?id={{$entry.Id}}" class="clean icon"><img class="icon" src="/assets/images/trash-delete.svg"></button>
+                            <button type="button" data-type="dialog" data-trigger="#delete-card" data-url="/admin/dialogs/delete-country?id={{$entry.Id}}" class="clean icon"><img class="icon" src="/assets/icons/trash-delete.svg"></button>
                         </td>
                     </tr>
                 {{end}}
                 </tbody>
             </table>
-        </form>
+        </section>
-    </section>
+    </div>
 </main>
 </body>
 </html>

templates/dialogs/add-country.gohtml

@@ -0,0 +1,17 @@
+<dialog class="card" id="create-card">
+    <h3 class="card-title">Dodaj državu</h3>
+    <form method="post" action="/admin/countries">
+        <section class="form-field">
+            <label for="name">Iso ime:</label>
+            <input required minlength="2" maxlength="2" id="iso_name" value="{{.Country.IsoName}}" name="iso_name" type="text">
+        </section>
+        <section class="form-field">
+            <label for="name">Ime:</label>
+            <input required minlength="1" maxlength="45" id="name" value="{{.Country.Name}}" name="name" type="text">
+        </section>
+        <section class="actions">
+            <button class="primary" type="submit">Dodaj</button>
+            <button class="secondary" type="button" onclick="closeDialog('#create-card')">Odustani</button>
+        </section>
+    </form>
+</dialog>

templates/dialogs/add-holiday.gohtml

@@ -1,35 +1,35 @@
 <dialog class="card" id="create-card">
-    <h3 class="card-title">Create holiday</h3>
+    <h3 class="card-title">Dodaj praznik</h3>
     <form method="post" action="/admin/holidays">
-        <section>
+        <section class="form-field">
-            <label for="country">Country:</label>
+            <label for="country">Država:</label>
             <select id="country" required name="country">
                 {{range $entry := .Countries}}
                     <option value="{{$entry.IsoName}}">{{$entry.Name}}</option>
                 {{end}}
             </select>
         </section>
-        <section>
+        <section class="form-field">
-            <label for="name">Name:</label>
+            <label for="name">Ime:</label>
             <input required id="name" name="name" type="text">
         </section>
-        <section>
+        <section class="form-field">
-            <label for="description">Description:</label>
+            <label for="description">Opis:</label>
             <textarea id="description" name="description"></textarea>
         </section>
-        <section>
+        <section class="form-field">
-            <label for="date">Date:</label>
+            <label for="date">Datum:</label>
             <input required id="date" name="date" type="date">
         </section>
-        <section>
+        <section class="form-field">
-            <label class="checkbox"><span>State holiday</span><input id="state_holiday" value="true" name="state_holiday" type="checkbox"></label>
+            <label class="checkbox"><span>Državni praznik</span><input id="state_holiday" value="true" name="state_holiday" type="checkbox"></label>
         </section>
-        <section>
+        <section class="form-field">
-            <label class="checkbox"><span>Religious holiday</span><input id="religious_holiday" value="true" name="religious_holiday" type="checkbox"></label>
+            <label class="checkbox"><span>Religiozni praznik</span><input id="religious_holiday" value="true" name="religious_holiday" type="checkbox"></label>
         </section>
         <section class="actions">
-            <button type="submit">Create</button>
+            <button class="primary" type="submit">Dodaj</button>
-            <button type="button" onclick="closeDialog('#create-card')">Cancel</button>
+            <button class="secondary" type="button" onclick="closeDialog('#create-card')">Odustani</button>
         </section>
     </form>
 </dialog>

templates/dialogs/check-is-a-holiday.gohtml

@@ -1,23 +0,0 @@
-<dialog class="card" data-closeable id="check-is-a-holiday">
-    <div style="display: flex;">
-        <h2 style="margin-right: 1em;">Is it a holiday?</h2>
-        <button onclick="closeDialog('#check-is-a-holiday')" class="clean icon"><img class="icon" src="/assets/images/close-x.svg"></button>
-    </div>
-    <form method="get" action="/search">
-        <section>
-            <label for="country">Country:</label>
-            <select id="country" name="country">
-                {{range $entry := .Countries}}
-                    <option value="{{$entry.IsoName}}">{{$entry.Name}}</option>
-                {{end}}
-            </select>
-        </section>
-        <section>
-            <label for="date">Date:</label>
-            <input id="date" name="date" type="date" required>
-        </section>
-        <section class="actions">
-            <button style="width: 100%;" type="submit">Check is a holiday</button>
-        </section>
-    </form>
-</dialog>

templates/dialogs/delete-country.gohtml

@@ -1,11 +1,11 @@
 
 <dialog class="card" id="delete-card">
-    <h3 class="card-title">Delete country</h3>
+    <h3 class="card-title">Obriši državu</h3>
-    <p>Are you sure you want to delete "{{.Country.Name}}"?<br>All holidays for given country will be deleted!</p>
+    <p>Jeste li sigurni da želite obrisati "{{.Country.Name}}"?<br>Svi uneseni praznici za danu državu će biti obrisani!</p>
     <form method="post" action="/admin/countries/{{.Country.Id}}/delete">
         <section class="actions">
-            <button type="submit">Delete</button>
+            <button class="primary" type="submit">Obriši</button>
-            <button type="button" onclick="closeDialog('#delete-card')">Cancel</button>
+            <button class="secondary" type="button" onclick="closeDialog('#delete-card')">Odustani</button>
         </section>
     </form>
 </dialog>

templates/dialogs/delete-holiday.gohtml

@@ -1,11 +1,11 @@
 
 <dialog class="card" id="delete-card">
-    <h3 class="card-title">Delete holiday</h3>
+    <h3 class="card-title">Ukloni praznik</h3>
-    <p>Are you sure you want to delete "{{.Holiday.Name}}"?</p>
+    <p>Jeste li sigurni da želite ukloniti praznik "{{.Holiday.Name}}"?</p>
     <form method="post" action="/admin/holidays/{{.Holiday.Id}}/delete">
         <section class="actions">
-            <button type="submit">Delete</button>
+            <button class="primary" type="submit">Obriši</button>
-            <button type="button" onclick="closeDialog('#delete-card')">Cancel</button>
+            <button class="secondary" type="button" onclick="closeDialog('#delete-card')">Odustani</button>
         </section>
     </form>
 </dialog>

templates/dialogs/edit-country.gohtml

@@ -1,18 +1,18 @@
 <dialog class="card" id="update-card">
-    <h3 class="card-title">Edit country</h3>
+    <h3 class="card-title">Ažuriraj državu</h3>
     <form method="post" action="/admin/countries">
         <input type="hidden" name="id" value="{{.Country.Id}}">
-        <section>
+        <section class="form-field">
-            <label for="name">Iso name:</label>
+            <label for="name">Iso ime:</label>
             <input required minlength="2" maxlength="2" id="iso_name" value="{{.Country.IsoName}}" name="iso_name" type="text">
         </section>
-        <section>
+        <section class="form-field">
-            <label for="name">Name:</label>
+            <label for="name">Ime:</label>
             <input required minlength="1" maxlength="45" id="name" value="{{.Country.Name}}" name="name" type="text">
         </section>
         <section class="actions">
-            <button type="submit">Update</button>
+            <button class="primary" type="submit">Ažuriraj</button>
-            <button type="button" onclick="closeDialog('#update-card')">Cancel</button>
+            <button class="secondary" type="button" onclick="closeDialog('#update-card')">Odustani</button>
         </section>
     </form>
 </dialog>

templates/dialogs/edit-holiday.gohtml

@@ -1,36 +1,36 @@
 <dialog class="card" id="update-card">
-    <h3 class="card-title">Edit holiday</h3>
+    <h3 class="card-title">Ažuriraj praznik</h3>
     <form method="post" action="/admin/holidays">
         <input type="hidden" name="id" value="{{.Holiday.Id}}">
-        <section>
+        <section class="form-field">
-            <label for="country">Country:</label>
+            <label for="country">Država:</label>
             <select id="country" required name="country">
                 {{range $entry := .Countries}}
                     <option {{if eq $.Holiday.Country $entry.IsoName}}selected{{end}} value="{{$entry.IsoName}}">{{$entry.Name}}</option>
                 {{end}}
             </select>
         </section>
-        <section>
+        <section class="form-field">
-            <label for="name">Name:</label>
+            <label for="name">Ime:</label>
             <input required id="name" value="{{.Holiday.Name}}" name="name" type="text">
         </section>
-        <section>
+        <section class="form-field">
-            <label for="description">Description:</label>
+            <label for="description">Opis:</label>
             <textarea id="description" name="description">{{.Holiday.Description}}</textarea>
         </section>
-        <section>
+        <section class="form-field">
-            <label for="date">Date:</label>
+            <label for="date">Datum:</label>
             <input required id="date" value="{{.Holiday.Date.Format "2006-01-02"}}" name="date" type="date">
         </section>
-        <section>
+        <section class="form-field">
-            <label class="checkbox"><span>State holiday</span><input id="state_holiday" value="true" {{if .Holiday.IsStateHoliday}}checked{{end}} name="state_holiday" type="checkbox"></label>
+            <label class="checkbox"><span>Državni praznik</span><input id="state_holiday" value="true" {{if .Holiday.IsStateHoliday}}checked{{end}} name="state_holiday" type="checkbox"></label>
         </section>
-        <section>
+        <section class="form-field">
-            <label class="checkbox"><span>Religious holiday</span><input id="religious_holiday" value="true" {{if .Holiday.IsReligiousHoliday}}checked{{end}} name="religious_holiday" type="checkbox"></label>
+            <label class="checkbox"><span>Religiozni praznik</span><input id="religious_holiday" value="true" {{if .Holiday.IsReligiousHoliday}}checked{{end}} name="religious_holiday" type="checkbox"></label>
         </section>
         <section class="actions">
-            <button type="submit">Update</button>
+            <button class="primary" type="submit">Ažuriraj</button>
-            <button type="button" onclick="closeDialog('#update-card')">Cancel</button>
+            <button class="secondary" type="button" onclick="closeDialog('#update-card')">Odustani</button>
         </section>
     </form>
 </dialog>

templates/documentation.gohtml

@@ -1,127 +1,122 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
+    <title>Holiday-api | Dokumentacija</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8">
-    <title>Holiday-api</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/assets/style.css">
+
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/assets/global.css">
     <script src="/assets/global.js"></script>
     <script src="/assets/documentation.js"></script>
+
+    <style>
+        .dropdown-content a {
+            all: unset;
+            display: block;
+            padding: 0.5em 1em;
+        }
+        .dropdown-content a:hover {
+            background: rgba(95, 158, 160, 0.2);
+        }
+    </style>
 </head>
 <body>
-<div id="dialog-container"></div>
+<div class="background-image" style="position: fixed;"></div>
 <header>
-    <section class="container">
+    <h1><a href="/">Holiday-api</a> | Dokumentacija</h1>
-        <h1><a href="/">Holiday-api</a></h1>
-    </section>
 </header>
-<nav>
+<main class="dialog documentation-dialog">
-    <section class="container">
+    <section style="margin-bottom: 1em;">
-        <a href="/">Search</a>
+        <section id="query">
-        <a class="selected" href="#">Documentation</a>
+            <article class="card" style="margin: 1em;">
-        <button data-type="dialog" data-trigger="#check-is-a-holiday" data-url="/dialogs/check-is-a-holiday">Check is a holiday</button>
+                <form id="query-generator">
-    </section>
+                    <input type="hidden" id="country" name="country" value="HR">
-</nav>
+                    <section class="form-field">
-<main>
+                        <label for="content-type">Format</label>
-    <section id="query">
+                        <select id="content-type" name="content-type">
-        <article class="card" style="margin: 1em;">
+                            <option value="json">JSON</option>
-            <form id="query-generator">
+                            <option value="xml">XML</option>
-                <section>
+                            <option value="csv">CSV</option>
-                    <label for="country">Country</label>
+                        </select>
-                    <select id="country" name="country">
+                    </section>
-                        {{range $entry := .Countries}}
-                            <option value="{{$entry.IsoName}}">{{$entry.Name}}</option>
-                        {{end}}
-                    </select>
-                </section>
 
-                <section>
+                    <article class="optional-selector">
-                    <label for="content-type">Content type</label>
+                        <div class="header">
-                    <select id="content-type" name="content-type">
+                            <section class="form-field">
-                        <option value="application/json">JSON</option>
+                                <label for="date-selector">Izbornik</label>
-                        <option value="application/xml">XML</option>
+                                <select data-type="section-selector" data-selector-prefix="date-selector" id="date-selector" name="date-selector">
-                        <option value="text/csv">CSV</option>
+                                    <option value="year">Za godinu</option>
-                    </select>
+                                    <option value="date">Za datum</option>
-                </section>
+                                    <option value="range">Za raspon datuma</option>
+                                    <option value="all">Svi</option>
+                                </select>
+                            </section>
+                        </div>
+                        <div data-section-id="date-selector-year">
+                            <section class="form-field">
+                                <label for="dsy-year">Godina</label>
+                                <select id="dsy-year" name="year">
+                                    {{range $entry := .Years}}
+                                        <option value="{{$entry}}">{{$entry}}</option>
+                                    {{end}}
+                                </select>
+                            </section>
+                        </div>
 
-                <article class="optional-selector">
+                        <div data-section-id="date-selector-date">
-                    <div class="header">
+                            <section class="form-field">
-                        <section>
+                                <label for="dsd-date">Datum</label>
-                            <label for="date-selector">Date selector</label>
+                                <input type="date" id="dsd-date" name="dsd-date">
-                            <select data-type="section-selector" data-selector-prefix="date-selector" id="date-selector" name="date-selector">
+                            </section>
-                                <option value="year">Select year</option>
+                        </div>
-                                <option value="date">Select date</option>
-                                <option value="range">Select date range</option>
-                                <option value="all">All</option>
-                            </select>
-                        </section>
-                    </div>
 
-                    <div data-section-id="date-selector-year">
+                        <div class="range-selector" data-section-id="date-selector-range">
-                        <section>
+                            <section class="form-field">
-                            <label for="dsy-year">Year</label>
+                                <label for="dsr-start-range">Početak raspona</label>
-                            <select id="dsy-year" name="year">
+                                <input type="date" id="dsr-start-range" name="dsr-start-range">
-                                {{range $entry := .Years}}
+                            </section>
-                                    <option value="{{$entry}}">{{$entry}}</option>
+                            <section class="form-field">
-                                {{end}}
+                                <label for="dsr-end-range">Kraj raspona</label>
-                            </select>
+                                <input type="date" id="dsr-end-range" name="dsr-end-range">
-                        </section>
+                            </section>
-                    </div>
+                        </div>
+                    </article>
 
-                    <div data-section-id="date-selector-date">
+                    <section class="radio-group" style="margin-top: 0.5em;">
-                        <section>
+                        <label>Državni praznik:</label>
-                            <label for="dsd-date">Date</label>
+                        <div>
-                            <input type="date" id="dsd-date" name="dsd-date">
+                            <input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">Da
-                        </section>
+                            </label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">Ne
-                    </div>
+                            </label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">Svi</label>
-
+                        </div>
-                    <div data-section-id="date-selector-range">
+                        <input type="hidden" id="state-holiday" name="state_holiday">
-                        <section>
+                    </section>
-                            <label for="dsr-start-range">Start range</label>
+                    <section class="radio-group">
-                            <input type="date" id="dsr-start-range" name="dsr-start-range">
+                        <label>Religiozni praznik:</label>
-                        </section>
+                        <div>
-                        <section>
+                            <input type="radio" value="true" name="rh" id="rh_true"><label for="rh_true">Da
-                            <label for="dsr-start-range-required">Required</label>
+                            </label><input type="radio" value="false" name="rh" id="rh_false"><label for="rh_false">Ne
-                            <input type="checkbox" id="dsr-start-range-required" name="dsr-start-range-required">
+                            </label><input type="radio" value="" name="rh" id="rh_any"><label for="rh_any">Svi</label>
-                        </section>
+                        </div>
-                        <section>
+                        <input type="hidden" id="religious-holiday" name="religious_holiday">
-                            <label for="dsr-end-range">End range</label>
+                    </section>
-                            <input type="date" id="dsr-end-range" name="dsr-end-range">
+                </form>
-                        </section>
+            </article>
-                        <section>
+        </section>
-                            <label for="dsr-end-range-required">Required</label>
+        <section id="result" style="flex-grow: 1; margin: 1em;">
-                            <input type="checkbox" id="dsr-end-range-required" name="dsr-end-range-required">
+            <div style="display: flex; flex-wrap: wrap; align-items: baseline">
-                        </section>
+                <h3 style="margin-bottom: 1em;">Naredba</h3>
-                    </div>
+                <div style="flex-grow: 1"></div>
-                </article>
+                <div>
-
+                    <a id="query-link" style="text-decoration: none" class="button secondary" href="." target="_blank">Dohvati</a>
-                <section class="radio-group" style="margin-top: 0.5em;">
+                </div>
-                    <label>Is state holiday:</label>
+            </div>
-                    <div>
+            <article id="result-content">
-                        <input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">True
+                Učitavanje...
-                        </label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">False
+            </article>
-                        </label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">All</label>
+        </section>
-                    </div>
-                    <input type="hidden" id="state-holiday" name="state_holiday">
-                </section>
-                <section class="radio-group">
-                    <label>Is religious holiday:</label>
-                    <div>
-                        <input type="radio" value="true" name="rh" id="rh_true"><label for="rh_true">True
-                        </label><input type="radio" value="false" name="rh" id="rh_false"><label for="rh_false">False
-                        </label><input type="radio" value="" name="rh" id="rh_any"><label for="rh_any">All</label>
-                    </div>
-                    <input type="hidden" id="religious-holiday" name="religious_holiday">
-                </section>
-            </form>
-        </article>
-    </section>
-    <section id="result" style="flex-grow: 1; margin: 1em;">
-        <h3 style="margin-bottom: 1em;">Query</h3>
-        <article id="result-content" class="card source-code">
-            Loading...
-        </article>
     </section>
 </main>
 </body>
-</html>
+</html>

templates/index.gohtml

@@ -1,95 +1,36 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Holiday-api</title>
-    <link rel="stylesheet" href="/assets/style.css">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/assets/global.css">
     <script src="/assets/global.js"></script>
 </head>
 <body>
-<div id="dialog-container"></div>
+<div class="background-image">
-<header>
+    <header>
-    <section class="container">
         <h1><a href="/">Holiday-api</a></h1>
-    </section>
+        <div style="flex-grow: 1"></div>
-</header>
+        <a style="all: unset;" href="/documentation">Api dokumentacija</a>
-<nav>
+    </header>
-    <section class="container">
+    <main class="dialog search-dialog">
-        <a class="selected" href="#">Search</a>
+        <form action="/">
-        <a href="/documentation">Documentation</a>
+            <div class="form-field">
-        <button data-type="dialog" data-trigger="#check-is-a-holiday" data-url="/dialogs/check-is-a-holiday">Check is a holiday</button>
+                <label for="year">Za godinu:</label>
-    </section>
+                <select id="year" name="year">
-</nav>
+                    {{range $entry := .Years}}
-<main>
+                        <option {{if intpeq $.Search.Year $entry}}selected{{end}} value="{{$entry}}">{{$entry}}</option>
-    <section id="search">
+                    {{end}}
-        <article class="card">
+                </select>
-            <form action="/" method="get">
+            </div>
-                <section>
+            <div class="button-actions">
-                    <label for="country">Country:</label>
+                <button class="primary">Pretraži</button>
-                    <select id="country" name="country">
+            </div>
-                        {{range $entry := .Countries}}
+        </form>
-                            <option {{if eq $.Search.Country $entry.IsoName}}selected{{end}} value="{{$entry.IsoName}}">{{$entry.Name}}</option>
+    </main>
-                        {{end}}
+</div>
-                    </select>
-                </section>
-                <section>
-                    <label for="year">Year:</label>
-                    <select id="year" name="year">
-                        {{range $entry := .Years}}
-                            <option {{if intpeq $.Search.Year $entry}}selected{{end}} value="{{$entry}}">{{$entry}}</option>
-                        {{end}}
-                    </select>
-                </section>
-                <section class="radio-group">
-                    <label>Is state holiday:</label>
-                    <div>
-                        <input type="radio" value="true" name="sh" id="sh_true"><label for="sh_true">True
-                        </label><input type="radio" value="false" name="sh" id="sh_false"><label for="sh_false">False
-                        </label><input type="radio" value="" name="sh" id="sh_any"><label for="sh_any">All</label>
-                    </div>
-                    <input type="hidden" value="{{.Search.StateHoliday}}" name="state_holiday">
-                </section>
-                <section class="radio-group">
-                    <label>Is religious holiday:</label>
-                    <div>
-                        <input type="radio" value="true" name="rh" id="rh_true"><label for="rh_true">True
-                        </label><input type="radio" value="false" name="rh" id="rh_false"><label for="rh_false">False
-                        </label><input type="radio" value="" name="rh" id="rh_any"><label for="rh_any">All</label>
-                    </div>
-                    <input type="hidden" value="{{.Search.ReligiousHoliday}}" name="religious_holiday">
-                </section>
-                <section class="actions">
-                    <button class="icon primary" type="submit">
-                        <img class="icon" src="/assets/images/search.svg">
-                        <span>Search</span>
-                    </button>
-                </section>
-            </form>
-        </article>
-    </section>
-    <section id="results">
-        <table>
-            <thead>
-            <tr>
-                <th>Name</th>
-                <th>Date</th>
-                <th>State</th>
-                <th>Religious</th>
-            </tr>
-            </thead>
-            <tbody>
-            {{range $entry := .Holidays}}
-                <tr>
-                    <td>{{$entry.Name}}</td>
-                    <td>{{$entry.Date.Format "2006-01-02"}}</td>
-                    <td><img class="icon" src="{{if $entry.IsStateHoliday}}/assets/images/done-v.svg{{else}}/assets/images/close-x.svg{{end}}"></td>
-                    <td><img class="icon" src="{{if $entry.IsReligiousHoliday}}/assets/images/done-v.svg{{else}}/assets/images/close-x.svg{{end}}"></td>
-                </tr>
-            {{end}}
-            </tbody>
-        </table>
-    </section>
-</main>
 </body>
 </html>

templates/results.gohtml

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Holiday-api | {{deferint $.Search.Year}}</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="/assets/global.css">
+    <script src="/assets/global.js"></script>
+
+    <style>
+        .dropdown {
+            position: relative;
+            display: inline-block;
+        }
+
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            background-color: #f9f9f9;
+            min-width: 160px;
+            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+            z-index: 1;
+        }
+
+        .dropdown-content.selected {
+            display: block;
+        }
+        .dropdown-content a {
+            all: unset;
+            display: block;
+            padding: 0.5em 1em;
+        }
+        .dropdown-content a:hover {
+            background: rgba(95, 158, 160, 0.2);
+        }
+    </style>
+</head>
+<body>
+<div class="background-image" style="position: fixed;"></div>
+<header>
+    <h1><a href="/">Holiday-api</a> | {{deferint $.Search.Year}}</h1>
+    <div style="flex-grow: 1"></div>
+    <a style="all: unset;" href="/documentation">Api dokumentacija</a>
+</header>
+<main class="dialog results-dialog">
+    <section style="margin-bottom: 1em;">
+        <form style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1em" action="/">
+            <div style="flex-grow: 1;"></div>
+            <div class="form-field" style="width: auto;" >
+                <label for="year">Za godinu:</label>
+                <select id="year" name="year" style="width: 150px">
+                    {{range $entry := .Years}}
+                        <option {{if intpeq $.Search.Year $entry}}selected{{end}} value="{{$entry}}">{{$entry}}</option>
+                    {{end}}
+                </select>
+            </div>
+            <div class="button-actions">
+                <button class="primary">Pretraži</button>
+            </div>
+            <div class="button-actions" style="margin-left: auto">
+                <div class="dropdown">
+                    <button type="button" class="secondary dropdown-action">Preuzmi</button>
+                    <div class="dropdown-content">
+                        <a target="_blank" href="/api/v1/holidays?country=HR&type=csv&year={{deferint $.Search.Year}}">Kao csv</a>
+                        <a target="_blank" href="/api/v1/holidays?country=HR&type=json&year={{deferint $.Search.Year}}">Kao json</a>
+                        <a target="_blank" href="/api/v1/holidays?country=HR&type=xml&year={{deferint $.Search.Year}}">Kao xml</a>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </section>
+    <table class="results">
+        <thead>
+        <tr>
+            <th>Ime</th>
+            <th>Datum</th>
+        </tr>
+        </thead>
+        <tbody>
+        {{range $entry := .Holidays}}
+            <tr>
+                <td>{{$entry.Name}}</td>
+                <td>{{$entry.Date.Format "02.01.2006."}}</td>
+            </tr>
+        {{end}}
+        </tbody>
+    </table>
+</main>
+</body>
+</html>

templates/search.gohtml

@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Holiday-api | Admin dashboard</title>
-    <link rel="stylesheet" href="/assets/style.css">
-    <script src="/assets/global.js"></script>
-</head>
-<body>
-<div id="dialog-container"></div>
-<header>
-    <section class="container">
-        <h1><a href="/">Holiday-api | {{.Search.Date.Format "2006-01-02"}}</a></h1>
-    </section>
-</header>
-<nav>
-    <section class="container">
-        <a href="/">Search</a>
-        <a href="/documentation">Documentation</a>
-        <a class="selected" href="#">For date</a>
-    </section>
-</nav>
-<main>
-    <section id="search">
-        <article class="card">
-            <h2 style="margin-right: 1em;">Is it a holiday?</h2>
-            <form method="get" action="/search">
-                <section>
-                    <label for="country">Country:</label>
-                    <select id="country" name="country">
-                        {{range $entry := .Countries}}
-                            <option {{if eq $.Search.Country $entry.IsoName}}selected{{end}} value="{{$entry.IsoName}}">{{$entry.Name}}</option>
-                        {{end}}
-                    </select>
-                </section>
-                <section>
-                    <label for="date">Date:</label>
-                    <input id="date" value="{{.Search.Date.Format "2006-01-02"}}" name="date" type="date" required>
-                </section>
-                <section class="actions">
-                    <button style="width: 100%;" type="submit">Check is a holiday</button>
-                </section>
-            </form>
-        </article>
-    </section>
-    <section id="results">
-        <h2 style="margin-bottom: 1em;">Results</h2>
-        {{range $entry := .Holidays}}
-            <article class="single-holiday">
-                <table class="clean">
-                    <tbody>
-                    <tr>
-                        <th>Name: </th>
-                        <td>{{$entry.Name}}</td>
-                    </tr>
-                    <tr>
-                        <th>Description: </th>
-                        <td>{{$entry.Description}}</td>
-                    </tr>
-                    <tr>
-                        <th>Is state holiday: </th>
-                        <td><img class="icon" src="{{if $entry.IsStateHoliday}}/assets/images/done-v.svg{{else}}/assets/images/close-x.svg{{end}}"></td>
-                    </tr>
-                    <tr>
-                        <th>Is religious holiday: </th>
-                        <td><img class="icon" src="{{if $entry.IsReligiousHoliday}}/assets/images/done-v.svg{{else}}/assets/images/close-x.svg{{end}}"></td>
-                    </tr>
-                    </tbody>
-                </table>
-            </article>
-        {{end}}
-    </section>
-</main>
-</body>
-</html>