From b81aad3c1d8e39a25e064d63a4b3edf9c45a6241 Mon Sep 17 00:00:00 2001
From: Abdulmujeeb Raji <abdul@midnadimple.com>
Date: Mon, 6 May 2024 08:24:55 +0100
Subject: [PATCH] Initial Commit

Added:
- Basic Web Ide, thanks ShaiUI
- Simple calculator

Signed-off-by: Abdulmujeeb Raji <abdul@midnadimple.com>
---
 calc.html | 127 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 ide.html  | 111 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 238 insertions(+)
 create mode 100644 calc.html
 create mode 100644 ide.html
diff --git a/calc.html b/calc.html
new file mode 100644
index 0000000..ef0432f
--- /dev/null
+++ b/calc.html
@@ -0,0 +1,127 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+
+<style>
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0px;
+    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
+}
+
+.btn {
+    width: 25%;
+    height: 20%;
+    background: #3083dc;
+    font-size: 75px;
+    text-align: center;
+    display: inline-block;
+    box-sizing: border-box;
+    border: 1px solid white;
+    user-select: none;
+}
+
+.btn:hover {
+    filter: brightness(75%);
+}
+
+.btn-op {
+    background:#fb5012;
+    color:#fdffff;
+}
+
+</style>
+
+<body onload='init()'>
+
+<div id='result' style='
+width:100%;
+height:20%;
+background:#191516;
+color:#fdffff;
+font-size:75px;
+text-align: right;'></div>
+
+<div style='
+width:100%;
+height:79.9%;
+font-size: 0;
+'>
+    <div class='btn btn-op' style='width:50%'>C</div>
+    <div class='btn btn-op' style='width:50%'>=</div>
+    <div class='btn'>1</div>
+    <div class='btn'>2</div>
+    <div class='btn'>3</div>
+    <div class='btn btn-op'>÷</div>
+    <div class='btn'>4</div>
+    <div class='btn'>5</div>
+    <div class='btn'>6</div>
+    <div class='btn btn-op'>×</div>
+    <div class='btn'>7</div>
+    <div class='btn'>8</div>
+    <div class='btn'>9</div>
+    <div class='btn btn-op'>+</div>
+    <div class='btn btn-op'>.</div>
+    <div class='btn'>0</div>
+    <div class='btn btn-op'>^</div>
+    <div class='btn btn-op'>-</div>
+</div>
+
+</body>
+
+<script>
+var curVal = 0;
+var curOp = '';
+
+var nums = ['.', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+var mathTable = {
+    '+': function(x) { curVal += x },
+    '-': function(x) { curVal -= x },
+    '^': function(x) { curVal = curVal ** x },
+    '×': function(x) { curVal *= x },
+    '÷': function(x) { curVal /= x },
+    'C': function(x) { curVal = 0 },
+    '=': function(x) { mathTable[curOp](x) },
+};
+
+function init() {
+    btns = document.querySelectorAll('.btn');
+    result = document.querySelector('#result');
+    
+    result.innerHTML = curVal;
+       
+    btns.forEach(function(btn) {
+        btn.onclick = function(event) {
+            handleButton(this, result);
+        };
+    });
+}
+
+function handleButton(btn, result) {
+    var op = btn.innerHTML;
+    
+    if (nums.includes(op)) {
+        if (result.innerHTML == curVal) {
+            result.innerHTML = '';
+        }
+        result.innerHTML += op;
+    } else {
+        var num = Number(result.innerHTML);
+        if (curOp != '' || op == 'C') {
+            mathTable[op](num);
+        } else {
+            curVal = num;
+        }
+        result.innerHTML = curVal;
+    
+        if (op == 'C' || op == '=') {
+            op = '';
+        }
+        curOp = op;
+    }
+}
+</script>
+</html>
\ No newline at end of file
diff --git a/ide.html b/ide.html
new file mode 100644
index 0000000..8ed0fa9
--- /dev/null
+++ b/ide.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>IDE</title>
+<script src='https://cdnjs.cloudflare.com/ajax/libs/ace/1.33.1/ace.js'></script>
+</head>
+
+<body>
+<div id='container'>
+
+  <div id="editor">
+  </div>
+
+  <iframe id='iframe' frameBorder="0">
+  </iframe>
+</div>
+</body>
+
+<style>
+
+html,body { margin:0; padding:0; height:100%; width:100%; overflow: hidden;}
+
+#editor {
+    height: 100%;
+    width:50%;
+    display:inline-block;
+}
+
+#container {
+	height:100%;
+	width:auto;
+  white-space : nowrap; 
+  overflow : hidden;
+  position:relative;
+}
+
+#iframe {
+	height:100%;
+	display:inline-block;
+	width:50%;
+}
+
+/* disable tag matching */
+.ace_editor .ace_marker-layer .ace_bracket { display: none }
+
+</style>
+
+<script>
+var hasLoadedOriginal = false;
+
+function update()
+{
+	var idoc = document.getElementById('iframe').contentWindow.document;
+	var writeVal = '';
+	
+	if (!hasLoadedOriginal) {
+		writeVal = localStorage['currentWork'];
+		hasLoadedOriginal = true;
+	} else {
+		writeVal = editor.getValue();
+	}
+
+	idoc.open();
+	idoc.write(writeVal);
+	idoc.close();
+
+	localStorage['currentWork'] = editor.getValue();
+}
+
+function setupEditor()
+{
+  window.editor = ace.edit("editor");
+  editor.setTheme("ace/theme/monokai");
+  editor.getSession().setMode("ace/mode/html");
+  if (!localStorage['currentWork']) {
+    localStorage['currentWork'] = `<!DOCTYPE html>
+<html>
+<head>
+</head>
+
+<body>
+</body>
+
+</html>`
+  }
+  editor.setValue(localStorage['currentWork'], 1); //1 = moves cursor to end
+
+  editor.getSession().on('change', function() {
+    update();
+  });
+
+  editor.focus();
+  
+  
+  editor.setOptions({
+    fontSize: "16pt",
+    showLineNumbers: false,
+    showGutter: false,
+    vScrollBarAlwaysVisible:true,
+    enableBasicAutocompletion: false, enableLiveAutocompletion: false
+  });
+
+  editor.setShowPrintMargin(false);
+  editor.setBehavioursEnabled(false);
+}
+
+setupEditor();
+update();
+</script>
+
+</html>
\ No newline at end of file
