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">

  <!-- Set the theme before paint to avoid a flash of the wrong theme. -->
  <script>
    (function () {
      try {
        var t = localStorage.getItem('yd.theme') || 'system';
        var dark = t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
        document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
      } catch (e) {}
    })();
  </script>

  <!-- Components register themselves on `alpine:init`; Alpine is loaded last. -->
  <script defer src="/components/icons.js"></script>
  <script defer src="/version.js"></script>
  <script defer src="/components/i18n.js"></script>
  <script defer src="/components/theme.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>
      <div class="header-actions">
        <button class="btn btn-icon" type="button"
                @click="$store.locale.toggle()"
                :title="$t('lang.label')" :aria-label="$t('lang.label')">
          <span class="icon" x-html="Icons.globe"></span>
        </button>
        <button class="btn btn-icon" type="button"
                @click="$store.theme.cycle()"
                :title="$t('theme.' + $store.theme.mode)" :aria-label="$t('theme.' + $store.theme.mode)">
          <span class="icon" x-html="Icons[$store.theme.icon()]"></span>
        </button>
        <button class="btn btn-ghost btn-logout" @click="$store.files.logout()">
          <span class="icon" x-html="Icons.logout"></span>
          <span x-text="$t('nav.logout')"></span>
        </button>
      </div>
    </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 x-text="$t('dropzone.click')"></strong> <span x-text="$t('dropzone.rest')"></span></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="$t('empty.' + dir)"></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="$t('action.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="$t('action.share')">
                  <span class="icon" x-html="Icons.share"></span>
                </button>
                <button class="btn btn-icon btn-danger" @click="$store.files.deleteFile(file.id)" :title="$t('action.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 x-text="$t('dropzone.click')"></strong> <span x-text="$t('dropzone.rest')"></span></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="$t('empty.' + dir)"></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="$t('action.download')">
                  <span class="icon" x-html="Icons.download"></span>
                </button>
                <button class="btn btn-icon btn-danger" @click="$store.files.deleteFile(file.id)" :title="$t('action.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="$t(title)">
        <h3 class="modal-title" x-text="$t(title)"></h3>
        <p class="modal-body" x-text="$t(message)"></p>
        <div class="modal-actions">
          <button class="btn btn-ghost" type="button" @click="cancel()" x-text="$t('confirm.cancel')"></button>
          <button class="btn"
                  :class="danger ? 'btn-danger' : 'btn-primary'"
                  type="button"
                  x-ref="accept"
                  @click="accept()"
                  x-text="$t(danger ? 'confirm.delete' : 'confirm.confirm')"></button>
        </div>
      </div>
    </div>

    <footer class="app-footer">
      <span class="app-footer-brand">yDropbox</span>
      <span class="app-footer-version" x-text="'v' + YDROPBX_VERSION"></span>
    </footer>
  </div>
</body>
</html>