Skip to content

Commit 427ca7b

Browse files
pengan1987pengan1987
committed
Add sketchpad
1 parent ef5686d commit 427ca7b

File tree

6 files changed

+1824
-2
lines changed

6 files changed

+1824
-2
lines changed

‎images/labs/sketchpad.jpg‎

17.6 KB
Loading

‎labs.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,14 @@
127127
<figcaption class="machine-fig">山寨机数据库</figcaption>
128128
</figure>
129129
</div>
130+
<div id="base-cell" class="col-sm-12 col-md-3">
131+
<figure>
132+
<a href="standalone/sketchpad/index.html">
133+
<img class="figure-img img-fluid rounded" src="images/labs/sketchpad.jpg" alt="">
134+
</a>
135+
<figcaption class="machine-fig">Sketchpad</figcaption>
136+
</figure>
137+
</div>
130138
</div>
131139
</div>
132140
</div>

‎machines.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@
144144
"name": "Sinclair ZX81",
145145
"appname": "",
146146
"year": 1981,
147-
"url": "https://dnbwg2.cdn.bcebos.com/zx81/jtyone.html",
147+
"url": "https://dnbwg.cdn.bcebos.com/zx81/jtyone.html",
148148
"image": "images/zx81.jpg"
149149
},
150150
{
@@ -161,7 +161,7 @@
161161
"name": "Digital PDP-11/70",
162162
"appname": "",
163163
"year": 1975,
164-
"url": "https://dnbwg2.cdn.bcebos.com/pdp-11/index.html",
164+
"url": "https://dnbwg.cdn.bcebos.com/pdp-11/index.html",
165165
"image": "images/pdp11.jpg",
166166
"introduction": "document/pdp11.md"
167167
},

‎standalone/sketchpad/index.html‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Sketchpad</title>
6+
<style>
7+
body {
8+
margin: 0;
9+
padding: 0;
10+
position: absolute;
11+
top: 0;
12+
left: 0;
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
justify-content: center;
17+
background: #999;
18+
19+
font-family: system-ui, "Helvetica Neue";
20+
}
21+
menu {
22+
display: flex;
23+
justify-content: left;
24+
gap: 6px;
25+
}
26+
#fps {
27+
position: absolute;
28+
bottom: 0px;
29+
right: 0px;
30+
padding: 5px;
31+
background: #ccc;
32+
font: 12px "Fira Mono", mono;
33+
white-space: pre;
34+
}
35+
.panel {
36+
padding: 20px;
37+
}
38+
canvas {
39+
border-radius: 2px;
40+
}
41+
.display-module {
42+
position: relative;
43+
background: black;
44+
padding: 43px;
45+
border: 3px outset #999;
46+
}
47+
.screw {
48+
display: block;
49+
position: absolute;
50+
width: 6px;
51+
height: 6px;
52+
border-radius: 4px;
53+
background-color: #666;
54+
border: 1px inset #ccc;
55+
}
56+
.screw.top {
57+
top: 10px;
58+
}
59+
.screw.mid {
60+
top: 360px;
61+
}
62+
.screw.bottom {
63+
bottom: 10px;
64+
}
65+
.screw.left {
66+
left: 10px;
67+
}
68+
.screw.right {
69+
right: 10px;
70+
}
71+
.screw.center {
72+
left: 360px;
73+
}
74+
75+
footer {
76+
padding-top: 10px;
77+
display: flex;
78+
justify-content: space-between;
79+
}
80+
nav.buttons {
81+
background-color: rgb(255 255 255 / 0.5);
82+
text-align: center;
83+
border: 1px solid black;
84+
padding: 5px;
85+
}
86+
nav.buttons button {
87+
height: 40px;
88+
width: 40px;
89+
border: 1px inset black;
90+
font-family: monospace;
91+
color: rgb(0 0 0 / 0.8);
92+
}
93+
.indicators {
94+
display: inline-grid;
95+
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
96+
padding: 10px 20px;
97+
background: #111;
98+
border-radius: 2px;
99+
}
100+
101+
#controller {
102+
position: absolute;
103+
left: 650px;
104+
width: 300px;
105+
top: 0;
106+
padding-top: 50px;
107+
}
108+
109+
#controller select {
110+
display: block;
111+
}
112+
#controller label {
113+
display: block;
114+
}
115+
</style>
116+
</head>
117+
<body>
118+
<div id="controller">
119+
<label for="current-picture"
120+
>Current picture
121+
<select id="current-picture"></select
122+
></label>
123+
<br />
124+
125+
<label>Mode</label>
126+
<label><input type="radio" name="mode" value="move" /> Move</label>
127+
<label><input type="radio" name="mode" value="line" /> Line</label>
128+
<label><input type="radio" name="mode" value="arc" /> Arc</label>
129+
<label><input type="radio" name="mode" value="delete" /> Delete</label>
130+
131+
<label>Options</label>
132+
<label><input type="checkbox" name="twinkle" checked /> Twinkle</label>
133+
</div>
134+
<div class="panel">
135+
<div class="display-module">
136+
<span class="screw top left"></span>
137+
<span class="screw top center"></span>
138+
<span class="screw top right"></span>
139+
<span class="screw mid left"></span>
140+
<span class="screw mid right"></span>
141+
<span class="screw bottom left"></span>
142+
<span class="screw bottom center"></span>
143+
<span class="screw bottom right"></span
144+
><canvas height="512" width="512" id="sketchpad-canvas"></canvas>
145+
</div>
146+
</div>
147+
148+
<script src="index.js"></script>
149+
</body>
150+
</html>

0 commit comments

Comments
 (0)