text-trove/index.html at main · D-Simone/text-trove · 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">
  <title>Text Trove</title>
  <link href="/css/style.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <!-- Template Form -->
    <div class="card">
      <form id="templateForm" novalidate>
        <div class="saveTemplate">
          <svg class="inputIcon" height="20" xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
            <path
              d="M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64h96v80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64z" />
          </svg>
          <input type="text" id="templateTitle" placeholder="Enter your title here..." required>
          <div class="categories">
            <button type="submit">
              <svg fill="#000" height="20" width="20" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                <path
                  d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" />
              </svg>
            </button>
            <button id="displayClipboardButton">
              <svg fill="#000" height="20" width="20" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                <path
                  d="M192 0c-41.8 0-77.4 26.7-90.5 64H64C28.7 64 0 92.7 0 128V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H282.5C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM112 192H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z" />
              </svg>
            </button>
            <label class="containerbox">
              <input type="checkbox" id="sanitizeHTML">
              <div class="checkmark"></div>
            </label>
          </div>
        </div>
        <div style="padding: 0 20px;">
          <div id="editor"></div>
          <textarea id="templateContent" name="templateContent"></textarea>
        </div>
      </form>
    </div>
    <!-- Template Table -->
    <div class="card">
      <div class="search-container">
        <svg class="inputIcon" height="20" xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
          <path
            d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" />
        </svg>
        <input id="searchInput" placeholder="Search for a quick action" type="search">
      </div>
      <div class="results">
        <p class="label">Saved Templates</p>
        <div id="resultsContainer"></div>
      </div>
    </div>
    <div id="clipboardModal" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <h3 class="model-header">Clipboard Content</h3>
        <textarea id="clipboardContent" readonly></textarea>
      </div>
    </div>
    <!-- Vendor JS -->
    <script src="vendor/tinymce/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
    <!-- Bundled JS -->
    <script src="./dist/bundle.js"></script>
</body>

</html>