Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Windows 3.1</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="style.css" type="text/css"> | |
| <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css"> | |
| <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> | |
| <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> | |
| <script src="code.js"></script> | |
| </head> | |
| <body> | |
| <div id="intro" class="window" style="position: absolute; top: 100px; left: 100px; width: 500px; height: 120px; z-index: 1"> | |
| <div class="windowheader"> | |
| <div class="windowclose"></div> | |
| <div class="windowtitle">Introduction</div> | |
| </div> | |
| <div class="windowinner"> | |
| <div class="fullwindowhtml"> | |
| <p>This is a test of trying to replicate some Windows 3.1 styles and interactions in HTML, CSS & JS.</p> | |
| <p>Created by <a href="https://ianrenton.com">Ian Renton</a>, but nobody knows why.</p> | |
| <p><a href="https://github.com/ianrenton/web3point1">Source Code is on GitHub</a> and is in the Public Domain.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="progman" class="window selectedwindow" style="position: absolute; top: 250px; left: 150px; width: 500px; height: 300px; z-index: 2"> | |
| <div class="windowheader"> | |
| <div class="windowclose"></div> | |
| <div class="windowtitle">Program Manager</div> | |
| </div> | |
| <div class="windowinner"> | |
| <div class="fullwindowicons"> | |
| <div class="icon" ondblclick="newWindow('#clock')"> | |
| <img src="icons/clock.png"> | |
| <p>Clock</p> | |
| </div> | |
| <div class="icon" ondblclick="newWindow('#write')"> | |
| <img src="icons/write.png"> | |
| <p>Write</p> | |
| </div> | |
| <div class="icon" ondblclick="newWindow('#dosprompt')"> | |
| <img src="icons/dos.png"> | |
| <p>MS-DOS</p> | |
| </div> | |
| <div class="icon" ondblclick="newWindow('#doom')"> | |
| <img src="icons/doom.png"> | |
| <p>DOOM</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="write" class="window" style="position: absolute; top: 150px; left: 400px; width: 500px; height: 400px; z-index: 3; display: none;"> | |
| <div class="windowheader"> | |
| <div class="windowclose"></div> | |
| <div class="windowtitle">Write - TEXTBO~1.WRI</div> | |
| </div> | |
| <div class="windowinner"> | |
| <textarea class="fullwindowtextarea">Yo what up this is a text box</textarea> | |
| </div> | |
| </div> | |
| <div id="clock" class="window" style="position: absolute; top: 260px; left: 260px; width: 250px; height: 250px; z-index: 4; display: none"> | |
| <div class="windowheader"> | |
| <div class="windowclose"></div> | |
| <div class="windowtitle">Clock</div> | |
| </div> | |
| <div class="windowmenubar"> | |
| <div class="menuitem">Settings</div> | |
| </div> | |
| <div class="windowinner" style="background-color: lightgrey"> | |
| <div class="fullwindowhtml"> | |
| <div style="margin-top: 70px; font-family: Arial, sans-serif; font-size: 40px; text-align:center">04:20:00 PM</div> | |
| <div style="margin-top: 5px; font-family: Arial, sans-serif; font-size: 20px; text-align:center">6/9/69</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="dosprompt" class="window" style="position: absolute; top: 220px; left: 250px; width: 600px; height: 350px; z-index: 5; display: none"> | |
| <div class="windowheader"> | |
| <div class="windowclose"></div> | |
| <div class="windowtitle">MS-DOS Prompt</div> | |
| </div> | |
| <div class="windowinner"> | |
| <textarea class="fullwindowdosprompt">C:\> </textarea> | |
| </div> | |
| </div> | |
| <div id="doom" class="window" style="position: absolute; top: 150px; left: 150px; width: 640px; height: 480px; z-index: 6; display: none"> | |
| <div class="windowheader"> | |
| <div class="windowclose"></div> | |
| <div class="windowtitle">DOOM</div> | |
| </div> | |
| <div class="windowinner"> | |
| <canvas id="doomcanvas"></canvas> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |