templates/views/projects.html

<div style="flex:1;overflow-y:auto;padding:var(--sp-4);-webkit-overflow-scrolling:touch">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-5);gap:var(--sp-3);flex-wrap:wrap">
        <h2 style="font-size:18px;font-weight:600"><i class="fa-solid fa-rocket" style="color:var(--accent)"></i> Published Projects</h2>
        <button class="ed-btn success" onclick="publishCurrentWorkspace()" style="min-height:var(--touch-min)"><i class="fa-solid fa-cloud-arrow-up"></i> Publish</button>
    </div>
    <div id="projects-grid" style="display:grid;grid-template-columns:1fr;gap:var(--sp-3)">
        <div style="text-align:center;color:var(--text-3);padding:var(--sp-8)"><i class="fa-solid fa-spinner fa-spin"></i> Loading...</div>
    </div>
</div>

<div id="publish-modal" style="display:none;position:fixed;inset:0;background:var(--scrim);z-index:10000;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px)" role="dialog" aria-modal="true">
    <div style="background:var(--bg-surface);border-radius:var(--r-xl) var(--r-xl) 0 0;width:100%;max-width:600px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden">
        <div style="padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--divider);display:flex;justify-content:space-between;align-items:center">
            <h3 style="font-size:16px;font-weight:600"><i class="fa-solid fa-rocket" style="color:var(--accent)"></i> Publish</h3>
            <button onclick="closePublishModal()" style="background:none;border:none;color:var(--text-3);font-size:20px;min-width:var(--touch-min);min-height:var(--touch-min);display:flex;align-items:center;justify-content:center" aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <div style="flex:1;overflow-y:auto;padding:var(--sp-5)">
            <div class="field-group">
                <label for="publish-project-name">Project Name</label>
                <input type="text" id="publish-project-name" class="field-input" placeholder="My Project" autocomplete="off">
            </div>
            <div class="field-group">
                <label>Select Files</label>
                <div id="publish-file-list" style="background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--sp-3);max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-2)"></div>
            </div>
        </div>
        <div style="padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--divider);display:flex;gap:var(--sp-3);justify-content:flex-end">
            <button class="ed-btn" onclick="closePublishModal()">Cancel</button>
            <button id="publish-confirm-btn" class="ed-btn success" onclick="confirmPublish()"><i class="fa-solid fa-cloud-arrow-up"></i> Publish</button>
        </div>
    </div>
</div>