Title Screen Test • 7 min read

%%html

<link rel="stylesheet" href="/ramjiJarmi/souls/css/style.css">
<style>
body {
    background: #000000;
}
footer {
    padding: 125px
}
html{
    overflow: hidden;
}
.titleScreen
{
    animation: fadeIn 3s;
    font-size: 1.6em;
    text-align:center;
    color: white;
    height: 100%;
    width: 100%;
}
.container
{
    display: flex; 
    justify-content: center; 
    margin-top: 225px;
    align-items: center;/* Vertically center the child */
    top: 50px;
}
#title
{
    display: none;
}
#footerMessage
{
    color: white;
    font-family: "Garamond", Times, serif;
    font-size: 16px;
    text-align: center;
    display: none;
}
.button {
    background-color: transparent;
    border: none;
    color: white;
    text-align: center;
    font-family: "Garamond", Times, serif;
    font-size: 24px;
}
.button:hover{
    width: 325px;
    background-color: #460000;
}
.introMessage
{
    font-family: "Garamond", Times, serif;
    position: relative;
    white-space: nowrap;
    margin: 0 auto;
    font-size: 130%;
    overflow: hidden;
    border-right: 2px solid;
    color: white;
}
#loadTerminalSouls
{
    display: "block";
}
#intro
{
    display: "block";
}
.anim-typewriter{
    animation: typewriter 4s steps(44) 1s 1 normal both,
        blinkTextCursor 500ms
    steps(44) infinite normal;
}
#paragraph
{
    display:none;
    font-family: "Garamond", Times, serif;
    text-align: center;
} 
#startParagraph
{
    display:none;
    font-family: "Garamond", Times, serif;
    text-align: center;
}  

@keyframes typewriter{
    from{width: 0;}
    to{width: 52em;}
}
@keyframes blinkTextCursor{
    from{border-right-color:rba(255,255,255,.75)}
    to{border-right-color: transparent;}
}
@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
</style>

<div >
    <p class="introMessage anim-typewriter" id="intro">
        Hi! Welcome to Terminal Souls! Hope you enjoy the game and try out the original Dark Souls games for yourself. They're really good! 
    </p>
    
    <button class = "button" id="loadTerminalSouls" onclick="loadStartscreen()">
        Click here
    </button>
</div>

<div class="container">
    <div class="titleScreen" id="title">
        <pre>
████████╗███████╗██████╗ ███╗   ███╗██╗███╗   ██╗ █████╗ ██╗         ███████╗ ██████╗ ██╗   ██╗██╗     ███████╗
╚══██╔══╝██╔════╝██╔══██╗████╗ ████║██║████╗  ██║██╔══██╗██║         ██╔════╝██╔═══██╗██║   ██║██║     ██╔════╝
   ██║   █████╗  ██████╔╝██╔████╔██║██║██╔██╗ ██║███████║██║         ███████╗██║   ██║██║   ██║██║     ███████╗
   ██║   ██╔══╝  ██╔══██╗██║╚██╔╝██║██║██║╚██╗██║██╔══██║██║         ╚════██║██║   ██║██║   ██║██║     ╚════██║
   ██║   ███████╗██║  ██║██║ ╚═╝ ██║██║██║ ╚████║██║  ██║███████╗    ███████║╚██████╔╝╚██████╔╝███████╗███████║
   ╚═╝   ╚══════╝╚═╝  ╚═╝╚═╝     ╚═╝╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝╚══════╝    ╚══════╝ ╚═════╝  ╚═════╝ ╚══════╝╚══════╝
        </pre>
        <div>
            <button class="button" onclick="window.location.href = '/ramjiJarmi/souls/chrctrCustom.html'">
                New Game
            </button>
        </div>
        <button class="button" id="abtTGame" onclick="showParagraph()">
            About
        </button>
        <div>
        <button class="button" id="settings">
            Settings
        </button>
        <div>
        <div id="paragraph">
            <p>
                    This is a recreation of title screen of Dark Souls. A brutally hard game that is extremely fun to play, with over 100 hours invested in this game I am excited to recreate parts of it in this project.
                Check out some videos of people having lots of fun with this game:
                    <a href="https://www.youtube.com/watch?v=5SaW0oKTisk&t=52s">People having jolly good fun with Dark Souls 1</a>
                If you are having trouble with the game:
                    <a href="https://www.thegamer.com/dark-souls-tips-beginners/"> Get Better </a>
            </p>
        </div>
        <div id="startParagraph">
            Read the first line. There is nothing else developed because Matthew has procracinated this assignment for too long. 
        </div>
    </div>
</div>
<footer>
    <div>
        <p id="footerMessage">
            Terminal Souls: Epic CSP project created by RamjiJarmi
        </p>
    </div>
</footer>
<script>
    var div = document.getElementById("paragraph");
    function showParagraph()
    {
        document.getElementById("startParagraph").style.display = "none";
        document.getElementById("paragraph").style.display = "block";
    }
    function changeParagraph()
    {
        document.getElementById('paragraph').style.display="none";
        document.getElementById('startParagraph').style.display="block";
    }
    function loadStartscreen()
    {
        document.getElementById("title").style.display="block";
        document.getElementById("intro").style.display="none";
        document.getElementById("footerMessage").style.display="block";
        document.getElementById("loadTerminalSouls").style.display="none";
        
        // const musicContainer = document.getElementById("menuMusic");
        //const menuMusic = document.createElement("audio");
        
        //musicContainer.appendChild(menuMusic); 

    }
</script>