-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (94 loc) · 4.77 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A tool to translate tachyons classes to classic css, so that you can use the power of tachyons to prototype fast and then write back plain old css">
<meta name="keywords" content="tachyons, developers tools, translate tachyons css">
<meta name="topic" content="tachyons css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/>
<title>Tachyons Translate</title>
<script type="module" src="./src/index.js"></script>
</head>
<body class="w-100 vh-100 bg-white pa4 courier light-purple">
<div class="flex flex-column bg-washed-blue" style="height: calc(100% - 82px);">
<header class="flex items-center justify-center w-100">
<div class="w-50 flex flex-column items-center justify-center">
<img src="./img/tt.png" />
<h1 class="ma0 pv1">
Tachyons Translate
</h1>
<blockquote>
<a href="https://unpkg.com/[email protected]/css/tachyons.css" class="courier" style="color: #206BFF;">tachyons stylesheet v4.10.0</a>
</blockquote>
</div>
<div class="w-50">
<div class="flex flex-column w-100 pa4 bg-white">
<div class="flex justify-start items-center mb2">
<div class="br-100 bg-white b--light-purple w2 h2 ba flex justify-center items-center">1</div>
<span class="ml3 f6">Type the classes to extract their rules</span>
</div>
<div class="flex justify-start items-center mb2">
<div class="br-100 bg-white b--light-purple w2 h2 ba flex justify-center items-center">2</div>
<span class="ml3 f6">Separate the class names with one wihtespace</span>
</div>
<div class="flex justify-start items-center mb2">
<div class="br-100 bg-white b--light-purple w2 h2 ba flex justify-center items-center">3</div>
<span class="ml3 f6">See the extracted rules inside the css snippet at the right</span>
</div>
<div class="flex justify-start items-center mb2">
<div class="br-100 bg-white b--light-purple w2 h2 ba flex justify-center items-center">4</div>
<span class="ml3 f6">The new styles are automatically copied to your clipboard in background</span>
</div>
</div>
</div>
</header>
<main class="w-100 flex-auto">
<div class="h-100 flex justify-around items-center pa4 white" style="background-image: linear-gradient(to bottom right, #206BFF, #a463f2);">
<div class="h-100 w-50 flex flex-column items-center">
<h3>Type here the class that you want to translate:</h3>
<div class="w-90 h-100 bg-black-90 shadow-3 br4">
<p class="pa3">
<span>
<h1 class="
</span>
<input
class="bn h1 shadow-1 w-50"
type="text"
id="translate"
/>
<span>
">
</span>
<span class="db mv2 ph3 lh-copy">
Type or paste here the name of the class/es that you want to translate
</span>
<span>
</h1>
</span>
</p>
</div>
</div>
<div class="h-100 w-50 flex flex-column items-center">
<h3>Copy the new css class and paste it in your code 🚀️</h3>
<div class="w-90 h-100 bg-black-90 shadow-3 br4">
<p class="pa3" id="copy-to-clipboard">
<span>.tachyonsIsAwesome {</span>
<span id="new-rules"></span>
<span>}</span>
</p>
</div>
</div>
</div>
</main>
</div>
<footer class="flex justify-between items-center bg-washed-blue pa4 bt bw4 b--white black-80">
<span> Made for fun and profit by <a href="https://www.github.com/glippi">glippi</a> - source code at <a href="https://github.com/tachyons-toolbox/tachyons-translate">tachyons-translate</a></span>
<span class="f7"> <a target="_blank" href="https://icons8.com/icons/set/google-translate">Google Translate icon</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a> </span>
</footer>
<script>var clicky_site_ids = clicky_site_ids || []; clicky_site_ids.push(101247264);</script>
<script async src="//static.getclicky.com/js"></script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/101247264ns.gif" /></p></noscript>
</body>
</html>