add widescreen support

MME-NTU-KhPI · Nov 1, 2024 · dbee97d · dbee97d
1 parent 192f598
commit dbee97d
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 1 deletion.
diff --git a/html/about_ua.html b/html/about_ua.html
@@ -82,6 +82,7 @@
       </div>
     </nav>
   </header>
+  <div class="ultrawide">
   <div class="content">
     <div class="main-heading-cont">
       <p class="main-heading">
@@ -148,7 +149,114 @@
         </div>
       </div>
     </div>
+    <div class="algorithms-container">
+      <div class="heading-container">
+        <p class="heading"> 
+          Available algorithms
+        </p>
+      </div>
+      <div class="cards-container">
+        <div class="algo-card">
+          <div class="card-heading-container">
+            <p class="card-heading">
+              Von Neumann Cellular Automaton
+            </p>
+          </div>
+          <div class="card-text-container">
+            <p class="card-text">
+              The von Neumann cellular automaton, developed in the 1940s, is based on the concept of a
+              self-replicating
+              machine. Each cell has 6 neighbors, which share a side with it, and the future state of the cell depends
+              on
+              its own state and the state of its neighbors.
+            </p>
+          </div>
+          <div class="img-container">
+            <img class="img-card" src="../img/card1.png">
+
+          </div>
+          <div class="details-link-container">
+            <a href="#" class="details-link">
+              Details
+            </a>
+
+          </div>
+        </div>
+        <div class="algo-card">
+          <div class="card-heading-container">
+            <p class="card-heading">
+              Probabilistic Ellipse Cellular Automaton
+            </p>
+          </div>
+          <div class="card-text-container">
+            <p class="card-text">
+              The Probabilistic Ellipse is a modification of the Probabilistic Cellular Automaton, differing only in
+              the probabilities assigned to the neighbors of the grain (the starting cell).
+            </p>
+          </div>
+          <div class="img-container">
+            <img class="img-card" src="../img/card2.png">
+
+          </div>
+          <div class="details-link-container">
+            <a href="#" class="details-link">
+              Details
+            </a>
+
+          </div>
+        </div>
+        <div class="algo-card">
+          <div class="card-heading-container">
+            <p class="card-heading">
+              Probabilistic Circle Cellular Automaton
+            </p>
+          </div>
+          <div class="card-text-container">
+            <p class="card-text">
+              The Probabilistic Cellular Automaton is a modification of the classical automaton with random or
+              probabilistic elements. Like in the Moore automaton, each cell has 26 neighbors, but each neighbor is
+              assigned a probability of being filled.
+            </p>
+          </div>
+          <div class="img-container">
+            <img class="img-card" src="../img/card3.png">
+
+          </div>
+          <div class="details-link-container">
+            <a href="#" class="details-link">
+              Details
+            </a>
+
+          </div>
+        </div>
+        <div class="algo-card">
+          <div class="card-heading-container">
+            <p class="card-heading">
+              Moore Cellular Automaton
+            </p>
+          </div>
+          <div class="card-text-container">
+            <p class="card-text">
+              The Moore cellular automaton, developed by Edward Moore in 1962, is one of the most widely studied in
+              the field of complex systems research. Each cell has 26 neighbors, which share a side or a corner with
+              the grain. The future state of the cell depends on its own state and the state of its neighbors.
+            </p>
+          </div>
+          <div class="img-container">
+            <img class="img-card" src="../img/card4.png">
+
+          </div>
+          <div class="details-link-container">
+            <a href="#" class="details-link">
+              Details
+            </a>
+
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
+</div>
   <footer class="border-top border-dark">
     <div class="left-footer-cont">
       <div class="footer-content ml-5">

diff --git a/html/downloads_en.html b/html/downloads_en.html
@@ -82,8 +82,10 @@
       </div>
     </nav>
   </header>
+  <div class="ultrawide">
 <div class="content">
 
+</div>
 </div>
   <footer class="border-top border-dark">
     <div class="left-footer-cont">

diff --git a/html/downloads_ua.html b/html/downloads_ua.html
@@ -81,8 +81,10 @@
       </div>
     </nav>
   </header>
+  <div class="ultrawide">
 <div class="content">
 
+</div>
 </div>
   <footer class="border-top border-dark">
     <div class="left-footer-cont">

diff --git a/html/home_en.html b/html/home_en.html
@@ -97,9 +97,10 @@
       </div>
     </nav>
   </header>
+  <div class="ultrawide">
   <div class="content">
     <div class="heading-cont">
-      <h3 class="h3 ml-5 mr-5">
+      <h3 class="h3 ml-5 mr-5 mt-5">
         Tool for 3D modeling and visualization of microstructures
       </h3>
       <br />
@@ -133,6 +134,7 @@ <h3 class="h3 ml-5 mr-5">
       </div>
     </div>
   </div>
+  </div>
   <footer class="border-top border-dark">
     <div class="left-footer-cont">
       <div class="footer-content ml-5">
@@ -159,6 +161,7 @@ <h3 class="h3 ml-5 mr-5">
       </div>
     </div>
   </footer>
+
 </body>
 
 </html>
diff --git a/html/home_ua.html b/html/home_ua.html
@@ -95,6 +95,7 @@
       </div>
     </nav>
   </header>
+  <div class="ultrawide">
   <div class="content">
     <div class="heading-cont">
       <h3 class="h3 ml-5 mt-5 mr-5">
@@ -131,6 +132,7 @@ <h3 class="h3 ml-5 mt-5 mr-5">
       </div>
     </div>
   </div>
+  </div>
   <footer class="border-top border-dark">
     <div class="left-footer-cont">
       <div class="footer-content ml-5">

diff --git a/html/instructions_en.html b/html/instructions_en.html
@@ -81,6 +81,7 @@
       </div>
     </nav>
   </header>
+  <div class="ultrawide">
   <div class="content">
     <div class="main-heading-cont">
       <p class="main-heading">
@@ -165,6 +166,7 @@
       </div>
     </div>
   </div>
+  </div>
   <footer class="border-top border-dark">
     <div class="left-footer-cont">
       <div class="footer-content ml-5">

diff --git a/html/instructions_ua.html b/html/instructions_ua.html
@@ -81,6 +81,7 @@
       </div>
     </nav>
   </header>
+  <div class="ultrawide">
   <div class="content">
     <div class="main-heading-cont">
       <p class="main-heading">
@@ -157,6 +158,7 @@
       </div>
     </div>
   </div>
+  </div>
   <footer class="border-top border-dark">
     <div class="left-footer-cont">
       <div class="footer-content ml-5">

diff --git a/html/publications_en.html b/html/publications_en.html
@@ -81,8 +81,10 @@
       </div>
     </nav>
   </header>
+  <div class="ultrawide">
   <div class="content">
 
+  </div>
   </div>
   <footer class="border-top border-dark">
     <div class="left-footer-cont">

diff --git a/html/publications_ua.html b/html/publications_ua.html
@@ -81,9 +81,11 @@
       </div>
     </nav>
   </header>
+  <div class="ultrawide">
 <div class="content">
 
 </div>
+  </div>
   <footer class="border-top border-dark">
     <div class="left-footer-cont">
       <div class="footer-content ml-5">