olho/index.html at main · CarlasHub/olho · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Olho — Capture, Record, Annotate</title>
    <link rel="icon" href="favicon.ico" />
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header class="hero">
      <nav class="nav">
        <div class="logo">Olho</div>
        <div class="nav-actions">
          <a href="#features">Features</a>
          <a href="#privacy">Privacy</a>
          <a href="#install" class="button">Install</a>
        </div>
      </nav>

      <div class="hero-content">
        <div>
          <p class="eyebrow"><img class="eyebrow-icon" src="icons/icon-32.png" alt="" aria-hidden="true" /> Chrome Extension</p>
          <h1>Capture, record, and annotate without leaving your browser.</h1>
          <p class="lead">
            Olho is a local-first capture toolkit built for speed and focus. Screenshot pages, record
            the screen, and annotate in a minimal editor with full control.
          </p>
          <div class="hero-actions">
            <a class="button primary" href="#install">Get Started</a>
            <a class="button ghost" href="#features">See Features</a>
          </div>
        </div>
        <div class="hero-card" aria-label="Product preview">
          <div class="placeholder">Editor / Gallery Preview</div>
        </div>
      </div>
    </header>

    <main>
      <section id="features" class="section">
        <h2>Feature Breakdown</h2>
        <div class="grid">
          <article class="card">
            <h3>Fast Capture</h3>
            <p>Visible or full-page screenshots with retina scaling support.</p>
          </article>
          <article class="card">
            <h3>Screen Recording</h3>
            <p>Record the current tab or full screen with optional microphone input.</p>
          </article>
          <article class="card">
            <h3>Minimal Editor</h3>
            <p>Annotate with pen, shapes, blur, crop, resize, and export controls.</p>
          </article>
          <article class="card">
            <h3>Local Gallery</h3>
            <p>Organize folders, rename items, download, and copy to clipboard.</p>
          </article>
        </div>
      </section>

      <section class="section">
        <h2>Screenshots</h2>
        <div class="screenshots">
          <div class="placeholder">Popup UI</div>
          <div class="placeholder">Editor View</div>
          <div class="placeholder">Gallery View</div>
        </div>
      </section>

      <section id="privacy" class="section">
        <h2>Privacy Statement</h2>
        <p>
          Olho is local-only. Captures, recordings, and annotations stay on your device. The extension
          does not collect analytics, does not sync to external servers, and does not transmit data.
        </p>
      </section>

      <section id="install" class="section">
        <h2>Installation</h2>
        <ol>
          <li>Download the repository or release package.</li>
          <li>Open Chrome and go to <code>chrome://extensions</code>.</li>
          <li>Enable Developer Mode.</li>
          <li>Click “Load unpacked” and select the project folder.</li>
        </ol>
      </section>
    </main>

    <footer class="footer">
      <p>Olho — Local-first capture for modern workflows.</p>
    </footer>
  </body>
</html>