Obsidian.brain/index.html at main · TomHacker69/Obsidian.brain · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Obsidian.brain | Knowledge Graph Workspace</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div id="vanta-bg" class="app-bg"></div>

  <div class="container">
    <header class="hero">
      <div class="hero-left">
        <p class="eyebrow">Obsidian.brain</p>
        <h1>Knowledge Graph Workspace</h1>
        <p class="hero-text">
          Capture notes, connect ideas, discover backlinks, and explore your thoughts visually.
        </p>
      </div>

      <div class="hero-actions">
        <button id="newNoteBtn" class="primary-btn">+ New Note</button>
      </div>
    </header>

    <section class="stats">
      <div class="stat-card">
        <span class="stat-label">Notes</span>
        <strong id="notesCount">0</strong>
      </div>
      <div class="stat-card">
        <span class="stat-label">Connections</span>
        <strong id="connectionsCount">0</strong>
      </div>
      <div class="stat-card">
        <span class="stat-label">Visible</span>
        <strong id="visibleCount">0</strong>
      </div>
      <div class="stat-card">
        <span class="stat-label">Tags</span>
        <strong id="tagsCount">0</strong>
      </div>
    </section>

    <main class="main-grid">
      <aside class="panel sidebar-panel">
        <h2>Search Notes</h2>
        <input id="searchInput" type="text" placeholder="Search title, content, tags..." />

        <div class="section-head">
          <h3>All Notes</h3>
        </div>

        <div id="notesList" class="notes-list"></div>
      </aside>

      <section class="panel center-panel">
        <div class="graph-head">
          <div>
            <h2>Graph View</h2>
            <p class="panel-subtitle">Visual map of connected ideas</p>
          </div>
          <button id="resetGraphBtn" class="ghost-btn">Reset View</button>
        </div>

        <div class="graph-wrapper">
          <svg id="graphSvg" viewBox="0 0 900 520"></svg>
        </div>

        <div id="editorPanel" class="editor hidden">
          <div class="editor-head">
            <h3 id="editorTitle">Create Note</h3>
          </div>

          <label>Title</label>
          <input id="titleInput" type="text" placeholder="Enter note title" />

          <label>Content</label>
          <textarea id="contentInput" placeholder="Write markdown here... Use [[Note Title]] to link notes."></textarea>

          <label>Tags</label>
          <input id="tagsInput" type="text" placeholder="AI, Research, Ideas" />

          <label>Connect Related Notes</label>
          <div id="linkSelector" class="link-selector"></div>

          <div class="editor-actions">
            <button id="saveBtn" class="primary-btn">Save Note</button>
            <button id="cancelBtn" class="ghost-btn">Cancel</button>
          </div>
        </div>
      </section>

      <aside class="panel details-panel">
        <h2>Selected Note</h2>
        <div id="selectedNoteContent" class="selected-note-content"></div>

        <div class="sub-panel">
          <h3>Linked Notes</h3>
          <div id="linkedNotes" class="mini-list"></div>
        </div>

        <div class="sub-panel">
          <h3>Backlinks</h3>
          <div id="backlinks" class="mini-list"></div>
        </div>

        <div class="sub-panel">
          <h3>AI Suggestions</h3>
          <div id="aiSuggestions" class="mini-list"></div>
        </div>
      </aside>
    </main>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.21/vanta.net.min.js"></script>
  <script>
  VANTA.NET({
    el: "#vanta-bg",
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.00,
    minWidth: 200.00,
    scale: 1.00,
    scaleMobile: 1.00,
    backgroundColor: 0x050912,
    color: 0x8b5cf6,
    points: 20,
    maxDistance: 24.00,
    spacing: 18.00,
    showDots: false,
    backgroundAlpha: 0.96
  })
  </script>
  <script src="script.js"></script>
  <footer class="footer">
  Made with ❤️ by <span class="footer-name">Tomhacker69</span>
</footer>
</body>
</html>