File size: 2,354 Bytes
6245a97
 
 
106541e
cb0e098
 
 
 
106541e
 
cb0e098
 
 
 
6245a97
 
cb0e098
6245a97
cb0e098
 
 
 
 
 
 
106541e
cb0e098
 
 
 
 
 
 
 
 
 
0e15d01
cb0e098
 
 
 
 
 
 
 
 
 
 
 
6245a97
cb0e098
 
106541e
0e15d01
cb0e098
 
 
 
 
 
 
106541e
cb0e098
106541e
0e15d01
cb0e098
6245a97
106541e
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Home</title>

  <!-- Fonts + Icons -->
  <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;600;700&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>

  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <div class="bg"></div>

  <header class="topbar">
    <div class="left">
      <div id="greeting" class="greeting">Hello</div>
      <div class="datetime">
        <span id="date"></span>
        <span aria-hidden="true"></span>
        <span id="clock">--:--:--</span>
      </div>
    </div>
    <div class="right">
      <button id="theme-toggle" class="icon-btn" title="Toggle theme">
        <i class="fa-solid fa-moon"></i>
      </button>
      <button id="notes-toggle" class="icon-btn" title="Notes">
        <i class="fa-solid fa-note-sticky"></i>
      </button>
    </div>
  </header>

  <section class="search">
    <form id="search-form" class="search-bar">
      <i class="fa-solid fa-magnifying-glass"></i>
      <input id="search-input" type="text" placeholder="Search...  ( / or Ctrl+K )" autocomplete="off"/>
      <select id="search-engine" aria-label="Search engine">
        <option value="google">Google</option>
        <option value="duckduckgo">DuckDuckGo</option>
        <option value="youtube">YouTube</option>
        <option value="github">GitHub</option>
      </select>
    </form>
  </section>

  <main class="container">
    <div id="card-grid" class="grid"></div>
  </main>

  <!-- Notes panel (optional, toggled with button or N key) -->
  <aside id="notes-panel" class="notes">
    <div class="notes-header">
      <h3><i class="fa-solid fa-note-sticky"></i> Notes</h3>
      <button class="icon-btn" id="close-notes" onclick="document.getElementById('notes-panel').classList.remove('active')">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
    <textarea placeholder="Quick notes… (stored in your browser)"></textarea>
  </aside>

  <script src="script.js"></script>
</body>
</html>