Initial commit

dist/download.js

@@ -0,0 +1,132 @@
+//download.js v3.0, by dandavis; 2008-2014. [CCBY2] see http://danml.com/download.html for tests/usage
+// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
+// v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
+// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support
+
+// data can be a string, Blob, File, or dataURL
+
+		 
+						 
+						 
+function download(data, strFileName, strMimeType) {
+	
+	var self = window, // this script is only for browsers anyway...
+		u = "application/octet-stream", // this default mime also triggers iframe downloads
+		m = strMimeType || u, 
+		x = data,
+		D = document,
+		a = D.createElement("a"),
+		z = function(a){return String(a);},
+		
+		
+		B = self.Blob || self.MozBlob || self.WebKitBlob || z,
+		BB = self.MSBlobBuilder || self.WebKitBlobBuilder || self.BlobBuilder,
+		fn = strFileName || "download",
+		blob, 
+		b,
+		ua,
+		fr;
+
+	//if(typeof B.bind === 'function' ){ B=B.bind(self); }
+	
+	if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
+		x=[x, m];
+		m=x[0];
+		x=x[1]; 
+	}
+	
+	
+	
+	//go ahead and download dataURLs right away
+	if(String(x).match(/^data\:[\w+\-]+\/[\w+\-]+[,;]/)){
+		return navigator.msSaveBlob ?  // IE10 can't do a[download], only Blobs:
+			navigator.msSaveBlob(d2b(x), fn) : 
+			saver(x) ; // everyone else can save dataURLs un-processed
+	}//end if dataURL passed?
+	
+	try{
+	
+		blob = x instanceof B ? 
+			x : 
+			new B([x], {type: m}) ;
+	}catch(y){
+		if(BB){
+			b = new BB();
+			b.append([x]);
+			blob = b.getBlob(m); // the blob
+		}
+		
+	}
+	
+	
+	
+	function d2b(u) {
+		var p= u.split(/[:;,]/),
+		t= p[1],
+		dec= p[2] == "base64" ? atob : decodeURIComponent,
+		bin= dec(p.pop()),
+		mx= bin.length,
+		i= 0,
+		uia= new Uint8Array(mx);
+
+		for(i;i<mx;++i) uia[i]= bin.charCodeAt(i);
+
+		return new B([uia], {type: t});
+	 }
+	  
+	function saver(url, winMode){
+		
+		
+		if ('download' in a) { //html5 A[download] 			
+			a.href = url;
+			a.setAttribute("download", fn);
+			a.innerHTML = "downloading...";
+			D.body.appendChild(a);
+			setTimeout(function() {
+				a.click();
+				D.body.removeChild(a);
+				if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(a.href);}, 250 );}
+			}, 66);
+			return true;
+		}
+		
+		//do iframe dataURL download (old ch+FF):
+		var f = D.createElement("iframe");
+		D.body.appendChild(f);
+		if(!winMode){ // force a mime that will download:
+			url="data:"+url.replace(/^data:([\w\/\-\+]+)/, u);
+		}
+		 
+	
+		f.src = url;
+		setTimeout(function(){ D.body.removeChild(f); }, 333);
+		
+	}//end saver 
+		
+
+	if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
+		return navigator.msSaveBlob(blob, fn);
+	} 	
+	
+	if(self.URL){ // simple fast and modern way using Blob and URL:
+		saver(self.URL.createObjectURL(blob), true);
+	}else{
+		// handle non-Blob()+non-URL browsers:
+		if(typeof blob === "string" || blob.constructor===z ){
+			try{
+				return saver( "data:" +  m   + ";base64,"  +  self.btoa(blob)  ); 
+			}catch(y){
+				return saver( "data:" +  m   + "," + encodeURIComponent(blob)  ); 
+			}
+		}
+		
+		// Blob but not URL:
+		fr=new FileReader();
+		fr.onload=function(e){
+			saver(this.result); 
+		};
+		fr.readAsDataURL(blob);
+	}	
+	return true;
+} /* end download() */
+

dist/fonts/dos437.txt

@@ -0,0 +1,72 @@
+ /
+/(_____________            ____
+\              /______)\  |    |        
+:\      |     /         \:|    |:::::::::: : .. . : ..  . .  :.    .
+  \_____|    /      |    \|    |______  
+___ /               ________          \...     .     .      .
+\______________     \       |  |      /.. . .   .   .             .
+               \            |__|     /
+--x--x-----x----\______     |-/_____/-x--x-xx--x-- - -x -- - -   --  - - - 
+. . . . . . . . . . . .\____|. . . . . .
+-------------------------------------------------------------------------------
+>> perfect dos vga 437 - general information  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+
+ "Perfect DOS VGA 437" and "Perfect DOS VGA 437 Win" are truetype fonts
+ designed to emulate the MS-DOS/Text mode standard font, used on VGA monitors,
+ with the 437 Codepage (standard US/International). This is a "bitmap" font,
+ meaning it emulates a bitmap font and can only be used at a given size (8 or
+ multiples of it like 16, 24, 32, etc). It's optimized for Flash too, so it
+ won't produce antialias if used at round positions.
+ 
+ There are two fonts available. "Perfect DOS VGA 437" uses the original DOS
+ codepage 437. It should be used, for example, if you're opening DOS ASCII
+ files on notepad or another windows-based editor. Since it's faithful to the
+ original DOS codes, it won't accent correctly in windows ("é" would produce
+ something different, not an "e" with an acute).
+ 
+ There's also "Perfect DOS VGA 437 Win" which is the exactly same font adapted
+ to a windows codepage. This should use accented characters correctly but won't
+ work if you're opening a DOS-based text file.
+ 
+ UPDATE: this is a new version, updated in august/2008. It has fixed leading
+ metrics for Mac systems.
+
+-------------------------------------------------------------------------------
+>> perfect dos vga 437 - creation process >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+ 
+ This font was created to be used on a Flash-based ANSi viewer I'm working. To
+ create it, I created a small Quick Basic program to write all characters on
+ screen,
+ 
+  CLS
+  FOR l = 0 TO 255
+    charWrite 1 + (l MOD 20), 1 + (l \ 20) * 6 + (l MOD 2), LTRIM$(RTRIM$(STR$(l))) + CHR$(l)
+  NEXT
+  SUB charWrite (lin, col, char$)
+    DEF SEG = &HB800
+    FOR i = 1 TO LEN(char$)
+      POKE ((lin - 1) * 160) + ((col - 2 + i) * 2), ASC(MID$(char$, i, 1))
+      IF (i = LEN(char$)) THEN POKE ((lin - 1) * 160) + ((col - 2 + i) * 2) + 1, 113
+    NEXT
+  END SUB
+  
+ Then captured the text screen using SCREEN THIEF (a very, very old screen
+ capture TSR program which converts text screens to images accurately). I then
+ recreated the font polygon by polygon on Fontlab, while looking at the image
+ on Photoshop. No conversion took place.
+
+-------------------------------------------------------------------------------
+>> author >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+
+ zeh fernando remembers the old days. SMASH DAH FUCKING ENTAH.
+
+ http://www.fatorcaos.com.br
+
+ rorshack ^ maiden brazil
+
+-------------------------------------------------------------------------------
+^zehPULLSdahTRICK^kudosOUTtoWHOkeepsITreal^smashDAHfuckingENTAH!!!^lowres4ever^
+-------------------------------------------------------------------------------

dist/tuicss.js

@@ -0,0 +1,254 @@
+/**
+ * Replacement for jQuery's $(document).ready() function.
+ * This is handy in making sure stuff fires after the DOM is ready to be touched.
+ * Stolen from:https://stackoverflow.com/a/53601942/344028
+ *
+ * @param fn Callback.
+ */
+function domReady(fn) {
+    // If we're early to the party
+    document.addEventListener('DOMContentLoaded', fn);
+
+    // If late; I mean on time.
+    if (document.readyState === 'interactive' || document.readyState === 'complete') {
+        fn();
+    }
+}
+
+/**
+ * TuiTabs controller
+ */
+function tabsController() {
+    // Get all the tab elements (typically li tags).
+    const tabs = document.getElementsByClassName('tui-tab');
+
+    if (!tabs.length) {
+        // No tabs found, return early and save a couple CPU cycles.
+        return;
+    }
+
+    for (const tab of tabs) {
+        // Add click listeners to them.
+        tab.addEventListener('click', function (e) {
+
+            // Check if the clicked tab is disabled
+            if(e.target.classList.contains("disabled")) {
+                return;
+            }
+
+            // Remove the 'active' class from any and all tabs.
+            for (const otherTab of tabs) {
+                otherTab.classList.remove('active');
+            }
+
+            // Get the content element.
+            const tabContents = document.getElementsByClassName('tui-tab-content');
+
+            if (tabContents) {
+                for (const tabContent of tabContents) {
+                    // Hide all tab contents.
+                    tabContent.style.display = 'none';
+                }
+            } else {
+                throw 'No tab content elements found.'
+            }
+
+            // Get the id of the tab contents we want to show.
+            const tabContentId = e.target.getAttribute('data-tab-content');
+
+            if (tabContentId) {
+                const tabContent = document.getElementById(tabContentId);
+                if (tabContent) {
+                    // Show the tab contents.
+                    tabContent.style.display = 'block';
+                } else {
+                    throw 'No tab content element with id "' + tabContentId + '" found.';
+                }
+            }
+            // We are not going to throw an error here, since we could make the tab do something else that a tab
+            // normally wouldn't do.
+
+            // Set the clicked tab to have the 'active' class so we can use it in the next part.
+            e.target.classList.add('active');
+
+        });
+    }
+
+    // Grab the first tab with the active class.
+    const activeTab = document.querySelector('.tui-tab.active');
+    if (activeTab) {
+        // Now click it 'click' it.
+        activeTab.click();
+    } else {
+        // Nothing found, just click the first tab foud.
+        tabs[0].click()
+    }
+}
+
+/**
+ * Date/time field controller
+ */
+function datetimeController() {
+    // Get date/time elements.
+    const clocks = document.getElementsByClassName('tui-datetime');
+
+    if (!clocks.length) {
+        // No date time elements found, return early and save a couple CPU cycles.
+        return;
+    }
+
+    // Kick off our clock interval stuff.
+    datetimeInterval();
+
+    // Synchronize time and set interval to control the clocks
+    setTimeout(() => {
+        setInterval(datetimeInterval, 1000);
+    }, 1000 - new Date().getMilliseconds());
+
+    function datetimeInterval() {
+        for (const clock of clocks) {
+            if (clock === null) {
+                continue;
+            }
+
+            // Get the format we want to display in the element.
+            let format = clock.getAttribute('data-format');
+
+            // parse out the date and time into constants.
+            const today  = new Date();
+            const month  = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
+            const day    = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
+            const year   = today.getFullYear() + '';
+            const hour   = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
+            const hour12 = (parseInt(hour) + 24) % '12' || '12';
+            const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
+            const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
+            const ampm   = parseInt(hour) >= 12 ? 'PM' : 'AM';
+
+            // Replace based on the format.
+            format = format.replace('M', month);
+            format = format.replace('d', day);
+            format = format.replace('y', year);
+            format = format.replace('H', hour);
+            format = format.replace('h', hour12);
+            format = format.replace('m', minute);
+            format = format.replace('s', second);
+            format = format.replace('a', ampm);
+
+            // Show it in the element.
+            clock.innerHTML = format;
+        }
+    }
+}
+
+/**
+ * Sidenav Controller
+ * There should only side navigation element at the moment.
+ */
+function sidenavController() {
+    // Get the side navigation button (there should be only one, but if not, we are getting the first one).
+    const sideNavButton = document.querySelector('.tui-sidenav-button');
+
+    if (!sideNavButton) {
+        // No side navigation button found, return early and save a couple CPU cycles.
+        return;
+    }
+
+    // Add the click event listener to the buttons.
+    sideNavButton.addEventListener('click', () => {
+        // Get the side navigation element (there should be only one, but if not, we are getting the first one).
+        const sideNav = document.querySelector('.tui-sidenav');
+
+        if (sideNav) {
+            if (sideNav.classList.contains('active')) {
+                sideNav.classList.remove('active');
+            } else {
+                sideNav.classList.add('active');
+            }
+        } else {
+            throw 'No sidenav element found.'
+        }
+    });
+}
+
+/**
+ * Modal controller
+ */
+function modalController() {
+    // Get the overlap (overlay) element (there should be only one, but if not, we are getting the first one).
+    const tuiOverlap = document.querySelector('.tui-overlap');
+
+    if (!tuiOverlap) {
+        // No overlap found element, return early and save a couple CPU cycles.
+        return;
+    }
+
+    // Find modal buttons.
+    const modalButtons = document.getElementsByClassName('tui-modal-button');
+    for (const modalButton of modalButtons) {
+        // Add the click event listener to the buttons.
+        modalButton.addEventListener('click', (e) => {
+            // Show the overlap.
+            tuiOverlap.classList.add('active');
+
+            // Get the display element for the modal.
+            const modalId = e.target.getAttribute('data-modal');
+
+            if (modalId) {
+                const modal = document.getElementById(modalId);
+
+                if (modal) {
+                    // Show it.
+                    modal.classList.add('active');
+                } else {
+                    throw 'No modal element with id of "' + modalId + '" found.';
+                }
+            } else {
+                throw 'Modal close button data-modal attribute is empty or not set.'
+            }
+        });
+    }
+
+    // Find the close modal buttons.
+    const modalCloseButtons = document.getElementsByClassName('tui-modal-close-button');
+
+    if (modalButtons.length > 0 && !modalCloseButtons.length) {
+        // A modal without a close button, is a bad modal.
+        throw 'No modal close buttons found.'
+    }
+
+    for (const modalCloseButton of modalCloseButtons) {
+        // Add the click event listener to the buttons.
+        modalCloseButton.addEventListener('click', (e) => {
+            // Hide the the overlap.
+            tuiOverlap.classList.remove('active');
+
+            // Get the display element id for the modal.
+            const modalId = e.target.getAttribute('data-modal');
+
+            if (modalId) {
+                // Get the modal element.
+                const modal = document.getElementById(modalId);
+
+                if (modal) {
+                    // Hide it.
+                    modal.classList.remove('active');
+                } else {
+                    throw 'No modal element with id of "' + modalId + '" found.';
+                }
+            } else {
+                throw 'Modal close button data-modal attribute is empty or not set.'
+            }
+        });
+    }
+}
+
+/**
+ * Init: This is at the bottom to make sure it is fired correctly.
+ */
+domReady(function () {
+    tabsController();
+    datetimeController();
+    sidenavController();
+    modalController();
+});

dist/tuicss.min.js

@@ -0,0 +1 @@
+function domReady(t){document.addEventListener("DOMContentLoaded",t),"interactive"!==document.readyState&&"complete"!==document.readyState||t()}function tabsController(){const t=document.getElementsByClassName("tui-tab");if(!t.length)return;for(const e of t)e.addEventListener("click",function(e){if(e.target.classList.contains("disabled"))return;for(const e of t)e.classList.remove("active");const o=document.getElementsByClassName("tui-tab-content");if(!o)throw"No tab content elements found.";for(const t of o)t.style.display="none";const n=e.target.getAttribute("data-tab-content");if(n){const t=document.getElementById(n);if(!t)throw'No tab content element with id "'+n+'" found.';t.style.display="block"}e.target.classList.add("active")});const e=document.querySelector(".tui-tab.active");e?e.click():t[0].click()}function datetimeController(){const t=document.getElementsByClassName("tui-datetime");function e(){for(const e of t){if(null===e)continue;let t=e.getAttribute("data-format");const o=new Date,n=2===(o.getMonth()+"").length?o.getMonth()+1:"0"+(o.getMonth()+1),a=2===(o.getDay()+"").length?o.getDay()+1:"0"+(o.getDay()+1),s=o.getFullYear()+"",c=2===(o.getHours()+"").length?o.getHours():"0"+o.getHours(),l=(parseInt(c)+24)%"12"||"12",i=2===(o.getMinutes()+"").length?o.getMinutes():"0"+o.getMinutes(),d=2===(o.getSeconds()+"").length?o.getSeconds():"0"+o.getSeconds(),r=parseInt(c)>=12?"PM":"AM";t=(t=(t=(t=(t=(t=(t=(t=t.replace("M",n)).replace("d",a)).replace("y",s)).replace("H",c)).replace("h",l)).replace("m",i)).replace("s",d)).replace("a",r),e.innerHTML=t}}t.length&&(e(),setTimeout(()=>{setInterval(e,1e3)},1e3-(new Date).getMilliseconds()))}function sidenavController(){const t=document.querySelector(".tui-sidenav-button");t&&t.addEventListener("click",()=>{const t=document.querySelector(".tui-sidenav");if(!t)throw"No sidenav element found.";t.classList.contains("active")?t.classList.remove("active"):t.classList.add("active")})}function modalController(){const t=document.querySelector(".tui-overlap");if(!t)return;const e=document.getElementsByClassName("tui-modal-button");for(const o of e)o.addEventListener("click",e=>{t.classList.add("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.add("active")}});const o=document.getElementsByClassName("tui-modal-close-button");if(e.length>0&&!o.length)throw"No modal close buttons found.";for(const e of o)e.addEventListener("click",e=>{t.classList.remove("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.remove("active")}})}domReady(function(){tabsController(),datetimeController(),sidenavController(),modalController()});

index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>IA86 booting</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+</head>
+
+<body class="black">
+    <div class="tui-screen black white-text" style="padding: 2px" width="100%" height="100%">
+        <img src="./resources/pcstartup1.png" width="40px" height="40px" style="float: left" />
+        <img src="./resources/pcstartup2.png" width="200px" height="150px" style="float: right" />
+        <div style="margin-top: 4px"></div>
+        Award Medallion BIOS v6.0, An Energy Star Ally<br>
+        Copyright (C) 1984-2001, Award Software, Inc.<br><br>
+        ASUS P4T533-C ACPI BIOS Revision 1007 Beta 001<br><br>
+        Intel(R) Pentium(R) 4 2800 MHz Processor<br>
+        Memory Test : &nbsp;&nbsp; 262144K OK<br><br>
+        <div id="session-1" style="display: none">
+            Award Plug and Play BIOS Extension v1.0A<br>
+            Initialize Plug and Play Cards...<br>
+            PNP init Completed<br><br>
+        </div>
+        <div id="session-2" style="display: none">
+            Detecting Primary Master .....: MAXTOR 6L040J2<br>
+        </div>
+        <div id="session-3" style="display: none">
+            Detecting Primary Slave ......: ASUS CD-S520/A<br>
+        </div>
+        <div id="session-4" style="display: none">
+            Detecting Secondary Master ...: Skip<br>
+            Detecting Secondaty Slave ....: None
+        </div>
+        <div id="session-5" style="display: none">
+            <br>Stage 1: IA86 bootloader found, Booting...
+        </div>
+        <div id="session-6" style="display: none">
+            <br>Stage 2: Loading all libraries...
+        </div>
+        <div id="session-7" style="display: none">
+            <br>Start IA86 GUI !
+        </div>
+        <div class="tui-statusbar absolute black white-text">
+            <ul>
+                <li style="margin-left: 0px">Press <b>DEL</b> to enter SETUP, <b>Alt+F2</b> to enter EZ flash utility
+                </li>
+            </ul>
+            <ul>
+                <li style="margin-left: 0px">08/20/2002-1850E/ICH2/W627-P4T533-C</li>
+            </ul>
+        </div>
+    </div>
+</body>
+<script>
+    window.onload = function() {
+        setTimeout(function() { showSession("session-1"); }, 300);
+        setTimeout(function() { showSession("session-2"); }, 400);
+        setTimeout(function() { showSession("session-3"); }, 450);
+        setTimeout(function() { showSession("session-4"); }, 870);
+        setTimeout(function() { showSession("session-5"); }, 1500);
+        setTimeout(function() { showSession("session-6"); }, 1900);
+        setTimeout(function() { showSession("session-7"); }, 2200);
+        setTimeout(function() { location.href="/main.html" }, 2500);
+    };
+    function showSession(id) {
+        const session = document.getElementById(id);
+        session.style.display = "block";
+    }
+</script>
+</html>

main.html

@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="en" class="no-tui-scroll">
+
+<head>
+    <meta charset="UTF-8">
+    <title>IA86 Debugger</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <script src="../dist/keystone-x86.min.js"></script>
+    <script src="../dist/keystone.min.js"></script>
+    <script src="../dist/jquery-2.2.0.min.js"></script>
+    <script src="../dist/download.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+</head>
+
+<body style="height: 100vh;">
+    <div class="tui-screen bordered tui-bg-blue-black" style="height: 100vh;">
+
+        <!-- Sidenav -->
+        <nav class="tui-sidenav absolute">
+            <ul>
+                <li>
+                    <a href="/index.html">Reboot <span class="tui-shortcut">F10</span></a>
+                </li>
+            </ul>
+        </nav>
+
+        <!-- Navbar -->
+        <nav class="tui-nav absolute">
+            <span class="tui-datetime" data-format="h:m:s a"></span>
+            <ul>
+                <li class="tui-sidenav-button red-168-text">≡</li>
+                <li class="tui-dropdown">
+                    <span class="red-168-text">F</span>ile
+                    <div class="tui-dropdown-content">
+                        <ul>
+                            <li>
+                                <a href="javascript:newfile()">
+                                    <span class="red-168-text">N</span>ew
+                                </a>
+                            </li>
+                            <li>
+                                <a href="javascript:openfile()">
+                                    <span class="red-168-text">O</span>pen
+                                    <span class="tui-shortcut">F5</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="javascript:savefile()">
+                                    <span class="red-168-text">S</span>ave
+                                    <span class="tui-shortcut">F6</span>
+                                </a>
+                            </li>
+                            <div class="tui-black-divider"></div>
+                            <li>
+                                <a href="javascript:importfile()">
+                                    <span class="red-168-text">I</span>mport
+                                </a>
+                            </li>
+                            <li>
+                                <a href="javascript:exportfile()">
+                                    <span class="red-168-text">Ex</span>port
+                                </a>
+                            </li>
+                            <div class="tui-black-divider"></div>
+                            <li>
+                                <a href="/index.html">
+                                    <span class="red-168-text">Q</span>uit
+                                    <span class="tui-shortcut">F7</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="tui-dropdown">
+                    <span class="red-168-text">E</span>dit
+                    <div class="tui-dropdown-content">
+                        <ul>
+                            <li>
+                                <a href="javascript:">
+                                    <span class="red-168-text">C</span>ut
+                                    <span class="tui-shortcut">Ctrl+X</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="javascript:">
+                                    C<span class="red-168-text">o</span>py
+                                    <span class="tui-shortcut">Ctrl+C</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="javascript:">
+                                    <span class="red-168-text">P</span>aste
+                                    <span class="tui-shortcut">Ctrl+P</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="javascript:">
+                                    <span class="red-168-text">S</span>elect all
+                                </a>
+                            </li>
+                            <li>
+                                <a href="javascript:">
+                                    <span class="red-168-text">D</span>elete
+                                </a>
+                            </li>
+                            <div class="tui-black-divider"></div>
+                            <li>
+                                <a href="/index.html">
+                                    <span class="red-168-text">F</span>ind
+                                    <span class="tui-shortcut">F3</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/index.html">
+                                    <span class="red-168-text">R</span>eplace
+                                    <span class="tui-shortcut">Alt+F3</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/index.html">
+                                    <span class="red-168-text">G</span>oto
+                                    <span class="tui-shortcut">Ctrl+G</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="tui-dropdown">                                                                                                       
+                    <span class="red-168-text">P</span>rogram
+                    <div class="tui-dropdown-content">
+                        <ul>
+                            <li>
+                                <a href="javascript:make()">
+                                    <span class="red-168-text">A</span>ssemble
+                                    <span class="tui-shortcut">F8</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="javascript:">
+                                    <span class="red-168-text">D</span>ebug
+                                    <span class="tui-shortcut">F9</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="javascript:download()">
+                                    <span class="red-168-text">D</span>ownload
+                                </a>
+                            </li>
+                        </ul>
+		   </div>
+                </li>   
+                <li class="tui-dropdown">
+                    <span class="red-168-text">O</span>ptions                                                                               
+                    <div class="tui-dropdown-content">
+	                <ul>
+                           <li class="tui-dropdown block">
+		             <span class="right">►</span>
+			     <span class="red-168-text">S</span>yntax
+			     <div class="tui-dropdown-content">
+			     <ul>
+			        <li>
+					<a href="javascript:toSyntax('intel')">
+				     <span id="intel">√</span> <span class="red-168-text">I</span>ntel
+				   </a>
+			        </li>
+			        <li>
+					<a href="javascript:toSyntax('att')">
+				     <span id="att">&nbsp;</span> <span class="red-168-text">A</span>T&T
+				   </a>
+			        </li>
+			     </ul>
+			   </li>
+                           <li class="tui-dropdown block">
+		             <span class="right">►</span>
+			     <span class="red-168-text">R</span>esults
+			     <div class="tui-dropdown-content">
+			     <ul>
+			        <li>
+			           <a href="javascript:toResult('binary')">
+					   <span id="binary">√</span> <span class="red-168-text">B</span>inary
+				   </a>
+			        </li>
+			        <li>
+			           <a href="javascript:toResult('string')">
+					   <span id="string">&nbsp;</span> C <span class="red-168-text">S</span>tring
+				   </a>
+			        </li>
+			        <li>
+			           <a href="javascript:toResult('array')">
+					   <span id="array">&nbsp;</span> C <span class="red-168-text">A</span>rray
+				   </a>
+			        </li>
+			     </ul>
+			   </li>
+			 </ul>
+		      </div>
+		  </li>
+                </li>
+                <li class="tui-dropdown">
+                    <span class="red-168-text">H</span>elp
+                </li>
+            </ul>
+        </nav>
+
+        <!-- Edit panel -->                                                                                                               
+        <div class="tui-window full-width tui-no-shadow" style="margin-top: 23px;height:60%">                                                       
+            <fieldset class="tui-fieldset" style="height:100%">                                                                                               
+                <legend id="filename" class="tui-filed-text" style="margin-left:30px"></legend>                                                                     
+                <span class="tui-fieldset-button"><span class="green-255-text">↑</span></span>                                          
+                <span class="tui-fieldset-button left"><span class="green-255-text">■</span></span>                                     
+                <span class="tui-fieldset-text right" style="margin-bottom: -5px;" id="syntax">&nbsp;Syntax:Intel&nbsp;</span>                                         
+		<textarea id="editor" class="tui-textarea full-width" style="overflow: scroll;height:100%;width:100%"></textarea></div> 
+
+	<div class="tui-window tui-no-shadow" style="height:20%;width:780px">                                                       
+            <fieldset class="tui-fieldset" style="height:100%">                                                                                               
+                <legend class="center">Results</legend>                                                                     
+                <div id="result" class="" style="overflow: scroll;height:100%;width:100%"></div>
+            </fieldset>                                                                   
+        </div>  
+
+	<div class="tui-window tui-no-shadow" style="height:20%;width:49%">                                                       
+            <fieldset class="tui-fieldset" style="height:100%">                                                                                               
+                <legend class="center">Memory zones</legend>                                                                     
+                <div id="result2" class="" style="overflow: scroll;height:100%;width:100%"></div>
+            </fieldset>                                                                   
+        </div>  
+
+        <div class="tui-window full-width tui-no-shadow" style="height:10%">                                                       
+            <fieldset class="tui-fieldset" style="height:100%">                                                                                               
+                <legend class="center">Status</legend>                                                                     
+                <div id="status" class="full-width" style="overflow: scroll;height:100%"></div>
+            </fieldset>                                                                   
+        </div>  
+
+        <!-- Status bar -->
+        <div class="tui-statusbar absolute">
+            <ul>
+                <li><a href="#!"><span class="red-168-text">F1</span> Help</a></li>
+                <li><a href="javascript:exportfile()"><span class="red-168-text">F2</span> Save</a></li>
+                <li><a href="javascript:importfile()"><span class="red-168-text">F3</span> Open</a></li>
+                <li><a href="javascript:make()"><span class="red-168-text">F8</span> Assemble</a></li>
+                <li><a href="javascript:make()"><span class="red-168-text">F9</span> Debug</a></li>
+                <span class="tui-statusbar-divider"></span>
+                <li><a href="/index.html"><span class="red-168-text">F10</span> Reboot</a></li>
+            </ul>
+        </div>
+    </div>
+<input id="file" type="file" hidden accept=".asm" onchange="realopen(this)"/>
+</body>
+<script>
+var type='binary';
+var syntax='intel';
+var filename='';
+var zones = [];
+
+newfile();
+
+function setFilename(name){
+	$("#filename").html(name);
+	filename=name;
+}
+
+function toSyntax(atype)
+{
+	$("#att").html("&nbsp;");	
+	$("#intel").html("&nbsp;");	
+	if (atype=="att")
+	{
+		$("#att").html("√");	
+		$("#syntax").html("&nbsp;Syntax:AT&T&nbsp;");
+	}	
+	else
+	{
+		$("#intel").html("√");	
+		$("#syntax").html("&nbsp;Syntax:Intel&nbsp;");
+	}
+	syntax=atype;
+	$("#result").html("");
+}
+
+function toResult(atype)
+{
+	$("#array").html("&nbsp;");	
+	$("#string").html("&nbsp;");	
+	$("#binary").html("&nbsp;");	
+	if (atype=="binary")
+		$("#binary").html("√");	
+	else if (atype=="string")
+		$("#string").html("√");	
+	else
+		$("#array").html("√");	
+	type=atype;
+	$("#result").html("");
+}
+
+function newfile(){
+	$("#editor").val(".org 0000000\n.code 16\n.title vector\ndw 0xFFFF,0xFFFF,0xFFFF\n.org 100000\n.title prog\n.code 32\nmov ax,1200\nmov esi,0x00000000\nmov edi,0x00000000\n.org 1000\nmov ecx,0x0000FFFF\nrep movsb\nhlt\n.org 100\n\.title 64bits\n.code 64\nmov rax,01");
+	$("#result").html("");
+	setFilename("new.asm");
+}
+
+function importfile(){
+	$("#file").trigger("click");
+}
+
+function exportfile(){
+	saveTextAsFile($("#editor").val(),file);
+}
+
+function download(){
+	if ($("#result").val()=="")
+		return
+	if (type=="array" || type=="string")
+		var ext=".c";
+	else	
+		var ext=".bin";
+	saveTextAsFile($("#result").val, file+ext);
+}
+
+function saveTextAsFile(textToWrite, fileNameToSaveAs) {
+    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'}); 
+    var downloadLink = document.createElement("a");
+    downloadLink.download = fileNameToSaveAs;
+    downloadLink.innerHTML = "Download File";
+    if (window.webkitURL != null) {
+    downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
+    }
+    else {
+    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
+    downloadLink.onclick = destroyClickedElement;
+    downloadLink.style.display = "none";
+    document.body.appendChild(downloadLink);
+    }
+    downloadLink.click();
+}
+
+function realopen(file)
+{
+        if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
+          alert('The File APIs are not fully supported in this browser.');
+          return;
+        }   
+        if (! file.files[0]) {
+          alert("Please select a file before clicking 'Load'");               
+	  return
+        }
+        else {
+          file = file.files[0];
+          var fr = new FileReader();
+          fr.readAsText(file);
+	  fr.onload = function() {
+	      $("#editor").val(fr.result);
+	      $("#result").val("");
+	      $("#legend").val(file);
+  	  };
+        }
+};
+
+function hexByte(value) {
+	value = value < 0 ? (value + 0x100) : (value);
+        var str = '00' + value.toString(16).toUpperCase();
+        return str.slice(-2);
+};
+
+function Render(result,type) {
+         var mcLen = result.length;
+	 var output = '<table class=""><tr><td>';
+         switch (type) {
+         	case 'binary':
+		        for (var offset = 0; offset < mcLen; offset += 16) {
+			     var ascii='';
+			     for (var i = offset; i < offset + 16 && i < mcLen; i++) {
+			          if (result[i]>31)
+		                  	ascii += String.fromCharCode(result[i]);
+				  else
+		                  	ascii += '.';
+			          output += hexByte(result[i]) + " ";
+			     }
+					output += "<td>&nbsp;|&nbsp;</td><td>"+ascii+"</td></tr><td>";
+		        }
+                        break;
+                case 'array':
+                        output += "const uint8_t buffer[] = {\n";
+                        for (var offset = 0; offset < mcLen; offset += 8) {
+                            output += "  ";
+                            for (var i = offset; i < offset + 8 && i < mcLen; i++) {
+                                output += "0x" + hexByte(result[i]) + ", ";
+                            }
+                            output = output.substring(0, output.length - 1);
+                            output += "\n";
+                        }
+                        output = output.substring(0, output.length - 2);
+                        output += "\n};\n";
+                        break;
+                case 'string':
+                        output += "const char* buffer =\n";
+                        for (var offset = 0; offset < mcLen; offset += 16) {
+                            output += "  \"";
+                            for (var i = offset; i < offset + 16 && i < mcLen; i++) {
+                                output += "\\x" + hexByte(result[i]);
+                            }
+                            output += "\"\n";
+                        }
+                        output = output.substring(0, output.length - 1);
+                        output += ";\n";
+                        break;
+         }
+	 return output;
+}
+
+function make()
+{
+	var assembly = $("#editor").val();
+	id=0;
+	org=0;
+	type=32;
+	while (assembly.length!=0)
+	{
+		pos=assembly.search(/\.org [0-9A-F]+/);
+		offset=org;
+		if (pos==0)
+		{
+			pos=assembly.search(/\n/);
+			org=parseInt(assembly.substring(5,pos),16);
+			assembly=assembly.substring(pos+1,assembly.lenght);
+			continue;
+		}
+		else if (pos==-1)
+		{
+			pos=assembly.length;
+			src=assembly.substring(0,pos);
+			assembly='';
+		}
+		else
+		{
+			src=assembly.substring(0,pos);
+			assembly=assembly.substring(pos,assembly.length);
+			pos=assembly.search(/\n/);
+			org=parseInt(assembly.substring(5,pos),16);
+			assembly=assembly.substring(pos+1,assembly.length);
+		}
+		pos=src.search(/\.title [0-9a-zZ-Z]+/);
+		if (pos>-1)
+		{
+			title=src.substring(pos,src.length);
+			pos=title.search(/\n/);
+			title=title.substring(7,pos);
+		}
+		else
+			title='notitle';
+		pos=src.search(/\.code [0-9]+/);
+		if (pos>-1)
+		{
+			type=src.substring(pos,src.length);
+			pos=type.search(/\n/);
+			type=parseInt(type.substring(6,pos),10);
+		}
+		if (type!=16 && type!=32 && type!=64)
+			type=32;
+		if (assemble(id,title,src,type,offset)==0)
+			asm=true;
+		else
+			asm=false;
+		zones.push({"id":id,"offset":offset,"src":src,"size":0,"title":title,"type":type,"asm":asm});
+		id++;
+	}
+}
+
+function assemble(id, title, src, type, offset)
+{
+	status=$("#status").html();
+	allstatus=status+"Assembling zone "+id+":"+title+"@"+offset+" ("+type+"bits) => ";
+	$("#status").html(allstatus);
+	if (type==16)
+		realtype=ks.MODE_16;
+	else if (type==32)
+		realtype=ks.MODE_32;
+	else
+		realtype=ks.MODE_64;
+        a = new ks.Keystone(ks.ARCH_X86, realtype);
+	if (syntax=="att")
+	        a.option(ks.OPT_SYNTAX, ks.OPT_SYNTAX_ATT);
+	else
+	        a.option(ks.OPT_SYNTAX, ks.OPT_SYNTAX_NASM);
+	try
+	{
+		 result = a.asm(src, offset);
+		$("#result").html(Render(result,type));
+		$("#status").html($("#status").html()+"DONE<br>");
+		$("#status").scrollTop($("#status")[0].scrollHeight);
+		a.close();
+		return 0
+	}
+	catch(err)
+	{
+		$("#status").html($("#status").html()+"ERROR: "+err+"<br>");
+		$("#status").scrollTop($("#status")[0].scrollHeight);
+		a.close();
+		return 1
+	}
+}
+</script>
+</html>