Arachne
/
IFConsoleTemplate


			
				
					
						
						
							
							<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="/static/normalize.css">
    <title>IF Game</title>
    <!-- currently 1.1.0 -->
    <script src="/static/htmx.min.js"></script>
    <script scr="/static/alpine.2.8.2.min.js"></script>
    <style>
        #app {
            background-color: gray;
            height: 100vh;
            display: flex;
            flex-direction: column;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        #header {
            background-color: black;
            color: white;
            position: sticky;

            display: flex;
            flex-direction: row;

            padding: 0.7em;
        }

        #headerContent {
            margin: auto auto;
        }

        #narrativeContainerWrapper {
            overflow: auto; 
            display: flex; 
            flex-direction:column-reverse;

            background-color: white;
            width: 80ch;
            max-width: 80ch;
            height: calc(90% - 4em);
            /*max-height: calc(90% - 2em);*/
            margin: 0 auto;
            margin-top: 1em;

            scrollbar-width: none;
        }

        #narrativeContainerWrapper:hover {
            scrollbar-width: unset;
        }

        .narrativeItem {
            padding: 1em;
        }

        #playerEntry {
            background-color: white;
            width: 80ch;
            margin: auto auto;

            font-size: 1.2em;

            display: flex;
            align-items: center;
            padding: 0 1em;
        }

        #playerEntry input {
            border: 0;
            outline: none;
            width: 100%;
            padding: 1rem;
            font-weight: bold
        }

    </style>
    <link rel="stylesheet" href="/static/custom.css">
</head>

<body>
    <div id="app">
        <div id="header">
            <div id="headerContent">
                I'm a header!
            </div>
        </div>
        <div id="narrativeContainerWrapper">
            <div id="narrativeContainer">
                <script>
                    var x = 0;
                    setInterval(function () {
                        document.getElementById('lastNarrativeItem').insertAdjacentHTML('beforebegin', `<div style="height:100px" class="narrativeItem">Bogus content ${x}!</div>`)
                        x++;
                    }, 1000);
                </script>
                <div id="lastNarrativeItem">

                </div>
            </div>
        </div>

        <div id="playerEntry">
            > <input type="text" spellcheck="false">
        </div>
    </div>
</body>

</html>