We use cookies to ensure you get the best experience on our website
Начало Каталог Помощ
Регистрация Вход
0ct0pu5
/
text-based-startpage
1
0
Разклонения 0
Файлове Задачи 0 Заявки за сливане 0 Уики
Преглед на файлове

Merge pull request #1 from TheBaum123/config-rewrite

better configuration page
TheBaum преди 1 година
родител
dca1cb2e69 b1113611b1
ревизия
223eeccc3b
променени са 11 файла, в които са добавени 162 реда и са изтрити 268 реда
Разделен изглед Покажи статистика за разликите
  1. 56 38
      preferences.html
  2. 47 7
      scripts/preferences/customWallpapers.js
  3. 1 11
      scripts/preferences/injector.js
  4. 0 39
      styles/preferences/clock.css
  5. 0 33
      styles/preferences/customTitle.css
  6. 0 15
      styles/preferences/customWallpapers.css
  7. 0 42
      styles/preferences/greeting.css
  8. 58 0
      styles/preferences/main.css
  9. 0 28
      styles/preferences/quote.css
  10. 0 22
      styles/preferences/selectSearchEngine.css
  11. 0 33
      styles/preferences/theme.css

+ 56 - 38
preferences.html
Целия файл 

@@ -10,49 +10,56 @@
 
 
 <body>
 
     <script src="scripts/preferences/main.js"></script>
 
-    <div id="search-engine-select-container" class="setting-container">
 
-        <label for="search-engine-select">Select your prefered Search Engine:</label>
 
-        <select id="search-engine-select">
 
-            <option selected="selected" disabled>-- select search engine --</option>
 
-        </select>
 
+
 
+    <div id="search-engine-select-container" class="settings-container">
 
+        <div class="setting-container">
 
+            <label for="search-engine-select">Select your prefered Search Engine:</label>
 
+            <select id="search-engine-select">
 
+                <option selected="selected" disabled>-- select search engine --</option>
 
+            </select>
 
+        </div>
 
     </div>
 
-    <div id="greeting-settings-container" class="setting-container">
 
-        <div id="enable-greeting-container">
 
+
 
+    <div id="greeting-settings-container" class="settings-container">
 
+        <div id="enable-greeting-container" class="setting-container">
 
             <input type="checkbox" id="enable-greeting">
 
             <label for="enable-greeting">Enable Greeting</label>
 
         </div>
 
-        <div id="greeting-text-container">
 
+        <div id="greeting-text-container" class="setting-container">
 
             <label for="greeting-text">Greeting Text: </label>
 
             <input id="greeting-text" type="text" placeholder="e.g. Hello or Good Day">
 
         </div>
 
-        <div id="greeting-name-container">
 
+        <div id="greeting-name-container" class="setting-container">
 
             <label for="greeting-name">Name to display in greeting: </label>
 
             <input id="greeting-name" type="text" placeholder="your name">
 
         </div>
 
         <span id="greeting-preview"></span>
 
     </div>
 
-    <div id="clock-settings-container" class="setting-container">
 
-        <div id="enable-clock-container">
 
-            <input type="checkbox" id="enable-clock">
 
+
 
+    <div id="clock-settings-container" class="settings-container">
 
+        <div id="enable-clock-container" class="setting-container">
 
+            <input type="checkbox" id="enable-clock" class="check">
 
             <label for="enable-clock">Enable Clock</label>
 
         </div>
 
-        <div id="clock-seperator-container">
 
+        <div id="clock-seperator-container" class="setting-container">
 
             <label for="clock-seperator-input">Which time seperator should be used? </label>
 
             <input type="text" id="clock-seperator-input" placeholder="default: '|'">
 
         </div>
 
-        <div id="date-seperator-container">
 
+        <div id="date-seperator-container" class="setting-container">
 
             <label for="date-seperator-input">Which date seperator should be used?</label>
 
             <input type="text" id="date-seperator-input" placeholder="default: '|'">
 
         </div>
 
     </div>
 
-    <div id="disable-quote-container" class="setting-container">
 
-        <div id="enable-quote-wrapper">
 
+
 
+    <div id="disable-quote-container" class="settings-container">
 
+        <div id="enable-quote-wrapper" class="setting-container">
 
             <input type="checkbox" id="enable-quote">
 
             <label for="enable-quote">Enable Quote</label>
 
         </div>
 
     </div>
 
-    <div id="change-theme-container" class="setting-container">
 
-        <div id="theme-selector-wrapper">
 
+
 
+    <div id="change-theme-container" class="settings-container">
 
+        <div id="theme-selector-wrapper" class="setting-container">
 
             <label for="theme-selector">Theme: </label>
 
             <select id="theme-selector">
 
                 <option value="default" selected>Gruvbox dark (default)</option>
 
@@ -68,37 +75,48 @@
 
             </select>
 
         </div>
 
         <div id="custom-color-selector">
 
-            <label for="background-color">Background color:</label>
 
-            <input type="color" id="background-color">
 
-            <label for="light-background-color">Containers background color:</label>
 
-            <input type="color" id="light-background-color">
 
-            <label for="text-color">Text color:</label>
 
-            <input type="color" id="text-color">
 
-            <label for="light-text-color">Search bar text color:</label>
 
-            <input type="color" id="light-text-color">
 
-            <label for="highlighter">Accent color:</label>
 
-            <input type="color" id="highlighter">
 
+            <div class="setting-container">
 
+                <label for="background-color">Background color:</label>
 
+                <input type="color" id="background-color">
 
+            </div>
 
+            <div class="setting-container">
 
+                <label for="light-background-color">Containers background color:</label>
 
+                <input type="color" id="light-background-color">
 
+            </div>
 
+            <div class="setting-container">
 
+                <label for="text-color">Text color:</label>
 
+                <input type="color" id="text-color">
 
+            </div>
 
+            <div class="setting-container">
 
+                <label for="light-text-color">Search bar text color:</label>
 
+                <input type="color" id="light-text-color">
 
+            </div>
 
+            <div class="setting-container">
 
+                <label for="highlighter">Accent color:</label>
 
+                <input type="color" id="highlighter">
 
+            </div>
 
         </div>
 
     </div>
 
-    <div id="custom-page-title-wrapper" class="setting-container">
 
-        <div id="enable-custom-title-wrapper">
 
+
 
+    <div id="custom-page-title-wrapper" class="settings-container">
 
+        <div id="enable-custom-title-wrapper" class="setting-container">
 
             <input type="checkbox" id="enable-custom-title">
 
             <label for="enable-custom-title">Enable custom page title</label>
 
         </div>
 
-        <div id="custom-title-input-wrapper">
 
+        <div id="custom-title-input-wrapper" class="setting-container">
 
             <label for="custom-title">Custom Title: </label>
 
             <input type="text" id="custom-title" placeholder="default: startpage">
 
         </div>
 
     </div>
 
-    <div id="custom-wallpapers-wrapper" class="setting-container">
 
-        <div>
 
+
 
+    <div id="custom-wallpapers-wrapper" class="settings-container">
 
+        <div class="setting-container">
 
             <input type="checkbox" name="enable-custom-wallpapers-check" id="enable-custom-wallpapers-check">
 
-            <label for="enable-custom-wallpapers-check">Enable custom wallpapers (extremely experimental)</label>
 
+            <label for="enable-custom-wallpapers-check">Enable custom wallpapers</label>
 
         </div>
 
-        <div>
 
-            <label for="custom-wallpapers-array-input">Array of custom wallpapers:</label>
 
-            <textarea cols="30" rows="1" placeholder="[&#34;image1.url&#34;, &#34;image2.url&#34;]"
 
-                name="custom-wallpapers-array-input" id="custom-wallpapers-array-input"></textarea>
 
+        <div class="setting-container">
 
+            <input type="text" name="new-wallpaper-to-add" id="add-wallpaper-input" placeholder="New wallpaper link">
 
+            <button id="add-wallpaper-button">add wallpaper</button>
 
         </div>
 
     </div>
 
     <!--

+ 47 - 7
scripts/preferences/customWallpapers.js
Целия файл 

@@ -1,17 +1,20 @@
 
 const enableCustomWallpapersCheck = document.getElementById(
 
     "enable-custom-wallpapers-check"
 
 );
 
-const customWallpapersArrayInput = document.getElementById(
 
-    "custom-wallpapers-array-input"
 
+const addWallpaperInput = document.getElementById("add-wallpaper-input");
 
+const addWallpaperButton = document.getElementById("add-wallpaper-button");
 
+const customWallpapersWrapper = document.getElementById(
 
+    "custom-wallpapers-wrapper"
 
 );
 
 
 let enableCustomWallpaper = JSON.parse(
 
     localStorage.getItem("text-startpage:enableCustomWallpapers") || false
 
 );
 
-let customWallpapersArray = localStorage.getItem("text-startpage:wallpapers");
 
+let customWallpapersArray = JSON.parse(
 
+    localStorage.getItem("text-startpage:wallpapers")
 
+);
 
 
 enableCustomWallpapersCheck.checked = enableCustomWallpaper;
 
-customWallpapersArrayInput.value = customWallpapersArray;
 
 
 enableCustomWallpapersCheck.addEventListener("change", () => {
 
     enableCustomWallpaper = enableCustomWallpapersCheck.checked;
 
@@ -21,7 +24,44 @@ enableCustomWallpapersCheck.addEventListener("change", () => {
 
     );
 
 });
 
 
-customWallpapersArrayInput.addEventListener("change", () => {
 
-    customWallpapersArray = customWallpapersArrayInput.value;
 
-    localStorage.setItem("text-startpage:wallpapers", customWallpapersArray);
 
+for (let i = customWallpapersArray.length - 1; i >= 0; i--) {
 
+    addWallpaperToList(customWallpapersArray[i], i);
 
+}
 
+
 
+addWallpaperButton.addEventListener("click", () => {
 
+    customWallpapersArray.push(addWallpaperInput.value);
 
+    localStorage.setItem(
 
+        "text-startpage:wallpapers",
 
+        JSON.stringify(customWallpapersArray)
 
+    );
 
+    addWallpaperToList(
 
+        addWallpaperInput.value,
 
+        customWallpapersArray.length - 1
 
+    );
 
 });
 
+
 
+function addWallpaperToList(wallpaperLink, index) {
 
+    const newWallpaperNode = document.createElement("div");
 
+    const newWallpaperTextNode = document.createElement("a");
 
+    const removeWallpaperButtonNode = document.createElement("button");
 
+
 
+    newWallpaperNode.classList.add("setting-container");
 
+
 
+    newWallpaperTextNode.innerText = wallpaperLink.substring(0, 20);
 
+    newWallpaperTextNode.href = wallpaperLink;
 
+    newWallpaperTextNode.target = "_blank";
 
+    removeWallpaperButtonNode.innerText = "X";
 
+    removeWallpaperButtonNode.onclick = () => {
 
+        customWallpapersArray.splice(`${index}`, `${index}`);
 
+        customWallpapersWrapper.removeChild(newWallpaperNode);
 
+        localStorage.setItem(
 
+            "text-startpage:wallpapers",
 
+            JSON.stringify(customWallpapersArray)
 
+        );
 
+    };
 
+
 
+    newWallpaperNode.appendChild(newWallpaperTextNode);
 
+    newWallpaperNode.appendChild(removeWallpaperButtonNode);
 
+
 
+    customWallpapersWrapper.appendChild(newWallpaperNode);
 
+}

+ 1 - 11
scripts/preferences/injector.js
Целия файл 

@@ -7,17 +7,7 @@ let scriptsToInject = [
 
     "customTitle",
 
     "customWallpapers",
 
 ];
 
-let stylesToInject = [
 
-    "main",
 
-    "selectSearchEngine",
 
-    "greeting",
 
-    "clock",
 
-    "quote",
 
-    "theme",
 
-    "customTitle",
 
-    "themes",
 
-    "customWallpapers",
 
-];
 
+let stylesToInject = ["main", "themes"];
 
 
 for (let i = 0; i < scriptsToInject.length; i++) {
 
     let scriptToInject = document.createElement("script");

+ 0 - 39
styles/preferences/clock.css
Целия файл 

@@ -1,39 +0,0 @@
 
-#clock-settings-container {
 
-    display: flex;
 
-    height: 15vh;
 
-    border: var(--highlight-color) 5px solid;
 
-    border-radius: 10px;
 
-    margin-top: 3%;
 
-    flex-direction: column;
 
-    justify-content: center;
 
-    align-items: center;
 
-    color: var(--text-color);
 
-    font-size: clamp(1rem, 1.5rem, 2rem);
 
-    gap: 5%;
 
-    background-color: var(--light-background-color);
 
-}
 
-
 
-#clock-settings-container input {
 
-    height: 80%;
 
-    background-color: var(--light-background-color);
 
-    border: var(--highlight-color) 5px solid;
 
-    border-radius: 10px;
 
-    text-align: center;
 
-    outline: none;
 
-}
 
-
 
-#clock-settings-container input::placeholder {
 
-    color: var(--text-color);
 
-    font-size: clamp(1rem, 1.5rem, 2rem);
 
-}
 
-
 
-#clock-settings-container input[type="checkbox"] {
 
-    aspect-ratio: 1/1;
 
-}
 
-
 
-#enable-clock-container {
 
-    display: flex;
 
-    width: 100%;
 
-    justify-content: center;
 
-    gap: 1%;
 
-}

+ 0 - 33
styles/preferences/customTitle.css
Целия файл 

@@ -1,33 +0,0 @@
 
-#custom-page-title-wrapper {
 
-    display: flex;
 
-    height: 15vh;
 
-    margin-top: 3%;
 
-    flex-direction: column;
 
-    justify-content: center;
 
-    align-items: center;
 
-    gap: 5%;
 
-    background-color: var(--light-background-color);
 
-    border: var(--highlight-color) 5px solid;
 
-    border-radius: 10px;
 
-    font-size: clamp(1rem, 1.5rem, 2rem);
 
-    color: var(--text-color);
 
-}
 
-
 
-#enable-custom-title-wrapper {
 
-    display: flex;
 
-    gap: 1%;
 
-    width: 100%;
 
-    justify-content: center;
 
-}
 
-
 
-#enable-custom-title {
 
-    aspect-ratio: 1/1;
 
-}
 
-
 
-#custom-title {
 
-    text-align: center;
 
-    height: 100%;
 
-    font-size: 100%;
 
-    border: var(--highlight-color) 5px solid;
 
-    border-radius: 10px;
 
-}

+ 0 - 15
styles/preferences/customWallpapers.css
Целия файл 

@@ -1,15 +0,0 @@
 
-#custom-wallpapers-wrapper {
 
-    height: fit-content;
 
-    padding: 5%;
 
-    display: flex;
 
-    justify-content: center;
 
-    align-items: center;
 
-    background-color: var(--light-background-color);
 
-    margin-top: 3%;
 
-    border: var(--highlight-color) 5px solid;
 
-    border-radius: 10px;
 
-    gap: 1%;
 
-    flex-direction: column;
 
-    font-size: clamp(1rem, 1.5rem, 2rem);
 
-    color: var(--text-color);
 
-}

+ 0 - 42
styles/preferences/greeting.css
Целия файл 

@@ -1,42 +0,0 @@
 
-#greeting-settings-container {
 
-    margin-top: 3%;
 
-    height: 20vh;
 
-    display: flex;
 
-    flex-direction: column;
 
-    justify-content: center;
 
-    align-items: center;
 
-    border: var(--highlight-color) 5px solid;
 
-    border-radius: 10px;
 
-    background-color: var(--light-background-color);
 
-    gap: 5%;
 
-    font-size: clamp(1rem, 1.5rem, 2rem);
 
-    color: var(--text-color);
 
-}
 
-
 
-#greeting-settings-container input {
 
-    height: 80%;
 
-    background-color: var(--light-background-color);
 
-    border: var(--highlight-color) 5px solid;
 
-    border-radius: 10px;
 
-    text-align: center;
 
-    color: var(--text-color);
 
-    outline: none;
 
-    font-size: clamp(1rem, 1.5rem, 2rem);
 
-}
 
-
 
-#greeting-settings-container input::placeholder {
 
-    color: var(--text-color);
 
-    font-size: clamp(1rem, 1.5rem, 2rem);
 
-}
 
-
 
-#greeting-settings-container input[type="checkbox"] {
 
-    aspect-ratio: 1/1;
 
-}
 
-
 
-#enable-greeting-container {
 
-    display: flex;
 
-    flex-wrap: nowrap;
 
-    justify-content: center;
 
-    width: 100%;
 
-    gap: 1%;
 
-}

+ 58 - 0
styles/preferences/main.css
Целия файл 

@@ -11,4 +11,62 @@ body {
 
     overflow-x: hidden;
 
     background-color: var(--background-color);
 
     color-scheme: light dark;
 
+}
 
+
 
+.settings-container {
 
+    border: var(--highlight-color) 5px solid;
 
+    color: var(--text-color);
 
+    font-size: clamp(1rem, 1.5rem, 2rem);
 
+    background-color: var(--light-background-color);
 
+    border-radius: 1vh;
 
+    margin-block: 1vh;
 
+    display: flex;
 
+    flex-direction: column;
 
+    justify-content: space-evenly;
 
+    align-items: center;
 
+    padding-block: 1vh;
 
+    gap: 1vh;
 
+}
 
+
 
+.setting-container {
 
+    display: flex;
 
+    flex-direction: row;
 
+    align-items: center;
 
+    justify-content: center;
 
+    gap: 2.5vw;
 
+    margin-inline: 1vw;
 
+}
 
+
 
+input[type="checkbox"] {
 
+    scale: 1.25;
 
+}
 
+
 
+input[type="text"],
 
+select,
 
+button {
 
+    color: var(--text-color);
 
+    background-color: var(--background-color);
 
+    text-align: center;
 
+    border-radius: 5px;
 
+
 
+}
 
+
 
+input[type="text"],
 
+select {
 
+    border: 2px var(--highlight-color) solid;
 
+}
 
+
 
+input[type="text"] {
 
+    height: 1.2em;
 
+}
 
+
 
+button {
 
+    transition: border 100ms, border-color 250ms, transform 300ms;
 
+    border: none;
 
+}
 
+
 
+button:hover {
 
+    transform: scale(1.2);
 
+    border: 2px solid #00000000;
 
+    border-color: var(--highlight-color);
 
 }

+ 0 - 28
styles/preferences/quote.css
Целия файл 

@@ -1,28 +0,0 @@
 
-#disable-quote-container {
 
-    display: flex;
 
-    height: 10vh;
 
-    margin-top: 3%;
 
-    flex-direction: row;
 
-    justify-content: center;
 
-    align-items: center;
 
-    gap: 1%;
 
-    background-color: var(--light-background-color);
 
-    border: var(--highlight-color) 5px solid;
 
-    border-radius: 10px;
 
-    font-size: clamp(1rem, 1.5rem, 2rem);
 
-    color: var(--text-color);
 
-}
 
-
 
-#enable-quote-wrapper input {
 
-    height: 80%;
 
-    width: clamp(1rem, 1.5rem, 2rem);
 
-    aspect-ratio: 1/1;
 
-}
 
-
 
-#enable-quote-wrapper {
 
-    display: flex;
 
-    flex-wrap: nowrap;
 
-    width: 100%;
 
-    justify-content: center;
 
-    gap: 1%;
 
-}

+ 0 - 22
styles/preferences/selectSearchEngine.css
Целия файл 

@@ -1,22 +0,0 @@
 
-#search-engine-select-container {
 
-    height: 20vh;
 
-    display: flex;
 
-    flex-direction: column;
 
-    justify-content: center;
 
-    align-items: center;
 
-    border: var(--highlight-color) 5px solid;
 
-    border-radius: 10px;
 
-    background-color: var(--light-background-color);
 
-    gap: 5%;
 
-    font-size: 2rem;
 
-    color: var(--text-color);
 
-}
 
-
 
-#search-engine-select {
 
-    font-size: 3rem;
 
-    color: var(--text-color);
 
-    text-align: center;
 
-    border: var(--highlight-color) 5px solid;
 
-    border-radius: 10px;
 
-    background-color: var(--light-background-color);
 
-}

+ 0 - 33
styles/preferences/theme.css
Целия файл 

@@ -1,33 +0,0 @@
 
-#change-theme-container {
 
-    height: fit-content;
 
-    padding: 5%;
 
-    display: flex;
 
-    justify-content: center;
 
-    align-items: center;
 
-    background-color: var(--light-background-color);
 
-    margin-top: 3%;
 
-    border: var(--highlight-color) 5px solid;
 
-    border-radius: 10px;
 
-    gap: 1%;
 
-    flex-direction: column;
 
-}
 
-
 
-#change-theme-container * {
 
-    font-size: clamp(1rem, 1.5rem, 2rem);
 
-    color: var(--text-color);
 
-}
 
-
 
-#change-theme-container select {
 
-    border: var(--highlight-color) 5px solid;
 
-    border-radius: 10px;
 
-
 
-}
 
-
 
-#theme-selector-wrapper {
 
-    margin-bottom: 2%;
 
-}
 
-
 
-#custom-color-selector {
 
-    display: none;
 
-    flex-direction: column;
 
-}

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5