The actual puzzle content isn't here, (and won't be ever, really).
Instead, the next step is to develop the server to send out puzzle
content over the socket.io connection.
But this commit includes the basics of the HTML and CSS structure
we'll hang things off of.
<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">
<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">
</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>
- 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>