system-7/index.html

199 lines
7.0 KiB
HTML
Raw Normal View History

2018-09-01 05:07:00 +00:00
<!DOCTYPE html>
2018-09-02 09:10:47 +00:00
<!--
Sorry for all the kludge.
-- Bora
-->
2018-09-01 05:07:00 +00:00
<html lang="en">
<head>
<meta charset="utf-8">
<title>System 7</title>
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, width=device-width, height=device-height">
<script>window.archive_setup=[]</script>
<script src="index_files/jquery-1.js"></script>
<script src="index_files/bootstrap.js"></script>
<script src="index_files/jwplayer.js"></script>
<script src="index_files/react.js"></script>
<script src="index_files/react-dom.js"></script>
<script src="index_files/play8.js"></script>
<script src="index_files/playset.js"></script>
<script src="index_files/polyfill.js"></script>
<script src="index_files/archive.js"></script>
<script src="index_files/loader.js"></script>
<script src="index_files/browserfs.js"></script>
<script src="pressure-v2.1.2.js"></script>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="System 7">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
2018-09-02 09:10:47 +00:00
<meta name="description" content="A System 7 (aka Mac OS 7) emulator for mobile devices.">
<meta property="og:title" content="System 7 - labs.boramalper.org">
<meta property="og:description" content="A System 7 (aka Mac OS 7) emulator for mobile devices.">
<meta property="og:site_name" content="labs.boramalper.org">
<meta property="og:image" content="https://boramalper.github.io/system-7/apple-touch-icon.png">
2018-09-01 05:07:00 +00:00
<link href="index_files/archive.css" rel="stylesheet" type="text/css">
</head>
<body class="navia embedded ia-module tiles">
<!-- Wraps all page content -->
<div id="wrap">
<!--HTML-->
<div id="emulate">
<div id="canvasholder">
<canvas id="canvas" style="width:100%;height:100%" width="300" height="150"></canvas>
<div id="gamepadtext"></div>
2018-09-02 09:04:52 +00:00
<input id="keyboardInput" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
2018-09-01 05:07:00 +00:00
</div>
</div><!--/#emulate-->
2018-09-02 09:04:52 +00:00
<div id="description">
<h1>System 7</h1>
<i>A System 7 (aka Mac OS 7) emulator for mobile devices.</i>
<h2>Usage</h2>
<ul>
<li>Drag your finger across the emulator screen to move the pointer.
<ul>
<li>On iOS, the emulator screen acts like a <em>touchpad</em> (<i>i.e.</i>
the cursor will move as your finger moves, but won't be located under your finger).</li>
<li>On Android, the emulator screen acts like a <em>touchscreen</em> (<i>i.e.</i>
the cursor will always be located under your finger).</li>
</ul>
</li>
<li>If your device has 3D Touch, press hard, otherwise keep your finger at least 500 ms on screen
for mouse click.</li>
</ul>
<p>To start using, add this webpage to your Home Screen!</p>
<div id="images" style="display: flex; justify-content: space-around;">
<div>
<img class="screenshot" src="ios-hs.jpg" />
<br>
<center><strong>On iOS</strong></center>
</div>
<div>
<img class="screenshot" src="android-hs.png" />
<br>
<center><strong>On Android</strong></center>
</div>
</div>
2018-09-01 05:07:00 +00:00
2018-09-02 09:04:52 +00:00
<h2>Bugs</h2>
<ul>
<li>On iOS, keyboard keys are repeated unpredictably a few times.</li>
<li>On Android, keyboard doesn't work at all.
</ul>
2018-09-01 05:07:00 +00:00
2018-09-02 09:04:52 +00:00
<p>BUGFIXes are welcome! Find us on <a href="https://github.com/boramalper/system-7">GitHub</a>.</p>
2018-09-01 05:07:00 +00:00
2018-09-02 09:04:52 +00:00
<h2>Author</h2>
<p>Based on <a href="https://archive.org/details/@jason_scott">Jason Scott</a>'s awesome work on <a href="https://archive.org/details/mac_MacOS_7.0.1_compilation">Internet Archive</a>.</p>
2018-09-01 05:07:00 +00:00
2018-09-02 09:04:52 +00:00
<p>Modified by <a href="http://boramalper.org">Bora M. Alper</a> &lt;bora et boramalper dot org&gt;.</p>
</div>
</div>
2018-09-01 05:07:00 +00:00
2018-09-02 09:04:52 +00:00
<style>
html, body {
width: 100vw;
height: 100vh;
}
body.embedded {
background-color:black;
}
#emulate {
display: flex;
justify-content: center;
align-items: center;
}
#canvas {
/*cursor: none;*/
}
#keyboardInput {
width: 20%;
float: right;
}
img.emularity-splash-image {
display: none !important;
}
#description {
display: none;
color: white;
}
#images {
max-width: calc(100vw - 2 * 8px);
}
.screenshot {
height: 40vh;
}
</style>
<script>
"use strict";
// prevIsDeep is to be saved by pce-macplus.js
var prevIsDeep = false, isDeep = false;
function main() {
// https://stackoverflow.com/a/34516083/4466589
if ("standalone" in navigator && navigator.standalone || window.matchMedia('(display-mode: standalone)').matches) {
Pressure.set("#canvas", {
start: function(event){
// this is called on force start
},
end: function(){
// this is called on force end
},
startDeepPress: function(event) {
// this is called on "force click" / "deep press", aka once the force is greater than 0.5
console.log("deeeeeep");
isDeep = true;
},
endDeepPress: function(){
// this is called when the "force click" / "deep press" end
console.log("shalloooow");
isDeep = false;
},
change: function(force, event) {
// this is called every time there is a change in pressure
// force will always be a value from 0 to 1 on mobile and desktop
},
unsupported: function(){
// NOTE: this is only called if the polyfill option is disabled!
// this is called once there is a touch on the element and the device or browser does not support Force or 3D touch
}
2018-09-01 05:07:00 +00:00
},
2018-09-02 09:04:52 +00:00
{
only: "touch",
polyfillSpeedUp: 500 // 500 ms
});
AJS.emulate_setup({"url":"\/stream\/mac_MacOS_7.0.1_compilation?module=pce-macplus&scale=1","identifier":"mac_MacOS_7.0.1_compilation","module":"pce-macplus","scale":"1","screenshot":"\/serve\/mac_MacOS_7.0.1_compilation\/_screenshot.gif"});
AJS.emulate();
} else {
$("#emulate").css("display", "none");
$("#description").css("display", "block");
$("html").css("height", "auto");
$("body").css("margin", "0px 8px 0px 8px").css("height", "auto").css("width", "auto").css("position", "initial").css("overflow", "initial");
2018-09-01 05:07:00 +00:00
}
2018-09-02 09:04:52 +00:00
}
main();
</script>
2018-09-01 05:07:00 +00:00
</body>
</html>