final update

index.html

@@ -210,10 +210,11 @@
             <header>
                 <input
                     type="text"
-                    placeholder="adicionar participante"
+                    placeholder="participante"
                     name="participante"
+                    id="addUser"
                 />
-                <input type="submit" value="ADD" />
+                <input type="submit" value="ADD" id="btnadd" />
             </header>
             <ul>
                 <li><a>Jubilu sem cu</a><input type="submit" value="X" /></li>
@@ -230,5 +231,74 @@
                 <a>contato deividfar33@gmail.com</a>
             </li>
         </div>
+        <script type="text/javascript">
+            $(document).ready(function () {
+                let lista = JSON.parse(localStorage.getItem("lista")) || [];
+
+                function updatelist() {
+                    $("#add ul").empty();
+                    lista.forEach((nome, index) => {
+                        $("#add ul").append(
+                            `<li>
+                                <a>${nome}</a>
+                                <input type="submit" value="X" class="remove" data-index="${index}" />
+                            </li>`,
+                        );
+                    });
+                }
+
+                function saveLocalStorage() {
+                    localStorage.setItem("lista", JSON.stringify(lista));
+                }
+
+                $("#btnadd").click(function () {
+                    let inputText = $("#addUser").val().trim();
+                    if (inputText) {
+                        lista.push(inputText);
+                        saveLocalStorage();
+                        updatelist();
+                        $("#addUser").val("");
+                    }
+                });
+
+                $("#add ul").on("click", ".remove", function () {
+                    let index = $(this).data("index");
+                    lista.splice(index, 1);
+                    saveLocalStorage();
+                    updatelist();
+                });
+
+                $("#central input").click(function () {
+                    if (lista.length < 2) {
+                        alert("Erro, falta 1 participante.");
+                        return;
+                    }
+
+                    let sorte = [];
+                    while (sorte.length < 2) {
+                        let index = Math.floor(Math.random() * lista.length);
+                        if (!sorte.includes(index)) {
+                            sorte.push(index);
+                        }
+                    }
+
+                    $("#players").html(
+                        `<div id="users">
+                            <h2 id="user1">${lista[sorte[0]]}</h2>
+                        </div>
+                        <h1>VS</h1>
+                        <div id="users">
+                            <h2 id="user2">${lista[sorte[1]]}</h2>
+                        </div>`,
+                    );
+
+                    lista = lista.filter((_, index) => !sorte.includes(index));
+                    saveLocalStorage();
+                    updatelist();
+                });
+
+                updatelist();
+            });
+        </script>
     </body>
 </html>

script.js

@@ -0,0 +1,65 @@
+$(document).ready(function () {
+  let lista = JSON.parse(localStorage.getItem("lista")) || [];
+
+  function updatelist() {
+    $("#add ul").empty();
+    lista.forEach((lista, index) => {
+      $("#add ul").append(
+        `<li><a>` + lista + `</a > <input type="submit" value="X" /></li > `,
+      );
+    });
+  }
+
+  function saveLocalStorage() {
+    localStorage.setItem("lista", JSON.stringify(lista));
+  }
+
+  $("#btnadd").click(function () {
+    let inputText = $("#addUser").val().trim();
+    if (inputText) {
+      lista.push(inputText);
+      saveLocalStorage();
+      updatelist();
+      $("#addUser").val("");
+    }
+  });
+
+  $("#central input").click(function () {
+    if (lista.length < 2) {
+      alert("erro, falta 1");
+      return;
+    }
+
+    let sorte = [];
+    while (sorte.length < 2) {
+      let index = Math.floor(Math.random() * lista.length);
+      if (!sorte.includes(index)) {
+        sorte.push(index);
+      }
+    }
+    $("#players").html(
+      `
+      <div id="users">
+          <h2 id="user1">` +
+        lista[sorte[0]] +
+        `/a</h2>
+      </div>
+      <h1>VS</h1>
+      <div id="users">
+          <h2 id="user2">` +
+        lista[sorte[1]] +
+        `</h2>
+      </div>
+      `,
+    );
+    lista = lista.filter((_, index) => !sorte.includes(index));
+  });
+
+  window.remove = function (index) {
+    lista.splice(index, 1);
+    saveLocalStorage();
+    updatelist();
+  };
+
+  updatelist();
+});

style.css

@@ -0,0 +1,176 @@
+@font-face {
+    font-family: batsand;
+    src: url("Batsand.ttf");
+}
+
+:root {
+    --basedark: #14021b;
+    --basered: #741000;
+    --colorfont: #dcdbb9;
+}
+
+* {
+    text-decoration: none;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    color: var(--colorfont);
+}
+
+body {
+    width: 100%;
+    min-height: 100vh;
+    background: linear-gradient(
+        180deg,
+        var(--basedark) 50%,
+        var(--basered) 100%
+    );
+}
+
+#central {
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    min-height: 50vh;
+}
+
+#players {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#players #users {
+    font-size: 5em;
+    font-family: arial;
+    text-transform: uppercase;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.5);
+    border: solid 1px var(--basered);
+    border-radius: 1vw;
+    min-width: 25%;
+    max-width: 25%;
+    height: 25vh;
+}
+
+#players h1 {
+    color: #c55f2f;
+    margin: 5vw;
+    font-family: batsand;
+    font-size: 15em;
+}
+
+#central input {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: #c55f2f;
+    border: none;
+    padding: 1vw;
+    cursor: pointer;
+    font-size: 2em;
+    transition: 0.3s;
+}
+
+#central input:hover {
+    background: var(--basered);
+}
+
+#add {
+    position: relative;
+    width: 100%;
+    min-height: 20vw;
+    max-height: 20vw;
+    overflow: hidden;
+}
+
+#add ul {
+    position: absolute;
+    bottom: 0;
+    overflow: hidden;
+    overflow-y: scroll;
+    width: 100%;
+    height: 78%;
+}
+
+#add li {
+    position: relative;
+    padding: 1vw;
+    background: rgba(20, 20, 20, 0.5);
+    font-size: 1.5em;
+    border-top: solid 1px var(--basedark);
+}
+
+#add li input {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 5vw;
+    height: 100%;
+    border: none;
+    background: #c55f2f;
+    transition: 0.3s;
+}
+
+#add li input:hover {
+    background: var(--basered);
+}
+
+#add header {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    padding: 1vw 0 1vw 0;
+    border-bottom: 1px solid var(--basered);
+}
+
+#add input[type="text"] {
+    width: 80%;
+    background: rgb(30, 30, 30);
+    border: none;
+    padding: 0.5vw;
+    font-size: 1.5em;
+    outline: 0;
+    border-radius: 1vw 0 0 1vw;
+}
+
+#add header input[type="submit"] {
+    width: 5%;
+    border: none;
+    padding: 0.5vw;
+    font-size: 1.5em;
+    border-radius: 0 1vw 1vw 0;
+    background: #c55f2f;
+    transition: 0.5s;
+    cursor: pointer;
+}
+
+#add header input[type="submit"]:hover {
+    background: var(--basered);
+}
+
+#roda_pe {
+    background: #000000;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 7vw;
+    border-top: solid 0.5vw var(--basered);
+}
+
+#roda_pe a {
+    cursor: pointer;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 1.3em;
+}