htmlPreview.html

<h1 class="fs-3 mb-4">SRT to Prose Converter</h1>

<div class="card mb-4">
  <div class="card-body">
      <div class="input-group">
          <input type="file" accept=".srt" class="form-control" id="srt-file-input">
          <button class="btn btn-primary" id="convert-button">Convert</button>
      </div>
      <small class="form-text text-muted">Please select an SRT file.</small>
  </div>
</div>

<h2 class="fs-4 mb-4">Parsing Results</h2>

<div class="card">
  <div class="card-body">
      <ul class="nav nav-pills mb-3" id="output-tabs" role="tablist">
          <li class="nav-item" role="presentation">
              <button class="nav-link active" id="prose-tab" data-bs-toggle="tab" data-bs-target="#prose-tab-content" type="button" role="tab" aria-controls="prose-tab-content" aria-selected="false">
                  Prose View
              </button>
          </li>
          <li class="nav-item" role="presentation">
              <button class="nav-link" id="table-tab" data-bs-toggle="tab" data-bs-target="#table-tab-content" type="button" role="tab" aria-controls="table-tab-content" aria-selected="false">
                  Table View
              </button>
          </li>
          <li class="nav-item" role="presentation">
              <button class="nav-link" id="transcript-tab" data-bs-toggle="tab" data-bs-target="#transcript-tab-content" type="button" role="tab" aria-controls="transcript-tab-content" aria-selected="true">
                  Transcript
              </button>
          </li>
      </ul>
      <div class="tab-content" id="output-tabs-content">
          <div class="tab-pane fade bg-light p-3 border rounded" id="transcript-tab-content" role="tabpanel" aria-labelledby="transcript-tab">
              <p class="mb-0 alert alert-warning">Please select an SRT file.</p>
          </div>
          <div class="tab-pane fade bg-light p-3 border rounded" id="table-tab-content" role="tabpanel" aria-labelledby="table-tab">
              <p class="mb-0 alert alert-warning">Please select an SRT file.</p>
          </div>
          <div class="tab-pane fade bg-light p-3 border rounded show active" id="prose-tab-content" role="tabpanel" aria-labelledby="prose-tab">
              <p class="mb-0 alert alert-warning">Please select an SRT file.</p>
          </div>
      </div>
  </div>
</div>