<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
+
+ <style>
+ @keyframes zoom {
+ to {
+ opacity: 0%;
+ transform: scale(30);
+ }
+ }
+ .zoom-now {
+ animation-name: zoom;
+ animation-duration: 2s;
+ animation-timing-function: ease-in;
+ animation-fill-mode: forwards;
+ }
+ #welcome {
+ position: fixed;
+ width: 100%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ #game {
+ position: relative;
+ }
+ #word {
+ text-align: center;
+ font-size: 500%;
+ font-weight: bold;
+ }
+ #interface {
+ width: 100%;
+ }
+ #input {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 60%;
+ font-size: 200%;
+ border-width: 5px;
+ }
+ #reboot {
+ position: fixed;
+ right: 5px;
+ bottom: 5px;
+ }
+ #welcome-message {
+ font-size: 120%;
+ font-weight: bold;
+ text-align: center;
+ }
+ </style>
</head>
<body>
<div id="content">
- <div id="header" align="center">
- <p>
- <img src="/images/928785925_A_Van_Gogh_painting_of_the_Tardis.png">
+ <div id="welcome">
+ <div id="header" align="center">
+ <p>
+ <img src="/images/928785925_A_Van_Gogh_painting_of_the_Tardis.png">
+ </p>
+ </div>
+
+ <p id="welcome-message">
+ Waiting to enter Tardis.
+ <br>
+ Companions present: <span id="companions">1</span>/4
</p>
</div>
- <p>
- This tardis is locked. Do you have a sonic screwdriver?
- </p>
+ <div id="game" style="display: none">
+ <h1 id="step">Step 1: Calibrate the Trans-Dimensional Field Accelerator</h1>
+
+ <div id="word">
+ What
+ </div>
+ <div id="interface">
+ <input id="input">
+ </input>
+ </div>
+ <button id="reboot">
+ Reboot Tardis
+ </button>
+ </div>
</div>
</body>
projects / zombocom-ai / commitdiff