From 080eb2593d98c50810b92f2e3eb6205b257523a0 Mon Sep 17 00:00:00 2001 From: Djeex Date: Sat, 16 Aug 2025 21:40:38 +0200 Subject: [PATCH] Header --- src/webui/favicon.ico | Bin 0 -> 7117 bytes src/webui/img/logo.svg | 166 ++++++++++++++++++++++++++++++++++++++ src/webui/index.html | 96 ++++++++++++++-------- src/webui/style/style.css | 147 ++++++++++++++++++++++++++++++++- 4 files changed, 373 insertions(+), 36 deletions(-) create mode 100644 src/webui/favicon.ico create mode 100644 src/webui/img/logo.svg diff --git a/src/webui/favicon.ico b/src/webui/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..7fabbb1493c1b923f5939d39dbde6677fbd4aecb GIT binary patch literal 7117 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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/webui/index.html b/src/webui/index.html index 387abeb..9ba2a23 100644 --- a/src/webui/index.html +++ b/src/webui/index.html @@ -8,40 +8,72 @@ + +
+
+
+
+ → +
+ 🚀 Build ! +
+ +
+
+ +
+
+ +
+ +
+ +
+ + +
+ +
+
-
-

Photo WebUI

- - +
+
- -
-

Hero

- -
-
- - -
-

Gallery

- - -
+

Gallery editor

- - - + +
+

Title Carrousel

+

Select photos to display in the Title Carrousel

+ + +
+
+ + +
+

Gallery

+

Select and tags photos to display in the Gallery

+ + + +
+ + + + +
diff --git a/src/webui/style/style.css b/src/webui/style/style.css index 61413a0..60092a4 100644 --- a/src/webui/style/style.css +++ b/src/webui/style/style.css @@ -4,8 +4,13 @@ body { background:radial-gradient(ellipse at bottom center, #002a30, #000000bd), radial-gradient(ellipse at top center, #0558a8, #000000fa); color: #FBFBFB; min-height: 100vh; + margin:0px; } +.content-inner { + max-width: 90%; + margin: 0 auto; +} h1, h2 { color: #FBFBFB; } @@ -42,9 +47,6 @@ h1, h2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; -} - -#gallery { margin-top: 30px; } @@ -217,4 +219,141 @@ h1, h2 { .flex-end { align-items: flex-end; width: 100% -} \ No newline at end of file +} + +/* Top bar */ + +.nav { + height: 100%; +} + +.nav-bar { + height: 70px; + width: 100%; + background-color: #0c0d0c29; + position: relative; + z-index: 1; + backdrop-filter: blur(20px); + border-bottom: 1px solid #21212157; + +} + +.nav img { + height: 30px; + padding: 0px; + margin-top: 10px; +} + +.nav > .nav-header { + display: inline; +} + +.nav > .nav-header > .nav-title { + display: inline-block; + font-size: 22px; + color: #fff; + padding: 0; + margin-top: 10px; +} + +.nav > .nav-btn { + display: none; +} + +.nav > .nav-links { + display: inline; + float: right; + font-size: 12px; + height: 100%; + line-height: 70px; +} + +.nav-item { + display: inline; + +} + +.nav-list { + list-style-type: disc; + margin: 0px; + padding: 0px; +} + +.nav > .nav-links > .nav-list > .nav-item > a { + display: inline-block; + padding: 0px 15px 0px 15px; + text-decoration: none; + height: 100%; + font-weight: 700; + color:#fff + +} + +.nav > .nav-links > .nav-list > .nav-item > a:hover { + color: #00b0f0; +} + +.nav > #nav-check { + display: none; +} + + +.nav-list > li + li::before{ + content: " → "; + color: #ffc700; +} + +.nav-cta { + display: inline; + float: right; + height: 70px; + line-height: 70px; +} + +.nav-cta > .arrow { + font-size: 12px; + display: inline; + color: #ffc700; + font-weight: 700; +} + +.nav-cta > .button { + padding: 10px 25px; + border-radius: 40px; + margin: 15px 20px 15px 10px; + font-size: 12px; + display: inline; + background: linear-gradient(135deg, #26c4ff, #016074); + transition: all 0.2s ease; + text-decoration: none; + color: #fff; + font-weight: 700; +} + +.nav-cta > .button:hover { + background: linear-gradient(135deg, #72d9ff, #26657e); + transition: all 0.2s ease; +} + +.nav-links > ul { + display: inline-block; +} + +/* Custom upload buttons */ +.custom-upload-btn { + display: inline-block; + background: #09A0C1; + color: #fff; + padding: 0.5em 1em; + border-radius: 30px; + cursor: pointer; + font-weight: bold; + text-align: center; + transition: all 0.1s ease; + user-select: none; + box-shadow: 0 4px 10px rgba(0,0,0,0.25); +} + +.custom-upload-btn:hover { + background: #55c3ec; +}