improve web page design

vikdevelop · Aug 2, 2024 · 9edefaf · 9edefaf
1 parent 5da4cb4
commit 9edefaf
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 71 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -3,8 +3,8 @@
   <p><b>Is the translation of this page incomplete, or do you want to add a new language? Use <a href="https://hosted.weblate.org/projects/vikdevelop/savedesktop-github-wiki/">Weblate</a>.</b></p>
   <ul style="list-style-type: none; padding: 0; display: flex;">
     <li style="margin-right: 20px;"><a href="https://github.com/vikdevelop/SaveDesktop?tab=readme-ov-file#sending-issues">Report an Issue</a></li>
-    <li style="margin-right: 20px;"><a href="https://vikdevelop.github.io/SaveDesktop/#download">SaveDesktop Installation</a></li>
+    <li style="margin-right: 20px;"><a href="https://vikdevelop.github.io/SaveDesktop">SaveDesktop Installation</a></li>
     <li style="margin-right: 20px;"><a href="https://vikdevelop.github.io/SaveDesktop/wiki">Wiki Homepage</a></li>
-    <li style="margin-right: 20px;"><a href="https://github.com/vikdevelop/SaveDesktop">Source code</a></li>
+    <li style="margin-right: 20px;"><a href="https://github.com/vikdevelop/SaveDesktop">Source Code</a></li>
   </ul>
 </footer>
diff --git a/index.html b/index.html
@@ -13,66 +13,56 @@
         <link href="open-issue/css/styles.css" rel="stylesheet" />
         <script src="https://smtpjs.com/v3/smtp.js"></script>
     </head>
-    <body id="page-top">
+    <body id="top">
         <!-- Masthead-->
-        <header class="masthead bg-primary text-white text-center">
-            <img src="https://raw.githubusercontent.com/vikdevelop/SaveDesktop/94864c15b9ae0b82c37170b17caf95572446cfd8/flatpak/icons/io.github.vikdevelop.SaveDesktop.svg">
-            <h1 class="text-black">SaveDesktop app</h1>
-            <p class="text-black">Save your desktop configuration</p>
+        <header class="masthead bg-primary text-black text-center">
             <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
-            <div class="container">
-                <button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
-                    Menu
-                    <i class="fas fa-bars"></i>
-                </button>
-                <div class="collapse navbar-collapse" id="navbarResponsive">
-                    <ul class="navbar-nav ms-auto">
-                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#download">Download</a></li>
-                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="https://vikdevelop.github.io/SaveDesktop/wiki/">Wiki</a></li>
-                        <li class="nav-item mx-0 mx-lg-1"><a class="btn btn-primary nav-link py-3 px-0 px-lg-3 rounded" href="/SaveDesktop/open-issue">Report issue</a></li>
-                    </ul>
+                <div class="container">
+                    <a class="navbar-brand" href="#top"><img src="https://raw.githubusercontent.com/vikdevelop/SaveDesktop/94864c15b9ae0b82c37170b17caf95572446cfd8/flatpak/icons/io.github.vikdevelop.SaveDesktop.svg" width="32" ></a>
+                    <button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-black rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+                        Menu
+                        <i class="fas fa-bars"></i>
+                    </button>
+                    <div class="collapse navbar-collapse" id="navbarResponsive">
+                        <ul class="navbar-nav ms-auto">
+                            <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="/SaveDesktop/wiki/">Wiki</a></li>
+                            <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="/SaveDesktop/open-issue">Report an Issue</a></li>
+                            <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="https://github.com/vikdevelop/SaveDesktop/tree/main?tab=readme-ov-file#savedesktop">Features</a></li>
+                        </ul>
+                    </div>
                 </div>
-            </div>
-        </nav>
-        </header>
-        <!-- Navigation-->
-        <!-- Download Section-->
-        <section class="page-section portfolio" id="download">
+            </nav>
+            <!-- The app name and screenshot --->
+            <img src="https://raw.githubusercontent.com/vikdevelop/SaveDesktop/main/flatpak/screenshots/main_window.png">
+            <h1 class="text-black">SaveDesktop</h1>
+            <p class="text-black">Save your desktop configuration</p>
             <div class="container">
-                <!-- Download Section Heading-->
-                <h2 class="page-section-heading text-center text-uppercase text-black">Download</h2>
-                <div class="divider-custom divider-light">
-                    <div class="divider-custom-line"></div>
-                    <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
-                    <div class="divider-custom-line"></div>
-                </div>
-                <!-- About Section Content-->
+                <!-- Installation Section Content-->
                 <div class="row">
-                    <div class="col-lg-4 ms-auto"><p class="lead">Download from Flathub</p>
-                        <a href='https://flathub.org/apps/io.github.vikdevelop.SaveDesktop'><img width='240' alt='Download on Flathub' src='https://flathub.org/api/badge?locale=en'/></a>
+                    <div class="col-lg-4 ms-auto">
+                        <a href='https://flathub.org/apps/io.github.vikdevelop.SaveDesktop'><img width='180' height="100" alt='Download on Flathub' src='https://flathub.org/api/badge?svg&locale=en'/></a>
                     </div>
-                    <div class="col-lg-4 ms-auto"><p class="lead">Download from Snap Store</p>
-                        <a href="https://snapcraft.io/savedesktop">
-  <img alt="Get it from the Snap Store" src="https://snapcraft.io/static/images/badges/en/snap-store-black.svg" />
-</a>
+                    <div class="col-lg-4 ms-auto">
+                        <br>
+                        <a href="https://snapcraft.io/savedesktop"><img alt="Get it from the Snap Store" src="https://snapcraft.io/static/images/badges/en/snap-store-black.svg"/></a>
                     </div>
-                    <div class="col-lg-4 me-auto"><p class="lead">Download as native version</p>
-                        <h4>Install</h4>
-                        <code>wget -qO /tmp/savedesktop-native-installer.py https://raw.githubusercontent.com/vikdevelop/SaveDesktop/main/native/native_installer.py && python3 /tmp/savedesktop-tmp/native/native_installer.py --install</code>
-                        <h4>Remove</h4>
-                        <code>wget -qO /tmp/savedesktop-native-installer.py https://raw.githubusercontent.com/vikdevelop/SaveDesktop/main/native/native_installer.py && python3 /tmp/savedesktop-native-installer.py --remove</code>
+                    <div class="col-lg-4 me-auto">
+                        <a class="btn btn-primary" href="https://github.com/vikdevelop/SaveDesktop/tree/main?tab=readme-ov-file#installation">Show other installation <br> methods</a>
                     </div>
                 </div>
             </div>
-        </section>
+        </header>
         <!-- Footer-->
         <!-- Copyright Section-->
-        <div class="copyright py-4 text-center text-white">
-            <a href="https://github.com/vikdevelop/SaveDesktop">SaveDesktop app source code</a> - <a href="https://github.com/vikdevelop/SaveDesktop/tree/webpage">Source code of this page</a>
-            <div class="container"><small>&copy; 2023 vikdevelop (<a href="https://github.com/vikdevelop">Github</a>)</small></div>
+        <div class="masthead bg-primary text-center text-black">
+            <hr>
+            <br>
+            <a href="https://github.com/vikdevelop/SaveDesktop">SaveDesktop app source code</a><a href="https://github.com/vikdevelop/SaveDesktop/tree/webpage">Source code of this page</a>
+            <div class="container"><small>&copy; 2023-2024 vikdevelop</small></div>
         </div>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
         <script src="js/scripts.js"></script>
         <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
     </body>
 </html>
+
diff --git a/open-issue/css/styles.css b/open-issue/css/styles.css
@@ -90,11 +90,11 @@ body {
 }
 
 hr {
-  margin: 1rem 0;
+  margin: 0.5rem 0;
   color: inherit;
   background-color: currentColor;
   border: 0;
-  opacity: 0.25;
+  opacity: 0.05;
 }
 
 hr:not([size]) {
@@ -7819,12 +7819,12 @@ textarea.form-control-lg {
 
 .bg-primary {
   --bs-bg-opacity: 1;
-  background-color: #d1e0ff;
+  background-color: #eeeeee;
 }
 
 .bg-secondary {
   --bs-bg-opacity: 1;
-  background-color: #d1e0ff;
+  background-color: #eeeeee;
 }
 
 .bg-success {
@@ -11380,6 +11380,7 @@ html {
 #mainNav .navbar-nav li.nav-item a.nav-link {
   color: black;
 }
+
 #mainNav .navbar-nav li.nav-item a.nav-link:hover {
   color: grey;
 }

diff --git a/open-issue/index.html b/open-issue/index.html
@@ -18,16 +18,16 @@
         <!-- Navigation-->
         <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
             <div class="container">
-                <a class="navbar-brand" href="https://vikdevelop.github.io/SaveDesktop/">SaveDesktop</a>
+                <a class="navbar-brand" href="https://vikdevelop.github.io/SaveDesktop/"><img src="https://raw.githubusercontent.com/vikdevelop/SaveDesktop/94864c15b9ae0b82c37170b17caf95572446cfd8/flatpak/icons/io.github.vikdevelop.SaveDesktop.svg" width="32" ></a>
                 <button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                     Menu
                     <i class="fas fa-bars"></i>
                 </button>
                 <div class="collapse navbar-collapse" id="navbarResponsive">
                     <ul class="navbar-nav ms-auto">
-                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="https://vikdevelop.github.io/SaveDesktop/#download">Download</a></li>
+                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="https://vikdevelop.github.io/SaveDesktop/">Install</a></li>
                         <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="https://vikdevelop.github.io/SaveDesktop/wiki">Wiki</a></li>
-                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="https://github.com/vikdevelop/SaveDesktop">Github</a></li>
+                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="https://github.com/vikdevelop/SaveDesktop/tree/main?tab=readme-ov-file#savedesktop">Features</a></li>
                     </ul>
                 </div>
             </div>
@@ -36,10 +36,24 @@
         <header class="masthead bg-primary text-white text-center">
             <img src="https://raw.githubusercontent.com/vikdevelop/SaveDesktop/94864c15b9ae0b82c37170b17caf95572446cfd8/flatpak/icons/io.github.vikdevelop.SaveDesktop.svg">
             <h1 class="text-black">SaveDesktop app</h1>
-            <p class="text-black">Report an issue</p>
-            <a class="nav-link py-3 px-0 px-lg-3 rounded text-black" href="#bug">Bug report</a>
-            <a class="nav-link py-3 px-0 px-lg-3 rounded text-black" href="#feature">Feature request</a>
-            <a class="nav-link py-3 px-0 px-lg-3 rounded text-black" href="#question">Question</a>
+            <p class="text-black"><b>Report an issue</b></p>
+            <label for="installation-methods"></label>
+            <select class="btn" id="issue-type" onchange="openLink()">
+                <option value="">Select an issue type</option>
+                <option value="#bug">Bug report</option>
+                <option value="#feature">Feature request</option>
+                <option value="#question">Question</option>
+            </select>
+
+            <script>
+                function openLink() {
+                    var select = document.getElementById("issue-type");
+                    var url = select.value;
+                    if (url) {
+                        window.location.href = url;
+                    }
+                }
+            </script>
         </header>
 
         <section class="page-section portfolio" id="bug">
@@ -62,9 +76,12 @@ <h1 class="text-black">SaveDesktop app</h1>
 
         <!-- Footer-->
         <!-- Copyright Section-->
-        <div class="copyright py-4 text-center text-white">
-            <a href="https://github.com/vikdevelop/SaveDesktop">SaveDesktop app source code</a> - <a href="https://github.com/vikdevelop/SaveDesktop/tree/webpage">Source code of this page</a>
-            <div class="container"><small>&copy; 2023 vikdevelop (<a href="https://github.com/vikdevelop">Github</a>)</small></div>
+        <div class="bg-primary text-center text-black">
+            <br>
+            <a href="https://github.com/vikdevelop/SaveDesktop">SaveDesktop app source code</a><a href="https://github.com/vikdevelop/SaveDesktop/tree/webpage">Source code of this page</a>
+            <br>
+
+            <div class="container"><small>&copy; 2023-2024 vikdevelop</small></div>
         </div>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
         <script src="js/scripts.js"></script>

diff --git a/wiki/archive-encryption/index.html b/wiki/archive-encryption/index.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Archive Encryption | SaveDesktop Github wiki</title>
+  <title>Archive Encryption | SaveDesktop wiki</title>
   <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/vikdevelop/SaveDesktop/main/flatpak/icons/io.github.vikdevelop.SaveDesktop.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <style>
     body {
       font-family: Arial, sans-serif;
@@ -54,7 +55,7 @@
   </style>
 </head>
 <body>
-  <h1>Archive encryption | SaveDesktop Github wiki</h1>
+  <h1>Archive encryption | SaveDesktop wiki</h1>
   <table>
     <thead>
       <tr>

diff --git a/wiki/configuration-in-cli/index.html b/wiki/configuration-in-cli/index.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Saving/Importing configuration in the CLI interface | SaveDesktop Github wiki</title>
+  <title>Saving/Importing configuration in the CLI interface | SaveDesktop wiki</title>
   <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/vikdevelop/SaveDesktop/main/flatpak/icons/io.github.vikdevelop.SaveDesktop.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <style>
     body {
       font-family: Arial, sans-serif;
@@ -54,7 +55,7 @@
   </style>
 </head>
 <body>
-  <h1>Saving/Importing configuration in the CLI interface | SaveDesktop Github wiki</h1>
+  <h1>Saving/Importing configuration in the CLI interface | SaveDesktop wiki</h1>
   <table>
     <thead>
       <tr>

diff --git a/wiki/flatpak-apps-installation/index.html b/wiki/flatpak-apps-installation/index.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Saving installed Flatpaks apps and install them from list | SaveDesktop Github wiki</title>
+  <title>Saving installed Flatpaks apps and install them from list | SaveDesktop wiki</title>
   <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/vikdevelop/SaveDesktop/main/flatpak/icons/io.github.vikdevelop.SaveDesktop.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <style>
     body {
       font-family: Arial, sans-serif;
@@ -54,7 +55,7 @@
   </style>
 </head>
 <body>
-  <h1>Saving and importing list of installed Flatpaks apps and install them from list | SaveDesktop Github wiki</h1>
+  <h1>Saving and importing list of installed Flatpaks apps and install them from list | SaveDesktop wiki</h1>
   <table>
     <thead>
       <tr>

diff --git a/wiki/index.html b/wiki/index.html
@@ -3,6 +3,7 @@
 <head>
   <title>SaveDesktop wiki</title>
   <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/vikdevelop/SaveDesktop/main/flatpak/icons/io.github.vikdevelop.SaveDesktop.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <style>
     body {
       font-family: Arial, sans-serif;

diff --git a/wiki/periodic-saving/index.html b/wiki/periodic-saving/index.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Periodic saving | SaveDesktop Github wiki</title>
+  <title>Periodic saving | SaveDesktop wiki</title>
   <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/vikdevelop/SaveDesktop/main/flatpak/icons/io.github.vikdevelop.SaveDesktop.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <style>
     body {
       font-family: Arial, sans-serif;
@@ -54,7 +55,7 @@
   </style>
 </head>
 <body>
-  <h1>Periodic saving | SaveDesktop Github wiki</h1>
+  <h1>Periodic saving | SaveDesktop wiki</h1>
   <table>
     <thead>
       <tr>

diff --git a/wiki/synchronization/index.html b/wiki/synchronization/index.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Synchronization between computers in the network | SaveDesktop Github wiki</title>
+  <title>Synchronization between computers in the network | SaveDesktop wiki</title>
   <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/vikdevelop/SaveDesktop/main/flatpak/icons/io.github.vikdevelop.SaveDesktop.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <style>
     body {
       font-family: Arial, sans-serif;
@@ -54,7 +55,7 @@
   </style>
 </head>
 <body>
-  <h1>Synchronization between computers in the network | SaveDesktop Github wiki</h1>
+  <h1>Synchronization between computers in the network | SaveDesktop wiki</h1>
   <table>
     <thead>
       <tr>