hyper-note / web / index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hypernote</title>
  <script src="web/js/theme.js"></script>
  <link rel="stylesheet" href="web/css/app.css?v=24">
  <link rel="stylesheet" href="web/vendor/toastui-editor.min.css">
  <link rel="stylesheet" href="web/vendor/jspreadsheet.css">
  <link rel="stylesheet" href="web/vendor/jsuites.css">
</head>
<body>
  <div id="app">
    <!-- Top bar -->
    <header id="topbar">
      <div class="topbar-left">
        <button id="sidebar-toggle" title="Toggle sidebar">&#9776;</button>
        <a href="#/" class="logo">Hypernote</a>
        <nav id="breadcrumb"></nav>
      </div>
      <div class="topbar-right">
        <button id="search-toggle" class="search-toggle" title="Search">&#128269;</button>
        <div class="search-box">
          <input type="text" id="search-input" placeholder="Search notes..." autocomplete="off">
        </div>
        <button id="directory-toggle" class="directory-toggle" title="User directory">&#128101;</button>
        <a href="#/admin" id="admin-link" class="admin-link" title="Admin Panel" style="display:none">&#9881;</a>
        <a href="#/profile" id="profile-link" class="profile-link" title="Profile"></a>
      </div>
    </header>

    <div id="layout">
      <!-- Sidebar -->
      <aside id="sidebar">
        <div class="sidebar-section">
          <div class="sidebar-header">
            <span>My Notebooks</span>
            <button id="btn-new-notebook" title="New notebook">+</button>
          </div>
          <ul id="notebook-list"></ul>
        </div>
      </aside>

      <!-- Main content -->
      <main id="main">
        <div id="view-home" class="view">
          <h1>Recent Notes</h1>
          <p class="text-muted">Loading...</p>
        </div>

        <div id="view-notebook" class="view" style="display:none">
          <div class="notebook-header">
            <div class="notebook-header-row">
              <h1 id="notebook-title"></h1>
              <button id="btn-delete-notebook" class="btn-sm btn-danger" title="Delete notebook">Delete Notebook</button>
            </div>
            <div class="notebook-meta" id="notebook-meta"></div>
          </div>
          <div id="notebook-notes"></div>
        </div>

        <div id="view-note" class="view" style="display:none">
          <div class="note-toolbar">
            <button id="btn-edit-note">Edit</button>
            <button id="btn-delete-note" class="btn-danger">Delete</button>
            <button id="btn-note-links">Links</button>
            <button id="btn-note-backlinks">Backlinks</button>
          </div>
          <article id="note-content"></article>
          <div id="note-links-panel" style="display:none"></div>
        </div>

        <div id="view-editor" class="view" style="display:none">
          <div class="editor-toolbar">
            <input type="text" id="editor-title" placeholder="Note title">
            <input type="text" id="editor-tags" placeholder="Tags (comma-separated)">
            <div class="editor-actions">
              <button id="btn-save-note" class="btn-primary">Save</button>
              <button id="btn-cancel-edit">Cancel</button>
            </div>
          </div>
          <div id="editor-container"></div>
        </div>

        <div id="view-search" class="view" style="display:none">
          <h2>Search Results</h2>
          <div id="search-results"></div>
        </div>

        <div id="view-profile" class="view" style="display:none">
          <h2>Profile</h2>
          <div id="profile-content"></div>
        </div>

        <div id="view-admin" class="view" style="display:none">
          <h2>Admin Panel</h2>
          <div id="admin-content"></div>
        </div>
      </main>
    </div>

    <!-- Modals -->
    <div id="modal-overlay" class="modal-overlay" style="display:none">
      <div class="modal" id="modal-content"></div>
    </div>
  </div>

  <!-- Auth setup (legacy bearer token, hidden by default) -->
  <div id="auth-setup" style="display:none">
    <div class="auth-card">
      <h1>Hypernote</h1>
      <p>Enter your admin token to get started.</p>
      <input type="text" id="auth-token-input" placeholder="Paste admin token here">
      <button id="auth-token-save" class="btn-primary">Connect</button>
      <p class="hint">The token was shown when the server first started.</p>
    </div>
  </div>

  <script src="web/vendor/toastui-editor-all.min.js"></script>
  <script src="web/vendor/hls.min.js"></script>
  <script src="web/vendor/jsuites.js"></script>
  <script src="web/vendor/jspreadsheet.js"></script>
  <script src="web/vendor/fullcalendar.min.js"></script>
  <script src="web/js/identity.js?v=25"></script>
  <script src="web/js/api.js?v=23"></script>
  <script src="web/js/markdown.js?v=24"></script>
  <script src="web/js/app.js?v=25"></script>
</body>
</html>