Refactor frontend styles and HTML structure for login, dashboard, and…

… search pages; remove unused font links and enhance context menu styles [TASK]: Building a Modern Search Page: From Scratch with HTML, CSS, and JavaScript #7

App/Frontend/css/context-menu.css

@@ -15,7 +15,7 @@
 .context-menu-item {
     background-color: var(--tertiary);
     border: 1px solid var(--primary);
-    border-radius: 10px;
+    border-radius: var(--radius);
     display: flex;
     flex-direction: column;
     padding: 0px;
@@ -26,13 +26,12 @@
     color: var(--text);
 }
 
-.context-menu-item i {
-    color: var(--secondary);
+.context-menu-item svg {
+    fill: var(--secondary);
+    width: 24px;
+    height: 24px;
     margin-right: 10px;
-}
-
-.context-menu-item i:hover {
-    color: var(--accent);
+    transition: fill 0.3s ease;
 }
 
 .context-menu-item li {
@@ -53,6 +52,6 @@
 
 .context-menu-item li:hover {
     background-color: var(--background);
-    border-radius: 10px;
+    border-radius: var(--radius);
 }
 /* Context Menu */

App/Frontend/css/dashboard.css

@@ -23,7 +23,7 @@
         'nav main main main main'
         'nav main main main main'
         'nav main main main main';
-    grid-template-columns: 1fr 2fr 2fr 2fr;
+    grid-template-columns: 1fr 3fr 3fr 3fr;
     gap: 16px;
     padding: 10px;
     height: 95vh;
@@ -44,8 +44,8 @@
 .dashboard-header-section4 {
     background-color: var(--quaternary);
     color: var(--text);
-    border-radius: 15px;
-    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    border-radius: var(--radius);
+    box-shadow: 2px 0 5px var(--shadow);
     width: 100%;
     height: 100%;
     font-weight: bold;
@@ -72,8 +72,8 @@
 .dashboard-main {
     background-color: var(--tertiary);
     color: var(--text);
-    border-radius: 15px;
-    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    border-radius: var(--radius);
+    box-shadow: 2px 0 5px var(--shadow);
     width: 100%;
 }
 /* Dashboard Main */

App/Frontend/css/global.css

@@ -24,6 +24,12 @@
     --accent: #ac8fbd;
 }
 
+:root {
+    --radius: 12px;
+    --spacing: 16px;
+    --shadow: rgba(0, 0, 0, 0.1);
+}
+
 :root { /* Kubernetes status colors */
     --status-cluster-ready: #28a745;
     --status-cluster-notready: #f44336;
@@ -46,9 +52,67 @@
 }
 /* Global Styles */
 
+/* Fonts */
+@font-face { /* cyrillic-ext */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    src: url(/App/Frontend/fonts/inter-cyrillic-ext.woff2) format('woff2');
+    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face { /* cyrillic */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    src: url(/App/Frontend/fonts/inter-cyrillic.woff2) format('woff2');
+    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face { /* greek-ext */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    src: url(/App/Frontend/fonts/inter-greek-ext.woff2) format('woff2');
+    unicode-range: U+1F00-1FFF;
+}
+
+@font-face { /* greek */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    src: url(/App/Frontend/fonts/inter-greek.woff2) format('woff2');
+    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+@font-face { /* vietnamese */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    src: url(/App/Frontend/fonts/inter-vietnamese.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face { /* latin-ext */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    src: url(/App/Frontend/fonts/inter-latin-ext.woff2) format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face { /* latin */
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    src: url(/App/Frontend/fonts/inter-latin.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* Fonts */
+
 /* Global Body */
 body {
-    background-color: var(--background);
+    background-color: var(--secondary);
     font-family: 'Inter', Arial;
 }
 /* Global Body */
@@ -71,7 +135,7 @@ body {
 
 ::-webkit-scrollbar-thumb {
     background-color: var(--tertiary);
-    border-radius: 10px;
+    border-radius: var(--radius);
 }
 
 ::-webkit-scrollbar-thumb:hover {

App/Frontend/css/login.css

@@ -63,7 +63,7 @@
     width: 320px;
     margin-top: 20px;
     padding: 20px 10px 60px 10px;
-    border-radius: 8px;
+    border-radius: var(--radius);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -77,7 +77,7 @@
     border: 1px solid var(--text);
     margin: 8px 0;
     padding: 12px;
-    border-radius: 4px;
+    border-radius: var(--radius);
     transition: border-color 0.3s;
     min-height: 44px;
     font-size: 18px;
@@ -95,7 +95,7 @@
     margin: 10px 0;
     padding: 14px;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--radius);
     cursor: pointer;
     transition: background-color 0.3s;
     font-size: 18px;
@@ -112,7 +112,7 @@
     height: auto;
     display: block;
     margin: 20px auto;
-    border-radius: 8px;
+    border-radius: var(--radius);
     padding-bottom: 20px;
 }
 /* Login CSS */

App/Frontend/css/navigation-bar.css

@@ -9,8 +9,8 @@
 .navigation-bar {
     background-color: var(--tertiary);
     color: var(--secondary);
-    border-radius: 15px;
-    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+    border-radius: var(--radius);
+    box-shadow: 2px 0 5px var(--shadow);
     min-width: 150px;
     padding: 20px;
     top: 20px;
@@ -39,7 +39,7 @@
     font-weight: 700;
     text-align: center;
     margin-bottom: 10px;
-    margin-left: 10px;
+    margin-left: 5px;
 }
 
 .navigation-bar-menu {
@@ -53,31 +53,33 @@
     align-items: center;
     padding: 10px 15px;
     margin: 5px 0;
-    border-radius: 10px;
-    transition: background-color 0.3s ease;
+    border-radius: var(--radius);
+    transition: background-color 0.3s ease, color 0.3s ease;
     cursor: pointer;
 }
 
-.navigation-bar-menu-item i {
-    margin-right: 10px;
-    font-size: 1.2rem;
-}
-
-.navigation-bar-menu-item span {
-    color: var(--text);
-    font-size: 1rem;
+.navigation-bar-menu-item:hover span, .navigation-bar-menu-item:hover svg {
+    color: var(--accent);
+    fill: var(--accent);
 }
 
 .navigation-bar-menu-item a {
     color: var(--secondary);
     text-decoration: none;
+    display: flex;
+    align-items: center;
 }
 
-.navigation-bar-menu-item a:hover {
-    color: var(--accent);
+.navigation-bar-header svg, .navigation-bar-menu-item svg {
+    fill: var(--secondary);
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+    transition: fill 0.3s ease;
 }
 
-.navigation-bar-menu-item:hover {
-    color: var(--accent);
-}
-/* Navigation bar */
+.navigation-bar-menu-item span {
+    color: var(--text);
+    font-size: 1rem;
+    transition: color 0.3s ease;
+}

App/Frontend/css/search.css

@@ -18,10 +18,72 @@
         'nav main main main main'
         'nav main main main main'
         'nav main main main main'
+        'nav main main main main'
+        'nav main main main main'
+        'nav main main main main'
+        'nav main main main main'
+        'nav main main main main'
         'nav main main main main';
-    grid-template-columns: 1fr 2fr 2fr 2fr;
+    grid-template-columns: 1fr 3fr 3fr 3fr;
     gap: 16px;
     padding: 10px;
     height: 95vh;
 }
-/* SetUp Grid */
+/* SetUp Grid */
+
+/* Search Header */
+.search-header {
+    background-color: var(--quaternary);
+    color: var(--text);
+    border-radius: 15px;
+    box-shadow: 2px 0 5px var(--shadow);
+    width: 100%;
+    height: 100%;
+    font-weight: bold;
+    font-size: 1rem;
+}
+
+.search-header-section {
+    margin: 10px;
+}
+
+.search-header-article {
+    font-size: 1.2rem;
+    font-weight: 700;
+}
+
+.search-header-article input[type="text"] {
+    width: 100%;
+    max-width: 400px;
+    padding: var(--spacing);
+    border-radius: var(--radius);
+    border: 1px solid var(--primary);
+    box-shadow: inset 0 2px 4px var(--shadow);
+    font-size: 1rem;
+}
+
+.search-header-article input[type="checkbox"] {
+    margin: 10px;
+}
+
+.search-header-article button {
+    background-color: var(--primary);
+    color: var(--text);
+    padding: var(--spacing);
+    border: none;
+    border-radius: var(--radius);
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background-color 0.3s ease;
+}
+/* Search Header */
+
+/* Search Main */
+.search-main {
+    background-color: var(--tertiary);
+    color: var(--text);
+    border-radius: 15px;
+    box-shadow: 2px 0 5px var(--shadow);
+    width: 100%;
+}
+/* Search Main */

App/Frontend/includes/context-menu.html

@@ -2,15 +2,21 @@
 <!--Author K10s Open Source Team-->
 <ul class="context-menu-item">
     <li onclick="copyLinkAddress()">
-        <i class="fas fa-link"></i>
+        <svg viewBox="0 0 24 24">
+            <path d="M9 9V6.2002C9 5.08009 9 4.51962 9.21799 4.0918C9.40973 3.71547 9.71547 3.40973 10.0918 3.21799C10.5196 3 11.0801 3 12.2002 3H17.8002C18.9203 3 19.4801 3 19.9079 3.21799C20.2842 3.40973 20.5905 3.71547 20.7822 4.0918C21.0002 4.51962 21.0002 5.07967 21.0002 6.19978V11.7998C21.0002 12.9199 21.0002 13.48 20.7822 13.9078C20.5905 14.2841 20.2839 14.5905 19.9076 14.7822C19.4802 15 18.921 15 17.8031 15H15M9 9H6.2002C5.08009 9 4.51962 9 4.0918 9.21799C3.71547 9.40973 3.40973 9.71547 3.21799 10.0918C3 10.5196 3 11.0801 3 12.2002V17.8002C3 18.9203 3 19.4801 3.21799 19.9079C3.40973 20.2842 3.71547 20.5905 4.0918 20.7822C4.5192 21 5.07899 21 6.19691 21H11.8036C12.9215 21 13.4805 21 13.9079 20.7822C14.2842 20.5905 14.5905 20.2839 14.7822 19.9076C15 19.4802 15 18.921 15 17.8031V15M9 9H11.8002C12.9203 9 13.4801 9 13.9079 9.21799C14.2842 9.40973 14.5905 9.71547 14.7822 10.0918C15 10.5192 15 11.079 15 12.1969L15 15">
+        </svg>
         <p>Copy Link</p>
     </li>
     <li onclick="copySelectedText()">
-        <i class="fas fa-clipboard"></i>
+        <svg viewBox="0 0 24 24">
+            <path d="M8 5.00005C7.01165 5.00082 6.49359 5.01338 6.09202 5.21799C5.71569 5.40973 5.40973 5.71569 5.21799 6.09202C5 6.51984 5 7.07989 5 8.2V17.8C5 18.9201 5 19.4802 5.21799 19.908C5.40973 20.2843 5.71569 20.5903 6.09202 20.782C6.51984 21 7.07989 21 8.2 21H15.8C16.9201 21 17.4802 21 17.908 20.782C18.2843 20.5903 18.5903 20.2843 18.782 19.908C19 19.4802 19 18.9201 19 17.8V8.2C19 7.07989 19 6.51984 18.782 6.09202C18.5903 5.71569 18.2843 5.40973 17.908 5.21799C17.5064 5.01338 16.9884 5.00082 16 5.00005M8 5.00005V7H16V5.00005M8 5.00005V4.70711C8 4.25435 8.17986 3.82014 8.5 3.5C8.82014 3.17986 9.25435 3 9.70711 3H14.2929C14.7456 3 15.1799 3.17986 15.5 3.5C15.8201 3.82014 16 4.25435 16 4.70711V5.00005">
+        </svg>
         <p>Copy To Clipboard</p>
     </li>
     <li onclick="toggleTheme()">
-        <i class="fas fa-adjust"></i>
+        <svg viewBox="0 0 24 24">
+            <path d="m12 20.501v-17.001c-.019 0-.041 0-.064 0-1.549 0-2.999.424-4.24 1.162l.038-.021c-2.554 1.5-4.242 4.233-4.242 7.36s1.688 5.86 4.202 7.339l.04.022c1.202.716 2.652 1.14 4.2 1.14h.07-.004zm12.001-8.501v.09c0 2.187-.598 4.235-1.64 5.988l.03-.054c-1.067 1.824-2.544 3.301-4.311 4.337l-.056.031c-1.729 1.012-3.807 1.609-6.024 1.609s-4.295-.597-6.081-1.64l.057.031c-1.824-1.067-3.301-2.544-4.337-4.311l-.031-.056c-1.012-1.729-1.609-3.807-1.609-6.024s.597-4.295 1.64-6.081l-.031.057c1.067-1.824 2.544-3.301 4.311-4.337l.056-.031c1.729-1.012 3.807-1.609 6.024-1.609s4.295.597 6.081 1.64l-.057-.031c1.824 1.067 3.301 2.544 4.337 4.311l.031.056c1.012 1.699 1.61 3.747 1.61 5.934v.095z">
+        </svg>
         <p>Toggle Theme</p>
     </li>
 </ul>