From bd705dcf64d9401cbd874cbc3ab6e1dda17d312e Mon Sep 17 00:00:00 2001 From: B3ns44d Date: Sun, 7 Feb 2021 16:40:15 +0100 Subject: [PATCH 1/6] add a container and make thing more clear --- index.html | 156 +++++++++++++++++++++++++++-------------------------- 1 file changed, 81 insertions(+), 75 deletions(-) diff --git a/index.html b/index.html index ce415a5..45ea194 100644 --- a/index.html +++ b/index.html @@ -1,85 +1,91 @@ + -Piethon online - - - - + Piethon online + + + + + -
# Say hello! -x = "Hello, piethon" -print x -
- -
- -
+
+
print "Hello, World"
+ +
- - - - + + + + select.change(function () { + var selectedndx = parseInt($("#examples option:selected").attr('value'), 10); + if (selectedndx > -1) { + editor.setValue(examples[selectedndx].code); + editor.gotoLine(1); + } + }); + + + + \ No newline at end of file From f67d04ac2ff2e3cc6c6afb042f1a8c33c9afbd28 Mon Sep 17 00:00:00 2001 From: B3ns44d Date: Sun, 7 Feb 2021 16:40:30 +0100 Subject: [PATCH 2/6] change the whole style --- styles.css | 170 ++++++++++++++++++++++++++++------------------------- 1 file changed, 91 insertions(+), 79 deletions(-) diff --git a/styles.css b/styles.css index bb432f1..364ab07 100644 --- a/styles.css +++ b/styles.css @@ -1,92 +1,104 @@ -body { - background-color : #323232; -} - -#editor { - position: absolute; - top: 55px; - right: 0; - bottom: 208px; - left: 0; -} - -/* Navbar / Run button bar */ +:root { + --nav-color-bg: #272932; + --console-color-border: #1b1c22; + --console-color-bg: #1b1c22; + --runbtn-color-border: #e7ecef; + --runbtn-color-bg: #e7ecef; + --runbtn-text-color: #05192d; + --clearbtn-border: #e7ecef; + --clearbtn-bg: #e7ecef; + --examples-border: #e7ecef; + --examples-bg: #e7ecef; +} +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} +.container { + width: 100%; + height: 100vh; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 0.3fr 2.4fr 0.3fr; + gap: 0 0; + grid-template-areas: "navbar navbar" "editor console" "footer footer"; +} #navbar { - position: absolute; - top: 0; - right: 0; - left : 0; - height: 44px; - background-color:#3B3B3B; - -webkit-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.75); - box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.75); -} - -#runbtn { - position: absolute; - height : 80%; - left : 0; + grid-area: navbar; + background-color: var(--nav-color-bg); } - -#clearbtn { - position: absolute; - height : 24px; - right : 0; - bottom: 0; - z-index:1000000; +#footer { + grid-area: footer; + background-color: var(--nav-color-bg); } - -#examples { - position: absolute; - right : 0; +#editor { + grid-area: editor; } - -/* The console container element */ #console { - padding: 0px; - margin:0px; - position: absolute; - right :0; - height: 200px; - bottom : 0; - left : 0; - background-color:black; - border-top: 2px solid #3B3B3B; -} -/* The inner console element. */ -.jqconsole { - padding: 0px; - padding-left:2px; - margin:0px; + grid-area: console; + border: 3px solid var(--console-color-border); + background-color: var(--console-color-bg); } -/* The cursor. */ -.jqconsole-cursor { - background-color: gray; +#runbtn { + border: 2px solid var(--runbtn-color-border); + background-color: var(--runbtn-color-bg); + color: var(--runbtn-text-color); + border-radius: 4px; + font-size: 16px; + line-height: 1.2; + margin: 0.5rem; + padding: 0.5rem 1.5rem; + cursor: pointer; } -/* The cursor color when the console looses focus. */ -.jqconsole-blurred .jqconsole-cursor { - background-color: #666; +#runbtn:hover { + border: 2px solid var(--runbtn-color-border); + background-color: var(--runbtn-color-bg); } -/* The current prompt text color */ -.jqconsole-prompt { - color: #0d0; +#clearbtn { + background-color: var(--clearbtn-bg); + border: 2px solid var(--clearbtn-border); + color: #05192d; + border-radius: 4px; + font-size: 16px; + line-height: 1.2; + margin: 0.5rem; + padding: 0.5rem 1.5rem; + cursor: pointer; } -/* The command history */ -.jqconsole-old-prompt { - color: #0b0; - font-weight: normal; +#clearbtn:hover { + border: 2px solid var(--clearbtn-border); + background-color: var(--clearbtn-bg); } -/* The text color when in input mode. */ -.jqconsole-input { - color: #dd0; +.jqconsole { + padding: 0; + padding-left: 2px; + margin: 0; } -/* Previously entered input. */ -.jqconsole-old-input { - color: #bb0; - font-weight: normal; +.jqconsole-prompt { + color: #0d0; +} +.jqconsole-input { + color: #dd0; } -/* The text color of the output. */ .jqconsole-output { - color: white; -} \ No newline at end of file + color: #fff; +} +#examples { + border: 2px solid var(--examples-border); + background-color: var(--examples-bg); + color: #05192d; + border-radius: 4px; + font-size: 16px; + line-height: 1.2; + margin: 0.5rem; + padding: 0.5rem 1.5rem; + cursor: pointer; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); + background-repeat: no-repeat, repeat; + background-position: right 0.7em top 50%, 0 0; + background-size: 0.65em auto, 100%; +} From c520d2bebb247382a4d673a83f635e002dfe60a6 Mon Sep 17 00:00:00 2001 From: B3ns44d Date: Sun, 7 Feb 2021 16:41:29 +0100 Subject: [PATCH 3/6] // position: 'absolute' from this..css --- lib/jqconsole.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/jqconsole.js b/lib/jqconsole.js index 7c4759f..db000ba 100755 --- a/lib/jqconsole.js +++ b/lib/jqconsole.js @@ -322,7 +322,7 @@ Licensed under the MIT license this.shortcuts = {}; this.$console = $('
').appendTo(this.container);
       this.$console.css({
-        position: 'absolute',
+        // position: 'absolute',
         top: 0,
         bottom: 0,
         right: 0,

From fc7cf646850752e829adfe1de9773cc405efe5ab Mon Sep 17 00:00:00 2001
From: B3ns44d 
Date: Sun, 7 Feb 2021 17:21:33 +0100
Subject: [PATCH 4/6] add ability change editor theme

---
 index.html | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 45ea194..9bd11a4 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
 	
 	
 	
+	
 	
 
 
@@ -18,11 +19,15 @@
 			
+
@@ -46,7 +51,8 @@ jqconsole.Write('>> ', 'jqconsole-output'); // Set up the editor var editor = ace.edit("editor"); - editor.setTheme("ace/theme/idle_fingers"); + var editorThemeColor = "idle_fingers"; + editor.setTheme(`ace/theme/idle_fingers`) editor.getSession().setMode("ace/mode/python"); // Handle run button interaction @@ -70,6 +76,19 @@ $("#clearbtn").click(function () { jqconsole.Reset(); }); + // Populate the dropdown editor theme select + var editorThemeSelect = $("#editorTheme"); + for (var i = 0; i < editorTheme.length; i++) { + editorThemeSelect.append( + '" + ); + } + editorThemeSelect.change(function () { + var selected = parseInt($("#editorTheme option:selected").attr("value"), 10); + if (selected > -1) { + editor.setTheme(`ace/theme/${editorTheme[selected].theme}`); + } + }); // Populate the dropdown examples select var select = $('#examples'); From d0b60ab8c0bbd053c72625e317bb69b0c629093e Mon Sep 17 00:00:00 2001 From: B3ns44d Date: Sun, 7 Feb 2021 17:21:45 +0100 Subject: [PATCH 5/6] editor theme list --- editorTheme.js | 122 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 editorTheme.js diff --git a/editorTheme.js b/editorTheme.js new file mode 100644 index 0000000..5e92483 --- /dev/null +++ b/editorTheme.js @@ -0,0 +1,122 @@ +var editorTheme = [ + { + name: "Github", + theme: "github", + }, + { + name: "Terminal", + theme: "terminal", + }, + { + name: "Ambiance", + theme: "ambiance", + }, + { + name: "Chaos", + theme: "chaos", + }, + { + name: "Chrome", + theme: "chrome", + }, + { + name: "Clouds Midnight", + theme: "clouds_midnight", + }, + { + name: "Clouds", + theme: "clouds", + }, + { + name: "Cobalt", + theme: "cobalt", + }, + { + name: "Crimson Editor", + theme: "crimson_editor", + }, + { + name: "Dawn", + theme: "dawn", + }, + { + name: "Dreamweaver", + theme: "dreamweaver", + }, + { + name: "Eclipse", + theme: "eclipse", + }, + { + name: "Idle Fingers", + theme: "idle_fingers", + }, + { + name: "Kr", + theme: "kr", + }, + { + name: "Merbivore", + theme: "merbivore", + }, + { + name: "Merbivore Soft", + theme: "merbivore_soft", + }, + { + name: "Mono Industrial", + theme: "mono_industrial", + }, + { + name: "Monokai", + theme: "monokai", + }, + { + name: "Pastel on dark", + theme: "pastel_on_dark", + }, + { + name: "Solarized dark", + theme: "solarized_dark", + }, + { + name: "Solarized light", + theme: "solarized_light", + }, + { + name: "Textmate", + theme: "textmate", + }, + { + name: "Tomorrow", + theme: "tomorrow", + }, + { + name: "Tomorrow night", + theme: "tomorrow_night", + }, + { + name: "Tomorrow night blue", + theme: "tomorrow_night_blue", + }, + { + name: "Tomorrow night bright", + theme: "tomorrow_night_bright", + }, + { + name: "Tomorrow night eighties", + theme: "tomorrow_night_eighties", + }, + { + name: "Twilight", + theme: "twilight", + }, + { + name: "Vibrant ink", + theme: "vibrant_ink", + }, + { + name: "Xcode", + theme: "xcode", + }, +]; \ No newline at end of file From 40028740f12b00a7d642c14928fe63efd3c48ea8 Mon Sep 17 00:00:00 2001 From: B3ns44d Date: Sun, 7 Feb 2021 17:22:06 +0100 Subject: [PATCH 6/6] optimise css --- styles.css | 21 +++------------------ 1 file changed, 3 insertions(+), 18 deletions(-) diff --git a/styles.css b/styles.css index 364ab07..74edfca 100644 --- a/styles.css +++ b/styles.css @@ -40,7 +40,7 @@ border: 3px solid var(--console-color-border); background-color: var(--console-color-bg); } -#runbtn { +#runbtn, #clearbtn { border: 2px solid var(--runbtn-color-border); background-color: var(--runbtn-color-bg); color: var(--runbtn-text-color); @@ -51,25 +51,10 @@ padding: 0.5rem 1.5rem; cursor: pointer; } -#runbtn:hover { +#runbtn:hover, #clearbtn:hover { border: 2px solid var(--runbtn-color-border); background-color: var(--runbtn-color-bg); } -#clearbtn { - background-color: var(--clearbtn-bg); - border: 2px solid var(--clearbtn-border); - color: #05192d; - border-radius: 4px; - font-size: 16px; - line-height: 1.2; - margin: 0.5rem; - padding: 0.5rem 1.5rem; - cursor: pointer; -} -#clearbtn:hover { - border: 2px solid var(--clearbtn-border); - background-color: var(--clearbtn-bg); -} .jqconsole { padding: 0; padding-left: 2px; @@ -84,7 +69,7 @@ .jqconsole-output { color: #fff; } -#examples { +#examples, #editorTheme { border: 2px solid var(--examples-border); background-color: var(--examples-bg); color: #05192d;