typehere/index.html at main · imaegg11/typehere · 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
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="index.css" />
        <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
        <script src="https://cdn.tailwindcss.com"></script>
        <script>
            tailwind.config = {
                corePlugins: {
                    preflight: fal,
                },
                theme: {
                    fontFamily: {
                        "noto": ["Noto Sans"]
                    }
                }
            }
        </script>
    </head>
    <body class="color m-0">
        <textarea onkeydown="updateStorage(event)" id="textarea" class="font-mono w-full outline-none border-none resize-none m-0 bg-inherit p-4 text-lg"></textarea>
        <dialog class="hidden fixed z-10 w-2/6 max-h-72 bg-inherit text-inherit border-none rounded-lg grid auto-rows-min overflow-y-hidden p-4" tabindex="-1" id="cmdP">
            <div>
                <input class="color-cmdP w-full h-12 px-5 py-3 text-base rounded-lg outline-none" id="cmdP-input" onkeyup="handleSearch()" type="text" placeholder="Search for notes">
                <p id="notes-text" class="text-sm mx-auto my-2 select-none w-11/12">Quick Access</p>
            </div>
            <div id="notes" class="hide-scrollbar h-max max-h-40 overflow-y-auto my-0 mx-auto w-[95%]"></div>
        </dialog>
        <dialog class="hidden w-1/2 h-3/5 border-none bg-inherit rounded-lg text-inherit" id="settings" tabindex="-1">
            <div class="p-4 h-full text-inherit border-none bg-inherit rounded-lg grid grid-cols-[29.5%_1%_69.5%]">
                <div id="settings-list" class="h-full p-[0.8rem]">
                </div>
                <div class="inline-block h-full w-px self-stretch bg-[var(--selected-bg)]"></div>
                <div id="settings-list-content" class="h-full py-[0.6rem] px-[13%] overflow-y-auto">
                </div>
            </div>

            <div id="failure" class="flex justify-center w-full opacity-0 transition-all duration-500">
                <div role="alert" class="alert alert-error w-1/3 fixed top-4 m-auto select-none">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-6 w-6 shrink-0 stroke-current"
                      fill="none"
                      viewBox="0 0 24 24">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <p id="failure-text">Error! Data Failed To Send. Check Console</p>
                  </div>
            </div>
            <div id="success" class="flex justify-center w-full opacity-0 transition-all duration-500">
                <div role="alert" class="alert alert-success w-1/3 fixed top-4 m-auto select-none">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-6 w-6 shrink-0 stroke-current"
                      fill="none"
                      viewBox="0 0 24 24">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <p id="success-text">Data Sent Successfully!</p>
                  </div>
            </div>

        </dialog>
        <div id="bottom" class="color-bottom height-zero h-[2.3rem] absolute bottom-0 w-full flex items-center justify-between">
            <input type="text" id="current-note-name" class="text-inherit text-base w-1/2 text-ellipsis overflow-hidden border-none bg-transparent ml-2 active:border-none active:outline-none focus:border-none focus:outline-none" onkeydown="update_name(event)">
            <p id="details" class="font-noto text-base mr-2"></p>
        </div>
    </body>

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