We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
text-based-startpage
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

start rewrite

TheBaum123 1 year ago
parent
dca1cb2e69
commit
2adcc9b3db
9 changed files with 20 additions and 223 deletions
Split View Show Diff Stats
  1. 13 11
      preferences.html
  2. 0 39
      styles/preferences/clock.css
  3. 0 33
      styles/preferences/customTitle.css
  4. 0 15
      styles/preferences/customWallpapers.css
  5. 0 42
      styles/preferences/greeting.css
  6. 7 0
      styles/preferences/main.css
  7. 0 28
      styles/preferences/quote.css
  8. 0 22
      styles/preferences/selectSearchEngine.css
  9. 0 33
      styles/preferences/theme.css

+ 13 - 11
preferences.html
View File 

@@ -10,13 +10,15 @@
 
 
 <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="greeting-settings-container" class="settings-container">
 
         <div id="enable-greeting-container">
 
             <input type="checkbox" id="enable-greeting">
 
             <label for="enable-greeting">Enable Greeting</label>
 
@@ -31,7 +33,7 @@
 
         </div>
 
         <span id="greeting-preview"></span>
 
     </div>
 
-    <div id="clock-settings-container" class="setting-container">
 
+    <div id="clock-settings-container" class="settings-container">
 
         <div id="enable-clock-container">
 
             <input type="checkbox" id="enable-clock">
 
             <label for="enable-clock">Enable Clock</label>
 
@@ -45,13 +47,13 @@
 
             <input type="text" id="date-seperator-input" placeholder="default: '|'">
 
         </div>
 
     </div>
 
-    <div id="disable-quote-container" class="setting-container">
 
+    <div id="disable-quote-container" class="settings-container">
 
         <div id="enable-quote-wrapper">
 
             <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="change-theme-container" class="settings-container">
 
         <div id="theme-selector-wrapper">
 
             <label for="theme-selector">Theme: </label>
 
             <select id="theme-selector">
 
@@ -80,7 +82,7 @@
 
             <input type="color" id="highlighter">
 
         </div>
 
     </div>
 
-    <div id="custom-page-title-wrapper" class="setting-container">
 
+    <div id="custom-page-title-wrapper" class="settings-container">
 
         <div id="enable-custom-title-wrapper">
 
             <input type="checkbox" id="enable-custom-title">
 
             <label for="enable-custom-title">Enable custom page title</label>
 
@@ -90,7 +92,7 @@
 
             <input type="text" id="custom-title" placeholder="default: startpage">
 
         </div>
 
     </div>
 
-    <div id="custom-wallpapers-wrapper" class="setting-container">
 
+    <div id="custom-wallpapers-wrapper" class="settings-container">
 
         <div>
 
             <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>

+ 0 - 39
styles/preferences/clock.css
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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%;
 
-}

+ 7 - 0
styles/preferences/main.css
View File 

@@ -11,4 +11,11 @@ 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);
 
 }

+ 0 - 28
styles/preferences/quote.css
View File 

@@ -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
View File 

@@ -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
View File 

@@ -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