Html-Home connecting judge0

민병수
Commit 0107219ec6785f4ff32aa1be9efdd8b799dff2aa 0107219e 1 parent 25bbe0d1
Showing 8 changed files with 141 additions and 52 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,
                 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">
+        <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 src="https://unpkg.com/monaco-editor@0.23.0/min/vs/editor/editor.main.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>
     </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">
+            <h3>TTP</h3>
+        </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 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 id="site-content"></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];
             });