Commit 0fb0dd12 authored by Ari Trachtenberg's avatar Ari Trachtenberg
Browse files

public version

parent a40b1dd7

EC327_Hangle_COMPLETED/1_mainpage.css

0 → 100644
+113 −0
Original line number Diff line number Diff line 
body {

    margin: 0;

    height: 100vh;

    font-family: 'Georgia', serif;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center; 

    background-color: #ADD8E6; 

}



#container {

    text-align: center; 

    position: relative;

    top: 0px;

    transform: translateX(-20px);

}



#title {

    font-family: 'Roboto Slab', serif; 

    font-size: 3rem;

    font-weight: 1000; 

    color: black;

    transform: translateX(22px);

    margin: 0;

}



.wrapper {

    display: flex;

    justify-content: center; 

    align-items: center;

}



.wrapper .dynamic-txts {

    line-height: 40px; 

    height: 40px;

    overflow: hidden;

    position: relative;

    text-align: center;

}



.dynamic-txts li {

    list-style: none;

    font-family: 'Georgia', serif; 

    font-size: 30px;

    font-weight: 400; 

    color: black;

    margin: 0; 

    animation: slide 8s steps(2)

    infinite;

}



.dynamic-txts li {

    position: relative;

}

  

.dynamic-txts li::after {

    content: ""; 

    position: absolute;

    left: 0; 

    height: 100%;

    width: 100%; 

    background-color: #ADD8E6;

    border-left: 2px solid black; 

    animation: typing 4s steps(20) 

    infinite; 

}



@keyframes typing {

    40%,

    60% {

        left: calc(100% + 1px);

    }



    100% {

        left: 0;

    }

}



@keyframes slide {

    0% {

        top: 0;

    }

    100% {

        top: -80px; 

    }

}





#button {

    display: flex;

    justify-content: center;

}



.button {

    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

    background-color: #ADD8E6; 

    border: 2px solid black;

    font-size: 16px; 

    font-weight: 400;

    padding: 10px 60px;

    border-radius: 20px;

    cursor: pointer;

    margin: 0 15px; 

    transition: background-color 0.3s; 

}





.button:hover {

    background-color: #000000;

    color: white;

}

EC327_Hangle_COMPLETED/1_mainpage.html

0 → 100644
+35 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Solo</title>



    <link rel = "stylesheet" href = "1_mainpage.css">

</head>



<body>

    <div id="container">

        <h1 id="title">Hangle</h1>

        <div class="wrapper">         

            <ul class = "dynamic-txts">

            <li><span> Better than Hangman </span></li>

            <li><span> Better than Wordle </span></li>

        </ul> </div>

 

    </div>



    <div id="buttons">

        <button id="button1" class="button">One-Player</button>

        <button id="button2" class="button">Multi-Player</button>

    </div>



</body>



<footer>

    <script src="1_mainpage.js"></script>

</footer>







</html>
 
 No newline at end of file

EC327_Hangle_COMPLETED/1_mainpage.js

0 → 100644
+7 −0
Original line number Diff line number Diff line 
document.getElementById('button1').addEventListener('click', () => {

    window.location.href = '2_soloplayer.html'; // Redirects to 2_soloplayer

});



document.getElementById('button2').addEventListener('click', () => {

    window.location.href = '2_multiplayer.html'; // Redirects to page2.html

});

EC327_Hangle_COMPLETED/2_multiplayer.css

0 → 100644
+168 −0
Original line number Diff line number Diff line 
body {

    margin: 0;

    height: 100vh;

    font-family: 'Georgia', serif;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center; 

    background-color: #ADD8E6; 

}



#container {

    text-align: center; 

    position: relative;

    top: 0px;

}



#title {

    font-family: 'Roboto Slab', serif; 

    font-size: 3rem;

    font-weight: 1000; 

    color: black;

    margin: 0;

    transform: translateX(3px);

}



#subtitle {

    font-family: 'Georgia', serif; 

    font-size: 1.5rem;

    font-weight: 400; 

    color: black;

    margin: 0.2; 

}



/* Modal Styling */

.modal {

    display: none; /* Hidden by default */

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */

    justify-content: center;

    align-items: center;

    z-index: 1000;

}



.modal-content {

    background-color: #ffffff;

    padding: 20px;

    border-radius: 10px;

    width: 50%;

    text-align: center;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}



.close-button {

    float: right;

    font-size: 24px;

    font-weight: bold;

    color: #333;

    cursor: pointer;

}



.close-button:hover {

    color: red;

}



/* Fade-in Animation */

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: scale(0.9);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}





#button {

    display: flex;

    justify-content: center;

}



.button {

    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

    background-color: #ADD8E6; 

    border: 2px solid black;

    font-size: 16px; 

    font-weight: 400;

    padding: 10px 60px;

    border-radius: 20px;

    cursor: pointer;

    margin: 0 15px; 

    transition: background-color 0.3s; 

    width: 180px;

}





.button:hover {

    background-color: #000000;

    color: white;

}



.wrapper {

    display: flex;

    justify-content: center; 

    align-items: center;

    transform: translateX(-20px);

}



.wrapper .dynamic-txts {

    line-height: 40px; 

    height: 40px;

    position: relative;

    text-align: center;

    overflow: hidden;

}



.dynamic-txts li {

    list-style: none;

    font-family: 'Georgia', serif; 

    font-size: 30px;

    font-weight: 400; 

    color: black;

    margin: 0; 

    animation: slide 70s steps(7)

    infinite;

}



.dynamic-txts li {

    position: relative;

}

  

.dynamic-txts li::after {

    content: ""; 

    position: absolute;

    left: 0; 

    height: 100%;

    width: 100%; 

    background-color: #ADD8E6;

    border-left: 2px solid black; 

    animation: typing 10s steps(50) 

    infinite; 

}



@keyframes typing {

    40%,

    60% {

        left: calc(100% + 1px);

    }



    100% {

        left: 0;

    }

}



@keyframes slide {

    0% {

        top: 0;

    }

    100% {

        top: -280px; 

    }

}
 
 No newline at end of file

EC327_Hangle_COMPLETED/2_multiplayer.html

0 → 100644
+39 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Solo</title>



    <link rel = "stylesheet" href = "2_multiplayer.css">

</head>



<body>

    <div id="container">

        <h1 id="title">Multi-Player</h1>

        <div class="wrapper">         

            <ul class = "dynamic-txts">

                <li><span> Pick a mode. Don't worry, both are equally unforgiving.     </span></li>

                <li><span> Wow, still here? Are you waiting for the other player?     </span></li>

                <li><span> Take your time. Maybe indecision is your strategy.         </span></li>

                <li><span> Still deciding? It's just Hang(le)man, not life or death.      </span></li>

                <li><span> Is this a game or a dramatic pause competition. . .            </span></li>

                <li><span> Fun fact: waiting won't make you any better at this.       </span></li>

                <li><span> Alright, stay here forever if that's your winning move.    </span></li>

                

                

        </ul> </div>

    </div>



    <div id="buttons">

        <button id="button1" class="button">Hangman</button>

        <button id="button2" class="button">Hangle</button>

    </div>



</body>



<footer>

    <script src="2_multiplayer.js"></script>

</footer>



</html>
 
 No newline at end of file