-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
44 lines (37 loc) · 2.8 KB
/
index.html
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="">
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark">
<meta name="author" content="chase ottofy">
<meta name="description" content="Convert CSS variable colors in bulk.">
<meta name="keywords" content="css, invert, invert-css, color-conversion, css-utility, invert-colors, invert-css-vars, ui-tool">
<title>invert-css</title>
</head>
<body class="body">
<header class="header">
<div class="hc1">
<h1>invert</h1>
<h2>css vars</h2>
</div>
<div class="hc2">
<button class="run-btn" aria-label="button">Run</button>
<button class="float-copy" aria-label="button"><svg fill=none height=24 shape-rendering=geometricPrecision stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=1.5 viewBox="0 0 24 24" width=24 style=color:var(--geist-foreground);width:24px;height:24px><path d="M6 17C4.89543 17 4 16.1046 4 15V5C4 3.89543 4.89543 3 6 3H13C13.7403 3 14.3866 3.4022 14.7324 4M11 21H18C19.1046 21 20 20.1046 20 19V9C20 7.89543 19.1046 7 18 7H11C9.89543 7 9 7.89543 9 9V19C9 20.1046 9.89543 21 11 21Z"/></svg></button>
<button class="float-reset" aria-label="button"><svg class=with-icon_icon__MHUeb data-testid=geist-icon fill=none height=24 shape-rendering=geometricPrecision stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=1.5 viewBox="0 0 24 24" width=24 style=color:var(--geist-foreground);width:24px;height:24px><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg></button>
<a href="https://github.com/chaseottofy/invert-css-variables" class="github-link" target="_blank"><svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:var(--geist-foreground);width:24px;height:24px"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg></a>
</div>
</header>
<main class="main">
<div class="input-wrapper" data-title="INPUT (variable form only)">
<textarea name="textinput" id="textinput" cols="30" rows="10" class="textinput" autocapitalize=false spellcheck=false></textarea>
</div>
<div class="output-wrapper" data-title="OUTPUT">
<div class="textoutput"></div>
</div>
</main>
<script type="module" src="/src/main.ts"></script>
</body>
</html>