2018-09-02 12:10:47 +03:00

199 lines
7.0 KiB

<!DOCTYPE html>
Sorry for all the kludge.
-- Bora
<html lang="en">
<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 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">
<meta name="description" content="A System 7 (aka Mac OS 7) emulator for mobile devices.">
<meta property="og:title" content="System 7 -">
<meta property="og:description" content="A System 7 (aka Mac OS 7) emulator for mobile devices.">
<meta property="og:site_name" content="">
<meta property="og:image" content="">
<link href="index_files/archive.css" rel="stylesheet" type="text/css">
<body class="navia embedded ia-module tiles">
<!-- Wraps all page content -->
<div id="wrap">
<div id="emulate">
<div id="canvasholder">
<canvas id="canvas" style="width:100%;height:100%" width="300" height="150"></canvas>
<div id="gamepadtext"></div>
<input id="keyboardInput" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<div id="description">
<h1>System 7</h1>
<i>A System 7 (aka Mac OS 7) emulator for mobile devices.</i>
<li>Drag your finger across the emulator screen to move the pointer.
<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>
<li>If your device has 3D Touch, press hard, otherwise keep your finger at least 500 ms on screen
for mouse click.</li>
<p>To start using, add this webpage to your Home Screen!</p>
<div id="images" style="display: flex; justify-content: space-around;">
<img class="screenshot" src="ios-hs.jpg" />
<center><strong>On iOS</strong></center>
<img class="screenshot" src="android-hs.png" />
<center><strong>On Android</strong></center>
<li>On iOS, keyboard keys are repeated unpredictably a few times.</li>
<li>On Android, keyboard doesn't work at all.
<p>BUGFIXes are welcome! Find us on <a href="">GitHub</a>.</p>
<p>Based on <a href="">Jason Scott</a>'s awesome work on <a href="">Internet Archive</a>.</p>
<p>Modified by <a href="">Bora M. Alper</a> &lt;bora et boramalper dot org&gt;.</p>
html, body {
width: 100vw;
height: 100vh;
body.embedded {
#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;
"use strict";
// prevIsDeep is to be saved by pce-macplus.js
var prevIsDeep = false, isDeep = false;
function main() {
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
isDeep = true;
endDeepPress: function(){
// this is called when the "force click" / "deep press" end
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
only: "touch",
polyfillSpeedUp: 500 // 500 ms
} 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");