github.com/Racer159/jackal@v0.32.7-0.20240401174413-0bd2339e4f2e/examples/dos-games/image/index.html (about)

     1  <html>
     2  <style type="text/css" media="screen">
     3    canvas {
     4      width: 100vw;
     5      height: 100vh;
     6    }
     7  </style>
     8  
     9  <head>
    10    <title>Jackal needs games too</title>
    11    <script src="js-dos.js"></script>
    12  
    13    <style>
    14      * {
    15        box-sizing: border-box;
    16      }
    17  
    18      body {
    19        margin: 0;
    20        font-family: Arial;
    21        background: #444;
    22      }
    23  
    24      .header {
    25        text-align: center;
    26        padding: 32px;
    27      }
    28  
    29      .row {
    30        display: -ms-flexbox;
    31        /* IE10 */
    32        display: flex;
    33        -ms-flex-wrap: wrap;
    34        /* IE10 */
    35        flex-wrap: wrap;
    36        padding: 0 4px;
    37        justify-content: center;
    38      }
    39  
    40      /* Create four equal columns that sits next to each other */
    41      .column {
    42        -ms-flex: 25%;
    43        /* IE10 */
    44        flex: 25%;
    45        max-width: 25%;
    46        padding: 0 4px;
    47      }
    48  
    49      .column img {
    50        margin-top: 8px;
    51        vertical-align: middle;
    52        width: 100%;
    53      }
    54  
    55      /* Responsive layout - makes a two column-layout instead of four columns */
    56      @media screen and (max-width: 800px) {
    57        .column {
    58          -ms-flex: 50%;
    59          flex: 50%;
    60          max-width: 50%;
    61        }
    62      }
    63  
    64      /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    65      @media screen and (max-width: 600px) {
    66        .column {
    67          -ms-flex: 100%;
    68          flex: 100%;
    69          max-width: 100%;
    70        }
    71      }
    72    </style>
    73    </style>
    74  </head>
    75  
    76  <body>
    77    <canvas id="jsdos" style="display: none;"></canvas>
    78    <script>
    79      const game = location.search.substr(1)
    80      const gamePaths = {
    81        'aladdin': 'ALADDIN.EXE',
    82        'doom': 'DOOM.EXE',
    83        'mario-brothers': 'MARIO.BAT',
    84        'mega-man-x': 'MMXDEMO.EXE',
    85        'prince-of-persia': 'pop1demo.exe',
    86        'quake': 'QUAKE.EXE',
    87        'sim-city-2k': 'SC2000.EXE',
    88        'warcraft-ii': 'WAR2.EXE',
    89      }
    90  
    91      if (gamePaths[game]) {
    92        document.getElementById('jsdos').style.display = "block"
    93        Dos(document.getElementById("jsdos"), {}).ready((fs, main) => {
    94          fs.extract(game + '.zip').then(() => {
    95            main(["-c", gamePaths[game]])
    96          });
    97        });
    98      }
    99  
   100    </script>
   101  
   102    <div class="row">
   103      <div class="column">
   104        <a href="?aladdin"><img src="aladdin.png" style="width:100%"></a>
   105        <a href="?doom"><img src="doom.png" style="width:100%"></a>
   106      </div>
   107      <div class="column">
   108        <a href="?mario-brothers"><img src="mario-brothers.png" style="width:100%"></a>
   109        <a href="?prince-of-persia"><img src="prince-of-persia.png" style="width:100%"></a>
   110      </div>
   111      <div class="column">
   112        <a href="?quake"><img src="quake.png" style="width:100%"></a>
   113        <a href="?warcraft-ii"><img src="warcraft-ii.png" style="width:100%"></a>
   114      </div>
   115    </div>