W3C validation fixes

A-Herzog · A-Herzog · commit ad3356fcf399 · 2023-06-01T00:03:08.000+02:00
diff --git a/docs/css/index.css b/docs/css/index.css
@@ -32,4 +32,13 @@ input:invalid {
 
 .progress-bar {
   transition: none !important;
+}
+
+.nav-link {
+  color: white;
+}
+
+.active {
+  background-color: #14E !important;
+  border-radius: 4px !important;
 }
diff --git a/docs/index.html b/docs/index.html
@@ -19,14 +19,13 @@
   limitations under the License.
   -->
   <title>G/G/c/K+G Simulator</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="Simulator for a G/G/c/K+G queueing model">
   <meta name="keywords" content="Simulation, Warteschlangentheorie, Queueing theory">
   <!-- Begin of language independent part -->
   <meta name="author" content="Alexander Herzog">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
   <meta http-equiv="Content-Security-Policy" content="base-uri 'none'; default-src 'none'; connect-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data:;">
   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
   <link href="./libs/bootstrap.min.css" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" rel="stylesheet">
@@ -70,15 +69,15 @@
 
 <body data-bs-spy="scroll" data-bs-target="#navbar_main" data-bs-offset="150" onload="initPage()">
 <div id="infoLoading">Loading...</div>
-<span id="mainContent" style="display: none;">
+<div id="mainContent" style="display: none;">
 
 
 
 <!-- Navigation -->
 
 <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top" id="navbar_main">
   <div class="container-fluid">
-  <span class="navbar-brand mb-0 h1">
+  <span class="navbar-brand mb-0 h1" style="margin-right: 40px;">
     <span style="background-color: white; padding: 1px 10px 5px 10px; border-radius: 2px;"><img src="data:image/webp;base64,UklGRoQDAABXRUJQVlA4WAoAAAAYAAAAIwAAIwAAVlA4TIgCAAAvI8AIENVIoq3t2Bbbtm3bNrNt27Zt27Zt27Y1d709bxpfw2y7D8N/rSe7oMYCgFB53xUYwV3moLpD5Yju0Eju0v6R3BIjMADZrRHdA261bc+SikNnfjsXoKP9rd4RTN8ELgAb/BMwgRNkneCrsKX6lyD/nfmaAFwjLqlexp0qN9226x6wt7JsqXdL/1bVqXf2jmWdjq6h9Ez6RYP+1/OccjSgNvNsJfkuXZMiC0S/aD0pMdPyAWwoyvyrjC8ZXSGve0/ol8A/mwsRZwHgRDx7tMuakXkb+cQjYp+eptlRayzA8orySeYMkW/u57sGvQmWD+fc3xD/kGrPR7Ddp2nJ/Vx9eATWN+e+5l2vbXoSV8sDso9sIJvICfKEZGe3aQMPWfDAHgf8yEUXD4c0LIx1kdqnHKH0YAFzaM5/ZWrpJzgF0EG6ooM+VAYJKNVGFHUoVUQMXagWnjRxmZ77/c1x3rYWZuSnpzFQQ9qQzV0FhROtV9RxOGW0d19xOCX0tnQ0q6Bk0drhTxDzzU4anu+4mOjDkiyWOzVIfisggPSWkirQQNozG6CBpRtrFcTL64JMMX+BCx50MNn6SXGFzK98gHFqmrFekFkKs34kUU6QiJZ2VDdiFuTyTUpBxBETwUxfBkPksx6TvTNrpibwnciv2jArTFWmCzLqrFWZrLE0Z2S4O+WIiB2cAMt+mgv1NnXw6acb5BzJbwWsBSypuD9B35QK24mgCKXS/kQR01MhOxNW8CqL/nBkeb5NoaWrz7fbVGCLcXe1pnrxfdUpjqZZ+PCzNS20aWQKOVStxdtUrDUH8ZNimNJTnx2OJd/4+emmW66cNCQHHHPaTDgIGaEhfEQnccQRrr5FWElG1gAAAElJKgAIAAAABgASAQMAAQAAAAEAAAAaAQUAAQAAAFYAAAAbAQUAAQAAAF4AAAAoAQMAAQAAAAIAAAAxAQIAEAAAAGYAAABphwQAAQAAAHYAAAAAAAAAYAAAAAEAAABgAAAAAQAAAHBhaW50Lm5ldCA1LjAuMgAFAACQBwAEAAAAMDIzMAGgAwABAAAAAQAAAAKgBAABAAAAJAAAAAOgBAABAAAAJAAAAAWgBAABAAAAuAAAAAAAAAACAAEAAgAEAAAAUjk4AAIABwAEAAAAMDEwMAAAAAA=" width="24" height="24" alt="Logo"></span>
     <script>document.write(language.GUI.Name);</script>
   </span>
@@ -133,7 +132,7 @@ <h2 id="linkModel"><i class="bi bi-box"></i> <script>document.write(language.GUI
 <script>document.write(language.GUI.tabModelInfo1);</script>
 </p>
 
-<img class="img-fluid" style="margin: 20px 0px; aspect-ratio: 275.81 / 121.34;" width="100%" id="modelImage" usemap="#modelImageMap" tabindex="0">
+<img class="img-fluid" style="margin: 20px 0px; aspect-ratio: 275.81 / 121.34; width: 100%;" id="modelImage" alt="" usemap="#modelImageMap" tabindex="0">
 <script>
 const modelImage=document.getElementById('modelImage');
 modelImage.src='./images/'+language.GUI.tabModelImage;
@@ -578,7 +577,7 @@ <h2 id="linkMore" class="bi-download"> <script>document.write(language.GUI.tabMo
   <div class="col-md-4 mt-md-0 mt-4">
   <h3 class="h5 text-uppercase"><script>document.write(language.GUI.Name);</script></h3>
   <ul class="list-unstyled">
-    <li>&copy <a href="https://github.com/A-Herzog" target="_blank">Alexander Herzog</a></li>
+    <li>&copy; <a href="https://github.com/A-Herzog" target="_blank">Alexander Herzog</a></li>
     <li>
       <a href="https://github.com/A-Herzog/MiniSimulator" target="_blank" class="bi-github"> GitHub</a>
       <span id="PrivacyInfo1">,
@@ -596,7 +595,7 @@ <h3 class="h5 text-uppercase"><script>document.write(language.GUI.Name);</script
 
   <div class="col-md-4 mb-md-0 mb-4" id="PrivacyInfo2">
   <h3 class="h5 text-uppercase"><script>document.write(language.GUI.PrivacyTitle);</script></h3>
-  <div class="text-secondary small"><script>document.write(language.GUI.PrivacyInfo);</script></div>
+  <div class="small" style="color: black;"><script>document.write(language.GUI.PrivacyInfo);</script></div>
   </div>
 
   <div class="col-md-4 mb-md-0 mb-4">
@@ -614,7 +613,7 @@ <h3 class="h5 text-uppercase"><script>document.write(language.GUI.simulators);</
   </div>
 </footer>
 
-</span>
+</div>
 </body>
 
 <script>
diff --git a/docs/index_de.html b/docs/index_de.html
@@ -19,14 +19,13 @@
   limitations under the License.
   -->
   <title>G/G/c/K+G Simulator</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="Simulator für G/G/c/K+G Warteschlangenmodelle">
   <meta name="keywords" content="Simulation, Warteschlangentheorie, Queueing theory">
   <!-- Begin of language independent part -->
   <meta name="author" content="Alexander Herzog">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
   <meta http-equiv="Content-Security-Policy" content="base-uri 'none'; default-src 'none'; connect-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data:;">
   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
   <link href="./libs/bootstrap.min.css" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" rel="stylesheet">
@@ -70,15 +69,15 @@
 
 <body data-bs-spy="scroll" data-bs-target="#navbar_main" data-bs-offset="150" onload="initPage()">
 <div id="infoLoading">Loading...</div>
-<span id="mainContent" style="display: none;">
+<div id="mainContent" style="display: none;">
 
 
 
 <!-- Navigation -->
 
 <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top" id="navbar_main">
   <div class="container-fluid">
-  <span class="navbar-brand mb-0 h1">
+  <span class="navbar-brand mb-0 h1" style="margin-right: 40px;">
     <span style="background-color: white; padding: 1px 10px 5px 10px; border-radius: 2px;"><img src="data:image/webp;base64,UklGRoQDAABXRUJQVlA4WAoAAAAYAAAAIwAAIwAAVlA4TIgCAAAvI8AIENVIoq3t2Bbbtm3bNrNt27Zt27Zt27Y1d709bxpfw2y7D8N/rSe7oMYCgFB53xUYwV3moLpD5Yju0Eju0v6R3BIjMADZrRHdA261bc+SikNnfjsXoKP9rd4RTN8ELgAb/BMwgRNkneCrsKX6lyD/nfmaAFwjLqlexp0qN9226x6wt7JsqXdL/1bVqXf2jmWdjq6h9Ez6RYP+1/OccjSgNvNsJfkuXZMiC0S/aD0pMdPyAWwoyvyrjC8ZXSGve0/ol8A/mwsRZwHgRDx7tMuakXkb+cQjYp+eptlRayzA8orySeYMkW/u57sGvQmWD+fc3xD/kGrPR7Ddp2nJ/Vx9eATWN+e+5l2vbXoSV8sDso9sIJvICfKEZGe3aQMPWfDAHgf8yEUXD4c0LIx1kdqnHKH0YAFzaM5/ZWrpJzgF0EG6ooM+VAYJKNVGFHUoVUQMXagWnjRxmZ77/c1x3rYWZuSnpzFQQ9qQzV0FhROtV9RxOGW0d19xOCX0tnQ0q6Bk0drhTxDzzU4anu+4mOjDkiyWOzVIfisggPSWkirQQNozG6CBpRtrFcTL64JMMX+BCx50MNn6SXGFzK98gHFqmrFekFkKs34kUU6QiJZ2VDdiFuTyTUpBxBETwUxfBkPksx6TvTNrpibwnciv2jArTFWmCzLqrFWZrLE0Z2S4O+WIiB2cAMt+mgv1NnXw6acb5BzJbwWsBSypuD9B35QK24mgCKXS/kQR01MhOxNW8CqL/nBkeb5NoaWrz7fbVGCLcXe1pnrxfdUpjqZZ+PCzNS20aWQKOVStxdtUrDUH8ZNimNJTnx2OJd/4+emmW66cNCQHHHPaTDgIGaEhfEQnccQRrr5FWElG1gAAAElJKgAIAAAABgASAQMAAQAAAAEAAAAaAQUAAQAAAFYAAAAbAQUAAQAAAF4AAAAoAQMAAQAAAAIAAAAxAQIAEAAAAGYAAABphwQAAQAAAHYAAAAAAAAAYAAAAAEAAABgAAAAAQAAAHBhaW50Lm5ldCA1LjAuMgAFAACQBwAEAAAAMDIzMAGgAwABAAAAAQAAAAKgBAABAAAAJAAAAAOgBAABAAAAJAAAAAWgBAABAAAAuAAAAAAAAAACAAEAAgAEAAAAUjk4AAIABwAEAAAAMDEwMAAAAAA=" width="24" height="24" alt="Logo"></span>
     <script>document.write(language.GUI.Name);</script>
   </span>
@@ -133,7 +132,7 @@ <h2 id="linkModel"><i class="bi bi-box"></i> <script>document.write(language.GUI
 <script>document.write(language.GUI.tabModelInfo1);</script>
 </p>
 
-<img class="img-fluid" style="margin: 20px 0px; aspect-ratio: 275.81 / 121.34;" width="100%" id="modelImage" usemap="#modelImageMap" tabindex="0">
+<img class="img-fluid" style="margin: 20px 0px; aspect-ratio: 275.81 / 121.34; width: 100%;" id="modelImage" alt="" usemap="#modelImageMap" tabindex="0">
 <script>
 const modelImage=document.getElementById('modelImage');
 modelImage.src='./images/'+language.GUI.tabModelImage;
@@ -578,7 +577,7 @@ <h2 id="linkMore" class="bi-download"> <script>document.write(language.GUI.tabMo
   <div class="col-md-4 mt-md-0 mt-4">
   <h3 class="h5 text-uppercase"><script>document.write(language.GUI.Name);</script></h3>
   <ul class="list-unstyled">
-    <li>&copy <a href="https://github.com/A-Herzog" target="_blank">Alexander Herzog</a></li>
+    <li>&copy; <a href="https://github.com/A-Herzog" target="_blank">Alexander Herzog</a></li>
     <li>
       <a href="https://github.com/A-Herzog/MiniSimulator" target="_blank" class="bi-github"> GitHub</a>
       <span id="PrivacyInfo1">,
@@ -596,7 +595,7 @@ <h3 class="h5 text-uppercase"><script>document.write(language.GUI.Name);</script
 
   <div class="col-md-4 mb-md-0 mb-4" id="PrivacyInfo2">
   <h3 class="h5 text-uppercase"><script>document.write(language.GUI.PrivacyTitle);</script></h3>
-  <div class="text-secondary small"><script>document.write(language.GUI.PrivacyInfo);</script></div>
+  <div class="small" style="color: black;"><script>document.write(language.GUI.PrivacyInfo);</script></div>
   </div>
 
   <div class="col-md-4 mb-md-0 mb-4">
@@ -614,7 +613,7 @@ <h3 class="h5 text-uppercase"><script>document.write(language.GUI.simulators);</
   </div>
 </footer>
 
-</span>
+</div>
 </body>
 
 <script>
diff --git a/docs/info.html b/docs/info.html
@@ -19,14 +19,13 @@
   limitations under the License.
   -->
   <title>G/G/c/K+G Simulator</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="Simulator for a G/G/c/K+G queueing model">
   <meta name="keywords" content="Simulation, Warteschlangentheorie, Queueing theory">
   <!-- Begin of language independent part -->
   <meta name="author" content="Alexander Herzog">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
   <meta http-equiv="Content-Security-Policy" content="base-uri 'none'; default-src 'none'; connect-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data:;">
   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
   <link href="./libs/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD">
diff --git a/docs/info_de.html b/docs/info_de.html
@@ -19,14 +19,13 @@
   limitations under the License.
   -->
   <title>G/G/c/K+G Simulator</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="Simulator für G/G/c/K+G Warteschlangenmodelle">
   <meta name="keywords" content="Simulation, Warteschlangentheorie, Queueing theory">
   <!-- Begin of language independent part -->
   <meta name="author" content="Alexander Herzog">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
   <meta http-equiv="Content-Security-Policy" content="base-uri 'none'; default-src 'none'; connect-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data:;">
   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
   <link href="./libs/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD">
diff --git a/docs/js/Language.js b/docs/js/Language.js
@@ -54,7 +54,7 @@ lang.GUI.tabSimulation='Simulation';
 lang.GUI.tabSimulationIndicators='Kenngrößen berechnen';
 lang.GUI.tabSimulationIndicatorsInfo='Je mehr Ankünfte simuliert werden, desto besser gleichen sich Schwankungen im Ankunftsprozess aus und desto stabiler sind die Ergebnisse - aber auch desto länger fallen die Simulationslaufzeiten aus.';
 lang.GUI.tabMore='Download';
-lang.GUI.tabMoreLong='Weitere Simulatoren';
+lang.GUI.tabMoreLong='Downloads';
 lang.GUI.tabHelp="Hilfe";
 lang.GUI.tabHelpDoc="Warteschlangentheorie";
 lang.GUI.tabHelpGlossary="Glossar";
@@ -252,7 +252,7 @@ lang.GUI.tabSimulation='Simulation';
 lang.GUI.tabSimulationIndicators='Calculate indicators';
 lang.GUI.tabSimulationIndicatorsInfo='The more arrivals are simulated, the better fluctuations in the arrival process are balanced out and the more stable the results are - but also the longer the simulation runtimes will be.';
 lang.GUI.tabMore='Download';
-lang.GUI.tabMoreLong='More simulators';
+lang.GUI.tabMoreLong='Downloads';
 lang.GUI.tabHelp="Help";
 lang.GUI.tabHelpDoc="Queueing theory";
 lang.GUI.tabHelpGlossary="Glossary";
diff --git a/docs/js/info_software_de.html b/docs/js/info_software_de.html
@@ -1,3 +1,15 @@
+<!--
+<p>
+Der G/G/c/K+G Simulator kann als offline-ausführbare Windows-Anwendung heruntergeladen werden:
+</p>
+<p>
+<a id="downloadApp" target="_blank" href="https://github.com/A-Herzog/MiniSimulator/releases/latest/download/MiniSimulator.exe" style="display: none;"></a>
+<button onclick="document.getElementById('downloadApp').click();" class="btn btn-primary my-1 bi-windows"> Windows-Anwendung (exe)</button>
+</p>
+
+<h3>Weitere Simulatoren</h3>
+-->
+
 <p>
 Dieser Simulator ist vollständig in <b>Javascript</b> implementiert. Dies hat den Vorteil, dass er direkt im Browser ausgeführt werden kann, ohne dass eine Softwareinstallation notwendig wäre. Allerdings limitiert dies auch die Modellierungsmöglichkeiten und auch die Ausführungsgeschwindigkeit. Für komplexere Fragestellungen stehen daher drei als Opensource verfügbare Desktop-Programme bereit:
 </p>
@@ -6,7 +18,7 @@
 
 <div class="col-lg-4">
 <div class="card">
-  <img src="./images/Screenshot_QS_de.webp" loading="lazy" class="card-img-top" alt="Warteschlangensimulator" style="aspect-ratio: 640 / 481;" width="100%">
+  <img src="./images/Screenshot_QS_de.webp" loading="lazy" class="card-img-top" alt="Warteschlangensimulator" style="aspect-ratio: 640 / 481;">
   <div class="card-body">
   <h3 class="h5 card-title">Warteschlangensimulator</h3>
   <p class="card-text">
@@ -19,7 +31,7 @@ <h3 class="h5 card-title">Warteschlangensimulator</h3>
 
 <div class="col-lg-4">
 <div class="card">
-  <img src="./images/Screenshot_CS_de.webp" loading="lazy" class="card-img-top" alt="Callcenter Simulator" style="aspect-ratio: 640 / 439;" width="100%">
+  <img src="./images/Screenshot_CS_de.webp" loading="lazy" class="card-img-top" alt="Callcenter Simulator" style="aspect-ratio: 640 / 439;">
   <div class="card-body">
   <h3 class="h5 card-title">Callcenter Simulator</h3>
   <p class="card-text">
@@ -32,7 +44,7 @@ <h3 class="h5 card-title">Callcenter Simulator</h3>
 
 <div class="col-lg-4">
 <div class="card">
-  <img src="./images/Screenshot_MiniCS_de.webp" loading="lazy" class="card-img-top" alt="Mini Callcenter Simulator" style="aspect-ratio: 640 / 483;" width="100%">
+  <img src="./images/Screenshot_MiniCS_de.webp" loading="lazy" class="card-img-top" alt="Mini Callcenter Simulator" style="aspect-ratio: 640 / 483;">
   <div class="card-body">
   <h3 class="h5 card-title">Mini Callcenter Simulator</h3>
   <p class="card-text">
diff --git a/docs/js/info_software_en.html b/docs/js/info_software_en.html
@@ -1,3 +1,15 @@
+<!--
+<p>
+The G/G/c/K+G Simulator can be downloaded as an offline executable Windows application:
+</p>
+<p>
+<a id="downloadApp" target="_blank" href="https://github.com/A-Herzog/MiniSimulator/releases/latest/download/MiniSimulator.exe" style="display: none;"></a>
+<button onclick="document.getElementById('downloadApp').click();" class="btn btn-primary my-1 bi-windows"> Windows application (exe)</button>
+</p>
+
+<h3>More simulators</h3>
+-->
+
 <p>
 This simulator is completely implemented in <b>Javascript</b>. This has the advantage that it can be executed directly in the browser without the need for a software installation. However, this also limits the modeling possibilities and also the execution speed. For more complex models, there are three desktop programs available as opensource:
 </p>
@@ -6,7 +18,7 @@
 
 <div class="col-sm-4">
 <div class="card">
-  <img src="./images/Screenshot_QS_en.webp" loading="lazy" class="card-img-top" alt="Warteschlangensimulator" style="aspect-ratio: 640 / 481;" width="100%">
+  <img src="./images/Screenshot_QS_en.webp" loading="lazy" class="card-img-top" alt="Warteschlangensimulator" style="aspect-ratio: 640 / 481;">
   <div class="card-body">
   <h3 class="h5 card-title">Warteschlangensimulator</h3>
   <p class="card-text">
@@ -19,7 +31,7 @@ <h3 class="h5 card-title">Warteschlangensimulator</h3>
 
 <div class="col-sm-4">
 <div class="card">
-  <img src="./images/Screenshot_CS_en.webp" loading="lazy" class="card-img-top" alt="Callcenter Simulator" style="aspect-ratio: 640 / 439;" width="100%">
+  <img src="./images/Screenshot_CS_en.webp" loading="lazy" class="card-img-top" alt="Callcenter Simulator" style="aspect-ratio: 640 / 439;">
   <div class="card-body">
   <h3 class="h5 card-title">Callcenter Simulator</h3>
   <p class="card-text">
@@ -32,7 +44,7 @@ <h3 class="h5 card-title">Callcenter Simulator</h3>
 
 <div class="col-sm-4">
 <div class="card">
-  <img src="./images/Screenshot_MiniCS_en.webp" loading="lazy" class="card-img-top" alt="Mini Callcenter Simulator" style="aspect-ratio: 640 / 483;" width="100%">
+  <img src="./images/Screenshot_MiniCS_en.webp" loading="lazy" class="card-img-top" alt="Mini Callcenter Simulator" style="aspect-ratio: 640 / 483;">
   <div class="card-body">
   <h3 class="h5 card-title">Mini Callcenter Simulator</h3>
   <p class="card-text">
