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 diff --git a/index.html b/index.html index ce415a5..9bd11a4 100644 --- a/index.html +++ b/index.html @@ -1,85 +1,110 @@ + -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 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,
diff --git a/styles.css b/styles.css
index bb432f1..74edfca 100644
--- a/styles.css
+++ b/styles.css
@@ -1,92 +1,89 @@
-body {
-	background-color : #323232;
+: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;
 }
-
-#editor { 
-    position: absolute;
-    top: 55px;
-    right: 0;
-    bottom: 208px;
-    left: 0;
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
 }
-
-/* Navbar / Run button bar */
-#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);
+.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";
 }
-
-#runbtn {
-	position: absolute;
-	height : 80%;
-	left : 0;
+#navbar {
+  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;
+  grid-area: console;
+  border: 3px solid var(--console-color-border);
+  background-color: var(--console-color-bg);
 }
-/* The inner console element. */
-.jqconsole {
-    padding: 0px;
-	padding-left:2px;
-	margin:0px;
+#runbtn, #clearbtn {
+  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. */
-.jqconsole-cursor {
-    background-color: gray;
+#runbtn:hover, #clearbtn:hover {
+  border: 2px solid var(--runbtn-color-border);
+  background-color: var(--runbtn-color-bg);
 }
-/* The cursor color when the console looses focus. */
-.jqconsole-blurred .jqconsole-cursor {
-    background-color: #666;
+.jqconsole {
+  padding: 0;
+  padding-left: 2px;
+  margin: 0;
 }
-/* The current prompt text color */
 .jqconsole-prompt {
-    color: #0d0;
+  color: #0d0;
 }
-/* The command history */
-.jqconsole-old-prompt {
-    color: #0b0;
-    font-weight: normal;
-}
-/* The text color when in input mode. */
 .jqconsole-input {
-    color: #dd0;
-}
-/* Previously entered input. */
-.jqconsole-old-input {
-    color: #bb0;
-    font-weight: normal;
+  color: #dd0;
 }
-/* The text color of the output. */
 .jqconsole-output {
-    color: white;
-}
\ No newline at end of file
+  color: #fff;
+}
+#examples, #editorTheme {
+  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%;
+}