added pics

pr3y · Oct 1, 2024 · 19d1c35 · 19d1c35
1 parent 15a6ef1
commit 19d1c35
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -63,9 +63,9 @@ <h3>What is Bruce?</h3>
               <h3>How can i install?</h3>
 
               <p>
-	      The easiest way to install Bruce is using the WebFlasher! wich is the button above, but if you already use M5Launcher to manage your m5stack device, you can install it with OTA
+	      The easiest way to install Bruce is using the WebFlasher! which is the button below, but if you already use M5Launcher to manage your m5stack device, you can install it with OTA
 
-Or you can burn it directly from the m5burner tool, just search for 'Bruce' (My official builds will be uploaded by "owner" and have photos.) on the device category you want to and click on burn.
+You can also burn it directly from the m5burner tool, just search for 'Bruce' (My official builds will be uploaded by "owner" and have photos.) on the device category you want to and click on burn.
                 <a
                   href="https://www.youtube.com/@Bruce-fw/playlists"
                   class="link"
@@ -107,10 +107,18 @@ <h3>Try out!</h3>
                   </p></a>
 
 
+		  <br>
+		  <h1>TRUE OPEN-SOURCE!</h1>
+		  <h2>Every software with AGPL License</h2>
             </div>
           </div>
         </div>
-      </div>
+	      <div class="images-container">
+		<h1>Some Supported Devices:</h1>
+		<img class="full-image" src="https://raw.githubusercontent.com/pr3y/Bruce/refs/heads/main/media/pictures/pic1.png">
+		<img class="full-image" src="https://raw.githubusercontent.com/pr3y/Bruce/refs/heads/main/media/pictures/core.png">
+		<img class="full-image" src="https://raw.githubusercontent.com/pr3y/Bruce/main/media/pictures/stick.png">
+	      </div>
       <footer>
         <div class="footer-content">
           <div class="socials">
@@ -175,15 +183,6 @@ <h4>More Links<span class="darker-gray">v</span></h4>
                     >Video Tutorial</a
                   >
                 </li>
-                <li>
-                  <span class="purple">></span
-                  ><a
-                    href="https://discord.gg/WJ9XF9czVT"
-                    target="_blank"
-                    class="darker-gray"
-                    >Our community</a
-                  >
-                </li>
               </ul>
             </div>
           </div>

diff --git a/style.css b/style.css
@@ -38,6 +38,15 @@ body::before {
   z-index: -1;
 }
 
+.full-image {
+    width: 60%;
+    height: auto;
+    max-width: 100vw;
+    max-height: 100vh;
+    object-fit: contain;
+}
+
+
 hr {
   margin-bottom: 0.5rem;
   border: 1px solid #A020F0;
@@ -60,7 +69,7 @@ footer {
   background-color: #0e0e0e;
   position: absolute;
   bottom: 0;
-  margin-top: 3rem;
+  margin-top: 10rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -71,6 +80,12 @@ footer {
   height: 100vh;
 }
 
+.images-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .footer-content {
   width: 95%;
   justify-content: space-between;
@@ -83,7 +98,7 @@ footer {
 }
 
 a.button {
-  width: 160px !important;
+  width: 240px !important;
   justify-content: center;
   height: 42px;
   gap: 0.5rem;
@@ -214,8 +229,8 @@ a {
 
 
 .logo-icon {
-  height: 100%;
   width: 20%;
+  height: auto;
 }
 
 .logo {