optimized visibility

gllmAR · Oct 22, 2024 · aa15ff7 · aa15ff7
1 parent 548a123
commit aa15ff7
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 95 deletions.
diff --git a/index.html b/index.html
@@ -13,6 +13,8 @@
   <!-- Settings Section -->
   <div class="settings">
     <button id="theme-toggle" onclick="toggleTheme()">🌞</button>
+    <h1 id="title">Visual Prompt Builder</h1>
+
     <div class="language-selector">
       <button id="language-btn" onclick="toggleLanguageMenu()">🌐 <span id="current-language">EN</span></button>
       <div id="language-menu" class="language-menu">
@@ -21,7 +23,6 @@
     </div>
   </div>
 
-  <h1 id="title">Visual Prompt Builder</h1>
 
   <!-- Dropdown Menus -->
   <div id="dropdown-groups"></div>

diff --git a/style.css b/style.css
@@ -1,46 +1,32 @@
-/* Define color variables */
-:root {
-  --background-color: #ffffff;
-  --text-color: #000000;
-  --input-bg-color: #f9f9f9;
-  --input-border-color: #cccccc;
-  --button-bg-color: #007BFF;
-  --button-text-color: #ffffff;
-  --success-color: #28a745; /* Green */
-  --error-color: #dc3545;   /* Red */
-}
-
-[data-theme="dark"] {
-  --background-color: #121212;
-  --text-color: #ffffff;
-  --input-bg-color: #1e1e1e;
-  --input-border-color: #444444;
-  --button-bg-color: #1a73e8;
-  --button-text-color: #ffffff;
-  --success-color: #28a745;
-  --error-color: #dc3545;
+/* Flexbox for settings and title in one line */
+.settings {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0px; /* Add some spacing between the title and the content */
 }
 
-/* General Styles */
-body {
-  font-family: Arial, sans-serif;
+h1 {
+  flex: 1; /* Let the title take up remaining space */
   margin: 0;
-  padding: 0;
-  background-color: var(--background-color);
-  color: var(--text-color);
+  text-align: center;
+  font-size: calc(1rem + 1vw); /* Dynamically adjust the size based on viewport */
+  white-space: nowrap; /* Prevent the title from wrapping onto multiple lines */
+  overflow: hidden; /* Hide text overflow */
+  text-overflow: ellipsis; /* Show '...' when the title is too long */
 }
 
-.container {
-  max-width: 900px;
-  margin: auto;
-  padding: 10px;
+/* Buttons for language and theme toggle should align properly */
+.language-selector, #theme-toggle {
+  margin-left: 10px; /* Add spacing between buttons */
 }
 
-/* Settings Section */
-.settings {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+#theme-toggle {
+  font-size: 24px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-color);
 }
 
 .language-selector {
@@ -79,103 +65,110 @@ body {
   font-size: 16px;
   cursor: pointer;
   color: var(--text-color);
+  display: inline-flex;
+  align-items: center;
 }
 
-#theme-toggle {
-  font-size: 24px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--text-color);
-}
-
-h1 {
-  text-align: center;
-  margin: 10px 0;
-}
-
-/* Dropdown Groups */
+/* Set a fixed height for the dropdown categories and make them scrollable */
 #dropdown-groups {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 10px;
-  margin-bottom: 120px; /* Space for prompt-section */
-}
-
-.dropdown-group {
-  flex: 1 1 calc(25% - 10px); /* 4 columns */
-  min-width: 150px;
-}
-
-.dropdown-group label {
-  font-weight: bold;
-  display: block;
-  margin-bottom: 5px;
-  color: var(--text-color);
+  max-height: calc(100vh - 150px); /* Reduce height to ensure the prompt section fits well */
+  overflow-y: auto; /* Enable scrolling only within the dropdown section */
+  padding-bottom: 20px; /* Prevent content from going under the prompt section */
 }
 
-.dropdown-group select {
-  width: 100%;
-  padding: 8px;
-  font-size: 14px;
-  border-radius: 5px;
-  border: 1px solid var(--input-border-color);
-  background-color: var(--input-bg-color);
-  color: var(--text-color);
-}
-
-/* Prompt Section */
+/* Fix the prompt section at the bottom but make it more compact */
 .prompt-section {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: var(--background-color);
-  padding: 10px;
+  padding: 5px 10px; /* Reduce padding to make the section more compact */
   border-top: 1px solid var(--input-border-color);
+  z-index: 10; /* Ensure it's above the content */
 }
 
-.prompt-section .container {
-  max-width: 900px;
-  margin: auto;
+/* Adjust the container to avoid double scrollbar */
+body {
+  overflow: hidden; /* Remove the outer scrollbar */
 }
 
+/* Reduce the height of the prompt input and buttons to make the bottom section smaller */
 #prompt {
   width: 100%;
-  height: 60px;
-  font-size: 16px;
+  height: 40px; /* Make the input field shorter */
+  font-size: 14px; /* Reduce font size to save space */
   margin-top: 5px;
-  padding: 8px;
+  padding: 5px; /* Smaller padding */
   border: 1px solid var(--input-border-color);
   border-radius: 5px;
   background-color: var(--input-bg-color);
   color: var(--text-color);
   resize: none;
 }
 
-/* Action Buttons */
 .buttons {
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   margin-top: 5px;
 }
 
 .buttons button {
   flex: 1;
-  padding: 8px;
-  font-size: 20px;
+  padding: 5px; /* Reduce padding on buttons to make them smaller */
+  font-size: 16px; /* Reduce button font size */
   cursor: pointer;
   border: none;
   background: none;
   color: var(--text-color);
-  border: 2px solid transparent; /* Default border */
   border-radius: 5px;
 }
 
-/* Hover effect */
-.buttons button:hover {
-  color: var(--button-bg-color);
+/* General Styles */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+.container {
+  max-width: 900px;
+  margin: auto;
+  padding: 10px;
+  padding-bottom: 10px; /* Ensure enough space for the prompt section */
+}
+
+/* Dropdown Groups */
+#dropdown-groups {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
+  margin-bottom: 120px; /* Space for prompt-section */
+}
+
+.dropdown-group {
+  flex: 1 1 calc(25% - 10px); /* 4 columns */
+  min-width: 150px;
+}
+
+.dropdown-group label {
+  font-weight: bold;
+  display: block;
+  margin-bottom: 5px;
+  color: var(--text-color);
+}
+
+.dropdown-group select {
+  width: 100%;
+  padding: 8px;
+  font-size: 14px;
+  border-radius: 5px;
+  border: 1px solid var(--input-border-color);
+  background-color: var(--input-bg-color);
+  color: var(--text-color);
 }
 
 /* Success and Error Animations */
@@ -261,6 +254,29 @@ h1 {
   }
 
   #prompt {
-    height: 80px;
+    height: 60px; /* Increase the height slightly for smaller screens */
   }
 }
+
+/* Define color variables */
+:root {
+  --background-color: #ffffff;
+  --text-color: #000000;
+  --input-bg-color: #f9f9f9;
+  --input-border-color: #cccccc;
+  --button-bg-color: #007BFF;
+  --button-text-color: #ffffff;
+  --success-color: #28a745; /* Green */
+  --error-color: #dc3545;   /* Red */
+}
+
+[data-theme="dark"] {
+  --background-color: #121212;
+  --text-color: #ffffff;
+  --input-bg-color: #1e1e1e;
+  --input-border-color: #444444;
+  --button-bg-color: #1a73e8;
+  --button-text-color: #ffffff;
+  --success-color: #28a745;
+  --error-color: #dc3545;
+}