From 4e734eb19e620cdc04eb7ff0d08bc13effc47ca6 Mon Sep 17 00:00:00 2001 From: SamTV12345 <40429738+samtv12345@users.noreply.github.com> Date: Tue, 29 Jul 2025 20:55:58 +0200 Subject: [PATCH] feat: first version --- doc/skins.md | 2 +- src/locales/de.json | 4 +- src/locales/en.json | 4 +- src/static/skins/colibris/index.css | 213 ++++++++++++++++++---------- src/static/skins/colibris/index.js | 2 +- src/static/skins/colibris/pad.js | 16 ++- src/templates/index.html | 39 +++-- 7 files changed, 189 insertions(+), 91 deletions(-) diff --git a/doc/skins.md b/doc/skins.md index 90a786f84..954179f78 100644 --- a/doc/skins.md +++ b/doc/skins.md @@ -15,5 +15,5 @@ You can choose a skin changing the parameter `skinName` in `settings.json`. Since Etherpad **1.7.5**, two skins are included: -* `no-skin`: an empty skin, leaving the default Etherpad appearance unchanged, that you can use as a guidance to develop your own. +* `no-skin`: an empty skin, leaving the default Etherpad appearance unchanged, that you can use as guidance to develop your own. * `colibris`: a new, experimental skin, that will become the default in Etherpad 2.0. diff --git a/src/locales/de.json b/src/locales/de.json index 0b5790463..4bfbd5647 100644 --- a/src/locales/de.json +++ b/src/locales/de.json @@ -52,10 +52,12 @@ "admin_settings.current_save.value": "Einstellungen speichern", "admin_settings.page-title": "Einstellungen - Etherpad", "index.newPad": "Neues Pad", - "index.createOpenPad": "oder ein Pad mit folgendem Namen erstellen/öffnen:", + "index.createOpenPad": "Pad öffnen", "index.openPad": "Öffne ein vorhandenes Pad mit folgendem Namen:", "index.recentPads": "Zuletzt bearbeitete Pads", "index.recentPadsEmpty": "Keine kürzlich bearbeiteten Pads gefunden.", + "index.generateNewPad": "Neues Pad generieren", + "index.labelPad": "Padname (optional)", "pad.toolbar.bold.title": "Fett (Strg-B)", "pad.toolbar.italic.title": "Kursiv (Strg-I)", "pad.toolbar.underline.title": "Unterstrichen (Strg-U)", diff --git a/src/locales/en.json b/src/locales/en.json index 3075e6ec2..4e187c168 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -34,10 +34,12 @@ "admin_settings.page-title": "Settings - Etherpad", "index.newPad": "New Pad", - "index.createOpenPad": "or create/open a Pad with the name:", + "index.createOpenPad": "Open pad by name", "index.openPad": "open an existing Pad with the name:", "index.recentPads": "Recent Pads", "index.recentPadsEmpty": "No recent pads found.", + "index.generateNewPad": "Generate random pad name", + "index.labelPad": "Pad name (optional)", "pad.toolbar.bold.title": "Bold (Ctrl+B)", diff --git a/src/static/skins/colibris/index.css b/src/static/skins/colibris/index.css index 4e2943b7b..baf6a45f8 100644 --- a/src/static/skins/colibris/index.css +++ b/src/static/skins/colibris/index.css @@ -1,99 +1,164 @@ -#button, -body, -form { - border: none +:root { + --etherpad-color: #64d29b; + --etherpad-color-dark: #4a5d5c; + --etherpad-border: oklch(92.8% 0.006 264.531); + --muted-text: oklch(44.6% 0.03 256.802); + --muted-border: oklch(87.2% 0.01 258.338); + --muted-background: hsl(240 4.8% 95.9%); + --ep-color: rgb(22 163 74); } + body { - background: url(images/fond.jpg) center center no-repeat fixed #fff; - font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; - font-size: 16px; - line-height: 1.42857143; - color: #333; - display: flex; - align-items: center; - justify-content: center; - background-size: cover; + border-top: 0; + background: oklch(98.5% 0.002 247.839); } +h1 { + margin: auto 0 0; + font-size: 26px; +} -.pad-datalist { - position: absolute; - top: 110%; - background-color: #586a69; - border-radius: 3px; - min-height: 200px; - width: 350px; +.mission-statement h2 { + font-weight: 700; + font-size: 2.25rem; + text-align: center; + margin-top: 4rem; +} + +.mission-statement p { + color: var(--muted-text); + font-size: 20px; + text-align: center; + max-width: 40%; + margin: auto; } #wrapper { - border-top: none; + border-top: 0; margin-top: 0; padding: 0; - background: 0 0; - box-shadow: none -} - -input { - color: #4a5d5c; + background: unset; + box-shadow: none; } #inner { - background: transparent; - padding-top: 0; - width: 350px; - max-width: 350px; - text-align: center; - color:#FFF; + display: flex; + flex-direction: column; position: relative; + margin-top: 20px; + margin-bottom: 20px; + max-width: 80%; } #label { - text-shadow: none; - color: #FFF; - font-weight: normal; - text-align: center; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 700; + color: rgb(55 65 81); + margin-bottom: 0.5rem; + margin-top: 0; } -#button { - margin: 0 auto; - text-align: center; +#go2Name { + order: 1; +} + +#padname, #go2Name, #go2Name [type="submit"], #button, #button:hover { + all: unset; +} + + +#padname { width: 100%; - text-shadow: none; - font-size: 23px; - line-height: 1.8; - color: #64d29b; - background: #586a69; - border-radius: 3px; - box-shadow: none; - height: 53px; - border: none; - display: block; -} - - -button[type=submit] { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - left: 305px; - color: #64d29b; - background: #586a69; - border: none; - top: 0; - opacity: 1; - transition: .2s background; -} - -#button:hover, -button[type=submit]:hover { - cursor: pointer; - background: #4a5d5c; - color: #64d29b; + padding: 0.5rem 0.75rem; + border: 1px solid #d1d5db; + border-radius: 0.375rem; + font-size: 1rem; + margin-bottom: 0.5rem; + outline: none; + transition: border 0.2s; } #padname { - height: 38px; - max-width: 350px; - padding: 0 12px; - position: relative; + box-sizing: border-box; + width: 100%; + color: var(--muted-text); + border: 1px solid var(--muted-border); + border-radius: 5px; +} + +#button, #button:hover, #go2Name [type="submit"] { + order: 2; + margin-top: 0.5rem; + line-height: 1.25rem; + background: white; + border: 1px solid var(--muted-border); + text-align: center; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 14px; + font-weight: 700; + border-radius: 5px; + cursor: pointer; +} + +#button, #button:hover { + order: 2; +} + +#button:hover { + background-color: var(--muted-background); +} + +#go2Name input { + width: 100%; +} + + +#go2Name [type="submit"] { + display: block; + background-color: var(--ep-color); + color: white; + width: 100%; +} + + +body nav { + display: flex; + border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-color: var(--etherpad-border); + padding: 1rem 1.5rem; +} + +.logo-box svg { + width: 1.25rem; + height: 1.25rem; + color: #fff; +} + +.logo-box { + width: 2rem; + height: 2rem; + background: #16a34a; + display: flex; + align-items: center; + justify-content: center; + margin-right: 1rem; +} + + +#wrapper { + width: 100%; + max-width: 28rem; + background: #fff; + border: 1px solid #e5e7eb; + border-radius: 0.75rem; + box-shadow: 0 1px 2px 0 #0001; + margin: 2rem auto auto; +} + +.card-content { + padding: 1.5rem; } diff --git a/src/static/skins/colibris/index.js b/src/static/skins/colibris/index.js index 30e2ef2c6..c358b391f 100644 --- a/src/static/skins/colibris/index.js +++ b/src/static/skins/colibris/index.js @@ -8,7 +8,7 @@ window.customStart = () => { const recentPadList = document.getElementById('recent-pads'); const parentStyle = recentPadList.parentElement.style; const recentPadListHeading = document.querySelector('[data-l10n-id="index.recentPads"]'); - const recentPadsFromLocalStorage = localStorage.getItem('recent-pads'); + const recentPadsFromLocalStorage = localStorage.getItem('recentPads'); let recentPadListData = []; if (recentPadsFromLocalStorage != null) { recentPadListData = JSON.parse(recentPadsFromLocalStorage); diff --git a/src/static/skins/colibris/pad.js b/src/static/skins/colibris/pad.js index eb44d2b8b..cf4c7e777 100644 --- a/src/static/skins/colibris/pad.js +++ b/src/static/skins/colibris/pad.js @@ -6,7 +6,17 @@ window.customStart = () => { $('.buttonicon').on('mouseup', function () { $(this).parent().removeClass('pressed'); }); const pathSegments = window.location.pathname.split('/').filter(Boolean); - const lastSegment = pathSegments[pathSegments.length - 1]; - const padName = window.location.href - + const padName = pathSegments[pathSegments.length - 1]; + const recentPads = localStorage.getItem('recentPads'); + if (recentPads == null) { + localStorage.setItem('recentPads', JSON.stringify([])); + } + const recentPadsList = JSON.parse(localStorage.getItem('recentPads')); + if (!recentPadsList.includes(padName)) { + if (recentPadsList.length >= 10) { + recentPadsList.shift(); // Remove the oldest pad if we have more than 10 + } + recentPadsList.push(padName); + localStorage.setItem('recentPads', JSON.stringify(recentPadsList)); + } }; diff --git a/src/templates/index.html b/src/templates/index.html index ab5e1e4bb..78368aec9 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -109,6 +109,10 @@ width: 45px; height: 38px; } + nav { + display: none; + } + @media only screen and (min-device-width: 320px) and (max-device-width: 800px) { body { background: #bbb; @@ -131,29 +135,44 @@ <% e.end_block(); %> + + + +
+

Create and share documents

+

+ Etherpad allows you to edit documents collaboratively in real-time, much like a live multi-player editor that runs in your browser. +

+
+
<% e.begin_block("indexWrapper"); %>
<% if (!settings.requireSession) { %> <% if (settings.editOnly) { %> - + <% } else {%> - - + <% } %>
- - + + +
-
-

-
    -
-
<% } %>
<% e.end_block(); %>
+
+

+ +
<% e.begin_block("indexCustomScripts"); %>