<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> <title>Start Code - Программируем онлайн</title> <!-- CSS --> <link href="https://f...content-available-to-author-only...s.com/icon?family=Material+Icons" rel="stylesheet"> <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/> <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/> <script src="https://a...content-available-to-author-only...s.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <!-- CodeMirror --> <link rel="stylesheet" href="codemirror/theme/ttcn.css"> <link rel="stylesheet" href="codemirror/lib/codemirror.css"> <script src="codemirror/lib/codemirror.js"></script> <script src="codemirror/mode/xml/xml.js"></script> <script src="codemirror/mode/javascript/javascript.js"></script> <script src="codemirror/mode/css/css.js"></script> <script src="codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="codemirror/mode/javascript/javascript.js"></script> <script src="codemirror/addon/selection/active-line.js"></script> <script src="codemirror/addon/edit/matchbrackets.js"></script> <style type="text/css"> .CodeMirror { float: left; width:50%; height:auto; } iframe { position:relative; bottom:100%; float: right; width:40%; min-width:500px; heigth:1000px; } </style> </head> <body> <? include 'head.php';?> <div class="row"> <div class="col s2"> <ul class="tabs"> <li class="tab col s3"><a href="#zadanie" class="active">Задание</a></li> </ul> <div id="zadanie" class="col s12"> <blockquote> This is an example quotation that uses the blockquote tag. </blockquote> <blockquote> This is an example quotation that uses the blockquote tag. </blockquote> <blockquote> This is an example quotation that uses the blockquote tag. </blockquote> <blockquote> This is an example quotation that uses the blockquote tag. </blockquote> <blockquote> This is an example quotation that uses the blockquote tag. </blockquote> </div> </div> <div class="col s5"> <ul class="tabs"> <li class="tab col s2"><a href="#index" class="active">index.html</a></li> <li class="tab col s2"><a href="#style">style.css</a></li> </ul> </div> <div id="index" class="col s10"> <textarea id="code" name="code"> <!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 canvas demo</title> <style>p {font-family: monospace;}</style> </head> <body> <p>Canvas pane goes here:</p> <canvas id="pane" width="300" height="200"></canvas> <script> var canvas = document.getElementById('pane'); var context = canvas.getContext('2d'); context.fillStyle = 'rgb(250,0,0)'; context.fillRect(10, 10, 55, 50); context.fillStyle = 'rgba(0, 0, 250, 0.5)'; context.fillRect(30, 30, 55, 50); </script> </body> </html> </textarea> </div> <div id="style" class="col s10"> <textarea id="css" name="css"> <!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 canvas demo</title> <style>p {font-family: monospace;}</style> </head> <body> <p>Canvas pane goes here:</p> <canvas id="pane" width="300" height="200"></canvas> <script> var canvas = document.getElementById('pane'); var context = canvas.getContext('2d'); context.fillStyle = 'rgb(250,0,0)'; context.fillRect(10, 10, 55, 50); context.fillStyle = 'rgba(0, 0, 250, 0.5)'; context.fillRect(30, 30, 55, 50); </script> </body> </html> </textarea> </div> </div> <iframe id="preview" class="frame"></iframe> <script> var delay; // Initialize CodeMirror editor with a nice html5 canvas demo. var editor = CodeMirror.fromTextArea(document.getElementById('code'), { mode: 'text/html', theme: "ttcn", lineNumbers: true, viewportMargin: Infinity, styleActiveLine: true, tabMode: 'indent', matchBrackets: true }); editor.on("change", function() { clearTimeout(delay); delay = setTimeout(updatePreview, 100); }); var css = CodeMirror.fromTextArea(document.getElementById("css"), { mode: 'css', theme: "ttcn", lineNumbers: true, viewportMargin: Infinity, styleActiveLine: true, tabMode: 'indent', }); function updatePreview() { var previewFrame = document.getElementById('preview'); var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; preview.open(); preview.write(editor.getValue()); preview.close(); } setTimeout(updatePreview, 100); </script> <script src="https://a...content-available-to-author-only...s.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <!-- Scripts--> <script src="https://c...content-available-to-author-only...y.com/jquery-2.1.1.min.js"></script> <script src="js/materialize.js"></script> <script src="js/init.js"></script> <script> $(document).ready(function(){ $('.modal-trigger').leanModal(); }); </script> </body> </html>
Standard input is empty
<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> <title>Start Code - Программируем онлайн</title> <!-- CSS --> <link href="https://f...content-available-to-author-only...s.com/icon?family=Material+Icons" rel="stylesheet"> <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/> <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/> <script src="https://a...content-available-to-author-only...s.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <!-- CodeMirror --> <link rel="stylesheet" href="codemirror/theme/ttcn.css"> <link rel="stylesheet" href="codemirror/lib/codemirror.css"> <script src="codemirror/lib/codemirror.js"></script> <script src="codemirror/mode/xml/xml.js"></script> <script src="codemirror/mode/javascript/javascript.js"></script> <script src="codemirror/mode/css/css.js"></script> <script src="codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="codemirror/mode/javascript/javascript.js"></script> <script src="codemirror/addon/selection/active-line.js"></script> <script src="codemirror/addon/edit/matchbrackets.js"></script> <style type="text/css"> .CodeMirror { float: left; width:50%; height:auto; } iframe { position:relative; bottom:100%; float: right; width:40%; min-width:500px; heigth:1000px; } </style> </head> <body> <? include 'head.php';?> <div class="row"> <div class="col s2"> <ul class="tabs"> <li class="tab col s3"><a href="#zadanie" class="active">Задание</a></li> </ul> <div id="zadanie" class="col s12"> <blockquote> This is an example quotation that uses the blockquote tag. </blockquote> <blockquote> This is an example quotation that uses the blockquote tag. </blockquote> <blockquote> This is an example quotation that uses the blockquote tag. </blockquote> <blockquote> This is an example quotation that uses the blockquote tag. </blockquote> <blockquote> This is an example quotation that uses the blockquote tag. </blockquote> </div> </div> <div class="col s5"> <ul class="tabs"> <li class="tab col s2"><a href="#index" class="active">index.html</a></li> <li class="tab col s2"><a href="#style">style.css</a></li> </ul> </div> <div id="index" class="col s10"> <textarea id="code" name="code"> <!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 canvas demo</title> <style>p {font-family: monospace;}</style> </head> <body> <p>Canvas pane goes here:</p> <canvas id="pane" width="300" height="200"></canvas> <script> var canvas = document.getElementById('pane'); var context = canvas.getContext('2d'); context.fillStyle = 'rgb(250,0,0)'; context.fillRect(10, 10, 55, 50); context.fillStyle = 'rgba(0, 0, 250, 0.5)'; context.fillRect(30, 30, 55, 50); </script> </body> </html> </textarea> </div> <div id="style" class="col s10"> <textarea id="css" name="css"> <!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 canvas demo</title> <style>p {font-family: monospace;}</style> </head> <body> <p>Canvas pane goes here:</p> <canvas id="pane" width="300" height="200"></canvas> <script> var canvas = document.getElementById('pane'); var context = canvas.getContext('2d'); context.fillStyle = 'rgb(250,0,0)'; context.fillRect(10, 10, 55, 50); context.fillStyle = 'rgba(0, 0, 250, 0.5)'; context.fillRect(30, 30, 55, 50); </script> </body> </html> </textarea> </div> </div> <iframe id="preview" class="frame"></iframe> <script> var delay; // Initialize CodeMirror editor with a nice html5 canvas demo. var editor = CodeMirror.fromTextArea(document.getElementById('code'), { mode: 'text/html', theme: "ttcn", lineNumbers: true, viewportMargin: Infinity, styleActiveLine: true, tabMode: 'indent', matchBrackets: true }); editor.on("change", function() { clearTimeout(delay); delay = setTimeout(updatePreview, 100); }); var css = CodeMirror.fromTextArea(document.getElementById("css"), { mode: 'css', theme: "ttcn", lineNumbers: true, viewportMargin: Infinity, styleActiveLine: true, tabMode: 'indent', }); function updatePreview() { var previewFrame = document.getElementById('preview'); var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; preview.open(); preview.write(editor.getValue()); preview.close(); } setTimeout(updatePreview, 100); </script> <script src="https://a...content-available-to-author-only...s.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <!-- Scripts--> <script src="https://c...content-available-to-author-only...y.com/jquery-2.1.1.min.js"></script> <script src="js/materialize.js"></script> <script src="js/init.js"></script> <script> $(document).ready(function(){ $('.modal-trigger').leanModal(); }); </script> </body> </html>