-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
59 lines (51 loc) · 7.36 KB
/
Copy pathindex.html
File metadata and controls
59 lines (51 loc) · 7.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<html>
<head>
<title>Flippy-Do for Binary/Decimal conversions</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preload" href="applab/fa-brands-400.woff2" as="font">
<link rel="preload" href="applab/fa-solid-900.woff2" as="font">
<link rel="preload" href="applab/fa-regular-400.woff2" as="font">
<link rel="preload" href="applab/fa-v4compatibility.woff2" as="font">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Boogaloo&family=Patrick+Hand&family=Patrick+Hand+SC&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.1.min.js">
</script>
<script>
function setExportConfig(config) { window.EXPORT_OPTIONS = config; }
</script>
<script src="https://studio.code.org/projects/applab/MlXzokeBDNcDOxn7aAi7ceVgeZQb3FNHcitun4oK0_c/export_config?script_call=setExportConfig">
</script>
<script src="applab/applab-api.js">
</script>
<script src="https://www.google.com/jsapi">
</script>
<link rel="stylesheet" href="applab/applab.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="divApplab" class="appModern running" style="width: 320px; height: 450px; display: block;">
<div class="screen" tabindex="1" data-theme="default" id="screen1" style="display: block; height: 450px; width: 320px; left: 0px; top: 0px; position: absolute; z-index: 0; background-color: rgb(255, 255, 255);">
</label>
<!-- header -->
<label id="label1" style="margin: 0px; line-height: 1; overflow: hidden; overflow-wrap: break-word; max-width: 320px; border-style: solid; text-rendering: optimizespeed; color: rgb(77, 87, 95); background-color: rgba(0, 0, 0, 0); border-color: rgb(255,255,255); border-radius: 0px; border-width: 0px; font-size: 30px; padding: 2px 15px; width: 320px; height: 35px; position: absolute; left: -10px; top: 5px; text-align: left;" class="boogaloo-regular">Flippy-Do</label>
<label id="label2" style="margin: 0px; line-height: 1; overflow: hidden; overflow-wrap: break-word; max-width: 320px; border-style: solid; text-rendering: optimizespeed; color: 'silver'; background-color: rgba(0, 0, 0, 0); border-color: rgb(255,255,255); border-radius: 0px; border-width: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; padding: 2px 15px; width: 143px; height: 17px; position: absolute; right: 0px; top: 18px;">Click to flip the bits.</label>
<!-- flippy part -->
<img src="assets/flippyDo2.png" data-canonical-image-url="assets/flippyDo2.png" data-object-fit="contain" id="image1" style="width: 320px; border-style: solid; border-width: 0px; border-color: rgb(0, 0, 0); border-radius: 0px; position: absolute; left: 0px; margin: 0px; height: 550px; object-fit: contain; font-family: "object-fit: contain;"; top: -170px;" data-image-type="file">
<button id="twoToSeven" style="padding: 0px; margin: 0px; border-style: solid; height: 70px; width: 35px; background-color: rgb(255, 164, 0); color: rgb(255, 255, 255); border-color: rgb(255,255,255); border-radius: 4px; border-width: 1px; font-family: "Arial Black", Gadget, sans-serif; font-size: 36px; position: absolute; left: 5px; top: 95px;">0</button>
<button id="twoToSix" style="padding: 0px; margin: 0px; border-style: solid; height: 70px; width: 34px; background-color: rgb(255, 164, 0); color: rgb(255, 255, 255); border-color: rgb(255,255,255); border-radius: 4px; border-width: 1px; font-family: "Arial Black", Gadget, sans-serif; font-size: 36px; position: absolute; left: 45px; top: 95px;">0</button>
<button id="twoToFive" style="padding: 0px; margin: 0px; border-style: solid; height: 70px; width: 35px; background-color: rgb(255, 164, 0); color: rgb(255, 255, 255); border-color: rgb(255,255,255); border-radius: 4px; border-width: 1px; font-family: "Arial Black", Gadget, sans-serif; font-size: 36px; position: absolute; top: 95px; left: 84px;">0</button>
<button id="twoToFour" style="padding: 0px; margin: 0px; border-style: solid; height: 70px; width: 34px; background-color: rgb(255, 164, 0); color: rgb(255, 255, 255); border-color: rgb(255,255,255); border-radius: 4px; border-width: 1px; font-family: "Arial Black", Gadget, sans-serif; font-size: 36px; position: absolute; left: 124px; top: 95px;">0</button>
<button id="twoToThree" style="padding: 0px; margin: 0px; border-style: solid; height: 70px; width: 35px; background-color: rgb(255, 164, 0); color: rgb(255, 255, 255); border-color: rgb(255,255,255); border-radius: 4px; border-width: 1px; font-family: "Arial Black", Gadget, sans-serif; font-size: 36px; position: absolute; left: 163px; top: 95px;">0</button>
<button id="twoToTwo" style="padding: 0px; margin: 0px; border-style: solid; height: 70px; width: 35px; background-color: rgb(255, 164, 0); color: rgb(255, 255, 255); border-color: rgb(255,255,255); border-radius: 4px; border-width: 1px; font-family: "Arial Black", Gadget, sans-serif; font-size: 36px; position: absolute; left: 202px; top: 95px;">0</button>
<button id="twoToOne" style="padding: 0px; margin: 0px; border-style: solid; height: 70px; width: 32px; background-color: rgb(255, 164, 0); color: rgb(255, 255, 255); border-color: rgb(255,255,255); border-radius: 4px; border-width: 1px; font-family: "Arial Black", Gadget, sans-serif; font-size: 36px; position: absolute; left: 241px; top: 95px;">0</button>
<button id="twoToZero" style="padding: 0px; margin: 0px; border-style: solid; height: 70px; width: 36px; background-color: rgb(255, 164, 0); color: rgb(255, 255, 255); border-color: rgb(255,255,255); border-radius: 4px; border-width: 1px; font-family: "Arial Black", Gadget, sans-serif; font-size: 36px; position: absolute; left: 277px; top: 95px;">0</button>
<!-- bottom -->
<label id="label4" style="margin: 0px; line-height: 1; overflow: hidden; overflow-wrap: break-word; max-width: 320px; border-style: solid; text-rendering: optimizespeed; color: rgb(77, 87, 95); background-color: rgba(0, 0, 0, 0); border-color: rgb(255,255,255); border-radius: 0px; border-width: 0px; font-family: "Arial Black", Gadget, sans-serif; font-size: 18px; width: 200px; height: 40px; position: absolute; left: 20px; top: 175px; text-align: left;">Binary ⬆</label>
<label id="label3" style="margin: 0px; line-height: 1; overflow: hidden; overflow-wrap: break-word; max-width: 320px; border-style: solid; text-rendering: optimizespeed; color: rgb(77, 87, 95); background-color: rgba(0, 0, 0, 0); border-color: rgb(255,255,255); border-radius: 0px; border-width: 0px; font-family: "Arial Black", Gadget, sans-serif; font-size: 18px; width: 200px; height: 40px; position: absolute; left: 20px; top: 200px; text-align: left;">Decimal ⇨</label>
<label id="output" style="margin: 0px; line-height: 1; overflow: hidden; overflow-wrap: break-word; max-width: 320px; border-style: solid; text-rendering: optimizespeed; color: rgb(77, 87, 95); background-color: rgba(0, 0, 0, 0); border-color: rgb(255,255,255); border-radius: 0px; border-width: 0px; font-family: "Arial Black", Gadget, sans-serif; font-size: 46px; width: 200px; height: 55px; position: absolute; right: 6px; top: 175px; text-align: right;">000</label>
</div>
</div>
</body>
</html>