Updated the download website

index.html

@@ -17,7 +17,7 @@
   <div class="container">
   
     <section class="features">
-      <h2>Key Features</h2>
+      <h1>Key Features</h1>
       <div class="feature-list">
         <div class="feature-item">
           <h3>Multiple AI Models</h3>
@@ -35,7 +35,7 @@
     </section>
 
     <section id="faq">
-      <h2>Frequently Asked Questions</h2>
+      <h1>Frequently Asked Questions</h1>
       <div class="faq-container">
         <div class="faq-item">
           <h3>What is this AI assistant for?</h3>
@@ -77,16 +77,106 @@
           <h3>Is there a mobile app available for the AI assistant?</h3>
           <p>Currently, there is no dedicated mobile app, but our web application is mobile-friendly and can be accessed on various devices.</p>
         </div>
+        <div class="faq-item">
+          <h3>Why doesn't my selection in the category dropdown menu apply?</h3>
+          <p>Currently, the dropdown menu for selecting AI models does not retain your choice after a website refresh.</p>
+        </div>
+        <div class="faq-item">
+          <h3>Why is the AI suddenly talking about the weather when I didn't select that option?</h3>
+          <p>The AI is programmed to provide weather information even if you haven't specifically selected the weather option.</p>
+        </div>
+        <div class="faq-item">
+          <h3>Why isn't the online API working?</h3>
+          <p>At the moment, the online APIs for Google and La Plateforme are not operational. However, the OpenAI and Anthropic APIs may still function.</p>
+        </div>
+        <div class="faq-item">
+          <h3>Why is the AI discussing unrelated topics?</h3>
+          <p>Try disabling the AI system prompt settings, as the AI sometimes tends to focus on those topics excessively.</p>
+        </div>
+        <div class="faq-item">
+          <h3>Why isn't the AI responding in the format I specified in the settings?</h3>
+          <p>Please check if the system prompt settings are enabled. If the issue persists, it may be because the AI is unable to fully adhere to the command. These settings serve as a guideline rather than a strict internal directive, and the AI retains the discretion to follow them.</p>
+        </div>
+        <div class="faq-item">
+          <h3>Does this AI have the ability to know my location or search the web?</h3>
+          <p>No, this AI does not possess any capabilities to access your location or browse the web.</p>
+        </div>
+        <div class="faq-item">
+          <h3>Does the AI really work offline?</h3>
+          <p>Yes! Once you download the necessary models, it can operate fully offline, with the exception of the weather API.</p>
+        </div>
+        <div class="faq-item">
+          <h3>Are my messages encrypted?</h3>
+          <p>Unfortunately, not at this time. We recommend keeping your messages as anonymous as possible. Your messages are stored locally on your computer and are not sent to any external storage, unless you use an online API, in which case we cannot guarantee privacy.</p>
+        </div>
+        <div class="faq-item">
+          <h3>Where is my data saved?</h3>
+          <p>All data, including accounts, settings, and chats, is stored locally on your computer. You cannot log into this account from another device. If you need to synchronize settings, you can export them from one computer and import them on another.</p>
+        </div>
+        <div class="faq-item">
+          <h3>Is this a virus?</h3>
+          <p>No, this is not a virus, despite what Windows may indicate. The warning appears because the application is not officially signed, which requires a costly signing service that we cannot afford.</p>
+        </div>
       </div>
-    </section>
+    </section>    
 
     <section class="how-it-works">
-      <h2>How It Works</h2>
-      <p>Getting started is simple! Download the app, set up your preferred AI models, and start chatting with your assistant. Whether you're working offline or connected to online platforms, Interstellar AI adapts to your needs.</p>
+      <h1>How It Works</h1>
+      <p>Getting started is simple! Follow the steps below to set up your preferred AI models and start chatting with your assistant.</p>
+
+      <h2>Step 1: Download the AI Package</h2>
+      <p>Visit the website and click the download button to obtain the AI package. Ensure that you choose the correct version based on your operating system (Linux or Windows).</p>
+      <img src="images/img1.png" alt="Image can't be displayed">
+
+      <h2>Step 2: Unzip the Folder</h2>
+      <p>After downloading, locate the compressed folder and unzip it to a location of your choice. Make sure you have enough disk space and the necessary permissions to extract files.</p>
+      <img src="images/img2.png" alt="Image can't be displayed">
+      <img src="images/img3.png" alt="Image can't be displayed">
+
+
+      <h2>Step 3: Start the Setup Script</h2>
+      <p>Run the appropriate script based on your operating system to set up the AI:</p>
+      <ul>
+        <li>Linux: Run <code>prepare_nonfree.sh</code>, <code>prepare_free.sh</code>, or <code>prepare_all.sh</code></li>
+        <li>Windows: Run <code>prepare_nonfree.bat</code>, <code>prepare_free.bat</code>, or <code>prepare_all.bat</code></li>
+      </ul>
+      <p>The "free" option refers to freedom of use, allowing you to modify, share, or utilize outputs without restrictions. The "non-free" option may have license limitations, so review the licenses beforehand.</p>
+      <img src="images/img4.png" alt="Image can't be displayed">
+
+      <h2>Step 4: Run the AI Program</h2>
+      <p>Execute the AI program based on your operating system:</p>
+      <ul>
+        <li>Linux: <code>run.sh</code></li>
+        <li>Windows: <code>run.bat</code></li>
+      </ul>
+      <p>This starts the AI system and prepares it for the next steps.</p>
+      <img src="images/img5.png" alt="Image can't be displayed">
+      
+      <h2>Step 5: Create an Account</h2>
+      <p>After the setup, you’ll be prompted to create an account. Fill in the necessary information, including username, email, and password, to register.</p>
+      <img src="images/img6.png" alt="Image can't be displayed">
+      <img src="images/img7.png" alt="Image can't be displayed">
+      <img src="images/img8.png" alt="Image can't be displayed">
+
+      <h2>Step 6: Log In</h2>
+      <p>Once your account is created, log in using your credentials. Ensure you remember your password or store it securely for future logins.</p>
+      <img src="images/img9.png" alt="Image can't be displayed">
+
+      <h2>Step 7: Access the Settings</h2>
+      <p>Navigate to the settings menu from the main dashboard. This is where you can configure various options for your AI setup.</p>
+      <img src="images/img10.png" alt="Image can't be displayed">
+
+      <h2>Step 8: Adjust the Settings Based on Your Setup</h2>
+      <p>Select the configuration settings that match your chosen AI setup (free, non-free, or all). Adjust the settings to optimize the AI's performance according to your preferences and needs.</p>
+      <img src="images/img11.png" alt="Image can't be displayed">
+
+
+      <h2>Step 9: Start Chatting with Our AI</h2>
+      <p>With everything set up, you can now start chatting with the AI. Explore its capabilities, customize interactions, and enjoy the experience!</p>
     </section>
 
     <section id="download" class="download">
-      <h2>Download Interstellar AI</h2>
+      <h1>Download Interstellar AI</h1>
       <p>Ready to enhance your AI experience? Get started by downloading Interstellar AI today!</p>
       <br />
       <h2>Windows</h2>
@@ -100,7 +190,7 @@
     </section>
 
     <section class="repository">
-      <h2>Explore Our Code</h2>
+      <h1>Explore Our Code</h1>
       <p>Access the source code of Interstellar AI and stay updated with the latest developments.</p>
       <a href="https://interstellardevelopment.org/code/React-Group/interstellar_ai" target="_blank" class="repo-button">View Repository</a>
       <a href="https://interstellardevelopment.org/code/React-Group/interstellar_ai/archive/main.tar.gz" target="_blank" class="repo-button">Download Source Code</a>
@@ -108,7 +198,7 @@
   </div>
   
   <footer>
-    <p>© 2024 Interstellar AI. All rights reserved.</p>
+    <p>© 2024 Interstellar AI - "Maybe it works who knows"</p>
   </footer>
 </body>
 </html>

styles.css

@@ -1,3 +1,4 @@
+/* Base Styles */
 body {
   font-family: 'Arial', sans-serif;
   background-color: #FCFCEB; /* Light background */
@@ -7,6 +8,7 @@ body {
   overflow-x: hidden;
 }
 
+/* Header */
 header {
   background-color: #474D22; /* Dark header for contrast */
   color: #FCFCEB; /* Light text */
@@ -15,6 +17,7 @@ header {
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 }
 
+/* Hero Section */
 .hero h1 {
   font-size: 3rem;
   margin: 0;
@@ -27,35 +30,41 @@ header {
   font-style: italic; /* Italicized for a playful feel */
 }
 
+/* Container */
 .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
 }
 
+/* Headings */
 h1, h2 {
   color: #8B9635; /* Primary color for headings */
   margin: 20px 0;
   padding: 10px;
+  text-align: center;
 }
 
-.features, .how-it-works, .download {
+/* Section Styles */
+.features, .how-it-works, .download, .repository {
   margin: 40px 0;
-  background-color: #f0f3da; /* Light feature background */
+  background-color: #f0f3da; /* Light section background */
   padding: 20px;
-  border-radius: 15px; /* More rounded corners */
+  border-radius: 15px; /* Rounded corners */
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-  transition: transform 0.3s; /* Add hover effect */
+  transition: transform 0.3s;
 }
 
-.features:hover, .how-it-works:hover, .download:hover {
+.features:hover, .how-it-works:hover, .download:hover, .repository:hover {
   transform: translateY(-5px); /* Lift effect on hover */
 }
 
+/* Feature List */
 .feature-list {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  gap: 20px;
 }
 
 .feature-item {
@@ -66,7 +75,7 @@ h1, h2 {
   border-radius: 10px; /* Rounded corners */
   margin: 10px;
   text-align: center;
-  transition: transform 0.3s, box-shadow 0.3s; /* Hover effect */
+  transition: transform 0.3s, box-shadow 0.3s;
 }
 
 .feature-item:hover {
@@ -74,31 +83,32 @@ h1, h2 {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Shadow effect */
 }
 
-.faq-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  padding: 0 10px;
-}
-
+/* FAQ Section */
 #faq {
   max-width: 800px;
-  width: 90%;
+  width: 100%;
   padding: 20px;
   background-color: #FCFCEB; /* Light background for FAQ */
   border-radius: 15px; /* Rounded corners */
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   margin: 2rem auto;
-  height: auto;
+}
+
+.faq-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 10px;
 }
 
 .faq-item {
   margin-bottom: 20px;
   padding: 15px; /* Increased padding for better readability */
   border-radius: 10px;
+  border: 2px solid #8B9635; /* Consistent border */
   background-color: #f0f3da; /* Light background for FAQ items */
-  transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-in-out, transform 0.3s; /* Added transform transition */
 }
 
 .faq-item h3 {
@@ -110,63 +120,29 @@ h1, h2 {
 .faq-item p {
   color: #000000;
   font-size: 1.1em;
-  line-height: 1.5;
+  line-height: 1.6;
 }
 
 .faq-item:hover {
   background-color: #d1e0b6; /* Lighter background on hover */
+  transform: translateY(-6px) scale(1.05); /* Lift and slightly enlarge effect */
 }
 
+/* Image Resizing in How It Works Section */
+.how-it-works img {
+  max-width: 100%; /* Ensure images fit within their parent */
+  height: auto; /* Maintain aspect ratio */
+  margin: 20px auto; /* Center the image and add spacing */
+  display: block; /* Make the image a block element to center */
+}
+
+/* Download Button */
 .download {
   text-align: center;
   padding-bottom: 1em;
 }
 
-.download-button {
-  background-color: #8B9635; /* Primary button color */
-  color: #FCFCEB;
-  padding: 15px 30px;
-  margin: 1em;
-  text-decoration: none;
-  border-radius: 5px;
-  font-size: 1.2rem;
-  transition: background-color 0.3s ease, transform 0.2s; /* Hover effects */
-}
-
-.download-button:hover {
-  background-color: #6E7629; /* Darker button color on hover */
-  transform: translateY(-2px); /* Lift effect */
-}
-
-footer {
-  background-color: #474D22; /* Dark footer */
-  color: #FCFCEB; /* Light footer text */
-  padding: 20px;
-  text-align: center;
-  position: relative;
-  bottom: 0;
-  width: 100%;
-}
-
-.repository {
-  text-align: center;
-  padding: 40px 20px;
-  background-color: #f0f3da; /* Light background for repository section */
-  margin: 40px 0;
-  border-radius: 15px;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-  transition: transform 0.3s;
-}
-
-.repository p{
-  margin-bottom: 30px;
-}
-
-.repository:hover {
-  transform: translateY(-5px); /* Lift effect on hover */
-}
-
-.repo-button {
+.download-button, .repo-button {
   background-color: #8B9635; /* Primary button color */
   color: #FCFCEB;
   padding: 15px 30px;
@@ -177,11 +153,34 @@ footer {
   transition: background-color 0.3s ease, transform 0.2s;
 }
 
-.repo-button:hover {
+.download-button:hover, .repo-button:hover {
   background-color: #6E7629; /* Darker button color on hover */
   transform: translateY(-2px); /* Lift effect */
 }
 
+/* Footer */
+footer {
+  background-color: #474D22; /* Dark footer */
+  color: #FCFCEB; /* Light footer text */
+  padding: 20px;
+  text-align: center;
+  width: 100%;
+}
+
+/* Repository Section */
+.repository {
+  text-align: center;
+  padding: 40px 20px;
+  background-color: #f0f3da; /* Light background for repository section */
+  margin: 40px 0;
+  border-radius: 15px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s;
+}
+
+.repository p {
+  margin-bottom: 30px;
+}
 
 /* Responsive Styles */
 @media (max-width: 768px) {
@@ -211,7 +210,7 @@ footer {
     font-size: 1em;
   }
 
-  .download-button {
+  .download-button, .repo-button {
     font-size: 1rem;
     padding: 10px 20px;
   }
@@ -226,6 +225,10 @@ footer {
     font-size: 0.9rem;
   }
 
+  h1, h2 {
+    font-size: 1.5rem;
+  }
+
   .faq-item h3 {
     font-size: 1.1em;
   }
@@ -234,11 +237,7 @@ footer {
     font-size: 0.9em;
   }
 
-  h1, h2 {
-    font-size: 1.5rem;
-  }
-
-  .download-button {
+  .download-button, .repo-button {
     padding: 10px 15px;
     font-size: 0.9rem;
   }