diff --git a/code/joplin_utils.nim b/code/joplin_utils.nim index ee5b199..a51c4cf 100644 --- a/code/joplin_utils.nim +++ b/code/joplin_utils.nim @@ -15,14 +15,13 @@ import std/json import httpcore import strutils import strformat -import std/times import std/options import std/httpclient import std/asyncdispatch import utils # Joplin utils procedures and types -from os import sleep +# from os import sleep from posix import read, write, fdatasync, close # --==--==--==--==--==--==--==--==--==--==-- # diff --git a/code/web_utils.nim b/code/web_utils.nim index 70d9ffa..918cec4 100644 --- a/code/web_utils.nim +++ b/code/web_utils.nim @@ -38,7 +38,7 @@ type DashbordData* = object category*: seq[string] icon*: seq[string] open_method*: seq[string] - tag*: seq[string] + tag*: seq[seq[string]] hotkey*: seq[string] color*: seq[string] @@ -75,6 +75,7 @@ type ColomnRightData* = ref object of RootObj proc getDashbordData*(): Future[DashbordData] {.async.} = var ddata: DashbordData + var tagslist: seq[string] let data = parseExcel("data/dashbord.xlsx", header = true) @@ -101,7 +102,10 @@ proc getDashbordData*(): Future[DashbordData] {.async.} = ddata.category.add(rows[i][10]) ddata.icon.add(rows[i][11]) ddata.open_method.add(rows[i][12]) - ddata.tag.add(rows[i][13]) + + tagslist = rows[i][13].split(',') + + ddata.tag.add(tagslist) ddata.hotkey.add(rows[i][14]) ddata.color.add(rows[i][15]) diff --git a/data/dashbord.xlsx b/data/dashbord.xlsx index 0d9e103..bf6e837 100644 Binary files a/data/dashbord.xlsx and b/data/dashbord.xlsx differ diff --git a/data/~$dashbord.xlsx b/data/~$dashbord.xlsx new file mode 100644 index 0000000..6a5a056 Binary files /dev/null and b/data/~$dashbord.xlsx differ diff --git a/main.nim b/main.nim index 80329eb..c2a4847 100644 --- a/main.nim +++ b/main.nim @@ -260,8 +260,10 @@ when isMainModule: # ---------------------------- # #include "tmpl/main.tmpl" include "tmpl/user.nim" +include "tmpl/dashboard.nim" include "tmpl/website.nim" + # Tests pages include # ---------------------------- # include "tmpl/tests/test_homepage.nim" @@ -354,6 +356,10 @@ routes: echo "=> Section dashbord" #url_note = "/secret?msg=dashbord" cld.option = dashbord + cld.dashbord = waitFor getDashbordData() + # resp test_bouton(cld) + #resp dashbord(cld) + elif @"msg" == "sendFeedBack": @@ -458,10 +464,6 @@ routes: get "/test_bouton": createTFD() cld.dashbord = waitFor getDashbordData() - - #dashData.title.add("test de titre ...") - # echo dashData.title[0] - resp test_bouton(cld) # Test geting all tags as JSON output diff --git a/public/css/bouton.css b/public/css/bouton.css deleted file mode 100644 index 2477951..0000000 --- a/public/css/bouton.css +++ /dev/null @@ -1,699 +0,0 @@ -@charset "UTF-8"; -body { - margin: auto; - font-family: Tahoma, sans-serif; - font-size: 16px; -} - -a { - text-decoration: none; - cursor: pointer; -} - -.disabled { - opacity: .5; - cursor: default; -} - -.ellipsis { - display: block; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -.panel { - padding: 5px; - text-align: center; -} - -.apps { - margin: auto; - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: center; -} - -div.footer.version { - font-size: 10px; - margin-top: 10px; -} - -div.footer.sorts { - text-align: center; -} - -.dialog>div { - margin: 5px 20px; - padding: 1px; - text-align: left; -} - -.dialog>div.center { - text-align: center; -} - -.dialog>div>button { - margin-right: 5px; -} - -.title { - padding: 5px; - text-align: center; - font-size: 20px; -} - -.headline { - padding: 5px; - text-align: center; - font-size: 18px; -} - -.logout { - text-align: center; - font-size: 12px; -} - -.content { - display: grid; - grid-template-columns: auto; - grid-gap: 10px; - justify-content: center; - padding: 10px; - margin: auto; - width: 95%; -} - -@media only screen and (min-width: 800px) { - .content { - grid-template-columns: auto auto; - } -} - -@media only screen and (min-width: 1200px) { - .content { - grid-template-columns: auto auto auto; - } -} - -@media only screen and (min-width: 1600px) { - .content { - grid-template-columns: auto auto auto auto; - } -} - -@media (prefers-color-scheme: dark) { - body { - background-color: #333; - color: #fff; - } -} - -.content>div { - max-width: 350px; -} - -.gwt-Button { - margin: 0px; - border: none; - padding: 6px; - cursor: pointer; - border-radius: 6px; - min-width: 28px; - min-height: 28px; -} - -.gwt-Anchor.spacer, -.gwt-Button.spacer { - margin-left: 5px; -} - -.gwt-Button:disabled { - cursor: auto; -} - -.gwt-DialogBox { - border-radius: 6px; -} - -.gwt-DialogBox .Caption { - padding: 4px 8px 4px 4px; - cursor: default; -} - -.gwt-DialogBox .dialogTopLeftInner { - width: 10px; - height: 8px; - zoom: 1; -} - -.gwt-DialogBox .dialogTopRightInner { - width: 12px; - zoom: 1; -} - -.gwt-DialogBox .dialogBottomLeftInner { - width: 10px; - height: 12px; - zoom: 1; -} - -.gwt-DialogBox .dialogBottomRightInner { - width: 12px; - height: 12px; - zoom: 1; -} - -.gwt-DialogBox .dialogMiddleCenter { - padding: 3px; -} - - -/** Light theme */ - -body.light { - background: #f5f5f5 url("images/Background.png") no-repeat center fixed; - background-size: contain; -} - -.light a { - color: black; -} - -.light a:hover { - color: #248bfb; -} - -.light a.pagination:hover { - color: #248bfb; - background: #ececec; -} - -.light a.pagination.current { - color: #248bfb; - background: #ececec; -} - -.light .title { - background-color: #248bfb; - color: white; -} - -.light .content { - background-color: white; -} - -.light .gwt-Button { - border: 1px solid navy; - background-color: #248bfb; - color: white; -} - -.light .gwt-Button:hover { - background-color: #0362cb; -} - -.light .gwt-Button:disabled { - border-color: #aaa; - background-color: #ccc; - color: white; -} - -.light .gwt-Button.sort:disabled { - border-color: green; - background-color: #03cb62; - color: white; -} - -.light .gwt-DialogBox { - background-color: #248bfb; - border: 3px solid #abd2fe; -} - -.light .gwt-DialogBox .Caption { - color: white; -} - -.light .gwt-DialogBox .dialogMiddleCenter { - background: white; -} - -.light .gwt-PopupPanelGlass { - background-color: black; - opacity: 0.3; - filter: alpha(opacity=30); -} - -.light .content>div { - border: 1px solid #f5f5f5; -} - - -/** Dark theme */ - -body.dark { - background: #272c30 url("images/Background-Dark.png") no-repeat center fixed; - background-size: contain; - color: #95c7fd; -} - -.dark a { - color: #95c7fd; -} - -.dark a:hover { - color: #e7e9eb; -} - -.dark a.pagination:hover { - color: #e7e9eb; - background: #95a0aa; -} - -.dark a.pagination.current { - color: #e7e9eb; - background: #95a0aa; -} - -.dark .title { - background-color: #024793; - color: #95c7fd; -} - -.dark .content { - background-color: #202326; -} - -.dark .gwt-Button { - border: 1px solid black; - background-color: #95a0aa; - color: #04356b; -} - -.dark .gwt-Button:hover { - background-color: #bec5cb; -} - -.dark .gwt-Button:disabled { - border-color: #666; - background-color: #333; - color: #248bfb; -} - -.dark .gwt-Button.sort:disabled { - color: #03cb62; -} - -.dark .gwt-DialogBox { - background-color: #555; - border: 3px solid #999; -} - -.dark .gwt-DialogBox .Caption { - color: #95c7fd; -} - -.dark .gwt-DialogBox .dialogMiddleCenter { - background: #272c30; -} - -.dark .gwt-PopupPanelGlass { - background-color: black; - opacity: 0.5; - filter: alpha(opacity=50); -} - -.dark .content>div { - border: 1px solid #b9b9b9; -} - -.grid-container-title { - grid-area: title; - text-align: center; - font-size: min(max(5vw, 10px), 24px); -} - -.grid-container-title.jp { - font-size: min(max(3.75vw, 6px), 21px); -} - -.grid-container-logo { - grid-area: logo; -} - -.grid-container-description { - grid-area: description; - font-size: min(max(3.25vw, 8px), 18px); - padding: 10px; -} - -.grid-container-description.jp { - font-size: min(max(3vw, 5px), 15px); -} - -.grid-container-languages { - grid-area: languages; - font-size: min(max(3vw, 7px), 16px); -} - -.grid-container-languages.jp { - font-size: min(max(2.75vw, 5px), 13px); - ; -} - -.grid-container { - display: grid; - grid-template-areas: 'logo title' 'logo description' 'logo languages'; - gap: 2px; - padding: 10px; -} - - -/** Glow */ - - -/** https://webdeasy.de/en/top-css-buttons-en */ - -.glow-on-hover { - display: inline-block; - width: 90vw; - max-width: 400px; - height: 45vw; - max-height: 200px; - margin: 5px; - border: 1px solid #111; - outline: none; - cursor: pointer; - position: relative; - z-index: 0; - border-radius: 10px; - padding: 6px; -} - -.light .glow-on-hover { - color: white; - background-color: rgba(36, 139, 251, 0.5); -} - -.dark .glow-on-hover { - color: #95c7fd; - background-color: rgba(190, 197, 203, 0.3); -} - -.glow-on-hover:before { - content: ''; - background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); - position: absolute; - top: -2px; - left: -2px; - background-size: 400%; - z-index: -1; - filter: blur(5px); - width: calc(100% + 4px); - height: calc(100% + 4px); - animation: glowing 20s linear infinite; - opacity: 0; - transition: opacity .3s ease-in-out; - border-radius: 10px; -} - -.glow-on-hover:active { - color: #888888 -} - -.glow-on-hover:active:after { - background: transparent; -} - -.glow-on-hover:hover:before { - opacity: 1; -} - -.glow-on-hover:after { - z-index: -1; - content: ''; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - border-radius: 10px; -} - -.light .glow-on-hover:hover:after { - background-color: rgba(0, 33, 122, 1); -} - -.dark .glow-on-hover:hover:after { - background-color: rgba(25, 25, 25, 1); -} - -@keyframes glowing { - 0% { - background-position: 0 0; - } - 50% { - background-position: 400% 0; - } - 100% { - background-position: 0 0; - } -} - -div.crossfade { - position: relative; - width: min(32.4vw, 144px); - height: min(32.4vw, 144px); -} - -div.crossfade>img { - position: absolute; - top: -1px; - bottom: 0; - left: -1px; - right: 0; - width: min(32.4vw, 144px); - height: min(32.4vw, 144px); -} - -div.crossfade>img.bottom { - animation-name: fade-bottom; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; - animation-duration: 5s; - animation-direction: alternate; -} - -div.crossfade>img.top { - animation-name: fade-top; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; - animation-duration: 5s; - animation-direction: alternate; -} - -@keyframes fade-bottom { - 0% { - opacity: 0; - } - 25% { - opacity: 0; - } - 75% { - opacity: 1; - } - 100% { - opacity: 1; - } -} - -@keyframes fade-top { - 0% { - opacity: 1; - } - 25% { - opacity: 1; - } - 75% { - opacity: 0; - } - 100% { - opacity: 0; - } -} - - -/* loading.css */ - -#fountainG { - position: relative; - width: 234px; - height: 38px; - margin: auto; -} - -.fountainG { - position: absolute; - top: 0; - background-color: rgb(255, 255, 255); - width: 28px; - height: 28px; - animation-name: bounce_fountainG; - -o-animation-name: bounce_fountainG; - -ms-animation-name: bounce_fountainG; - -webkit-animation-name: bounce_fountainG; - -moz-animation-name: bounce_fountainG; - animation-duration: 0.975s; - -o-animation-duration: 0.975s; - -ms-animation-duration: 0.975s; - -webkit-animation-duration: 0.975s; - -moz-animation-duration: 0.975s; - animation-iteration-count: infinite; - -o-animation-iteration-count: infinite; - -ms-animation-iteration-count: infinite; - -webkit-animation-iteration-count: infinite; - -moz-animation-iteration-count: infinite; - animation-direction: normal; - -o-animation-direction: normal; - -ms-animation-direction: normal; - -webkit-animation-direction: normal; - -moz-animation-direction: normal; - transform: scale(.3); - -o-transform: scale(.3); - -ms-transform: scale(.3); - -webkit-transform: scale(.3); - -moz-transform: scale(.3); - border-radius: 19px; - -o-border-radius: 19px; - -ms-border-radius: 19px; - -webkit-border-radius: 19px; - -moz-border-radius: 19px; -} - -#fountainG_1 { - left: 0; - animation-delay: 0.386s; - -o-animation-delay: 0.386s; - -ms-animation-delay: 0.386s; - -webkit-animation-delay: 0.386s; - -moz-animation-delay: 0.386s; -} - -#fountainG_2 { - left: 29px; - animation-delay: 0.4825s; - -o-animation-delay: 0.4825s; - -ms-animation-delay: 0.4825s; - -webkit-animation-delay: 0.4825s; - -moz-animation-delay: 0.4825s; -} - -#fountainG_3 { - left: 58px; - animation-delay: 0.589s; - -o-animation-delay: 0.589s; - -ms-animation-delay: 0.589s; - -webkit-animation-delay: 0.589s; - -moz-animation-delay: 0.589s; -} - -#fountainG_4 { - left: 88px; - animation-delay: 0.6855s; - -o-animation-delay: 0.6855s; - -ms-animation-delay: 0.6855s; - -webkit-animation-delay: 0.6855s; - -moz-animation-delay: 0.6855s; -} - -#fountainG_5 { - left: 117px; - animation-delay: 0.782s; - -o-animation-delay: 0.782s; - -ms-animation-delay: 0.782s; - -webkit-animation-delay: 0.782s; - -moz-animation-delay: 0.782s; -} - -#fountainG_6 { - left: 146px; - animation-delay: 0.8785s; - -o-animation-delay: 0.8785s; - -ms-animation-delay: 0.8785s; - -webkit-animation-delay: 0.8785s; - -moz-animation-delay: 0.8785s; -} - -#fountainG_7 { - left: 175px; - animation-delay: 0.975s; - -o-animation-delay: 0.975s; - -ms-animation-delay: 0.975s; - -webkit-animation-delay: 0.975s; - -moz-animation-delay: 0.975s; -} - -#fountainG_8 { - left: 205px; - animation-delay: 1.0715s; - -o-animation-delay: 1.0715s; - -ms-animation-delay: 1.0715s; - -webkit-animation-delay: 1.0715s; - -moz-animation-delay: 1.0715s; -} - -@keyframes bounce_fountainG { - 0% { - transform: scale(1); - background-color: rgb(255, 0, 0); - } - 100% { - transform: scale(.3); - background-color: rgb(255, 255, 255); - } -} - -@-o-keyframes bounce_fountainG { - 0% { - -o-transform: scale(1); - background-color: rgb(255, 0, 0); - } - 100% { - -o-transform: scale(.3); - background-color: rgb(255, 255, 255); - } -} - -@-ms-keyframes bounce_fountainG { - 0% { - -ms-transform: scale(1); - background-color: rgb(255, 0, 0); - } - 100% { - -ms-transform: scale(.3); - background-color: rgb(255, 255, 255); - } -} - -@-webkit-keyframes bounce_fountainG { - 0% { - -webkit-transform: scale(1); - background-color: rgb(255, 0, 0); - } - 100% { - -webkit-transform: scale(.3); - background-color: rgb(255, 255, 255); - } -} - -@-moz-keyframes bounce_fountainG { - 0% { - -moz-transform: scale(1); - background-color: rgb(255, 0, 0); - } - 100% { - -moz-transform: scale(.3); - background-color: rgb(255, 255, 255); - } -} \ No newline at end of file diff --git a/public/css/dashboard.css b/public/css/dashboard.css new file mode 100644 index 0000000..a983f60 --- /dev/null +++ b/public/css/dashboard.css @@ -0,0 +1,352 @@ +/*////////////////////////////////////////////////////////////////// +[ FIN ]*/ + +@charset "UTF-8"; +body { + margin: auto; + font-family: Tahoma, sans-serif; + font-size: 16px; +} + +/*////////////////////////////////////////////////////////////////// +[ Page layout ]*/ + +.panel { + padding: 5px; + text-align: center; +} + +.apps { + margin: auto; + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +div.footer.version { + font-size: 12px; + margin-top: 12px; +} + +@media only screen and (min-width: 800px) { + .content { + grid-template-columns: auto auto; + } +} + +@media only screen and (min-width: 1200px) { + .content { + grid-template-columns: auto auto auto; + } +} + +@media only screen and (min-width: 1600px) { + .content { + grid-template-columns: auto auto auto auto; + } +} + + +/*////////////////////////////////////////////////////////////////// +[ Button grid layout ]*/ + +.grid-container { + display: grid; + /* grid-template-areas: 'logo title' 'logo description' 'logo infos' 'logo status'; */ + grid-template-areas: + 'logo title' + 'logo description' + 'logo info' + 'status tags'; + gap: 2px; + padding: 2px; +} + +.grid-container-title { + grid-area: title; + text-align: right; + font-weight: bold; + padding-right: 2px; + font-size: min(max(3vw, 8px), 18px); + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; + max-width: 25ch; + +} + +.grid-container-title.jp { + font-size: min(max(3.75vw, 6px), 21px); +} + +.grid-container-logo { + grid-area: logo; + padding-top: 10px; +} + +.grid-container-description { + grid-area: description; + text-align: right; + font-size: min(max(3vw, 8px), 15px); + font-style: italic; + padding: 0.5px; + padding-right: 2px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; +} + +.grid-container-info { + grid-area: info; + text-align: right; + padding: 0.25px; + padding-right: 2px; + text-align: right; + font-size: 15px; + +} + +.grid-container-tags { + grid-area: tags; + text-align: right; + padding: 0.5px; + padding-right: 2px; + padding-top: 3px; + fill: blue; +} + +.grid-container-status { + grid-area: status; + text-align: left; + padding: 2px; + padding-left: 20px; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; + max-width: 25ch; +} + +/*////////////////////////////////////////////////////////////////// +[ Icons ]*/ + +.dashboard-logo { + padding: 0.5px; + padding-left: 4px; + width: min(3.24vw, 14px); + height: min(3.24vw, 14px); +} + +.lock { + padding: 0.8px; + /* padding-top: 5px; */ + width: min(3.24vw, 20px); + height: min(3.24vw, 20px); + fill: green; +} + +.lockopen { + padding: 0.8px; + /* padding-top: 5px; */ + width: min(3.24vw, 20px); + height: min(3.24vw, 20px); + fill: red; +} + +.status-logo { + padding: 0.8px; + /* padding-top: 5px; */ + width: min(3.24vw, 20px); + height: min(3.24vw, 20px); + fill: blue; +} + +/*////////////////////////////////////////////////////////////////// +[ Glow ] https://webdeasy.de/en/top-css-buttons-en */ + +.glow-on-hover { + display: inline-block; + width: 90vw; + max-width: 400px; + height: 45vw; + max-height: 200px; + margin: 5px; + border: 1px solid #111; + outline: none; + cursor: pointer; + position: relative; + z-index: 0; + border-radius: 10px; + padding: 6px; +} + +/* .light .glow-on-hover { + color: white; + background-color: rgba(41, 109, 181, 0.5); +} + +.dark .glow-on-hover { + color: #95c7fd; + background-color: rgba(190, 197, 203, 0.3); +} */ + +.glow-on-hover:before { + content: ''; + /* background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); */ + background: linear-gradient(45deg,#052479, #0b36ac, #1b58fe, #3c6ffa, #5580f7, #6c93fe, #91adf9, #b7c9fc, #91adf9, #6c93fe, #5580f7, #3c6ffa, #1b58fe, #0b36ac, #052479, #091c4f); + position: absolute; + top: -2px; + left: -2px; + background-size: 400%; + z-index: -1; + filter: blur(5px); + width: calc(100% + 4px); + height: calc(100% + 4px); + animation: glowing 20s linear infinite; + opacity: 0; + transition: opacity .3s ease-in-out; + border-radius: 10px; + color: white; + background-color: rgba(36, 139, 251, 0.5); +} + +.glow-on-hover:active { + color: #888888 +} + +.glow-on-hover:active:after { + background: transparent; +} + +.glow-on-hover:hover:before { + opacity: 1; +} + +.glow-on-hover:after { + z-index: -1; + content: ''; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + border-radius: 10px; +} + +.glow-on-hover:hover:after { + color: white; + background-color: rgb(41, 139, 214) +} + +.dark .glow-on-hover:hover:after { + background-color: rgba(25, 25, 25, 1); +} + +@keyframes glowing { + 0% { + background-position: 0 0; + } + 50% { + background-position: 400% 0; + } + 100% { + background-position: 0 0; + } +} + +/*////////////////////////////////////////////////////////////////// +[ Cross fade image Brands - Bookmark ]*/ +div.crossfade { + position: relative; + width: min(32.4vw, 124px); + height: min(32.4vw, 124px); +} + +div.crossfade > img { + position: absolute; + top: -1px; + bottom: 0; + left: -1px; + right: 0; + width: min(32.4vw, 124px); + height: min(32.4vw, 124px); +} + + + div.crossfade > img { + position:absolute; + left:0; + -webkit-transition: all 1s ease-in-out; + -moz-transition: all 1s ease-in-out; + -o-transition: all 1s ease-in-out; + transition: all 1s ease-in-out; + } + + div.crossfade > img.bookmark { + -webkit-transform:scale(0,0); + -moz-transform:scale(0,0); + -o-transform:scale(0,0); + transform:scale(0,0); + opacity:0; + + } + + div.crossfade:hover img.bookmark, div.crossfade.hover_effect img.bookmark { + opacity:1; + -webkit-transform:scale(1,1); + -webkit-transform-origin: top right; + -moz-transform:scale(1,1); + -moz-transform-origin: top right; + -o-transform:scale(1,1); + -o-transform-origin: top right; + transform:scale(1,1); + transform-origin: top right; + } + + div.crossfade:hover img.brands, div.crossfade.hover_effect img.brands { + -webkit-transform:scale(0,0); + -webkit-transform-origin: bottom left; + -moz-transform:scale(0,0); + -moz-transform-origin: bottom left; + -o-transform:scale(0,0); + -o-transform-origin: bottom left; + transform:scale(0,0); + transform-origin: bottom left; + } + + +@keyframes fade-bottom { + 0% { + opacity: 0; + } + 25% { + opacity: 0; + } + 75% { + opacity: 1; + } + 100% { + opacity: 1; + } +} + +@keyframes fade-top { + 0% { + opacity: 1; + } + 25% { + opacity: 1; + } + 75% { + opacity: 0; + } + 100% { + opacity: 0; + } +} + +/*////////////////////////////////////////////////////////////////// +[ FIN ]*/ \ No newline at end of file diff --git a/public/css/main.css b/public/css/main.css index a39d557..aab13b3 100755 --- a/public/css/main.css +++ b/public/css/main.css @@ -1,7 +1,3 @@ - - - - /*////////////////////////////////////////////////////////////////// [ FONT ]*/ @@ -25,9 +21,6 @@ src: url('../fonts/poppins/Poppins-SemiBold.ttf'); } - - - /*////////////////////////////////////////////////////////////////// [ RESTYLE TAG ]*/ @@ -489,6 +482,8 @@ iframe { } } +/*////////////////////////////////////////////////////////////////// +[ FIN ]*/ diff --git a/public/css/styles.css b/public/css/styles.css index d203180..1d2eaa9 100755 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -119,6 +119,19 @@ a { } +/* Search bar */ +.search-wrapper { + display: flex; + flex-direction: column; + gap: .25rem; + padding:3em; +} + +input { + font-size: 1.5rem; +} + + /* Clear floats after the columns */ .row:after { diff --git a/public/images/icons/Book_02-512.webp b/public/images/icons/Book_02-512.webp new file mode 100644 index 0000000..d224423 Binary files /dev/null and b/public/images/icons/Book_02-512.webp differ diff --git a/public/images/svg/Shaarli.svg b/public/images/svg/Shaarli.svg new file mode 100644 index 0000000..8438dab --- /dev/null +++ b/public/images/svg/Shaarli.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/svg/bookmark.svg b/public/images/svg/bookmark.svg new file mode 100644 index 0000000..ddf2f2b --- /dev/null +++ b/public/images/svg/bookmark.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/public/images/svg/emby.svg b/public/images/svg/emby.svg new file mode 100644 index 0000000..c8bb9dd --- /dev/null +++ b/public/images/svg/emby.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/svg/filebrowser.svg b/public/images/svg/filebrowser.svg new file mode 100644 index 0000000..5e78ecc --- /dev/null +++ b/public/images/svg/filebrowser.svg @@ -0,0 +1,147 @@ + +image/svg+xml + + + + + \ No newline at end of file diff --git a/public/images/svg/internet.svg b/public/images/svg/internet.svg new file mode 100644 index 0000000..22cbf0e --- /dev/null +++ b/public/images/svg/internet.svg @@ -0,0 +1,141 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/svg/nginx.svg b/public/images/svg/nginx.svg new file mode 100644 index 0000000..a3eef82 --- /dev/null +++ b/public/images/svg/nginx.svg @@ -0,0 +1 @@ +file_type_nginx \ No newline at end of file diff --git a/public/images/svg/qbittorrent.svg b/public/images/svg/qbittorrent.svg new file mode 100644 index 0000000..0cee965 --- /dev/null +++ b/public/images/svg/qbittorrent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/js/all.min.js b/public/js/all.min.js new file mode 100644 index 0000000..d45b67d --- /dev/null +++ b/public/js/all.min.js @@ -0,0 +1,6 @@ +/*! + * Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + * Copyright 2022 Fonticons, Inc. + */ +!function(){"use strict";var c={},s={};try{"undefined"!=typeof window&&(c=window),"undefined"!=typeof document&&(s=document)}catch(c){}var l=(c.navigator||{}).userAgent,z=void 0===l?"":l,a=c,e=s;a.document,e.documentElement&&e.head&&"function"==typeof e.addEventListener&&e.createElement,~z.indexOf("MSIE")||z.indexOf("Trident/");function C(s,c){var l,z=Object.keys(s);return Object.getOwnPropertySymbols&&(l=Object.getOwnPropertySymbols(s),c&&(l=l.filter(function(c){return Object.getOwnPropertyDescriptor(s,c).enumerable})),z.push.apply(z,l)),z}function H(s){for(var c=1;cc.length)&&(s=c.length);for(var l=0,z=new Array(s);lc.length)&&(s=c.length);for(var l=0,z=new Array(s);lc.length)&&(s=c.length);for(var l=0,z=new Array(s);lc.length)&&(s=c.length);for(var l=0,z=new Array(s);l>>0;l--;)s[l]=c[l];return s}function z1(c){return c.classList?l1(c.classList):(c.getAttribute("class")||"").split(" ").filter(function(c){return c})}function a1(c){return"".concat(c).replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(//g,">")}function e1(l){return Object.keys(l||{}).reduce(function(c,s){return c+"".concat(s,": ").concat(l[s].trim(),";")},"")}function C1(c){return c.size!==J.size||c.x!==J.x||c.y!==J.y||c.rotate!==J.rotate||c.flipX||c.flipY}function H1(){var c,s,l=b,z=G.cssPrefix,a=G.replacementClass,e=':host,:root{--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Solid";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Regular";--fa-font-light:normal 300 1em/1 "Font Awesome 6 Light";--fa-font-thin:normal 100 1em/1 "Font Awesome 6 Thin";--fa-font-duotone:normal 900 1em/1 "Font Awesome 6 Duotone";--fa-font-sharp-solid:normal 900 1em/1 "Font Awesome 6 Sharp";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}svg:not(:host).svg-inline--fa,svg:not(:root).svg-inline--fa{overflow:visible;box-sizing:content-box}.svg-inline--fa{display:var(--fa-display,inline-block);height:1em;overflow:visible;vertical-align:-.125em}.svg-inline--fa.fa-2xs{vertical-align:.1em}.svg-inline--fa.fa-xs{vertical-align:0}.svg-inline--fa.fa-sm{vertical-align:-.0714285705em}.svg-inline--fa.fa-lg{vertical-align:-.2em}.svg-inline--fa.fa-xl{vertical-align:-.25em}.svg-inline--fa.fa-2xl{vertical-align:-.3125em}.svg-inline--fa.fa-pull-left{margin-right:var(--fa-pull-margin,.3em);width:auto}.svg-inline--fa.fa-pull-right{margin-left:var(--fa-pull-margin,.3em);width:auto}.svg-inline--fa.fa-li{width:var(--fa-li-width,2em);top:.25em}.svg-inline--fa.fa-fw{width:var(--fa-fw-width,1.25em)}.fa-layers svg.svg-inline--fa{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers-counter,.fa-layers-text{display:inline-block;position:absolute;text-align:center}.fa-layers{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers svg.svg-inline--fa{-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-text{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter{background-color:var(--fa-counter-background-color,#ff253a);border-radius:var(--fa-counter-border-radius,1em);box-sizing:border-box;color:var(--fa-inverse,#fff);line-height:var(--fa-counter-line-height,1);max-width:var(--fa-counter-max-width,5em);min-width:var(--fa-counter-min-width,1.5em);overflow:hidden;padding:var(--fa-counter-padding,.25em .5em);right:var(--fa-right,0);text-overflow:ellipsis;top:var(--fa-top,0);-webkit-transform:scale(var(--fa-counter-scale,.25));transform:scale(var(--fa-counter-scale,.25));-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-bottom-right{bottom:var(--fa-bottom,0);right:var(--fa-right,0);top:auto;-webkit-transform:scale(var(--fa-layers-scale,.25));transform:scale(var(--fa-layers-scale,.25));-webkit-transform-origin:bottom right;transform-origin:bottom right}.fa-layers-bottom-left{bottom:var(--fa-bottom,0);left:var(--fa-left,0);right:auto;top:auto;-webkit-transform:scale(var(--fa-layers-scale,.25));transform:scale(var(--fa-layers-scale,.25));-webkit-transform-origin:bottom left;transform-origin:bottom left}.fa-layers-top-right{top:var(--fa-top,0);right:var(--fa-right,0);-webkit-transform:scale(var(--fa-layers-scale,.25));transform:scale(var(--fa-layers-scale,.25));-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-top-left{left:var(--fa-left,0);right:auto;top:var(--fa-top,0);-webkit-transform:scale(var(--fa-layers-scale,.25));transform:scale(var(--fa-layers-scale,.25));-webkit-transform-origin:top left;transform-origin:top left}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.0833333337em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.0714285718em;vertical-align:.0535714295em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.0416666682em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(var(--fa-li-width,2em) * -1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-color:var(--fa-border-color,#eee);border-radius:var(--fa-border-radius,.1em);border-style:var(--fa-border-style,solid);border-width:var(--fa-border-width,.08em);padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{-webkit-animation-name:fa-beat;animation-name:fa-beat;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{-webkit-animation-name:fa-bounce;animation-name:fa-bounce;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{-webkit-animation-name:fa-fade;animation-name:fa-fade;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade{-webkit-animation-name:fa-beat-fade;animation-name:fa-beat-fade;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{-webkit-animation-name:fa-flip;animation-name:fa-flip;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{-webkit-animation-name:fa-shake;animation-name:fa-shake;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,2s);animation-duration:var(--fa-animation-duration,2s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,steps(8));animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{-webkit-animation-delay:-1ms;animation-delay:-1ms;-webkit-animation-duration:1ms;animation-duration:1ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;transition-delay:0s;transition-duration:0s}}@-webkit-keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@-webkit-keyframes fa-bounce{0%{-webkit-transform:scale(1,1) translateY(0);transform:scale(1,1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1,1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1,1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1,1) translateY(0);transform:scale(1,1) translateY(0)}100%{-webkit-transform:scale(1,1) translateY(0);transform:scale(1,1) translateY(0)}}@keyframes fa-bounce{0%{-webkit-transform:scale(1,1) translateY(0);transform:scale(1,1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1,1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1,1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1,1) translateY(0);transform:scale(1,1) translateY(0)}100%{-webkit-transform:scale(1,1) translateY(0);transform:scale(1,1) translateY(0)}}@-webkit-keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@-webkit-keyframes fa-beat-fade{0%,100%{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-beat-fade{0%,100%{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@-webkit-keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@-webkit-keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}24%,8%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}100%,40%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}24%,8%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}100%,40%{-webkit-transform:rotate(0);transform:rotate(0)}}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-webkit-transform:scale(1,-1);transform:scale(1,-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1,-1);transform:scale(-1,-1)}.fa-rotate-by{-webkit-transform:rotate(var(--fa-rotate-angle,none));transform:rotate(var(--fa-rotate-angle,none))}.fa-stack{display:inline-block;vertical-align:middle;height:2em;position:relative;width:2.5em}.fa-stack-1x,.fa-stack-2x{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0;z-index:var(--fa-stack-z-index,auto)}.svg-inline--fa.fa-stack-1x{height:1em;width:1.25em}.svg-inline--fa.fa-stack-2x{height:2em;width:2.5em}.fa-inverse{color:var(--fa-inverse,#fff)}.fa-sr-only,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.fa-sr-only-focusable:not(:focus),.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.svg-inline--fa .fa-primary{fill:var(--fa-primary-color,currentColor);opacity:var(--fa-primary-opacity,1)}.svg-inline--fa .fa-secondary{fill:var(--fa-secondary-color,currentColor);opacity:var(--fa-secondary-opacity,.4)}.svg-inline--fa.fa-swap-opacity .fa-primary{opacity:var(--fa-secondary-opacity,.4)}.svg-inline--fa.fa-swap-opacity .fa-secondary{opacity:var(--fa-primary-opacity,1)}.svg-inline--fa mask .fa-primary,.svg-inline--fa mask .fa-secondary{fill:#000}.fa-duotone.fa-inverse,.fad.fa-inverse{color:var(--fa-inverse,#fff)}';return"fa"===z&&a===l||(c=new RegExp("\\.".concat("fa","\\-"),"g"),s=new RegExp("\\--".concat("fa","\\-"),"g"),l=new RegExp("\\.".concat(l),"g"),e=e.replace(c,".".concat(z,"-")).replace(s,"--".concat(z,"-")).replace(l,".".concat(a))),e}var t1=!1;function V1(){G.autoAddCss&&!t1&&(function(c){if(c&&L){var s=v.createElement("style");s.setAttribute("type","text/css"),s.innerHTML=c;for(var l=v.head.childNodes,z=null,a=l.length-1;-1").concat(z.map(o1).join(""),"")}function m1(c,s,l){if(c&&c[s]&&c[s][l])return{prefix:s,iconName:l,icon:c[s][l]}}L&&((n1=(v.documentElement.doScroll?/^loaded|^c/:/^loaded|^i|^c/).test(v.readyState))||v.addEventListener("DOMContentLoaded",r1));function f1(c,s,l,z){for(var a,e,C=Object.keys(c),H=C.length,t=void 0!==z?v1(s,z):s,V=void 0===l?(a=1,c[C[0]]):(a=0,l);a +
+
+
+ # var count: int = 1 + # var i: int + # for i in 0 .. (columnLeftInfo.dashbord.position.len() - 1) : + # count += 1 + + # end for +
+
+
+ + + + +#end proc \ No newline at end of file diff --git a/tmpl/snippet_icons.nim b/tmpl/snippet_icons.nim index b8d0812..bda78ad 100644 --- a/tmpl/snippet_icons.nim +++ b/tmpl/snippet_icons.nim @@ -212,3 +212,61 @@ proc SendFeedback_icon*(): string = tmpli html""" """ + + +# --==--==--==--==--==--==--==--==--==--==-- # +# SVG : Bookmark icon +# --==--==--==--==--==--==--==--==--==--==-- # +proc Bookmark_icon*(): string = tmpli html""" + + + """ + +# --==--==--==--==--==--==--==--==--==--==-- # +# SVG : Docker icon +# --==--==--==--==--==--==--==--==--==--==-- # +proc Docker_icon*(): string = tmpli html""" + + + """ + + +# --==--==--==--==--==--==--==--==--==--==-- # +# SVG : Lock icon +# --==--==--==--==--==--==--==--==--==--==-- # +proc Lock_icon*(): string = tmpli html""" + + + """ + +# --==--==--==--==--==--==--==--==--==--==-- # +# SVG : Lock-open icon +# --==--==--==--==--==--==--==--==--==--==-- # +proc Lockopen_icon*(): string = tmpli html""" + + + """ + +# --==--==--==--==--==--==--==--==--==--==-- # +# SVG : tag icon +# --==--==--==--==--==--==--==--==--==--==-- # +proc Tag_icon*(): string = tmpli html""" + + """ + +# --==--==--==--==--==--==--==--==--==--==-- # +# SVG : internet icon +# --==--==--==--==--==--==--==--==--==--==-- # +proc Internet_icon*(): string = tmpli html""" + + """ + +# --==--==--==--==--==--==--==--==--==--==-- # +# SVG : LocalNetwork icon +# --==--==--==--==--==--==--==--==--==--==-- # +proc LocalNetwork_icon*(): string = tmpli html""" + + """ \ No newline at end of file diff --git a/tmpl/tests/test_bouton.nim b/tmpl/tests/test_bouton.nim index d7dd1f0..0f13e52 100644 --- a/tmpl/tests/test_bouton.nim +++ b/tmpl/tests/test_bouton.nim @@ -1,5 +1,5 @@ #? stdtmpl | standard -# +# import ../snippet_icons #proc test_bouton(columnLeftInfo: var ColomnLeftData): string = # result = "" @@ -9,20 +9,22 @@ - Document - + Bonton Dashboard + - - + +

TEST Bouton Dashbord

@@ -32,26 +34,87 @@ # var i: int # for i in 0 .. (columnLeftInfo.dashbord.position.len() - 1) : # count += 1 - # if columnLeftInfo.dashbord.ext_link[i] == "" and columnLeftInfo.dashbord.int_link[i] == "": - # end for
@@ -62,7 +125,7 @@
diff --git a/tmpl/tests/test_homepage.nim b/tmpl/tests/test_homepage.nim index ce77261..a3d7bd2 100644 --- a/tmpl/tests/test_homepage.nim +++ b/tmpl/tests/test_homepage.nim @@ -19,7 +19,8 @@

Test joplin Notebooks

Test Joplin Notes

Test Joplin Tags

-

Test View Tree

Test Bouton

+

Test View Tree

+

Test Bouton

diff --git a/tmpl/website.nim b/tmpl/website.nim index 44af9da..74031e1 100644 --- a/tmpl/website.nim +++ b/tmpl/website.nim @@ -25,6 +25,7 @@ Joplin-TheNewWeb + @@ -32,13 +33,15 @@
+ +
+ + +
+