pythonshell/index.html at main · tsugitools/pythonshell · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#0b6e4f">
  <title>PythonShell - A Python Playground</title>
  <link rel="manifest" href="manifest.json">
  <link rel="icon" href="static/icons/icon.svg" type="image/svg+xml">
  <link rel="icon" href="static/icons/icon-192.png" type="image/png" sizes="192x192">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="static/css/pythonshell.css?v=1">
</head>
<body>
  <div id="a11y-status" class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>
  <div id="a11y-alert" class="sr-only" role="alert"></div>

  <div id="app">
    <a class="skip-link" href="#shell-input">Skip to shell</a>
    <header class="topbar">
      <div class="brand-block">
        <h1 class="brand">PythonShell - A Python Playground</h1>
        <div class="storage-note">Experiment freely. Work is saved only in this browser (localStorage).</div>
      </div>
      <div class="toolbar">
        <button type="button" class="primary" id="btn-run">Run</button>
        <button type="button" id="btn-restart">Restart runtime</button>
        <button type="button" class="danger" id="btn-reset">Reset workspace</button>
        <button type="button" id="btn-about">About</button>
        <button type="button" id="btn-install" hidden>Install app</button>
        <span id="runtime-status" class="status">Starting…</span>
      </div>
    </header>

    <div class="main">
      <aside class="files-panel" aria-label="Files">
        <div class="panel-head">
          <h2 class="panel-title">Files</h2>
          <div class="file-actions">
            <button type="button" id="btn-new-file" title="New file" aria-label="New file">
              <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            </button>
            <button type="button" id="btn-rename-file" title="Rename" aria-label="Rename">
              <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
            <button type="button" id="btn-upload-file" title="Upload" aria-label="Upload">
              <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 16V4M12 4l-4 4M12 4l4 4M4 20h16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
            <button type="button" id="btn-download-file" title="Download" aria-label="Download">
              <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v12M12 16l-4-4M12 16l4-4M4 20h16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
            <button type="button" id="btn-delete-file" title="Delete" aria-label="Delete">
              <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
          </div>
        </div>
        <label class="sr-only" for="file-upload-input">Upload files</label>
        <input type="file" id="file-upload-input" class="sr-only" tabindex="-1" multiple>
        <ul id="file-list" class="file-list"></ul>
      </aside>

      <div class="workspace">
        <section class="editor-panel" aria-label="Editor">
          <h2 class="sr-only">Editor</h2>
          <div id="tabs" class="tabs" role="tablist" aria-label="Open files"></div>
          <div id="editor-wrap" class="editor-wrap">
            <label class="sr-only" for="source-fallback">Code editor</label>
            <p id="editor-a11y-hint" class="sr-only">
              Press Escape to leave the code editor and move to the shell.
            </p>
            <textarea
              id="source-fallback"
              spellcheck="false"
              aria-describedby="editor-a11y-hint"
            ></textarea>
          </div>
        </section>

        <div
          id="shell-split"
          class="split-handle"
          role="separator"
          aria-orientation="horizontal"
          aria-label="Resize editor and shell"
          aria-valuemin="15"
          aria-valuemax="75"
          aria-valuenow="32"
          tabindex="0"
        ></div>

        <div class="bottom-row">
          <section class="shell-panel" aria-label="Linux-like shell">
            <div class="panel-head">
              <h2 class="panel-title">Linux-like shell</h2>
            </div>
            <div
              id="shell-output"
              class="shell-output"
              role="log"
              aria-live="off"
              aria-label="Shell output"
            ></div>
            <div class="shell-input-row">
              <span id="shell-prompt" class="shell-prompt" aria-hidden="true">$</span>
              <label class="sr-only" for="shell-input" id="shell-input-label">Shell command</label>
              <input
                id="shell-input"
                type="text"
                autocomplete="off"
                spellcheck="false"
                aria-label="Shell command"
                placeholder=""
              >
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>

  <dialog id="about-dialog" aria-labelledby="about-title">
    <h2 id="about-title">PythonShell</h2>
    <p>
      Provided free of charge by
      <a href="https://www.py4e.com/" target="_blank" rel="noopener noreferrer">Python for Everybody (www.py4e.com)</a>.
    </p>
    <p>
      <a href="privacy.html">Privacy policy</a>
    </p>
    <form method="dialog">
      <button type="submit">OK</button>
    </form>
  </dialog>

  <script>
    window.PYTHONSHELL = {
      pyodideVersion: '0.27.5',
      pythonVersion: '3.12.7',
      workerUrl: 'static/worker/pyodide-worker.js?v=10',
      storageKey: 'pythonshell-workspace-v1',
      defaultTimeoutMs: 5000,
      maxFileBytes: 200000,
      maxFiles: 40
    };
  </script>
  <script src="static/js/vendor/ace/ace.js"></script>
  <script src="static/js/runtime.js"></script>
  <script src="static/js/workspace.js"></script>
  <script src="static/js/shell.js?v=2"></script>
  <script src="static/js/pythonshell.js?v=4"></script>
</body>
</html>