static/index.html at main · Runik-3/static · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta property="og:title" content="Runik - Custom e-reader dictionaries">
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://runik.app/assets/runik-kobo.png">
    <meta property="og:url" content="https://runik.app/">
    <meta property="og:description" content="Generate custom e-reader dictionaries for your favourite fictional worlds!">
    <link rel="icon" type="image/x-icon" href="./assets/runik.png">
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
    <title>Runik - Custom e-reader dictionaries</title>
  </head>
  <body>
    <header>
      <div id="logo-container">
        <img id="logo" src="./assets/runik.png" alt="runik logo">
      </div>
      <a target="_blank" href="https://github.com/runik-3/"><img src="./assets/gh.svg" alt="github logo"></a>
    </header>
    <main>
      <div id="hero" class="section">
        <div id="title"><h1>Runik</h1><span id="phonemic">/ˈrü-nik/</span></div>
        <p>a cross-platform desktop app for generating and managing custom e-reader dictionaries. </p>
        <a id="cta-link" class="download-link" href="./download.html">Download</a>
        <a id="learn-more" href="#motivation-container">learn more</a>
      </div>
      <div id="motivation-container" class="split-container section">
        <div class="split-left">
          <h2>Enhance your reading experience!</h2>
          <p id="stay-immersed">Stay immersed in your story with in-text definitions of fictional items, characters, and locations.</p>
        </div>
        <div class="split-right">
          <div id="ereader-border"><img src="./assets/runik-kobo.png" alt="runik running on a kobo"></div>
        </div>
      </div>
      <div id="how-it-works-container" class="section">
          <h2>How it works</h2>
          <ul id="how-it-works-list" class="max-width">
            <div class="how-it-works-graphic-container">
              <div id="wiki-input"></div>
            </div>
            <li><img src="assets/internet.svg" alt="cloud icon">Provide runik with a link to the wiki containing details about the book or series you’re reading.</li>
            <div class="how-it-works-graphic-container">
              <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
            </div>
            <li><img src="assets/cogs.svg" alt="cogs icon">Each page of the wiki is processed and added to a lexicon definitions specific to your book.</li>
            <div class="how-it-works-graphic-container">
              <div id="convert">
                <pre id="convert-text"></pre>
              </div>
            </div>
            <li><img src="assets/device_install.svg" alt="device install icon">Runik converts the dictionary to the correct format and loads it onto your e-reader.</li>
            <div class="how-it-works-graphic-container">
              <div>
                <div id="arrow"></div>
                <div id="definition-container">
                 <div id="defnition-title">
                    <h3>Smaug</h3>
                    <p>Smaug was a fire-drake of the Third Age, considered the last "great" dragon of Middle-earth. He was drawn to the enormous wealth amassed by the Dwarves of the Lonely Mountain during King Thrór's reign.</p>
                 </div>
                </div>
                <p id="book-text">Then <u>Smaug</u> really did laugh—a devastating sound  which shook Bilbo to the floor, while far up in the tunnel the dwarves  huddled together and imagined that the hobbit had come to a sudden and a nasty end. “Revenge!” he snorted, and the light of his eyes lit the  hall from floor to ceiling like scarlet lightning.</p>
              </div>
            </div>
            <li><img src="assets/device.svg" alt="device install icon">Kick back and enjoy reading your book with in-text definitions.</li>
          </ul>
      </div>
    </main>
    <footer>
      <a target="_blank" href="https://github.com/runik-3/"><img src="./assets/gh.svg" alt="github logo"></a>
      <p>runik is open source</p>
    </footer>
    <script src="index.js"></script>
  </body>
</html>