shell.html - master - redgpu/raygpu

shell.html
256 строк10 KB
Manuel
Headless tests (#38)
27 янв 2026, 22:40
27 янв 2026, 22:404d4d5f2
<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>RayGPU Example</title>
    <style>
      :root {
            --bg-color: #0f172a;
            --text-primary: #f8fafc;
            --accent: #38bdf8;
      }
      body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        background-color: var(--bg-color);
        color: var(--text-primary);
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
      }
      /* Header updates */
      header {
        width: 100%;
        padding: 1rem 1.5rem;
        background: #1e293b;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        margin-bottom: 2rem;
      }

      .header-left {
        display: flex;
        align-items: center;
      }

      .header-right {
        display: flex;
        gap: 1rem;
        font-size: 0.9rem;
        font-weight: 500;
      }

      .nav-link {
        color: var(--text-secondary);
        text-decoration: none;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
      }

      .nav-link:hover {
        color: var(--text-primary);
        background-color: rgba(255, 255, 255, 0.05);
      }
      
      .nav-link svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
      }
      
      a.back-link {
        color: var(--accent);
        text-decoration: none;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
        transition: background-color 0.2s;
      }
      a.back-link:hover {
        background-color: rgba(56, 189, 248, 0.1);
      }
      
      /* Canvas container */
      .canvas-container {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #334155;
        background: #000;
      }
      
      canvas.emscripten { 
        border: 0px none; 
        background-color: black; 
        display: block;
        outline: none;
      }
      
      /* Console output */
      #output-container, #code-container {
        width: 90%;
        max-width: 900px;
        margin-bottom: 2rem;
      }
      
      .output-label {
        font-size: 0.875rem;
        color: #94a3b8;
        margin-bottom: 0.5rem;
        display: block;
      }

      #output {
        width: 100%;
        height: 150px;
        box-sizing: border-box;
        background-color: #1e293b;
        color: #22d3ee;
        font-family: 'Consolas', 'Monaco', monospace;
        padding: 1rem;
        border-radius: 6px;
        border: 1px solid #334155;
        overflow-y: scroll;
        resize: vertical;
        font-size: 0.9rem;
      }

      /* Source code container improvements */
      #code-container pre {
        background-color: #1e293b !important; /* Override Prism default if needed */
        border-radius: 6px;
        border: 1px solid #334155;
        margin: 0;
        padding: 1rem;
        max-height: 600px; /* Limit height for very long files */
        overflow: auto;
      }

      #status {
        color: var(--accent);
        margin-bottom: 1rem;
        font-weight: 500;
        min-height: 1.5rem;
      }

    </style>
    <!-- Prism CSS for syntax highlighting -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
  </head>
  <body>
    <header>
        <div class="header-left">
            <a href="index.html" class="back-link">← Back to Examples</a>
        </div>
        <div class="header-right">
            <a href="#" class="nav-link">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.086 2.157 2.419 0 1.334-.956 2.42-2.157 2.42zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.086 2.157 2.419 0 1.334-.946 2.42-2.157 2.42z"/></svg>
                Discord
            </a>
            <a href="#" class="nav-link">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
                Docs
            </a>
            <a href="#" class="nav-link">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                GitHub
            </a>
        </div>
    </header>

    <div id="status">Downloading...</div>

    <div class="canvas-container">
      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
    </div>

    <div id="output-container">
        <span class="output-label">Console Output</span>
        <textarea id="output" rows="8" readonly></textarea>
    </div>

    <div id="code-container">
        <span class="output-label">Source Code</span>
        <pre><code class="language-c"><!-- SOURCE_CODE_INJECTION --></code></pre>
    </div>
    
    <!-- Prism JS for syntax highlighting -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-c.min.js"></script>

    <script type='text/javascript'>
      var statusElement = document.getElementById('status');

      var Module = {
        print: (function() {
          var element = document.getElementById('output');
          if (element) element.value = ''; // clear browser cache
          return function(text) {
            if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
            console.log(text);
            if (element) {
              element.value += text + "\n";
              element.scrollTop = element.scrollHeight; // focus on bottom
            }
          };
        })(),
        printErr: function(text) {
            if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
            console.error(text);
            // Also print to output for visibility
            var element = document.getElementById('output');
             if (element) {
              element.value += "[ERR] " + text + "\n";
              element.scrollTop = element.scrollHeight;
            }
        },
        canvas: (function() {
          var canvas = document.getElementById('canvas');
          canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
          return canvas;
        })(),
        setStatus: function(text) {
          if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
          if (text === Module.setStatus.last.text) return;
          var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
          var now = Date.now();
          if (m && now - Module.setStatus.last.time < 30) return; // if this is a progress update, skip it if too soon
          Module.setStatus.last.time = now;
          Module.setStatus.last.text = text;
          if (m) {
            text = m[1];
          }
          if (statusElement) statusElement.innerHTML = text;
        },
        totalDependencies: 0,
        monitorRunDependencies: function(left) {
          this.totalDependencies = Math.max(this.totalDependencies, left);
          Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
        }
      };
      
      window.onerror = function(event) {
        Module.setStatus('Exception thrown, see JavaScript console');
        Module.setStatus = function(text) {
          if (text) Module.printErr(text);
        };
      };
    </script>
    {{{ SCRIPT }}}
  </body>
</html>