Previewer/index.html at main · Pro-Bandey/Previewer · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GitPreview Engine</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="alternate icon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png">
    <link rel="stylesheet" href="src/style.css">
</head>
<body class="dark-theme">

    <!-- Top Loading Bar -->
    <div id="progressBar" class="progress-bar"></div>

    <!-- Header -->
    <header class="app-header">
        <div class="brand">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
            <span class="brand-text">GitPreview</span>
        </div>

        <!-- Main Controls -->
        <div class="control-group main-controls">
            <div class="input-wrapper">
                <input type="text" id="urlInput" placeholder="Paste GitHub/GitLab file URL..." autocomplete="off">
                <!-- History Toggle -->
                <button id="historyBtn" class="icon-btn-inner" title="History">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                </button>
                <div id="historyDropdown" class="dropdown-menu hidden"></div>
            </div>

            <button id="previewBtn" class="primary-btn" title="Run Preview (Ctrl+Enter)">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                <span>Run</span>
            </button>

            <button id="closeBtn" class="icon-btn danger-hover hidden" title="Close File">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
            </button>
        </div>

        <div class="divider"></div>

        <!-- Settings Group (Proxy + Toggles) -->
        <div class="control-group settings-group">
            <input type="text" id="proxyInput" value="https://corsproxy.io/?" class="input-compact" title="CORS Proxy Prefix">

            <div class="toggle-wrapper" title="Enable/Disable JavaScript">
                <label class="switch">
                    <input type="checkbox" id="disableJs">
                    <span class="slider round"></span>
                </label>
                <span class="label-text">No JS</span>
            </div>

            <div class="toggle-wrapper" title="Isolate CSS with unique Hashes">
                <label class="switch">
                    <input type="checkbox" id="isolateCss" checked>
                    <span class="slider round"></span>
                </label>
                <span class="label-text">Scoped</span>
            </div>
        </div>

        <div class="spacer"></div>

        <!-- Right Toolbar -->
        <div class="toolbar-right">
            <div class="device-switcher">
                <button data-device="desktop" class="active" title="Desktop"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></button>
                <button data-device="tablet" title="Tablet"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg></button>
                <button data-device="mobile" title="Mobile"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg></button>
            </div>

            <div class="divider"></div>

            <button id="themeToggle" class="icon-btn" title="Toggle Theme">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
            </button>
            <button id="inspectorToggle" class="icon-btn active" title="Toggle Inspector">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="18" y="3" width="4" height="18"/><rect x="2" y="3" width="14" height="18"/></svg>
            </button>
             <button id="downloadBtn" class="action-btn" disabled title="Download HTML">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            </button>
        </div>
    </header>

    <!-- Main Layout -->
    <main class="workspace">
        <!-- Preview Area -->
        <section class="preview-pane">
            <div class="preview-wrapper" id="deviceWrapper">
                <div id="previewContainer" class="sandbox-container">
                    <!-- Placeholder Content (Shows when nothing is loaded) -->
                    <div id="emptyState" class="empty-state">
                        <div class="empty-icon">⌘</div>
                        <h3>Ready to Preview</h3>
                        <p>Configure settings above and paste a Git URL.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Resource Inspector -->
        <aside class="inspector-pane" id="inspectorPane">
            <div class="inspector-header">
                <span>Assets</span>
                <span class="badge" id="assetCount">0</span>
            </div>
            <div class="inspector-content" id="resourceList">
                <div class="info-item">No assets loaded.</div>
            </div>
        </aside>
    </main>

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