freewrite/index.html at main · KnextKoder/freewrite · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Freewrite</title>
  <link rel="stylesheet" href="generated/styles.css">
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">
</head>
<body>
  <div class="relative flex h-screen w-full">
    <div class="relative m-0 flex h-full flex-1 flex-col overflow-hidden rounded-none bg-[var(--bg-color)]">
      <div class="relative flex flex-1 justify-center overflow-hidden py-5">
        <div id="placeholder" class="placeholder pointer-events-none absolute left-1/2 top-1/2 text-[18px]" style="transform: translate(-50%, -50%);">Begin writing</div>
        <textarea id="editor" class="editor mx-auto h-full w-full max-w-[800px] resize-none border-none bg-transparent px-5 py-[30px] text-[18px] leading-[1.6] outline-none" spellcheck="false"></textarea>
      </div>

      <div class="bottom-toolbar flex select-none items-center justify-between border-t border-[var(--toolbar-border)] bg-[var(--toolbar-bg)] px-5 py-[15px] text-[13px] text-[var(--control-text)]">
        <div class="left-controls flex items-center">
          <span id="font-size-btn" class="control-item flex cursor-pointer items-center">18px</span>
          <span class="control-separator mx-[5px]">•</span>
          <span id="font-btn" class="control-item flex cursor-pointer items-center">Lato</span>
          <span class="control-separator mx-[5px]">•</span>
          <span id="system-font-btn" class="control-item flex cursor-pointer items-center">System</span>
          <span class="control-separator mx-[5px]">•</span>
          <span id="serif-font-btn" class="control-item flex cursor-pointer items-center">Serif</span>
          <span class="control-separator mx-[5px]">•</span>
          <span id="random-font-btn" class="control-item flex cursor-pointer items-center">Random [Noto Serif Kannada]</span>
        </div>
        <div class="right-controls flex items-center">
          <span id="timer-btn" class="control-item flex cursor-pointer items-center">15:00</span>
          <span class="control-separator mx-[5px]">•</span>
          <span id="theme-btn" class="control-item flex cursor-pointer items-center">Dark Mode</span>
          <span class="control-separator mx-[5px]">•</span>
          <span id="chat-btn" class="control-item flex cursor-pointer items-center">Chat</span>
          <span class="control-separator mx-[5px]">•</span>
          <span id="fullscreen-btn" class="control-item flex cursor-pointer items-center">Exit Fullscreen</span>
          <span class="control-separator mx-[5px]">•</span>
          <span id="new-entry-btn" class="control-item flex cursor-pointer items-center">New Entry</span>
          <span class="control-separator mx-[5px]">•</span>
          <span id="history-btn" class="control-item flex cursor-pointer items-center"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></span>
        </div>
      </div>

      <div id="font-size-popup" class="popup absolute bottom-[60px] left-5 z-[1000] rounded border border-[var(--popup-border)] bg-[var(--popup-bg)]">
        <div class="popup-content flex flex-col p-[10px]">
          <button class="size-option border-none bg-transparent px-[15px] py-2 text-left text-[14px]" data-size="16">16px</button>
          <button class="size-option border-none bg-transparent px-[15px] py-2 text-left text-[14px]" data-size="18">18px</button>
          <button class="size-option border-none bg-transparent px-[15px] py-2 text-left text-[14px]" data-size="20">20px</button>
          <button class="size-option border-none bg-transparent px-[15px] py-2 text-left text-[14px]" data-size="22">22px</button>
          <button class="size-option border-none bg-transparent px-[15px] py-2 text-left text-[14px]" data-size="24">24px</button>
          <button class="size-option border-none bg-transparent px-[15px] py-2 text-left text-[14px]" data-size="26">26px</button>
        </div>
      </div>

      <div id="sidebar" class="sidebar is-hidden absolute right-0 top-0 z-[1000] h-full w-[250px] overflow-y-auto border-l border-black/5 bg-[var(--sidebar-bg)]">
        <div class="sidebar-header flex items-center justify-between border-b border-black/10 p-[15px]">
          <h2 class="text-[16px] font-normal">Entries</h2>
          <button id="close-sidebar-btn" class="cursor-pointer border-0 bg-transparent text-[18px] text-[var(--text-color)]">×</button>
        </div>
        <div id="entries-list" class="entries-list py-[10px]"></div>
      </div>
    </div>
  </div>

  <script>require("./generated/renderer.js");</script>
</body>
</html>