305 lines
8.9 KiB
HTML
305 lines
8.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Sorteio da batalha</title>
|
|
<style>
|
|
@font-face {
|
|
font-family: batsand;
|
|
src: url("Batsand.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: coolvetica;
|
|
src: ("coolvetica.otf");
|
|
}
|
|
:root {
|
|
--basedark: #14021b;
|
|
--basered: #741000;
|
|
--colorfont: #dcdbb9;
|
|
}
|
|
|
|
* {
|
|
font-family: coolvetica;
|
|
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;
|
|
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 {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 25%;
|
|
border-radius: 1vw;
|
|
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;
|
|
font-size: 1.5em;
|
|
border-top: solid 1px var(--basedark);
|
|
}
|
|
|
|
#add li input {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
right: 0;
|
|
top: 0;
|
|
font-size: 1.5em;
|
|
font-weight: 700;
|
|
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;
|
|
}
|
|
</style>
|
|
|
|
<script
|
|
src="https://code.jquery.com/jquery-3.7.1.js"
|
|
type="text/javascript"
|
|
></script>
|
|
</head>
|
|
<body>
|
|
<div id="central">
|
|
<div id="players">
|
|
<div id="users">
|
|
<h2 id="user1">n/a</h2>
|
|
</div>
|
|
<h1>VS</h1>
|
|
<div id="users">
|
|
<h2 id="user2">n/a</h2>
|
|
</div>
|
|
</div>
|
|
<input type="submit" value="RODAR" />
|
|
</div>
|
|
<div id="add">
|
|
<header>
|
|
<input
|
|
type="text"
|
|
placeholder="participante"
|
|
name="participante"
|
|
id="addUser"
|
|
/>
|
|
<input type="submit" value="ADD" id="btnadd" />
|
|
</header>
|
|
<ul>
|
|
<li><a>Jubilu sem cu</a><input type="submit" value="X" /></li>
|
|
</ul>
|
|
</div>
|
|
<div id="roda_pe">
|
|
<li>
|
|
<a>software programado por zk</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://instagram.com/@zk_exe">instagram: @zk_exe</a>
|
|
</li>
|
|
<li>
|
|
<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>
|