vextor/index.html at main · nsitu/vextor · 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
97
98
99
100
101
102
103
104
105
106
107
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link
    rel="icon"
    type="image/svg+xml"
    href="/play.svg"
  />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  />
  <title>Vextor</title>
  <style>
    footer {
      text-align: center;
      margin-top: 2rem;
      padding: 1rem;
      color: #666;
      font-size: 0.9rem;
    }

    footer a {
      color: #4CAF50;
      text-decoration: none;
    }

    footer a:hover {
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <div id="app"><img
      src="./vextor.svg"
      alt="Vextor"
      class="logo"
    />
    <h4>Convert Text to Vector Paths</h4>
    <div class="container">

      <div class="input-section">
        <label for="textInput">Enter your text:</label>
        <input
          type="text"
          id="textInput"
          placeholder="Type something..."
        />

        <div class="font-upload">
          <label for="fontFile">Drag & Drop Font File or Click to Browse</label>
          <input
            type="file"
            id="fontFile"
            accept=".ttf,.otf,.woff,.woff2"
          />
          <span id="fontStatus">No font uploaded (using fallback)</span>
          <small style="color: #888; display: block; margin-top: 5px;">Supports: .ttf, .otf, .woff, .woff2</small>
        </div>

        <div class="controls">
          <label for="fontSize">Font Size:</label>
          <input
            type="range"
            id="fontSize"
            min="12"
            max="48"
            value="16"
          />
          <span id="fontSizeValue">16px</span>

          <label for="colorPicker">Text Color:</label>
          <input
            type="color"
            id="colorPicker"
            value="#333333"
          />
        </div>
      </div>
      <div class="svg-container">
        <div id="svgOutput"></div>
        <div
          class="download-section"
          id="downloadSection"
        >
          <button id="downloadBtn">Download SVG</button>
        </div>
      </div>
    </div>
  </div>
  <footer>
    Vextor was made by <a href="https://nsitu.ca">Harold</a> using <a
      href="https://www.anthropic.com/claude/sonnet">Claude Sonnet 4</a>. Text to SVG powered by <a
      href="https://www.npmjs.com/package/svg-text-to-path"
    >svg-text-to-path</a>.
  </footer>

  <script
    type="module"
    src="/src/main.js"
  ></script>
</body>

</html>