Excel_managment/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Excel Management System</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Global Navigation Header -->
  <header class="app-header">
    <div class="header-container">
      <div class="brand-group" id="brand-home" title="Go to Dashboard">
        <div class="brand-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
            <polyline points="14 2 14 8 20 8"></polyline>
            <line x1="8" y1="13" x2="16" y2="13"></line>
            <line x1="8" y1="17" x2="16" y2="17"></line>
            <polyline points="10 9 9 9 8 9"></polyline>
          </svg>
        </div>
        <div class="brand-text">
          <h1>Excel Manager</h1>
          <span class="brand-subtitle">Spreadsheet Workspace</span>
        </div>
      </div>

      <div class="nav-center" id="viewer-nav-info" style="display: none;">
        <span class="active-file-badge">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
            <polyline points="13 2 13 9 20 9"></polyline>
          </svg>
          <span id="current-filename-text">filename.xlsx</span>
        </span>
      </div>

      <div class="header-actions">
        <button id="btn-back-dashboard" class="btn btn-secondary" style="display: none;">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="19" y1="12" x2="5" y2="12"></line>
            <polyline points="12 19 5 12 12 5"></polyline>
          </svg>
          Back to Dashboard
        </button>
        <button id="btn-download-file" class="btn btn-primary" style="display: none;">
          <svg width="18" height="18" 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"></path>
            <polyline points="7 10 12 15 17 10"></polyline>
            <line x1="12" y1="15" x2="12" y2="3"></line>
          </svg>
          Download Excel
        </button>
      </div>
    </div>
  </header>

  <!-- Notification Banner -->
  <div id="notification-bar" class="notification-bar" style="display: none;">
    <div class="notification-content">
      <span id="notification-message"></span>
      <button id="notification-close" class="notification-close" aria-label="Close message">&times;</button>
    </div>
  </div>

  <!-- Main Container -->
  <main class="main-content">

    <!-- VIEW 1: DASHBOARD -->
    <section id="dashboard-view" class="view-panel active">
      <div class="dashboard-container">

        <!-- Upload Card -->
        <div class="card upload-card">
          <div class="upload-dropzone" id="dropzone">
            <input type="file" id="file-input" accept=".xlsx, .xls" class="file-input-hidden" />
            <div class="dropzone-content">
              <div class="upload-icon-circle">
                <svg width="36" height="36" 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"></path>
                  <polyline points="17 8 12 3 7 8"></polyline>
                  <line x1="12" y1="3" x2="12" y2="15"></line>
                </svg>
              </div>
              <h2 class="dropzone-title">Upload Excel File</h2>
              <p class="dropzone-text">Drag and drop your spreadsheet here, or <span class="browse-link">browse files</span></p>
              <span class="file-types-hint">Supported formats: <strong>.xlsx</strong>, <strong>.xls</strong></span>
            </div>
            <!-- Uploading spinner state -->
            <div id="upload-progress" class="upload-progress-overlay" style="display: none;">
              <div class="spinner"></div>
              <p>Uploading and parsing Excel file...</p>
            </div>
          </div>
        </div>

        <!-- Files Section -->
        <div class="files-section">
          <div class="section-header">
            <div>
              <h2 class="section-title">Available Excel Files</h2>
              <p class="section-subtitle">Click on any file to open its full spreadsheet view</p>
            </div>
            <span id="file-count-badge" class="badge">0 files</span>
          </div>

          <!-- Loading state -->
          <div id="files-loading" class="state-message" style="display: none;">
            <div class="spinner"></div>
            <p>Loading files...</p>
          </div>

          <!-- Empty state -->
          <div id="files-empty" class="empty-state" style="display: none;">
            <div class="empty-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
              </svg>
            </div>
            <h3>No Excel files uploaded yet</h3>
            <p>Upload a .xlsx or .xls file above to view and manage its data.</p>
          </div>

          <!-- File Cards Grid -->
          <div id="files-grid" class="files-grid"></div>
        </div>
      </div>
    </section>

    <!-- VIEW 2: SPREADSHEET VIEWER -->
    <section id="spreadsheet-view" class="view-panel" style="display: none;">
      <div class="spreadsheet-container">

        <!-- Spreadsheet Toolbar -->
        <div class="spreadsheet-toolbar">
          <div class="toolbar-left">
            <button id="btn-viewer-back" class="btn btn-sm btn-outline">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="19" y1="12" x2="5" y2="12"></line>
                <polyline points="12 19 5 12 12 5"></polyline>
              </svg>
              Dashboard
            </button>
            <h2 id="sheet-file-title" class="toolbar-title">Spreadsheet</h2>
            <span id="sheet-stats" class="sheet-stats-badge">Loading...</span>
          </div>

          <div class="toolbar-right">
            <span id="unsaved-badge" class="badge-unsaved" style="display: none;">● Unsaved Changes</span>
            <button id="btn-add-row" class="btn btn-sm btn-secondary" title="Add new row at the bottom">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
              </svg>
              Add Row
            </button>
            <button id="btn-save-sheet" class="btn btn-sm btn-success" title="Save changes to Excel file">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                <polyline points="17 21 17 13 7 13 7 21"></polyline>
                <polyline points="7 3 7 8 15 8"></polyline>
              </svg>
              Save Changes
            </button>
            <button id="btn-viewer-download" class="btn btn-sm btn-primary">
              <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"></path>
                <polyline points="7 10 12 15 17 10"></polyline>
                <line x1="12" y1="15" x2="12" y2="3"></line>
              </svg>
              Download Excel
            </button>
          </div>
        </div>

        <!-- Sheet Tabs (Google Sheets style) -->
        <div class="sheet-tabs-container">
          <div class="sheet-tabs-label">Worksheets:</div>
          <div id="sheet-tabs-list" class="sheet-tabs-list">
            <!-- Dynamically populated sheet tabs -->
          </div>
        </div>

        <!-- Spreadsheet Grid Viewport -->
        <div class="grid-viewport" id="grid-viewport">
          <!-- Loading Overlay -->
          <div id="grid-loading" class="grid-loading-overlay">
            <div class="spinner"></div>
            <p>Rendering spreadsheet data...</p>
          </div>

          <!-- Google Sheets-like Table -->
          <table id="spreadsheet-table" class="sheet-table">
            <thead id="sheet-thead">
              <!-- Sticky Column Letters: A, B, C... -->
            </thead>
            <tbody id="sheet-tbody">
              <!-- Rows with sticky row numbers 1, 2, 3... -->
            </tbody>
          </table>

          <!-- Empty Sheet Message -->
          <div id="sheet-empty-msg" class="sheet-empty-placeholder" style="display: none;">
            <p>This worksheet is empty.</p>
          </div>
        </div>

        <!-- Scroll / Count Footer Bar -->
        <div class="spreadsheet-footer">
          <span id="rendered-rows-info">Rows rendered: 0</span>
          <span class="footer-tip">Scroll to view more rows</span>
        </div>

      </div>
    </section>

  </main>

  <script src="app.js"></script>
</body>
</html>