sysclone/index.html at main · jfrelat-lab/sysclone · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sysclone WebVM</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="ide-container">

        <header class="ide-header">
            <div class="logo">
                <h1>SYSCLONE <span>WebVM</span></h1>
            </div>

            <div class="ide-toolbar">
                <div class="control-group">
                    <label for="rom-selector">File:</label>
                    <select id="rom-selector"></select>

                    <button id="btn-upload-rom" class="btn-icon" title="Upload local .BAS file">
                        <svg viewBox="0 0 24 24" width="18" height="18">
                            <path fill="currentColor" d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
                        </svg>
                    </button>
                    <input type="file" id="file-upload" accept=".bas" style="display: none;">
                </div>

                <span class="separator"></span>

                <div class="control-group cpu-group">
                    <span class="cpu-badge" id="speed-display">40 Hz</span>
                    <input type="range" id="cpu-speed" min="10" max="1000" step="10" value="40" title="CPU Speed">
                    <label class="turbo-label">
                        <input type="checkbox" id="cpu-turbo"> TURBO
                    </label>
                </div>
            </div>
        </header>

        <main class="ide-workspace">

            <section class="panel editor-panel">
                <div class="panel-header">
                    <span class="tab active" id="source-filename">program.bas</span>
                </div>
                <div class="editor-content">
                    <pre><code id="source-viewer"></code></pre>
                </div>
            </section>

            <section class="panel execution-panel">
                <div class="panel-header action-bar">
                    <div class="action-left">
                        <button id="btn-toggle-play" class="btn-icon" title="Play / Pause">
                            <svg id="icon-pause" viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
                            <svg id="icon-play" viewBox="0 0 24 24" width="16" height="16" style="display:none;"><path fill="currentColor" d="M8 5v14l11-7z"/></svg>
                        </button>
                        <button id="btn-restart" class="btn-icon" title="Restart VM">
                            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>
                        </button>
                    </div>
                    <div class="action-right">
                        <button id="btn-screenshot" class="btn-icon" title="Take Screenshot">
                            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
                        </button>
                        <button id="btn-record" class="btn-icon btn-record-icon" title="Record GIF Animation">
                            <svg viewBox="0 0 24 24" width="16" height="16">
                                <circle cx="12" cy="12" r="8" fill="currentColor"/>
                            </svg>
                        </button>
                        <button id="btn-fullscreen" class="btn-icon" title="Fullscreen">
                            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
                        </button>
                    </div>
                </div>
                <div class="canvas-container" id="screen-container">
                    <canvas id="vga-display" width="640" height="400"></canvas>
                </div>
            </section>

        </main>
    </div>

    <script type="module" src="./src/webvm.js"></script>
</body>
</html>