feat: updated welcome page

Author: SamTV12345

src/locales/de.json

@@ -58,7 +58,10 @@
   "index.recentPadsEmpty": "Keine kürzlich bearbeiteten Pads gefunden.",
   "index.generateNewPad": "Neues Pad generieren",
   "index.labelPad": "Padname (optional)",
-	"pad.toolbar.bold.title": "Fett (Strg-B)",
+  "index.placeholderPadEnter": "Gib den Namen des Pads ein...",
+  "index.createAndShareDocuments": "Erstelle und teile Dokumente in Echtzeit",
+  "index.createAndShareDocumentsDescription": "Etherpad ermöglicht die gemeinsame Bearbeitung von Dokumenten in Echtzeit, ähnlich wie ein Live-Multiplayer-Editor, der in Ihrem Browser läuft.",
+  "pad.toolbar.bold.title": "Fett (Strg-B)",
 	"pad.toolbar.italic.title": "Kursiv (Strg-I)",
 	"pad.toolbar.underline.title": "Unterstrichen (Strg-U)",
 	"pad.toolbar.strikethrough.title": "Durchgestrichen (Strg+5)",

src/locales/en.json

@@ -40,6 +40,9 @@
   "index.recentPadsEmpty": "No recent pads found.",
   "index.generateNewPad": "Generate random pad name",
   "index.labelPad": "Pad name (optional)",
+  "index.placeholderPadEnter": "Gib den Namen des Pads ein...",
+  "index.createAndShareDocuments": "Create and share documents in real time",
+  "index.createAndShareDocumentsDescription": "Etherpad allows you to edit documents collaboratively in real-time, much like a live multi-player editor that runs in your browser.",
 
 
   "pad.toolbar.bold.title": "Bold (Ctrl+B)",

src/static/js/pad_userlist.ts

@@ -489,6 +489,15 @@ const paduserlist = (() => {
           online++;
         }
       }
+      const recentPadsList = JSON.parse(localStorage.getItem('recentPads'));
+      const pathSegments = window.location.pathname.split('/');
+      const padName = pathSegments[pathSegments.length - 1];
+      const existingPad = recentPadsList.find((pad) => pad.name === padName);
+      if (existingPad) {
+        existingPad.members = online;
+      }
+      localStorage.setItem('recentPads', JSON.stringify(recentPadsList));
+
 
       $('#online_count').text(online);
 

src/static/skins/colibris/index.css

@@ -6,24 +6,36 @@
   --muted-border: oklch(87.2% 0.01 258.338);
   --muted-background: hsl(240 4.8% 95.9%);
   --ep-color: rgb(22 163 74);
+  --warm-green-olive: #7c9a3e;
+  --warm-green-moss: #8fae4a;
+  --warm-green-lime: #b7c96c;
+  --warm-green-avocado: #6e8b3d;
+  --warm-green-spring: #a3c85a;
 }
 
 
 body {
   border-top: 0;
   background: oklch(98.5% 0.002 247.839);
+  display: flex;
+  flex-direction: column;
 }
 
 h1 {
   margin: auto 0 0;
   font-size: 26px;
 }
 
+.mission-statement, .pad-datalist {
+  display: block;
+}
+
 .mission-statement h2 {
   font-weight: 700;
   font-size: 2.25rem;
   text-align: center;
-  margin-top: 4rem;
+  margin: 0;
+  padding-top: 4rem;
 }
 
 .mission-statement p {
@@ -165,6 +177,7 @@ body nav {
 
 .pad-datalist {
   max-width: 56rem;
+  margin-bottom: 1rem;
 }
 
 .break-column {
@@ -183,6 +196,17 @@ ul {
   flex-direction: column;
 }
 
+.body {
+  flex-grow: 1;
+  background: linear-gradient(
+    to bottom right,
+    #d1fae5,   /* emerald-100 */
+    #f0fdfa,   /* teal-50 */
+    #dbeafe,   /* blue-100 */
+    #c7d2fe    /* indigo-200 */
+  );
+}
+
 .recent-pad:hover a {
   color: var(--ep-color);
 }
@@ -208,9 +232,27 @@ a, a:visited, a:hover, a:active {
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-bottom-color: #e5e7eb;
-  width: 100%;
 }
 
 .card-content {
   padding: 1.5rem;
 }
+
+@media (max-width: 640px) {
+  #inner {
+    max-width: 100%;
+    padding: 0 1rem;
+  }
+
+  .mission-statement p {
+    max-width: 100%;
+  }
+
+  .pad-datalist {
+    max-width: 90%;
+  }
+
+  .mission-statement h2 {
+    font-size: 1.5rem;
+  }
+}

src/static/skins/colibris/index.js

@@ -1,10 +1,32 @@
 'use strict';
 
+window.addEventListener('pageshow', (event) => {
+  if (event.persisted) {
+    if (document.readyState === 'complete' || document.readyState === 'interactive') {
+      window.customStart();
+    } else {
+      window.addEventListener('DOMContentLoaded', window.customStart, {once: true});
+    }
+  }
+});
 
 window.customStart = () => {
+  document.getElementById('recent-pads').replaceChildren()
   // define your javascript here
   // jquery is available - except index.js
   // you can load extra scripts with $.getScript http://api.jquery.com/jQuery.getScript/
+  const divHoldingPlaceHolderLabel = document
+    .querySelector('[data-l10n-id="index.placeholderPadEnter"]');
+
+  const observer = new MutationObserver(() => {
+    document.querySelector('#go2Name input')
+      .setAttribute('placeholder', divHoldingPlaceHolderLabel.textContent);
+  });
+
+  observer
+    .observe(divHoldingPlaceHolderLabel, {childList: true, subtree: true, characterData: true});
+
+
   const recentPadList = document.getElementById('recent-pads');
   const parentStyle = recentPadList.parentElement.style;
   const recentPadListHeading = document.querySelector('[data-l10n-id="index.recentPads"]');
@@ -14,6 +36,12 @@ window.customStart = () => {
     recentPadListData = JSON.parse(recentPadsFromLocalStorage);
   }
 
+  // Remove duplicates based on pad name and sort by timestamp
+  recentPadListData = recentPadListData.filter(
+    (pad, index, self) =>
+      index === self.findIndex((p) => p.name === pad.name)
+  ).sort((a, b) => new Date(a.timestamp) > new Date(b.timestamp) ? -1 : 1);
+
   if (recentPadListData.length === 0) {
     recentPadListHeading.setAttribute('data-l10n-id', 'index.recentPadsEmpty');
     parentStyle.display = 'flex';

src/static/skins/colibris/pad.js

@@ -1,25 +1,27 @@
 'use strict';
 
+const MAX_PADS_IN_HISTORY = 3;
+
 window.customStart = () => {
   $('#pad_title').show();
   $('.buttonicon').on('mousedown', function () { $(this).parent().addClass('pressed'); });
   $('.buttonicon').on('mouseup', function () { $(this).parent().removeClass('pressed'); });
 
-  const pathSegments = window.location.pathname.split('/').filter(Boolean);
+  const pathSegments = window.location.pathname.split('/');
   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.some((pad) => pad.name === padName)) {
-    if (recentPadsList.length >= 10) {
+    if (recentPadsList.length >= MAX_PADS_IN_HISTORY) {
       recentPadsList.shift(); // Remove the oldest pad if we have more than 10
     }
     recentPadsList.push({
       name: padName,
       timestamp: new Date().toISOString(), // Store the timestamp for sorting
-      members: 0,
+      members: 1,
     });
     localStorage.setItem('recentPads', JSON.stringify(recentPadsList));
   } else {

src/templates/index.html

@@ -109,7 +109,7 @@
               width: 45px;
               height: 38px;
             }
-            nav {
+            nav, .mission-statement, .pad-datalist {
               display: none;
             }
 
@@ -143,11 +143,10 @@ <h1>Etherpad</h1>
         </nav>
 
 
+        <div class="body">
         <div class="mission-statement">
-          <h2>Create and share documents</h2>
-          <p>
-            Etherpad allows you to edit documents collaboratively in real-time, much like a live multi-player editor that runs in your browser.
-          </p>
+          <h2 data-l10n-id="index.createAndShareDocuments"></h2>
+          <p data-l10n-id="index.createAndShareDocumentsDescription"></p>
         </div>
 
         <div id="wrapper">
@@ -161,18 +160,20 @@ <h2>Create and share documents</h2>
                     <% } %>
                     <form action="#" id="go2Name">
                       <label id="label" for="padname" data-l10n-id="index.labelPad"></label>
-                      <input type="text" id="padname" maxlength="50" autofocus placeholder="Enter pad name...">
+                      <input type="text" id="padname"  maxlength="50" autofocus placeholder="Enter pad name...">
                         <button type="submit" data-l10n-id="index.createOpenPad"></button>
                     </form>
                 <% } %>
             </div>
         <% e.end_block(); %>
         </div>
+        <div style="display: none" data-l10n-id="index.placeholderPadEnter"></div>
         <div class="pad-datalist">
           <h2 data-l10n-id="index.recentPads"></h2>
           <ul id="recent-pads">
           </ul>
         </div>
+        </div>
         <script src="<%=entrypoint%>"></script>
 
         <% e.begin_block("indexCustomScripts"); %>