-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (150 loc) · 4.97 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Branko Haberkon" />
<meta name="copyright" content="Branko Haberkon" />
<meta
name="description"
content="This app lets you clip your posts (formerly tweets) to fit the 280 characters limit for free tier users on 𝕏 and build a thread."
/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>𝕏 Thread Maker</title>
<!--#region Make it a PWA. -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" sizes="512x512" href="assets/img/pwa/icons/512.png" />
<link rel="apple-touch-icon" href="assets/img/pwa/icons/512.png" />
<link
rel="apple-touch-startup-image"
href="assets/img/pwa/icons/512.png"
/>
<link rel="apple-mobile-web-app-capable" content="yes" />
<meta
name="msapplication-square512x512logo"
content="assets/img/pwa/icons/512.png"
/>
<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content="#2496f4"
/>
<meta
name="theme-color"
media="(prefers-color-scheme: dark)"
content="#104570"
/>
<link rel="manifest" href="manifest.json" />
<!--#endregion -->
<link rel="stylesheet" href="./assets/styles/toastify.css" />
<link rel="stylesheet" href="./assets/styles/reset.css" />
<link rel="stylesheet" href="./assets/styles/custom.css" />
<!-- #region Zero MD -->
<!-- Lightweight client-side loader that feature-detects and load polyfills only when necessary -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>
<!-- Load the element definition -->
<script
type="module"
src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"
></script>
<!--#endregion -->
</head>
<body>
<header>
<h1>Thread Maker for 𝕏</h1>
<nav>
<button popovertarget="tutorial">How to use?</button>
<div id="tutorial" popover>
<button onclick="tutorial.togglePopover()">×</button>
<article>
<zero-md src="README.md"></zero-md>
</article>
</div>
</nav>
</header>
<main>
<form>
<h2>Input:</h2>
<fieldset>
<legend>Post</legend>
<section>
<h3>Original text:</h3>
<textarea
name="post"
id="post_input"
cols="30"
rows="10"
placeholder="Enter your post here"
required
></textarea>
</section>
<section>
<h3>Stats:</h3>
<p>Char count: <span id="char_count">0</span></p>
<p>Trail length: <span id="trail_length">0</span></p>
<p>Estimated posts: <span id="estimated_posts">0</span></p>
</section>
</fieldset>
<fieldset>
<legend>Trail</legend>
<label aria-roledescription="button" role="button">
<input type="radio" name="trail" value="👇🏼" checked />
<span>👇🏼</span>
</label>
<label aria-roledescription="button" role="button">
<input type="radio" name="trail" value="..." />
<span>...</span>
</label>
<label aria-roledescription="button" role="button">
<input type="radio" name="trail" value="(next)" />
<span>(next)</span>
</label>
<label aria-roledescription="button" role="button">
<input type="radio" name="trail" id="paginator" value="00/00" />
<span>X/Y</span>
</label>
<label aria-roledescription="button" role="button">
<input type="radio" name="trail" id="custom" />
<span>Custom</span>
<input
type="text"
id="custom_text"
placeholder="Custom trail"
disabled
/>
</label>
</fieldset>
<button>Thread 🧵</button>
</form>
<section>
<h2>Output:</h2>
<div id="output-container"></div>
</section>
</main>
<footer>
<span>
<a href="http://www.branko.com.ar" target="_blank" rel="noopener noreferrer">
Branko HBK
</a>
</span>
<span>2024</span>
<span>
Liked it?
<span>
⭐ on
<a
href="https://github.com/brankohbk/postclipper"
target="_blank"
rel="noopener noreferrer"
>Github</a
>
</span>
</span>
</footer>
<script src="./pwa.js"></script>
<script src="./service-worker.js"></script>
<script src="./scripts/toastify.js"></script>
<script src="./scripts/main.js"></script>
</body>
</html>