Add random image displaying

Author: mskrasnov

assets/b.webp

@@ -0,0 +1,3 @@
+const images = document.querySelectorAll('.rounded-img');
+const randomIndex = Math.floor(Math.random() * images.length);
+images[randomIndex].classList.add('active');

images.js

@@ -36,6 +36,7 @@ <h1>TimeKeeper</h1>
       <h2 class="prog_header">Рабочий трекер без лишних функций.</h2>
       <a href="./download.html" class="download-button">Скачать (Windows, Linux)</a>
       <img src="./assets/a.webp" class="rounded-img">
+      <img src="./assets/b.webp" class="rounded-img">
     </div>
 
     <div align="center">
@@ -87,6 +88,7 @@ <h3>Ведение статистики</h3>
   </footer>
 
   <script src="hdr.js"></script>
+  <script src="images.js"></script>
 </body>
 
 </html>

index.html

@@ -144,6 +144,11 @@ img.screenshot.enlarged {
 
 img.rounded-img {
   border-radius: 10px;
+  display: none;
+}
+
+img.rounded-img.active {
+  display: block;
 }
 
 nav {
@@ -157,7 +162,7 @@ nav {
   align-items: center;
   justify-content: space-between;
   backdrop-filter: blur(10px);
-  background-color: rgba(60,56,54,0.7);
+  background-color: rgba(60, 56, 54, 0.7);
 }
 
 nav ul {
@@ -252,7 +257,7 @@ nav a:hover {
     background-color: #3c3836;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(10px);
-    background-color: rgba(60,56,54,0.7);
+    background-color: rgba(60, 56, 54, 0.7);
   }
 
   nav ul.show li {
@@ -453,4 +458,4 @@ blockquote {
   .advantages-grid {
     grid-template-columns: 1fr;
   }
-}
+}