yoresee_dropbox/web/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>yDropbox</title>
  <link rel="stylesheet" href="/styles/tokens.css">
  <link rel="stylesheet" href="/styles/base.css">
  <link rel="stylesheet" href="/styles/components.css">

  <!-- Components register themselves on `alpine:init`; Alpine is loaded last. -->
  <script defer src="/components/icons.js"></script>
  <script defer src="/components/store.js"></script>
  <script defer src="/components/fileSection.js"></script>
  <script defer src="/components/confirm.js"></script>
  <script defer src="/alpine.min.js"></script>
</head>
<body x-data>
  <div class="app">
    <header class="app-header">
      <h1 class="brand">y<span>Dropbox</span></h1>
      <button class="btn btn-ghost btn-logout" @click="$store.files.logout()">
        <span class="icon" x-html="Icons.logout"></span>
        Logout
      </button>
    </header>

    <main>
      <!-- Inbox -->
      <section class="section" x-data="fileSection('inbox', { canShare: true })">
        <div class="section-header">
          <h2>
            <span class="icon" x-html="icon"></span>
            <span x-text="title"></span>
            <span class="badge" x-text="count"></span>
          </h2>
        </div>

        <div class="drop-zone"
             :class="{ 'is-dragover': dragover }"
             @dragover.prevent="dragover = true"
             @dragleave.prevent="dragover = false"
             @drop.prevent="dragover = false; onDrop($event)">
          <input type="file" class="drop-zone-input" @change="onSelect($event)" multiple>
          <div class="drop-zone-icon"><span class="icon" x-html="Icons.upload"></span></div>
          <div class="drop-zone-text"><strong>Click to upload</strong> or drag and drop</div>
        </div>

        <template x-if="count === 0">
          <div class="empty-state">
            <span class="empty-state-icon" x-html="Icons.empty"></span>
            <div class="empty-state-text" x-text="'No files in ' + title.toLowerCase()"></div>
          </div>
        </template>

        <ul class="file-list" x-show="count > 0">
          <template x-for="file in files" :key="file.id">
            <li class="file-row">
              <span class="file-icon" x-html="Icons.file"></span>
              <div class="file-info">
                <div class="file-name" x-text="file.name"></div>
              </div>
              <div class="file-actions">
                <button class="btn btn-icon" @click="$store.files.download(file.id)" title="Download">
                  <span class="icon" x-html="Icons.download"></span>
                </button>
                <button class="btn btn-icon" x-show="canShare" @click="$store.files.share(file.id)" title="Share">
                  <span class="icon" x-html="Icons.share"></span>
                </button>
                <button class="btn btn-icon btn-danger" @click="$store.files.deleteFile(file.id)" title="Delete">
                  <span class="icon" x-html="Icons.trash"></span>
                </button>
              </div>
            </li>
          </template>
        </ul>
      </section>

      <!-- Outbox -->
      <section class="section" x-data="fileSection('outbox')">
        <div class="section-header">
          <h2>
            <span class="icon" x-html="icon"></span>
            <span x-text="title"></span>
            <span class="badge" x-text="count"></span>
          </h2>
        </div>

        <div class="drop-zone"
             :class="{ 'is-dragover': dragover }"
             @dragover.prevent="dragover = true"
             @dragleave.prevent="dragover = false"
             @drop.prevent="dragover = false; onDrop($event)">
          <input type="file" class="drop-zone-input" @change="onSelect($event)" multiple>
          <div class="drop-zone-icon"><span class="icon" x-html="Icons.upload"></span></div>
          <div class="drop-zone-text"><strong>Click to upload</strong> or drag and drop</div>
        </div>

        <template x-if="count === 0">
          <div class="empty-state">
            <span class="empty-state-icon" x-html="Icons.empty"></span>
            <div class="empty-state-text" x-text="'No files in ' + title.toLowerCase()"></div>
          </div>
        </template>

        <ul class="file-list" x-show="count > 0">
          <template x-for="file in files" :key="file.id">
            <li class="file-row">
              <span class="file-icon" x-html="Icons.file"></span>
              <div class="file-info">
                <div class="file-name" x-text="file.name"></div>
              </div>
              <div class="file-actions">
                <button class="btn btn-icon" @click="$store.files.download(file.id)" title="Download">
                  <span class="icon" x-html="Icons.download"></span>
                </button>
                <button class="btn btn-icon btn-danger" @click="$store.files.deleteFile(file.id)" title="Delete">
                  <span class="icon" x-html="Icons.trash"></span>
                </button>
              </div>
            </li>
          </template>
        </ul>
      </section>
    </main>

    <div class="toast"
         :class="{ 'show': $store.files.toast.show }"
         x-text="$store.files.toast.message"></div>

    <!-- Confirmation modal -->
    <div class="modal-overlay"
         x-data="confirmDialog()"
         x-show="open"
         x-cloak
         x-transition.opacity
         @click="cancel()"
         @keydown.escape.window="onEscape()">
      <div class="modal"
           x-transition
           @click.stop
           role="dialog"
           aria-modal="true"
           :aria-label="title">
        <h3 class="modal-title" x-text="title"></h3>
        <p class="modal-body" x-text="message"></p>
        <div class="modal-actions">
          <button class="btn btn-ghost" type="button" @click="cancel()">Cancel</button>
          <button class="btn"
                  :class="danger ? 'btn-danger' : 'btn-primary'"
                  type="button"
                  x-ref="accept"
                  @click="accept()"
                  x-text="danger ? 'Delete' : 'Confirm'"></button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>