1
+ <!DOCTYPE html>
2
+ < html lang ="en ">
3
+ < head >
4
+ < meta charset ="UTF-8 ">
5
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6
+ < title > Distinction Task 5 | Docker-based Python Execution Module</ title >
7
+ < link href ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css "
rel ="
stylesheet "
integrity ="
sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN "
crossorigin ="
anonymous "
>
8
+ < link rel ="
stylesheet "
href ="
https://cdn.jsdelivr.net/npm/[email protected] /font/bootstrap-icons.min.css "
>
9
+ < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css " />
10
+ < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css " />
11
+
12
+ < style >
13
+ .mainView {
14
+ border-radius : 20px ;
15
+ box-shadow : 0 10px 20px rgba (0 , 0 , 0 , .12 ), 0 4px 8px rgba (0 , 0 , 0 , .06 );
16
+ }
17
+
18
+ .CodeMirror {
19
+ border : var (--bs-border-width ) solid var (--bs-border-color );
20
+ }
21
+ </ style >
22
+ </ head >
23
+
24
+ < body >
25
+ < div class ="container mt-5 ">
26
+ < div class ="row ">
27
+ < div class ="col ">
28
+ < p class ="fw-medium "> COS30041 Creating Secure and Scalable Software</ p >
29
+ </ div >
30
+ < div class ="col-auto ">
31
+ < p class ="fst-italic "> Created by: Kazumasa Chong (102762373)</ p >
32
+ </ div >
33
+ </ div >
34
+ < h1 > Distinction Task 5 | Docker-based Python Execution Module</ h1 >
35
+ </ div >
36
+
37
+ < div class ="container mt-4 mb-5 py-4 px-4 mainView bg-white slide-left ">
38
+ < div class ="row justify-content-center ">
39
+ < div class ="col pe-5 ">
40
+ < form method ="post ">
41
+ < div class ="row mb-3 ">
42
+ < h3 class ="col "> Enter Python Code</ h3 >
43
+ < button class ="btn btn-primary col-auto me-4 " type ="submit "> Run < i class ="bi bi-play-fill "> </ i > </ button >
44
+ </ div >
45
+ < textarea class ="form-control " name ="user_code " id ="user_code " rows ="5 "> {{ user_code }}</ textarea >
46
+ </ form >
47
+ </ div >
48
+
49
+ < div class ="col-auto d-flex ">
50
+ < div class ="vr "> </ div >
51
+ </ div >
52
+
53
+ < div class ="col ps-5 ">
54
+ < h3 class ="mb-4 "> Result</ h3 >
55
+ < textarea id ="resizableTextarea " class ="form-control " rows ="5 " disabled readonly >
56
+ {%- if result -%}
57
+ {{ result }}
58
+ {%- endif -%}
59
+ </ textarea >
60
+ </ div >
61
+ </ div >
62
+ </ div >
63
+
64
+ < script src ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js "
integrity ="
sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL "
crossorigin ="
anonymous "
> </ script >
65
+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js "> </ script >
66
+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/python/python.min.js "> </ script >
67
+ < script >
68
+ // CodeMirror to make text field more IDE-themed
69
+ var editor = CodeMirror . fromTextArea ( document . getElementById ( "user_code" ) , {
70
+ mode : "python" ,
71
+ lineNumbers : true ,
72
+ theme : "default" ,
73
+ lineWrapping : true ,
74
+ } ) ;
75
+
76
+ // Auto adjust textarea
77
+ function resizeTextarea ( textarea ) {
78
+ textarea . style . height = "auto" ;
79
+ textarea . style . height = ( textarea . scrollHeight ) + "px" ;
80
+ }
81
+
82
+ document . addEventListener ( "DOMContentLoaded" , function ( ) {
83
+ var textarea = document . getElementById ( "resizableTextarea" ) ;
84
+ resizeTextarea ( textarea ) ;
85
+ } ) ;
86
+ </ script >
87
+ </ body >
88
+ </ html >
0 commit comments