[READ-ONLY] Mirror of https://github.com/probablykasper/limp. Programming language made in JS, for fun (unfinished)
limp.kasper.space
language
Better looking limp console + clear button
+34
-5
close-48.png
close-48.png
This is a binary file and will not be displayed.
+8
-4
css/limp.css
+8
-4
css/limp.css
···
2
2
3
3
.limp--log { width: calc(100% - 80px); margin: 40px; height: calc(100% - 40px - 36px - 20px - 40px); overflow: scroll; max-height: 100%; background-color: #393942; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); tab-size: 4; }
4
4
5
-
.limp--log .limp--item { font-size: 14px; font-family: monospace; margin-left: 20px; margin-right: 20px; }
5
+
.limp--log .limp--item { padding-left: 30px; font-size: 14px; font-family: monospace; margin-left: 20px; margin-right: 20px; }
6
6
7
7
.limp--log .limp--item:first-child { margin-top: 20px; }
8
8
9
9
.limp--log .limp--item:last-child { margin-bottom: 20px; }
10
10
11
-
.limp--log .limp--item .limp--label { display: inline-block; border-radius: 2px; padding: 2px; margin: 2px; }
11
+
.limp--log .limp--item .limp--label { display: inline-block; border-radius: 2px; padding: 2px; margin: 2px; position: absolute; }
12
12
13
13
.limp--log .limp--item .limp--label-err { background-color: #EB5346; }
14
14
15
-
.limp--log .limp--item .limp--label-inf { background-color: #727275; }
15
+
.limp--log .limp--item .limp--label-inf { background-color: #727275; transform: translateX(-100%); }
16
16
17
-
.limp--log .limp--item .limp--msg { margin: 0px; display: inline; white-space: pre-wrap; }
17
+
.limp--log .limp--item .limp--msg { margin: 0px; padding-top: 4px; padding-bottom: 4px; padding-left: 15px; display: inline; display: inline-block; white-space: pre-wrap; }
18
18
19
19
.limp--input { position: absolute; bottom: 0px; width: 100%; margin-bottom: 40px; display: flex; justify-content: space-between; }
20
20
···
23
23
.limp--input textarea:focus, .limp--input textarea:active { background-color: #444453; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }
24
24
25
25
.limp--input .limp--input-limp { margin-left: 40px; }
26
+
27
+
.limp--input .limp--log-clear { min-width: 36px; cursor: pointer; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); background-color: #393942; background-image: url("/close-48.png"); background-size: 28px; background-position: center; background-repeat: no-repeat; transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
28
+
29
+
.limp--input .limp--log-clear:focus, .limp--input .limp--log-clear:active { background-color: #444453; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }
26
30
27
31
.limp--input .limp--input-js { margin-right: 40px; }
+20
css/limp.sass
+20
css/limp.sass
···
19
19
tab-size: 4
20
20
.limp--item
21
21
$margin: 20px
22
+
padding-left: 30px
22
23
font-size: 14px
23
24
font-family: monospace
24
25
margin-left: $margin
···
32
33
border-radius: 2px
33
34
padding: 2px
34
35
margin: 2px
36
+
position: absolute
35
37
.limp--label-err
36
38
background-color: $red
37
39
.limp--label-inf
38
40
background-color: $bg-6
41
+
transform: translateX(-100%)
39
42
.limp--msg
40
43
margin: 0px
44
+
padding-top: 4px
45
+
padding-bottom: 4px
46
+
padding-left: 15px
41
47
display: inline
48
+
display: inline-block
42
49
white-space: pre-wrap
43
50
44
51
.limp--input
···
69
76
box-shadow: $shadow-4
70
77
.limp--input-limp
71
78
margin-left: 40px
79
+
.limp--log-clear
80
+
min-width: 36px
81
+
cursor: pointer
82
+
box-shadow: $shadow-3
83
+
background-color: $bg-4
84
+
background-image: url("/close-48.png")
85
+
background-size: 28px
86
+
background-position: center
87
+
background-repeat: no-repeat
88
+
transition: background-color $transition, box-shadow $transition
89
+
&:focus, &:active
90
+
background-color: $bg-5
91
+
box-shadow: $shadow-4
72
92
.limp--input-js
73
93
margin-right: 40px
+2
-1
index.html
+2
-1
index.html
···
17
17
$("body").on("input", ".limp--input textarea", function() {
18
18
var offset = this.offsetHeight - this.clientHeight;
19
19
$(this).css("height", "auto").css("height", this.scrollHeight + offset);
20
-
$(".limp--log").css("height", "calc(100% - xpx - "+$(this).height()+"px"); // 100% - 40px - 36px - 20px - 40px
21
20
$(".limp--log").css("height", "calc(100% - 120px - "+$(this).height()+"px)"); // 100% - 40px - 36px - 20px - 40px
22
21
});
23
22
$("body").on("keypress", ".limp--input textarea", function(e) {
···
30
29
eval(this.value);
31
30
this.value = "";
32
31
}
32
+
$(".limp--input textarea").trigger("input");
33
33
}
34
34
});
35
35
</script>
36
36
<textarea placeholder="Run limp" rows="1" class="limp--input-limp"></textarea>
37
+
<div class="limp--log-clear"></div>
37
38
<textarea placeholder="Run JavaScript" rows="1" class="limp--input-js"></textarea>
38
39
</div>
39
40
<script src="js/limp.js?r=<?=rand(0,999)?>"></script>
+4
index.php
+4
index.php
···
32
32
$(".limp--input textarea").trigger("input");
33
33
}
34
34
});
35
+
$("body").on("click", ".limp--log-clear", function() {
36
+
document.getElementsByClassName("limp--log")[0].innerHTML = "";
37
+
});
35
38
</script>
36
39
<textarea placeholder="Run limp" rows="1" class="limp--input-limp"></textarea>
40
+
<div class="limp--log-clear"></div>
37
41
<textarea placeholder="Run JavaScript" rows="1" class="limp--input-js"></textarea>
38
42
</div>
39
43
<script src="js/limp.js?r=<?=rand(0,999)?>"></script>