Merge pull request #142 from vkynchev/master

updated emulator page...

docs/www/emulator/assets/css/main.css

@@ -0,0 +1,125 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out; }
+  html.dark,
+  body.dark {
+    background-color: #000; }
+    html.dark .header .heading,
+    body.dark .header .heading {
+      color: #fff; }
+
+*:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  outline: none; }
+
+.container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 10px 50px; }
+
+@media screen and (max-width: 768px) {
+  .container {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    padding: 10px; } }
+
+.header {
+  max-width: 1200px;
+  margin: 20px 0; }
+  .header .heading {
+    font-family: monospace;
+    font-size: 24px;
+    line-height: 24px;
+    font-weight: 200;
+    text-align: center;
+    margin: 0;
+    -webkit-transition: all 0.2s ease-in-out;
+    transition: all 0.2s ease-in-out; }
+    .header .heading.mini {
+      font-size: 14px;
+      line-height: 14px;
+      opacity: 0.6; }
+  .header .light-btn {
+    position: fixed;
+    top: 25px;
+    right: 25px;
+    width: 40px;
+    height: 40px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    background-color: #fff;
+    border: 1px solid #f1c40f;
+    border-radius: 50%;
+    cursor: pointer;
+    -webkit-transition: all 0.2s ease-in-out;
+    transition: all 0.2s ease-in-out;
+    overflow: hidden; }
+    .header .light-btn svg {
+      -webkit-transform: scale(0.65);
+              transform: scale(0.65); }
+    .header .light-btn polygon, .header .light-btn path {
+      fill: #f1c40f; }
+    .header .light-btn:hover {
+      background-color: #f1c40f; }
+      .header .light-btn:hover polygon, .header .light-btn:hover path {
+        fill: #fff; }
+    .header .light-btn.dark {
+      background-color: #000; }
+      .header .light-btn.dark polygon, .header .light-btn.dark path {
+        fill: #f1c40f; }
+      .header .light-btn.dark:hover {
+        background-color: #f1c40f; }
+        .header .light-btn.dark:hover polygon, .header .light-btn.dark:hover path {
+          fill: #fff; }
+
+.screen-container {
+  max-width: 100%;
+  background-color: #000;
+  overflow-x: scroll;
+  padding: 0 20px;
+  border: 1px solid #111; }
+  .screen-container .emulator-screen {
+    margin: 10px 0; }
+    .screen-container .emulator-screen .console {
+      font-family: monospace;
+      font-size: 16px;
+      line-height: 18px;
+      white-space: pre;
+      min-width: 770px; }
+  .screen-container input {
+    margin: 0 0 10px;
+    width: 100%; }
+
+.footer {
+  max-width: 1200px;
+  margin: 20px 0; }
+  .footer .info {
+    font-family: monospace;
+    font-size: 12px; }

docs/www/emulator/assets/css/main.sass

@@ -0,0 +1,121 @@
+html,
+body
+  margin: 0
+  padding: 0
+  transition: all 0.2s ease-in-out
+
+  &.dark
+    background-color: #000
+
+    .header
+      .heading
+        color: #fff
+
+// get rid of the input shadow
+*:focus
+  box-shadow: none
+  outline: none
+
+
+.container
+  display: flex
+  flex-direction: column
+  align-items: center
+  padding: 10px 50px
+
+@media screen and (max-width: 768px)
+  .container
+    display: flex
+    flex-direction: column
+    align-items: center
+    padding: 10px
+
+
+.header
+  max-width: 1200px
+  margin: 20px 0
+
+  .heading
+    font-family: monospace
+    font-size: 24px
+    line-height: 24px
+    font-weight: 200
+    text-align: center
+    margin: 0
+    transition: all 0.2s ease-in-out
+
+    &.mini
+      font-size: 14px
+      line-height: 14px
+      opacity: 0.6
+
+  .light-btn
+    position: fixed
+    top: 25px
+    right: 25px
+    width: 40px
+    height: 40px
+    display: flex
+    align-items: center
+    justify-content: center
+    background-color: #fff
+    border: 1px solid #f1c40f
+    border-radius: 50%
+    cursor: pointer
+    transition: all 0.2s ease-in-out
+    overflow: hidden
+
+    svg
+      transform: scale(0.65)
+
+    polygon, path
+      fill: #f1c40f
+
+    &:hover
+      background-color: #f1c40f
+
+      polygon, path
+        fill: #fff
+
+    &.dark
+      background-color: #000
+
+      polygon, path
+        fill: #f1c40f
+
+      &:hover
+        background-color: #f1c40f
+
+        polygon, path
+          fill: #fff
+
+
+.screen-container
+  max-width: 100%
+  background-color: #000
+  overflow-x: scroll
+  padding: 0 20px
+  border: 1px solid #111
+
+  .emulator-screen
+    margin: 10px 0
+
+    .console
+      font-family: monospace
+      font-size: 16px
+      line-height: 18px
+      white-space: pre
+      min-width: 770px
+
+  input
+    margin: 0 0 10px
+    width: 100%
+
+
+.footer
+  max-width: 1200px
+  margin: 20px 0
+
+  .info
+    font-family: monospace
+    font-size: 12px

docs/www/emulator/index.html

@@ -2,47 +2,89 @@
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+
     <meta name="description" content="Minimal Linux Live"/>
     <meta name="keywords" content="minimal minimalistic tiny linux live tutorial howto kernel busybox cd usb iso image bios uefi"/>
     <meta name="author" content="Ivan Davidov - davidov (dot) i [at] gmail {dot} com"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
-  <link rel="icon" type="image/x-icon" href="../assets/img/favicon.ico" />
     <title>Minimal Linux Live in JavaScript PC emulator</title>
+
+    <link rel="icon" type="image/x-icon" href="../assets/img/favicon.ico"/>
+    <link rel="stylesheet" type="text/css" href="./assets/css/main.css">
   </head>
-<body>
+
-<div id="title" style="white-space: pre; font: 20px monospace;">
+  <body id="body">
-  Minimal Linux Live (version 28-Jan-2018)
+    <div class="container">
+      <div class="header">
+        <h1 class="heading">Minimal Linux Live</h1>
+        <h1 class="heading mini">ver: 28-Jan-2018</h1>
+
+        <div class="light-btn" id="light-button">
+          <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="474.3px" height="474.3px" viewBox="0 0 474.3 474.3" style="enable-background:new 0 0 474.3 474.3;" xml:space="preserve">
+            <g>
+                <polygon points="266.076,0 213.961,0 202.008,31.557 278.03,31.557"/>
+                <polygon points="239.779,330.385 255.559,316.041 255.559,123.834 224.48,123.834 224.48,316.041"/>
+                <path d="M297.155,201.769v-77.935h-31.079v187.903l24.385,21.994c1.913,1.912,1.913,5.26,0.479,7.172
+                    c-1.913,1.912-5.26,1.912-7.172,0.479l-18.646-16.734c-0.957,0.956-24.863,19.125-24.863,19.125s-23.906-18.169-24.862-19.125
+                    l-18.647,16.734c-1.913,1.912-5.259,1.434-7.172-0.479s-1.434-5.26,0.478-7.172l24.384-21.516V123.834h-31.078V198.9
+                    c-52.115,21.516-88.931,72.196-88.931,132.44c0,78.891,64.069,142.959,142.959,142.959c78.891,0,142.481-64.068,142.481-142.959
+                    C379.87,273.487,345.924,224.719,297.155,201.769z"/>
+                <path d="M172.842,113.794h128.137c7.65,0.478,13.866-5.737,13.866-13.388v-3.825c0-7.65-6.216-13.866-13.866-13.866H172.842
+                    c-7.65-0.478-13.866,5.737-13.866,13.388v3.825C158.977,107.578,165.192,113.794,172.842,113.794z"/>
+                <path d="M172.842,72.197h128.137c7.65,0.478,13.866-5.738,13.866-13.388v-3.825c0-7.65-6.216-13.865-13.866-13.865H172.842
+                    c-7.65-0.479-13.866,5.737-13.866,13.387v3.825C158.977,65.981,165.192,72.197,172.842,72.197z"/>
+            </g>
+          </svg>
         </div>
-<br/>
+      </div>
-<div id="screen_container">
+
-  <div style="white-space: pre; font: 20px monospace; line-height: 22px"></div>
+      <div class="screen-container">
+        <div class="emulator-screen" id="screen_container" contenteditable="true">
+          <div class="console"></div>
           <canvas style="display: none"></canvas>
         </div>
-<div style="white-space: pre; font: 12px monospace;">
+      </div>
+
+      <div class="footer">
+        <div class="info">
           This is JavaScript based PC emulator which works entirely in your browser and some OS features may not behave properly in it.
           All CPU instructions are emulated via JavaScript and the boot process may take 10-20 minutes.
         </div>
-<script src="libv86.min.js"></script>
+      </div>
+    </div>
+
+    <script type="text/javascript" src="./assets/js/libv86.min.js"></script>
     <script>
-  "use strict";
       window.onload = function() {
         var image_name = 'minimal_linux_live_28-Jan-2018_32-bit_bios.iso';
-    var cdrom_full = '../download/2018/' + image_name;
+        var cdrom_url = '../download/2018/' + image_name;
+
         var emulator = window.emulator = new V86Starter({
           memory_size: 256 * 1024 * 1024,
           vga_memory_size: 16 * 1024 * 1024,
           screen_container: document.getElementById('screen_container'),
+
           bios: {
-        url: 'seabios.bin'
+            url: './bios/seabios.bin'
           },
           vga_bios: {
-        url: 'vgabios.bin'
+            url: './bios/vgabios.bin'
           },
+
           cdrom: {
-        url: cdrom_full
+            url: cdrom_url
           },
+
           autostart: true
         });
+
+        // initialize light button
+        document.getElementById('light-button').addEventListener('click', function() {
+          document.getElementById('light-button').classList.toggle("dark");
+          document.getElementById('body').classList.toggle("dark");
+        });
       }
     </script>
   </body>