Html-Home connecting judge0

민병수
Commit 0107219ec6785f4ff32aa1be9efdd8b799dff2aa 0107219e 1 parent 25bbe0d1
Showing 8 changed files with 147 additions and 58 deletions
Voicoding_web/Voico_Home.css
Voicoding_web/Voico_Home.html
Voicoding_web/Voico_Info.css
Voicoding_web/Voico_Info.html
Voicoding_web/Voico_Menu.css
Voicoding_web/Voico_Menu.html
Voicoding_web/css/ide.css
Voicoding_web/js/ide.js
--- a/Voicoding_web/Voico_Home.css
View file @0107219
+++ b/Voicoding_web/Voico_Home.css
View file @0107219
@@ -15,7 +15,7 @@ a{
     color:var(--text-color);
 }
-.menu{
+.voi_menu{
     display:flex;
     justify-content:space-between;
     align-items:center;
@@ -109,9 +109,9 @@ button:hover{
     margin: 23px;
 }
 #output{
-    width:50%;
+    margin:20px;
-    margin-left:20px;
     display:flex;
+    align-items:center;
     border: 3px solid var(--accent-color);
     height:700px;
 }
@@ -123,7 +123,7 @@ button:hover{
 }
 .output_bar{
     display:flex;
-    justify-content:space-around;
+    justify-content:center;
     color:black;
     border: 3px solid var(--accent-color);
     margin: 20px;
--- a/Voicoding_web/Voico_Home.html
View file @0107219
+++ b/Voicoding_web/Voico_Home.html
View file @0107219
@@ -6,27 +6,29 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Voicoding</title>
-        <script src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
+        <script defer src="https://kit.fontawesome.com/a5f26fa106.js" crossorigin="anonymous"></script>
-        <script src="menu.js" defer></script>
+        <script defer src="menu.js" defer></script>
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
-        <script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
+        <script defer src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
-        <script defer src="client.js"></script>
+        <script defer defer src="client.js"></script>
         <meta name="description" content="Free and open-source online code editor that allows you to write and execute code from a rich set of languages.">
         <meta name="keywords" content="online editor, online code editor, online ide, online compiler, online interpreter, run code online, learn programming online,
-            online debugger, programming in browser, online code runner, online code execution, debug online, debug C code online, debug C++ code online,
+                online debugger, programming in browser, online code runner, online code execution, debug online, debug C code online, debug C++ code online,
-            programming online, snippet, snippets, code snippet, code snippets, pastebin, execute code, programming in browser, run c online, run C++ online,
+                programming online, snippet, snippets, code snippet, code snippets, pastebin, execute code, programming in browser, run c online, run C++ online,
-            run java online, run python online, run ruby online, run c# online, run rust online, run pascal online, run basic online">
+                run java online, run python online, run ruby online, run c# online, run rust online, run pascal online, run basic online">
+        <meta name="author" content="Herman Zvonimir Došilović">
         <meta property="og:title" content="Judge0 IDE - Free and open-source online code editor">
         <meta property="og:description" content="Free and open-source online code editor that allows you to write and execute code from a rich set of languages.">
         <meta property="og:image" content="https://raw.githubusercontent.com/judge0/ide/master/.github/wallpaper.png">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+        <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/goldenlayout.min.js" integrity="sha256-NhJAZDfGgv4PiB+GVlSrPdh3uc75XXYSM4su8hgTchI=" crossorigin="anonymous"></script>
+        <script defer src="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/goldenlayout.min.js" integrity="sha256-NhJAZDfGgv4PiB+GVlSrPdh3uc75XXYSM4su8hgTchI=" crossorigin="anonymous"></script>
-        
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/css/goldenlayout-base.css" integrity="sha256-oIDR18yKFZtfjCJfDsJYpTBv1S9QmxYopeqw2dO96xM=" crossorigin="anonymous" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/css/goldenlayout-dark-theme.css" integrity="sha256-ygw8PvSDJJUGLf6Q9KIQsYR3mOmiQNlDaxMLDOx9xL0=" crossorigin="anonymous" />
         <script>
             var require = {
@@ -37,41 +39,37 @@
                 }
             };
         </script>
-        <script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
+        <script defer src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
-        <script src="https://unpkg.com/monaco-editor@0.23.0/min/vs/editor/editor.main.nls.js"></script>
+        <script defer src="https://unpkg.com/monaco-editor@0.23.0/min/vs/editor/editor.main.nls.js"></script>
-        <script src="https://unpkg.com/monaco-editor@0.23.0/min/vs/editor/editor.main.js"></script>
+        <script defer src="https://unpkg.com/monaco-editor@0.23.0/min/vs/editor/editor.main.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha256-t8GepnyPmw9t+foMh3mKNvcorqNHamSKtKRxxpUEgFI=" crossorigin="anonymous"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q=" crossorigin="anonymous" />
+        <script defer src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha256-t8GepnyPmw9t+foMh3mKNvcorqNHamSKtKRxxpUEgFI=" crossorigin="anonymous"></script>
         <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
-        <script type="text/javascript" src="third_party/download.js"></script>
+        <script type="text/javascript" defer src="third_party/download.js"></script>
-        <script type="text/javascript" src="js/ide.js" defer></script>
+        <script type="text/javascript" defer src="js/ide.js"></script>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q=" crossorigin="anonymous" />
+        <link type="text/css" rel="stylesheet" href="css/ide.css">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha256-t8GepnyPmw9t+foMh3mKNvcorqNHamSKtKRxxpUEgFI=" crossorigin="anonymous"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/goldenlayout.min.js" integrity="sha256-NhJAZDfGgv4PiB+GVlSrPdh3uc75XXYSM4su8hgTchI=" crossorigin="anonymous"></script>
+        <title>Judge0 IDE - Free and open-source online code editor</title>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/css/goldenlayout-base.css" integrity="sha256-oIDR18yKFZtfjCJfDsJYpTBv1S9QmxYopeqw2dO96xM=" crossorigin="anonymous" />
+        <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/golden-layout/1.5.9/css/goldenlayout-dark-theme.css" integrity="sha256-ygw8PvSDJJUGLf6Q9KIQsYR3mOmiQNlDaxMLDOx9xL0=" crossorigin="anonymous" />
+        <link rel="icon" href="./favicon.ico" type="image/x-icon">
+
+        <script async defer src="https://www.googletagmanager.com/gtag/js?id=G-RHNJ50BJ2F"></script>
         <script>
-            var require = {
+            window.dataLayer = window.dataLayer || [];
-                paths: {
+            function gtag(){dataLayer.push(arguments);}
-                    "vs": "https://unpkg.com/monaco-editor/min/vs",
+            gtag('js', new Date());
-                    "monaco-vim": "https://unpkg.com/monaco-vim/dist/monaco-vim",
+            gtag('config', 'G-RHNJ50BJ2F');
-                    "monaco-emacs": "https://unpkg.com/monaco-emacs/dist/monaco-emacs"
-                }
-            };
         </script>
-        <script src="https://unpkg.com/monaco-editor/min/vs/loader.js"></script>
+
-        <script src="https://unpkg.com/monaco-editor@0.23.0/min/vs/editor/editor.main.nls.js"></script>
+        <script defer type="text/javascript">window.$crisp=[];window.CRISP_WEBSITE_ID="ee4621ff-c682-44ac-8cfa-1835beddb98a";(function(){d=document;s=d.createElement("script"); src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
-        <script src="https://unpkg.com/monaco-editor@0.23.0/min/vs/editor/editor.main.js"></script>
-    
     </head>
     <body>
-        <nav class="menu">
+        <nav class="voi_menu">
             <div class="menu_bar_logo">
                 <i class="fas fa-microphone-alt"></i>
                 <a href="Voico_Home.html">Voicoding</a>
@@ -93,15 +91,104 @@
         </div>
         <div class="output_bar">
             <h3>Transcription Raw Data</h3>
-            <h3 style= "width:174.462px; text-align:center">TTP</h3>
         </div>
         <div id="output"></div>
-        <div class="ttp">
+        <div class="output_bar">
-            <div class="item no-left-padding borderless">
+            <h3>TTP</h3>
-                <button id="run-btn" class="ui primary labeled icon button"><i class="play icon"></i>Run (F9)</button>
+        </div>
+        <div id="site-navigation" class="ui small inverted menu" style="margin:20px 20px 0px 20px;">
+            <div id="site-header" class="header item">
+                
             </div>
-            <div id="site-content"></div>
+            <div class="left menu" >
+                <div class="ui dropdown item site-links on-hover">
+                    File <i class="dropdown icon"></i>
+                    <div class="menu">
+                        <a class="item" target="_blank" href="/"><i class="file code icon"></i> New File</a>
+                        <div class="item" onclick="downloadSource()"><i class="download icon"></i> Download</div>
+                        <div id="insert-template-btn" class="item"><i class="file code outline icon"></i> Insert template
+                            for current language</div>
+                    </div>
+                </div>
+                
+                <div class="item borderless">
+                    
+                </div>
+                <div class="item fitted borderless wide screen only">
+                    <div class="ui input">
+                        <p id="compiler-options" type="text" placeholder="Compiler options"></p>
+                    </div>
+                </div>
+                <div class="item borderless wide screen only">
+                    <div class="ui input">
+                        <p id="command-line-arguments" type="text" placeholder="Command line arguments"></p>
+                    </div>
+                </div>
+                <div class="item no-left-padding borderless">
+                    <button id="run-btn" class="ui primary labeled icon button"><i class="play icon"></i>Run (F9)</button>
+                </div>
+                
+            </div>
+            
         </div>
+    
+        <div id="site-content"style="margin:0px 20px 20px 20px;"></div>
+    
+        <div id="site-modal" class="ui modal">
+            <div class="header">
+                <i class="close icon"></i>
+                <span id="title"></span>
+            </div>
+            <div class="scrolling content"></div>
+            <div class="actions">
+                <div class="ui small labeled icon cancel button">
+                    <i class="remove icon"></i>
+                    Close (ESC)
+                </div>
+            </div>
+        </div>
+    
+        <div id="site-settings" class="ui modal">
+            <i class="close icon"></i>
+            <div class="header">
+                <i class="cog icon"></i>
+                Settings
+            </div>
+            <div class="content">
+                <div class="ui form">
+                    <div class="inline fields">
+                        <label>Editor Mode</label>
+                        <div class="field">
+                            <div class="ui radio checkbox">
+                                <input type="radio" name="editor-mode" value="normal" checked="checked">
+                                <label>Normal</label>
+                            </div>
+                        </div>
+                        <div class="field">
+                            <div class="ui radio checkbox">
+                                <input type="radio" name="editor-mode" value="vim">
+                                <label>Vim</label>
+                            </div>
+                        </div>
+                        <div class="field">
+                            <div class="ui radio checkbox">
+                                <input type="radio" name="editor-mode" value="emacs">
+                                <label>Emacs</label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="inline field">
+                        <div class="ui checkbox">
+                            <input type="checkbox" name="redirect-output">
+                            <label>Redirect stderr to stdout</label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    
+        <div id="editor-status-line"></div>
+            
     </body>
 </html>
\ No newline at end of file
--- a/Voicoding_web/Voico_Info.css
View file @0107219
+++ b/Voicoding_web/Voico_Info.css
View file @0107219
@@ -13,7 +13,7 @@ a{
     color:var(--text-color);
 }
-.menu{
+.voi_menu{
     display:flex;
     justify-content:space-between;
     align-items:center;
--- a/Voicoding_web/Voico_Info.html
View file @0107219
+++ b/Voicoding_web/Voico_Info.html
View file @0107219
@@ -12,7 +12,7 @@
         <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
     </head>
     <body>
-        <nav class="menu">
+        <nav class="voi_menu">
             <div class="menu_bar_logo">
                 <i class="fas fa-microphone-alt"></i>
                 <a href="Voico_Home.html">Voicoding</a>
--- a/Voicoding_web/Voico_Menu.css
View file @0107219
+++ b/Voicoding_web/Voico_Menu.css
View file @0107219
@@ -13,7 +13,7 @@ a{
     color:var(--text-color);
 }
-.menu{
+.voi_menu{
     display:flex;
     justify-content:space-between;
     align-items:center;
--- a/Voicoding_web/Voico_Menu.html
View file @0107219
+++ b/Voicoding_web/Voico_Menu.html
View file @0107219
@@ -12,7 +12,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
 </head>
 <body>
-    <nav class="menu">
+    <nav class="voi_menu">
         <div class="menu_bar_logo">
             <i class="fas fa-microphone-alt"></i>
             <a href="Voico_Home.html">Voicoding</a>
--- a/Voicoding_web/css/ide.css
View file @0107219
+++ b/Voicoding_web/css/ide.css
View file @0107219
@@ -87,6 +87,7 @@ body {
 }
 #site-content {
+    display:flex;
     height: calc(100% - 45px - 19px);
 }
--- a/Voicoding_web/js/ide.js
View file @0107219
+++ b/Voicoding_web/js/ide.js
View file @0107219
@@ -141,8 +141,8 @@ function localStorageGetItem(key) {
 }
 function showMessages() {
-    var width = $updates.offset().left - parseFloat($updates.css("padding-left")) -
+    var width = 100//$updates.offset().left - parseFloat($updates.css("padding-left")) -
-                $navigationMessage.parent().offset().left - parseFloat($navigationMessage.parent().css("padding-left")) - 5;
+                //$navigationMessage.parent().offset().left - parseFloat($navigationMessage.parent().css("padding-left")) - 5;
     if (width < 200 || messagesData === undefined) {
         return;
@@ -255,7 +255,7 @@ function getIdFromURI() {
 }
 function downloadSource() {
-    var value = parseInt($selectLanguage.val());
+    var value = parseInt(71);
     download(sourceEditor.getValue(), fileNames[value], "text/plain");
 }
@@ -308,7 +308,7 @@ function run() {
     var sourceValue = encode(sourceEditor.getValue());
     var stdinValue = encode(stdinEditor.getValue());
-    var languageId = resolveLanguageId($selectLanguage.val());
+    var languageId = resolveLanguageId(71);
     var compilerOptions = $compilerOptions.val();
     var commandLineArguments = $commandLineArguments.val();
@@ -393,21 +393,21 @@ function fetchSubmission(submission_token) {
 function changeEditorLanguage() {
     monaco.editor.setModelLanguage(sourceEditor.getModel(), $selectLanguage.find(":selected").attr("mode"));
-    currentLanguageId = parseInt($selectLanguage.val());
+    currentLanguageId = parseInt(71);
     $(".lm_title")[0].innerText = fileNames[currentLanguageId];
-    apiUrl = resolveApiUrl($selectLanguage.val());
+    apiUrl = resolveApiUrl(71);
 }
 function insertTemplate() {
-    currentLanguageId = parseInt($selectLanguage.val());
+    currentLanguageId = parseInt(71);
     sourceEditor.setValue(sources[currentLanguageId]);
     changeEditorLanguage();
 }
 function loadRandomLanguage() {
     // $selectLanguage.dropdown("set selected", values[Math.floor(Math.random() * $selectLanguage[0].length)]);
-    $selectLanguage.dropdown("set selected", 71);
+    //$selectLanguage.dropdown("set selected", 71);
-    apiUrl = resolveApiUrl($selectLanguage.val());
+    apiUrl = resolveApiUrl(71);
     insertTemplate();
 }
@@ -473,6 +473,7 @@ function updateScreenElements() {
 $(window).resize(function() {
     layout.updateSize();
+    console.log(`${layout.height}, ${layout.width}`);
     updateScreenElements();
     showMessages();
 });
@@ -582,7 +583,7 @@ $(document).ready(function () {
                 theme: "vs-dark",
                 scrollBeyondLastLine: true,
                 readOnly: state.readOnly,
-                language: "python",
+                language: "cpp",
                 minimap: {
                     enabled: false
                 }
@@ -591,7 +592,7 @@ $(document).ready(function () {
             changeEditorMode();
             sourceEditor.getModel().onDidChangeContent(function (e) {
-                currentLanguageId = parseInt($selectLanguage.val());
+                currentLanguageId = parseInt(71);
                 isEditorDirty = sourceEditor.getValue() != sources[currentLanguageId];
             });