fork download
copy 
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  6.   <title>Start Code - Программируем онлайн</title>
  7.  
  8.   <!-- CSS  -->
  9.   <link href="https://f...content-available-to-author-only...s.com/icon?family=Material+Icons" rel="stylesheet">
  10.   <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  11.   <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  12.   <script src="https://a...content-available-to-author-only...s.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
  13.   <!-- CodeMirror  -->
  14. <link rel="stylesheet" href="codemirror/theme/ttcn.css">
  15. <link rel="stylesheet" href="codemirror/lib/codemirror.css">
  16. <script src="codemirror/lib/codemirror.js"></script>
  17. <script src="codemirror/mode/xml/xml.js"></script>
  18. <script src="codemirror/mode/javascript/javascript.js"></script>
  19. <script src="codemirror/mode/css/css.js"></script>
  20. <script src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
  21.  
  22. <script src="codemirror/mode/javascript/javascript.js"></script>
  23. <script src="codemirror/addon/selection/active-line.js"></script>
  24. <script src="codemirror/addon/edit/matchbrackets.js"></script>
  25. <style type="text/css">
  26.       .CodeMirror {
  27.         float: left;
  28. 		width:50%;
  29. 		height:auto;
  30.       }
  31.       iframe {
  32. 		position:relative;
  33. 		bottom:100%;
  34. 		float: right;
  35. 		width:40%;
  36. 		min-width:500px;
  37. 		heigth:1000px;
  38.  
  39.       }
  40.     </style>
  41.  
  42. </head>
  43. <body>
  44.   <? include 'head.php';?>
  45.  <div class="row">
  46.  <div class="col s2">
  47.  <ul class="tabs">
  48. 		<li class="tab col s3"><a href="#zadanie" class="active">Задание</a></li>
  49.  </ul>
  50.  	<div id="zadanie" class="col s12">
  51. 	<blockquote>
  52.       This is an example quotation that uses the blockquote tag.
  53.     </blockquote>
  54. 	<blockquote>
  55.       This is an example quotation that uses the blockquote tag.
  56.     </blockquote>
  57. 	<blockquote>
  58.       This is an example quotation that uses the blockquote tag.
  59.     </blockquote>
  60. 	<blockquote>
  61.       This is an example quotation that uses the blockquote tag.
  62.     </blockquote>
  63. 	<blockquote>
  64.       This is an example quotation that uses the blockquote tag.
  65.     </blockquote>
  66. 	</div>
  67.  </div>
  68.     <div class="col s5">
  69.       <ul class="tabs">
  70.         <li class="tab col s2"><a href="#index" class="active">index.html</a></li>
  71.         <li class="tab col s2"><a href="#style">style.css</a></li>
  72.       </ul>
  73.     </div>
  74.     <div id="index" class="col s10">
  75.  
  76. 	<textarea id="code" name="code">
  77. <!doctype html>
  78. <html>
  79.   <head>
  80.     <meta charset="utf-8">
  81.     <title>HTML5 canvas demo</title>
  82.     <style>p {font-family: monospace;}</style>
  83.   </head>
  84.   <body>
  85.     <p>Canvas pane goes here:</p>
  86.     <canvas id="pane" width="300" height="200"></canvas>
  87.     <script>
  88.       var canvas = document.getElementById('pane');
  89.       var context = canvas.getContext('2d');
  90.  
  91.       context.fillStyle = 'rgb(250,0,0)';
  92.       context.fillRect(10, 10, 55, 50);
  93.  
  94.       context.fillStyle = 'rgba(0, 0, 250, 0.5)';
  95.       context.fillRect(30, 30, 55, 50);
  96.     </script>
  97.   </body>
  98. </html>
  99. 	</textarea>	
  100. 	</div>
  101.  
  102.     <div id="style" class="col s10">
  103. 	<textarea id="css" name="css">
  104. <!doctype html>
  105. <html>
  106.   <head>
  107.     <meta charset="utf-8">
  108.     <title>HTML5 canvas demo</title>
  109.     <style>p {font-family: monospace;}</style>
  110.   </head>
  111.   <body>
  112.     <p>Canvas pane goes here:</p>
  113.     <canvas id="pane" width="300" height="200"></canvas>
  114.     <script>
  115.       var canvas = document.getElementById('pane');
  116.       var context = canvas.getContext('2d');
  117.  
  118.       context.fillStyle = 'rgb(250,0,0)';
  119.       context.fillRect(10, 10, 55, 50);
  120.  
  121.       context.fillStyle = 'rgba(0, 0, 250, 0.5)';
  122.       context.fillRect(30, 30, 55, 50);
  123.     </script>
  124.   </body>
  125. </html>
  126. 	</textarea>	
  127. 	</div>
  128. </div> 
  129. 	 <iframe id="preview" class="frame"></iframe> 
  130.     <script>
  131.       var delay;
  132.       // Initialize CodeMirror editor with a nice html5 canvas demo.
  133.       var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
  134.         mode: 'text/html',
  135. 		theme: "ttcn",
  136. 		lineNumbers: true,
  137. 		viewportMargin: Infinity,
  138. 		styleActiveLine: true,
  139. 		tabMode: 'indent',
  140. 		matchBrackets: true
  141.       });
  142.       editor.on("change", function() {
  143.         clearTimeout(delay);
  144.         delay = setTimeout(updatePreview, 100);
  145.       });
  146.        var css = CodeMirror.fromTextArea(document.getElementById("css"), {
  147. 		mode: 'css',
  148.         theme: "ttcn",
  149. 		lineNumbers: true,
  150. 		viewportMargin: Infinity,
  151. 		styleActiveLine: true,
  152. 		tabMode: 'indent',
  153.       });
  154.  
  155.       function updatePreview() {
  156.         var previewFrame = document.getElementById('preview');
  157.         var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
  158.         preview.open();
  159.         preview.write(editor.getValue());
  160.         preview.close();
  161.       }
  162.       setTimeout(updatePreview, 100);
  163.  
  164.     </script>
  165.  
  166.  
  167. <script src="https://a...content-available-to-author-only...s.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
  168.  
  169.   <!--  Scripts-->
  170.   <script src="https://c...content-available-to-author-only...y.com/jquery-2.1.1.min.js"></script>
  171.   <script src="js/materialize.js"></script>
  172.   <script src="js/init.js"></script>
  173.   <script>
  174.  $(document).ready(function(){
  175.     $('.modal-trigger').leanModal();
  176.   });
  177.  
  178.   </script>
  179.  
  180.  
  181.   </body>
  182. </html>
Success #stdin #stdout 0.02s 25912KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<!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>
https://ideone.com/ntTUDb
language:
PHP (php 7.3.5)
created:
1 year ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!