feat: allow only one server to be launched

public/index.html

@@ -56,6 +56,16 @@
               <p>Statut synchronise toutes les 5 minutes.</p>
             </div>
           </div>
+          <div class="info-banner">
+            <div>
+              <strong>Capacite limitee</strong>
+              <p>Un seul serveur de jeux peut etre lance a la fois afin d'eviter de surcharger le serveur.</p>
+            </div>
+            <div>
+              <strong>Arret automatique</strong>
+              <p>Les serveurs de jeux se ferment automatiquement si aucun joueur n'est present pendant 1 h.</p>
+            </div>
+          </div>
           <div class="server-grid" id="serversBody"></div>
         </section>
 

public/styles/app.css

@@ -253,6 +253,36 @@ button {
   margin-bottom: 1.2rem;
 }
 
+.info-banner {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.85rem;
+  margin: -0.25rem 0 1rem;
+}
+
+.info-banner > div {
+  background: linear-gradient(135deg, rgba(123, 92, 255, 0.14), rgba(0, 132, 255, 0.08));
+  border: 1px solid rgba(123, 92, 255, 0.28);
+  border-radius: 7px;
+  padding: 0.85rem 0.95rem;
+}
+
+.info-banner strong {
+  display: block;
+  color: var(--text);
+  font-family: var(--font-display);
+  font-size: 0.76rem;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.38rem;
+  text-transform: uppercase;
+}
+
+.info-banner p {
+  color: var(--muted);
+  font-size: 0.9rem;
+  margin: 0;
+}
+
 h2,
 h3 {
   margin: 0;
@@ -704,6 +734,10 @@ code {
     max-width: none;
   }
 
+  .info-banner {
+    grid-template-columns: 1fr;
+  }
+
   .inline-form {
     width: 100%;
   }