bdc_sorteio/index.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="adicionar participante"
                    name="participante"
                />
                <input type="submit" value="ADD" />
            </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>
    </body>
</html>