copy resources from dnbwg

b443d748 · Pengan Zhou · b443d748 · b443d748 · b443d748 · b443d748
10 changed file
--- a/.gitignore
+++ b/.gitignore
+experiment/
+*.nes
--- a/404.html
+++ b/404.html
+<html>
+
+<head>
+	<title>
+		404 - 找不到文件或目录
+	</title>
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css" />
+	<link rel="stylesheet" href="https://dnbwg.oss-cn-hongkong.aliyuncs.com/base.css" />
+	<meta charset="UTF-8" />
+	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
+	<script type="application/javascript">
+		var recover = [
+			{ "from": "subor/suborv6.html", "to": "http://www.dnbwg.com/emularity.html?machine=subor486" },
+			{ "from": "mame/ceci.html", "to": "http://www.dnbwg.com/emularity.html?machine=ceci" },
+			{ "from": "mame/cecidisk.html", "to": "http://www.dnbwg.com/emularity.html?machine=cecidisk" },
+			{ "from": "mame/maciici.html", "to": "http://www.dnbwg.com/emularity.html?machine=maciici" },
+			{ "from": "mame/maciicichs.html", "to": "http://www.dnbwg.com/emularity.html?machine=maciicichs" },
+			{ "from": "pce-mac/index.html", "to": "http://www.dnbwg.com/emularity.html?machine=macplus" },
+			{ "from": "pce-mac-chs/index.html", "to": "http://www.dnbwg.com/emularity.html?machine=macpluschs" },
+			{ "from": "emdosbox/pal.html", "to": "http://www.dnbwg.com/emularity.html?machine=xianjianpal" },
+			{ "from": "emdosbox/jinyong.html", "to": "http://www.dnbwg.com/emularity.html?machine=jinyong" },
+			{ "from": "emdosbox/doom.html", "to": "http://www.dnbwg.com/emularity.html?machine=doom" },
+			{ "from": "emdosbox/dosbox.html", "to": "http://www.dnbwg.com/emularity.html?machine=ucdos" },
+			{ "from": "emdosbox/executor.html", "to": "http://www.dnbwg.com/emularity.html?machine=executor" },
+			{ "from": "atarist-emutos/index.html", "to": "http://www.dnbwg.com/emularity.html?machine=emutos" },
+			{ "from": "atarist-pce-mono/index.html", "to": "http://www.dnbwg.com/emularity.html?machine=ataristmono" },
+			{ "from": "atarist-pcejs/index.html", "to": "http://www.dnbwg.com/emularity.html?machine=atarist" },
+			{ "from": "v86/win95.html", "to": "http://www.dnbwg.com/player.html?machine=netscape" },
+			{ "from": "apple2js.html", "to": "http://www.dnbwg.com/player.html?machine=apple2" },
+			{ "from": "apple2jse.html", "to": "http://www.dnbwg.com/player.html?machine=apple2e" },
+			{ "from": "jswqx", "to": "http://www.dnbwg.com/player.html?machine=ggvnc1020" },
+			{ "from": "jsspeccy", "to": "http://www.dnbwg.com/player.html?machine=zxspectrum" },
+			{ "from": "elkjs", "to": "http://www.dnbwg.com/player.html?machine=acornelectron" },
+			{ "from": "pcjs/example4.html", "to": "http://localhost:8080/player.html?machine=pc5150cga" },
+			{ "from": "pcjs/example3a.html", "to": "http://localhost:8080/player.html?machine=pc5150mda" },
+			{ "from": "jsbeeb", "to": "http://www.dnbwg.com/player.html?machine=bbcmicro" },
+		];
+		var newUrl = null;
+		for (var i = 0; i < recover.length; i++) {
+			if (window.location.href.indexOf(recover[i].from) != -1) {
+				newUrl = recover[i].to;
+			}
+		}
+		if (newUrl && newUrl.length > 0) {
+			window.location.href = newUrl;
+		}
+	</script>
+	<style type="text/css">
+		body {
+			background-color: #f5f5dc;
+		}
+
+		.text-center {
+			text-align: center;
+		}
+
+		#mainContent p {
+			margin-top: 8px;
+			margin-bottom: 8px;
+		}
+	</style>
+</head>
+
+<body>
+	<nav style="position: relative; z-index: 2; width:100%">
+		<ul>
+			<li>
+				<a href="http://www.dnbwg.com">目录</a>
+			</li>
+			<li>
+				<a href="https://zhuanlan.zhihu.com/retrocomputing">知乎专栏</a>
+			</li>
+		</ul>
+	</nav>
+	<div id="mainContent">
+		<p class="text-center"><img src="https://dnbwg.oss-cn-hongkong.aliyuncs.com/404.jpg" /></p>
+		<p class="text-center">错误404 - 找不到文件或目录，一定是神偷卡门偷走了它！</p>
+		<p class="text-center">去 <a id="recover-link" href="http://www.dnbwg.com">网页里的电脑博物馆</a> 找找看</p>
+	</div>
+</body>
+
+</html>
\ No newline at end of file
--- a/404.jpg
+++ b/404.jpg
--- a/base.css
+++ b/base.css
+body {
+    margin: 0;
+}
+
+nav {
+    height: 30px;
+    background-color: black;
+    text-align: center;
+    vertical-align: middle;
+    font-family: sans-serif;
+    color: white;
+    line-height: 30px;
+}
+
+#emuframe {
+    border: 0;
+    width: 100%;
+    display: block;
+    position: relative;
+}
+
+nav ul {
+    list-style-type: none;
+    margin: 0;
+    margin-bottom: 0;
+    padding: 0;
+}
+
+li {
+    float: left;
+    display: block;
+}
+
+li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding-left: 20px;
+    padding-right: 20px;
+    text-decoration: none;
+}
+
+@media (max-width: 600px) {
+    li a {
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+}
+
+.machine-fig {
+    text-decoration: none !important;
+    color: black;
+}
+
+a:hover,
+a:visited,
+a:link,
+a:active {
+    text-decoration: none;
+}
+
+figure a{
+    display: block;
+}
\ No newline at end of file
--- a/emularity.css
+++ b/emularity.css
+* {
+    position: relative;
+}
+
+body {
+    background-color: #f5f5dc;
+}
+
+#main-wrapper {
+    margin-top: 10px;
+}
+
+#emularity-splash-screen {
+    margin-left: auto;
+    margin-right: auto;
+    width: 600px;
+    background-color: #000000;
+    margin-bottom: -150px;
+    color: #ffffff;
+}
+
+@media (max-width: 600px) {
+    #main-wrapper {
+        margin-top: 3px;
+    }
+    #emularity-splash-screen {
+        width: 100%;
+    }
+}
+
+#emularity-canvas {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+}
+
+#mobile-tools {
+    display: none;
+    margin-top: 4px;
+}
+
+#mobile-tools button {
+    margin: 4px;
+}
+
+#mobile-keyboard-helper {
+    height: 0px;
+    width: 0px;
+    border: none;
+    visibility: hidden;
+}
+
+#introduction {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    max-width: 960px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+@media (max-width: 960px) {
+    #introduction {
+        margin: 10px;
+    }
+}
\ No newline at end of file
--- a/famiclone.html
+++ b/famiclone.html
+<html>
+
+<head>
+  <title>网页里的电脑博物馆</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sindresorhus/github-markdown-css@2.10.0/github-markdown.css">
+  <link rel="stylesheet" href="base.css" />
+  <link rel="stylesheet" href="emularity.css" />
+  <script src="https://cdn.jsdelivr.net/npm/showdown@1.8.7/dist/showdown.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/es6-promise@2.0.0/dist/es6-promise.min.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browserfs@1.2.1/dist/browserfs.min.js"></script>
+  <script src="http://dnbwg.cdn.bcebos.com/emularity-common/loader.js"></script>
+  <!-- <script src="experiment/loader.js"></script> -->
+
+  <script src="famiclone.js"></script>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
+</head>
+
+<body>
+  <nav id="mainnav" style="position: relative; z-index: 2;">
+    <ul>
+      <li>
+        <a href="/index.html">目录</a>
+      </li>
+      <li>
+        <a href="https://zhuanlan.zhihu.com/retrocomputing">知乎专栏</a>
+      </li>
+      <li>
+        <a href="https://github.com/pengan1987/computer-museum-dnbwg">Github</a>
+      </li>
+    </ul>
+  </nav>
+  <div id="main-wrapper">
+    <input type="password" id="mobile-keyboard-helper">
+    <div id="emulator-container">
+      <div id="emularity-splash-screen"></div>
+      <canvas id="emularity-canvas"></canvas>
+    </div>
+  </div>
+  <div style="display: none;">
+    <img src="title.png">
+  </div>
+  <div id="mobile-tools">
+    <button id="toggleKeyboard" onclick="toggleMobileKeyboard()">显示键盘</button>
+    <button id="toggleKeyboard" onclick="resizeCanvas()">调整屏幕</button>
+  </div>
+  <div id="introduction" class="markdown-body"></div>
+  <script>
+  </script>
+</body>
+
+</html>
\ No newline at end of file
--- a/famiclone.js
+++ b/famiclone.js
+
+function getUrlVars() {
+    var vars = {};
+    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
+        vars[key] = value;
+    });
+    return vars;
+}
+
+function runMAME(cart) {
+    var emulator = new Emulator(document.querySelector("#emularity-canvas"),
+        postRun,
+        new JSMESSLoader(JSMESSLoader.driver("iq501"),
+            JSMESSLoader.nativeResolution(640, 480),
+            JSMESSLoader.emulatorJS("mamenes.js"),
+            JSMESSLoader.emulatorWASM("mamenes.wasm"),
+            JSMESSLoader.mountFile(cart,
+                JSMESSLoader.fetchFile("Game File",
+                    cart)),
+
+            JSMESSLoader.peripheral("cart", cart)))
+    emulator.setScale(3).start({ waitAfterDownloading: true });
+}
+
+function postRun() {
+    console.log("Emulator started");
+    var bodyWidth = $("body").width();
+    if (bodyWidth < 600) {
+        $("#mobile-tools").show();
+        resizeCanvas();
+    }
+}
+
+function resizeCanvas() {
+    var bodyWidth = $("body").width();
+    var canvasWidth = $("#emularity-canvas").width();
+    var canvasHeight = $("#emularity-canvas").height();
+    if (bodyWidth < canvasWidth) {
+        //Resize canvas for mobile device
+        var newHeight = Math.round(canvasHeight * bodyWidth / canvasWidth);
+        $("#emularity-canvas").width(bodyWidth);
+        $("#emularity-canvas").height(newHeight);
+    }
+}
+
+$(document).ready(function () {
+    console.log("ready!");
+
+    var cart = getUrlVars()["cart"];
+
+
+    runMAME(cart);
+});
\ No newline at end of file
--- a/index.html
+++ b/index.html
+<html>
+
+<head>
+  <title>网页里的电脑博物馆</title>
+  <meta name="description" content="在网页模拟器中重现电脑发展史">
+  <meta name="keywords" content="电脑, 计算机, 博物馆, 网页, 浏览器, 模拟器, 游戏, 历史">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-css-only@4.1.1/css/bootstrap.min.css">
+  <link rel="stylesheet" href="base.css" />
+  <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
+  <script src="baidu-stat.js"></script>
+  <script src="index.js"></script>
+  <meta charset="UTF-8">
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
+</head>
+
+<body>
+  <nav style="position: relative; z-index: 2; width:100%">
+    <ul>
+      <li>
+        <a href="index.html">目录</a>
+      </li>
+      <li>
+        <a href="https://zhuanlan.zhihu.com/retrocomputing">知乎专栏</a>
+      </li>
+      <li>
+        <a href="https://github.com/pengan1987/computer-museum-dnbwg">Github</a>
+      </li>
+    </ul>
+  </nav>
+  <div class="feature-wrapper  pt-5 pb-5 mt-0 mt-lg-0">
+    <div class="container">
+      <div class="row" id="machine-list">
+        <div id="base-cell" class="col-sm-12 col-md-3" style="display:none">
+
+          <figure>
+            <a href="#">
+              <img class="figure-img img-fluid rounded" src="" alt="">
+            </a>
+            <figcaption class="machine-fig">Apple II</figcaption>
+          </figure>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div style="display: none;">
+    <img src="title.png">
+  </div>
+</body>
+
+</html>
\ No newline at end of file
--- a/index.js
+++ b/index.js
+function processJson(data) {
+    console.log(data);
+    var machineList = data.machines;
+    var base = $("#base-cell");
+    var machineListContainer = $("#machine-list");
+    for (i = 0; i < machineList.length; i++) {
+        var machine = machineList[i];
+        var clone = base.clone();
+        var title = machine.name + " - " + machine.year;
+        var playerlink = "player.html?machine=" + machine.id;
+		if (machine.emularity){
+			playerlink = "emularity.html?machine=" + machine.id;
+		}
+        clone.show();
+        clone.attr("id", machine.id);
+        clone.find("a").attr("href", playerlink);
+        clone.find("figcaption").text(title)
+        clone.find(".figure-img").attr("src", machine.image)
+        machineListContainer.append(clone);
+    }
+}
+
+$(document).ready(function () {
+    console.log("ready!");
+    $.getJSON("machines.json", processJson);
+});
+
--- a/logo/emularity_color_small.png
+++ b/logo/emularity_color_small.png