clones/8800-simulator
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

the init checkin of the interface skeleton of the simulator. with full functional l10n support.

This commit is contained in:
wixette 2020-03-07 12:12:18 +08:00
parent fa9e100d1b
commit 240a5f57c1
3 changed files with 635 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
css/style.css Normal file
View File

@ -0,0 +1,63 @@
body {
background-color: #f0f0f0;
font-family: monospace;
font-size: 14px;
}
body, div, img {
border: 0;
margin: 0;
padding: 0;
}
header {
width: 100%;
overflow: hidden;
}
#header-bar {
background-color: #333;
color: #eee;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
padding: 5px 20px 5px 20px;
}
#subheader-bar {
background-color: #aaa;
color: #eee;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
padding: 5px 20px 5px 20px;
}
nav {
background-color: #ddd;
border-bottom: 1px #ccc solid;
color: #333;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding: 5px 20px 5px 20px;
}
.nav-item {
background-color: #ddd;
border: 1px solid #ccc;
padding: 3px 10px 3px 10px;
cursor: pointer;
user-select: none;
}
.nav-item:hover {
background-color: #eee;
}
main {
margin: 8px;
}

471
index.html Normal file
View File

@ -0,0 +1,471 @@
<!doctype html>
<!--
Copyright 2020 wixette@gmail.com
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title id="title" class="l10n">Sim-8800: Altair 8800 Simulator</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div id="header-bar">
<div id="header-title" class="l10n">
Sim-8800: Altair 8800 Simulator
</div>
</div>
<nav>
<div id="simulator" class="nav-item l10n">Simulator</div>
<div id="debug" class="nav-item l10n">Debug</div>
<div id="code" class="nav-item l10n">Code</div>
<div id="locale" class="nav-item">En | 中文</div>
</nav>
</header>
<main>
<svg width="100%" height="100%" viewBox="0 0 1440 644" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(1.05752,0,0,8.87234,-41.4143,-5489.39)">
<rect x="50" y="620" width="1340" height="70" style="fill:rgb(86,86,86);"/>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-30.2171,-118.147)">
<g transform="matrix(1,0,0,0.828657,685.147,-33.0236)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2.3px;stroke-dasharray:9.21,9.21,0,0;"/>
</g>
<g transform="matrix(1,0,0,1.11212,685.147,-42.362)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-30.5396,-118.147)">
<g transform="matrix(1,0,0,0.828657,637.31,-33.0236)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2.3px;stroke-dasharray:9.21,9.21,0,0;"/>
</g>
<g transform="matrix(1,0,0,1.11212,637.31,-42.362)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-30.2171,-118.147)">
<g transform="matrix(1,0,0,0.828657,588.853,-33.0236)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2.3px;stroke-dasharray:9.21,9.21,0,0;"/>
</g>
<g transform="matrix(1,0,0,1.11212,588.853,-42.362)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-30.2171,-118.147)">
<g transform="matrix(1,0,0,0.828657,514,-33.0236)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2.3px;stroke-dasharray:9.21,9.21,0,0;"/>
</g>
<g transform="matrix(1,0,0,1.11212,514,-42.362)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-30.5396,-118.147)">
<g transform="matrix(1,0,0,0.828657,466.162,-33.0236)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2.3px;stroke-dasharray:9.21,9.21,0,0;"/>
</g>
<g transform="matrix(1,0,0,1.11212,466.162,-42.362)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
</g>
<g transform="matrix(1.04197,0,0,1.15879,97.019,-162.287)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
<g transform="matrix(1.04197,0,0,1.15879,146.918,-162.287)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
<g transform="matrix(1.04197,0,0,1.15879,225.8,-162.287)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
<g transform="matrix(1.04197,0,0,1.15879,275.968,-162.287)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
<g transform="matrix(1.04197,0,0,1.15879,326.136,-162.287)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
<g transform="matrix(1.04197,0,0,1.15879,405.018,-162.287)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
<g transform="matrix(1.04197,0,0,1.15879,47.1206,-162.287)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
<g transform="matrix(1.04197,0,0,1.15879,-30.2171,-162.287)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-30.2171,-119.189)">
<path d="M314.386,430L330,430L354.335,470L800,470L800,450" style="fill:none;stroke:white;stroke-width:2px;"/>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-205.268,-118.147)">
<path d="M805,449L805,469" style="fill:none;stroke:white;stroke-width:2px;"/>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-382.402,-118.147)">
<path d="M805,449L805,469" style="fill:none;stroke:white;stroke-width:2px;"/>
</g>
<g transform="matrix(1.02711,0,0,1.12728,-10.9012,-162.67)">
<path d="M1114.72,473L1240,473L1245.35,465.825L1302.68,466.156" style="fill:none;stroke:white;stroke-width:2px;"/>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-27.4641,-117.535)">
<path d="M1114.72,473L1240,473L1245.35,465.825L1300,465.825" style="fill:none;stroke:white;stroke-width:2px;"/>
</g>
<g transform="matrix(0.222301,0,0,1.04197,756.39,110.044)">
<path d="M305.024,250L680,250" style="fill:none;stroke:white;stroke-width:2px;"/>
</g>
<g transform="matrix(0.349785,0,0,1.04197,846.835,110.044)">
<path d="M305.024,250L680,250" style="fill:none;stroke:white;stroke-width:2px;"/>
</g>
<g transform="matrix(0.349785,0,0,1.04197,846.835,114.212)">
<path d="M305.024,250L680,250" style="fill:none;stroke:white;stroke-width:2px;"/>
</g>
<g transform="matrix(0.349785,0,0,1.04197,669.7,114.212)">
<path d="M305.024,250L680,250" style="fill:none;stroke:white;stroke-width:2px;"/>
</g>
<g transform="matrix(0.349785,0,0,1.04197,488.271,114.212)">
<path d="M305.024,250L680,250" style="fill:none;stroke:white;stroke-width:2px;"/>
</g>
<g transform="matrix(0.0971896,0,0,1.04197,310.062,114.212)">
<path d="M305.024,250L680,250" style="fill:none;stroke:white;stroke-width:2px;"/>
</g>
<g transform="matrix(0.349785,0,0,1.04197,311.136,114.212)">
<path d="M305.024,250L680,250" style="fill:none;stroke:white;stroke-width:2px;"/>
</g>
<g transform="matrix(1.05752,0,0,0.893116,-41.4143,-25.8586)">
<rect x="50" y="620" width="1340" height="70" style="fill:rgb(234,234,234);"/>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-29.9566,-118.668)">
<path d="M154.5,628L149.5,631.5C149.5,631.5 197.424,633.717 198.5,634C199.67,634.308 199.459,635.545 199,636C198.541,636.455 176.894,661.583 176,661C175.106,660.417 174.964,657.659 175.5,656.5C176.192,655.005 173.003,659.66 171.5,663C169.963,666.416 167.992,673.509 170.5,673.5C173.008,673.491 216,627.5 216,627.5L154,629.5L154.5,628Z" style="fill:rgb(132,173,225);"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M1512,427C1512,420 1461,173 1454,144C1448,120 1450,116 1469,116C1484,116 1493,125 1499,150C1507,180 1512,184 1552,187C1593,190 1596,188 1604,155C1612,124 1617,120 1657,118C1684,116 1701,119 1701,126C1701,163 1632,406 1619,417C1605,429 1512,437 1512,427ZM1564,312C1571,288 1579,259 1582,249C1586,235 1580,231 1553,231L1520,231L1526,280C1530,307 1533,335 1533,343C1533,373 1551,355 1564,312Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M1733,300C1733,228 1737,157 1743,142C1753,116 1756,116 1848,116L1943,116L1943,210L1785,210L1785,431L1733,431L1733,300Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M1953,431L1953,327L1992,324L2032,320L2035,218C2038,124 2040,116 2058,116C2077,116 2079,123 2079,221L2079,326L2153,326L2153,431L1953,431Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M2191,360C2182,321 2170,263 2165,231C2159,199 2151,160 2147,144C2141,120 2143,116 2160,116C2175,116 2184,126 2191,150C2199,180 2205,184 2244,187C2286,190 2289,189 2297,155C2305,124 2310,120 2350,118C2374,116 2394,118 2394,123C2393,158 2319,414 2308,421C2301,426 2275,430 2250,430L2207,431L2191,360ZM2260,294L2276,231L2239,231C2213,231 2204,235 2208,245C2211,253 2217,282 2221,308C2225,335 2232,357 2236,357C2241,357 2252,329 2260,294Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M2425.5,431C2421.5,428 2426,349 2426,266L2426,116L2531,116L2531,431L2485,431C2460,431 2428.5,435 2425.5,431Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M2583,431L2583,118L2630,114L2678,110L2678,232L2740.5,231L2782.5,231L2780,171C2783,124 2787,116 2804,116C2821,116 2825,123 2825,163C2825,190 2819,221 2813,233C2805,248 2805,257 2813,266C2830,283 2827,380 2808,407C2793,429 2783,431 2687,431L2583,431ZM2777,331L2782.5,273L2740.5,266.433L2678,272L2678,390L2727,386L2777,383L2777,331Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M3092,413C3079,400 3076,384 3081,347C3088,290 3088,286 3081,204C3073,119 3080,114 3199,118L3292,121L3295,193C3297,234 3293,270 3286,278C3279,288 3278,294 3286,299C3301,308 3300,402 3284,418C3264,438 3113,434 3092,413ZM3258,360C3267,310 3258,303 3188,307L3124,310L3120,349L3117,389L3185,389C3250,389 3253,387 3258,360ZM3256,273L3250,205L3187,205C3135,205 3123,208 3120,224C3113,264 3126,273 3192,273L3256,273Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M3352,418C3336,403 3335,308 3350,299C3357,295 3357,286 3350,273C3338,251 3335,159 3345,132C3355,108 3544,108 3553,132C3564,160 3560,239 3547,267C3539,286 3539,297 3546,307C3561,325 3554,410 3537,421C3515,435 3366,432 3352,418ZM3512,383L3512,310L3456,307C3425,305 3394,309 3386,315C3375,324 3371,364 3380,386C3380,388 3411,388 3447,386L3512,383ZM3512,236C3512,205 3512,205 3450,205C3404,205 3386,209 3378,222C3357,255 3387,274 3454,271C3511,268 3512,267 3512,236Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M3622.5,420C3615.15,411.772 3601,386 3604,262L3612,126L3717,121L3822,126L3830,262C3833,386 3817,409 3801,420C3793.37,425.248 3632.07,430.703 3622.5,420ZM3788,323C3795,316 3801,291 3801,268C3801,244 3795,219 3788,212C3772,196 3662,196 3646,212C3629,228 3629,307 3646,323C3662,340 3772,340 3788,323Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M3893,419C3877,410 3875,391 3875,275C3875,202 3879,136 3883,128C3890,118 3920,116 3996,118L4100,121L4103,261C4105,356 4102,406 4094,416C4080,433 3922,436 3893,419ZM4057,330C4070,325 4074,309 4074,266L4074,209L3990,200L3916.5,210L3908,261C3906,286 3910,313 3917,321C3930,336 4025,342 4057,330Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M4375,380C4370,373 4365,217 4367,171C4368,161 4392,158 4452,158L4536,158L4536,200C4536,230 4532,242 4520,242C4510,242 4505,231 4505,209C4505,179 4502,177 4470,180L4436,184L4436,362L4470,366C4502,369 4505,367 4505,337C4505,315 4510,305 4520,305C4543,305 4542,374 4519,382C4495,391 4381,390 4375,380Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M4578,378C4577,372 4577,325 4577,273C4577,221 4577,174 4578,168C4578,161 4608,158 4659,160L4741,163L4744,255C4748,381 4743,389 4651,389C4610,389 4578,384 4578,378ZM4712,270L4715,177L4681,180L4646,184L4643,262C4639,358 4643,370 4680,366C4709,362 4709,362 4712,270Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M4785,381C4781,378 4778,326 4778,266L4778,158L4841,158L4841,257C4841,350 4842,357 4862,357C4881,357 4883,350 4883,257C4883,184 4886,157 4896,157C4905,157 4909,184 4909,255C4909,345 4910,352 4930,352C4949,352 4951,344 4954,255C4957,159 4957,157 4983,157L5009,158L5006,270L5003,383L4963,387C4941,388 4917,385 4910,379C4902,373 4892,372 4882,378C4864,390 4795,392 4785,381Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M5051,389L5051,158L5087,158C5122,158 5124,159 5124,193C5124,225 5126,228 5150,223C5194,215 5208,236 5208,310C5208,386 5205,389 5113,389L5051,389ZM5182,310C5182,259 5181,257 5153,257C5137,257 5124,261 5124,265L5124,321C5124,367 5125,369 5153,366C5180,362 5182,359 5182,310Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M5240,389L5240,158L5408,158L5408,273C5408,343 5403,389 5397,389C5391,389 5387,355 5387,309C5387,224 5379,212 5329,225C5304,231 5303,235 5303,310L5303,389L5240,389Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M5439,352C5439,321 5443,316 5468,313C5496,310 5497,308 5500,234C5501.46,197.979 5497.77,162.444 5512.36,162.737C5522.37,162.937 5523,195.853 5523,236L5523,315L5555,315C5584,315 5586,318 5586,352L5586,389L5439,389L5439,352Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M5625,381C5621,378 5618,326 5618,267L5618,159L5696,156L5775,152L5775,186C5775,218 5773,219 5730,223C5694,225 5686,230 5686,247C5686,264 5694,268 5731,271C5784,275 5787,298 5734,299C5696,299 5673,323 5684,350C5688,362 5703,368 5733,368C5756,368 5775,372 5775,378C5775,390 5636,393 5625,381Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(0.128791,-1.97944e-16,-2.10691e-16,-0.138042,35.0644,599.31)">
<path d="M5817,268L5819.8,155.188L5852.16,151.414C5884.16,151.414 5882,150 5884,205C5885,233 5889,237 5925,240L5961.38,238.219L5965.42,200.478C5956.68,174.101 5963.83,151.034 5973.51,151.414C5984.49,151.846 6002.66,252.461 5973.51,257.089C5998.54,263.097 5986,339 5989,345C6005,370 5963,389 5890,389L5817,389L5817,268ZM5962,318L5965,273L5923,273C5881,273 5881,273 5882,312C5883,365 5887,369 5926,365C5956,362 5959,359 5962,318Z" style="fill:rgb(36,36,36);fill-rule:nonzero;"/>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-30.2171,-116.063)">
<path d="M305.024,250L680,250" style="fill:none;stroke:white;stroke-width:2px;"/>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-30.2171,-118.147)">
<g transform="matrix(1,0,0,1.11212,760,-42.362)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
<g transform="matrix(1,0,0,0.828657,760,-33.0236)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2.3px;stroke-dasharray:9.21,9.21,0,0;"/>
</g>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-30.5396,-118.147)">
<g transform="matrix(1,0,0,1.11212,808.457,-42.362)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
<g transform="matrix(1,0,0,0.828657,808.457,-33.0236)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2.3px;stroke-dasharray:9.21,9.21,0,0;"/>
</g>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-30.2171,-118.147)">
<g transform="matrix(1,0,0,1.11212,856.295,-42.362)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2px;stroke-dasharray:8,8,0,0;"/>
</g>
<g transform="matrix(1,0,0,0.828657,856.295,-33.0236)">
<path d="M370,360L370,413.951" style="fill:none;stroke:white;stroke-width:2.3px;stroke-dasharray:9.21,9.21,0,0;"/>
</g>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-14.8808,-103.052)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">INTE</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,32.4887,-102.777)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">PROT</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,81.7539,-103.052)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">MEMR</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,141.23,-103.052)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">INP</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,195.593,-103.052)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">MI</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,239.941,-102.777)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">OUT</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,287.103,-103.052)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">HLTA</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,333.178,-102.789)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">STACK</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,395.078,-102.777)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">WO</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,446.065,-103.052)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">INT</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,626.36,-103.052)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">D7</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,676.842,-103.052)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">D6</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,756.03,-103.052)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">D5</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,805.48,-103.052)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">D4</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,855.016,-103.052)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">D3</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,933.714,-103.052)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">D2</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,985.12,-103.052)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">D1</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,1034.78,-103.052)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">D0</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,626.008,7.39677)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A7</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,676.842,7.39677)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A6</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,756.03,7.39677)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A5</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,805.48,7.39677)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A4</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,855.016,7.39677)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A3</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,933.714,7.39677)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A2</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,985.12,7.39677)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A1</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,1034.78,7.39677)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A0</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,142.887,7.39677)">
<text x="194.171px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A15</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,38.69,7.39677)">
<text x="188.514px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">HLDA</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,216.292,7.39677)">
<text x="194.171px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A14</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,268.129,7.39677)">
<text x="194.171px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A13</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,319.923,7.39677)">
<text x="194.171px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A12</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,396.55,7.39677)">
<text x="194.171px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A11</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,446.581,7.39677)">
<text x="194.171px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A10</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,497.479,7.39677)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A9</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,575.276,7.39677)">
<text x="197.508px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">A8</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-8.19858,7.39677)">
<text x="189.85px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">WAIT</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,46.5383,114.7)">
<text x="171.838px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">SENSE SW.</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,1086.01,164.856)">
<text x="181.169px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">Address</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,1076.52,141.554)">
<text x="192.173px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">Data</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,144.453,221.454)">
<text x="188.842px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">STOP</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,144.386,262.103)">
<text x="192.179px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">RUN</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,345.579,221.179)">
<text x="177.841px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">EXAMINE</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,346.134,264.187)">
<text x="177.841px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">EXAMINE</text>
<text x="189.176px" y="220.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">NEXT</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,243.798,210.443)">
<text x="182.842px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">SINGLE</text>
<text x="189.507px" y="220.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">STEP</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,446.65,221.179)">
<text x="178.84px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">DEPOSIT</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,446.65,264.187)">
<text x="178.84px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">DEPOSIT</text>
<text x="189.176px" y="220.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">NEXT</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,548.763,221.179)">
<text x="185.174px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">RESET</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,548.763,264.175)">
<text x="192.847px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">CLR</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,649.834,221.179)">
<text x="176.511px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">PROTECT</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,752.989,221.179)">
<text x="192.51px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">AUX</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,649.834,264.279)">
<text x="167.845px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">UNPROTECT</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,855.102,221.179)">
<text x="192.51px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">AUX</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,626.008,114.719)">
<text x="202.119px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">7</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,676.842,114.719)">
<text x="202.119px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">6</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,756.03,114.719)">
<text x="202.119px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">5</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,805.48,114.719)">
<text x="202.119px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">4</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,855.016,114.719)">
<text x="202.119px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">3</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,933.714,114.719)">
<text x="202.119px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">2</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,985.12,114.719)">
<text x="202.119px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">1</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,1034.78,114.719)">
<text x="202.119px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">0</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,142.887,114.719)">
<text x="199.06px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">15</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,216.292,114.719)">
<text x="199.06px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">14</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,268.129,114.719)">
<text x="199.06px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">13</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,319.923,114.719)">
<text x="199.06px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">12</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,396.55,114.719)">
<text x="199.06px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">11</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,446.581,114.719)">
<text x="199.06px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">10</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,497.479,114.719)">
<text x="202.119px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">9</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,575.276,114.719)">
<text x="202.119px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:11px;fill:white;">8</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,255.251,-58.8354)">
<text x="191.839px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">STATUS</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-98.7501,220.872)">
<text x="193.181px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">OFF</text>
</g>
<g transform="matrix(1.04197,0,0,1.04197,-98.8641,261.509)">
<text x="196.178px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">ON</text>
</g>
<g transform="matrix(1.0118,0,0,1.00148,-13.0186,-102.318)">
<path d="M1420,108.688C1426.18,108.688 1431.2,113.752 1431.2,120L1431.2,730C1431.2,736.248 1426.18,741.312 1420,741.312L30,741.312C23.816,741.312 18.803,736.248 18.803,730L18.803,120C18.803,113.752 23.816,108.688 30,108.688L1420,108.688ZM41.197,131.312L41.197,718.688L1408.8,718.688L1408.8,131.312L41.197,131.312Z" style="fill:rgb(55,120,170);"/>
</g>
<g transform="matrix(1.01948,0,0,1.01739,-19.1227,-110.625)">
<path d="M1420,108.734C1426.21,108.734 1431.24,113.778 1431.24,120L1431.24,730C1431.24,736.222 1426.21,741.266 1420,741.266L30,741.266C23.791,741.266 18.757,736.222 18.757,730L18.757,120C18.757,113.778 23.791,108.734 30,108.734L1420,108.734ZM41.243,131.266L41.243,718.734L1408.76,718.734L1408.76,131.266L41.243,131.266Z" style="fill:rgb(105,168,216);"/>
</g>
</svg>
</main>
<div id="subheader-bar">
<div id="switchboard" class="l10n">Soft Switch Board</div>
</div>
<footer>
</footer>
<script src="js/l10n.js"></script>
<script>
// Adds event listeners
var elem = document.getElementById('locale');
elem.addEventListener('click', l10n.nextLocale, false);
</script>
</body>
</html>

101
js/l10n.js Normal file
View File

@ -0,0 +1,101 @@
/**
* Copyright 2020 wixette@gmail.com
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* @fileoverview Localization utilities and message translations.
*/
/**
* Simple namespace.
* @type {Object}
*/
l10n = {};
/**
* Pre-defined locales.
* @type {Array<string>}
*/
l10n.LOCALES = [
'en',
'zh',
];
/**
* Localized messages.
*/
l10n.MESSAGES = {
'title': {
'en': 'Sim-8800: Altair 8800 Simulator',
'zh': 'Sim-8800: Altair 8800 模拟器',
},
'header-title': {
'en': 'Sim-8800: Altair 8800 Simulator',
'zh': 'Sim-8800: Altair 8800 模拟器',
},
'simulator': {
'en': 'Simulator',
'zh': '模拟器',
},
'debug': {
'en': 'Debug',
'zh': '调试',
},
'code': {
'en': 'Code',
'zh': '源码',
},
'switchboard': {
'en': 'Soft Switch Board',
'zh': '辅助开关面板',
},
};
/**
* Current locale index.
* @type {number}
*/
l10n.current = 0;
/**
* Switches to the next locale.
*/
l10n.nextLocale = function() {
l10n.current++;
l10n.current = l10n.current % l10n.LOCALES.length;
l10n.updateMessages();
};
/**
* Updates UI messages to the current locale.
*/
l10n.updateMessages = function() {
elems = document.getElementsByClassName('l10n');
for (let i = 0; i < elems.length; i++) {
if (l10n.MESSAGES.hasOwnProperty(elems[i].id)) {
var locale = l10n.LOCALES[l10n.current];
var msg = '';
if (l10n.MESSAGES[elems[i].id].hasOwnProperty(locale)) {
msg = l10n.MESSAGES[elems[i].id][locale];
} else {
msg = l10n.MESSAGES[elems[i].id]['en'];
}
elems[i].innerHTML = msg;
}
}
};