-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
68 lines (68 loc) · 3.81 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
<!DOCTYPE html>
<html>
<head>
<title>Markdown Index Generator - Generate TOC for Markdown Documents</title>
<meta name="google-site-verification" content="AeVmKRkw7AOevev-TKB4NKB9FJCj9JThZEQtd_319U0" />
<meta name="description" content="Generate a Table of Contents (TOC) for your Markdown documents online. This tool generates a TOC with links for all headings and adds it after each content heading.">
<script src="https://cdn.tailwindcss.com"></script>
<style>
@media screen and (max-width: 680px) { /* For screens that are 680 pixels wide or less */
*:focus {
outline: none;
box-shadow: none;
outline: 2px solid transparent;
}
}
@media screen and (max-width: 680px) {
.op, .op:focus, .op.placeholder-shown{
padding: 1rem;
}
}
</style>
<link rel="icon" type="image/x-icon" href="favicon_io/apple-touch-icon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.text-black {
width: 100%;
}
</style>
</head>
<body>
<div class="bg-stone-900 h-screen w-screen text-white flex flex-col items-center justify-stretch gap-4">
<div class="box-border p-4 border-4 bg-white bg-opacity-20 rounded-3xl text-2xl text-center">Online Markdown Index/TOC Generator</div>
<h3>Generates entire content with a TOC for all the headings and adds a link to TOC after each content heading</h3>
<div class="text-black flex gap-4 w-5/6 h-5/6 content ">
<!-- input -->
<div class="flex-col flex-auto flex items-center justify-center gap-2">
<div class="flex flex-auto gap-4">
<button reset class="group relative h-12 w-48 overflow-hidden rounded-lg bg-teal-500 text-lg shadow">
<div class="absolute inset-0 w-3 bg-orange-600 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
<span class="grow-0 relative text-black group-hover:text-white">Reset Content</span>
</button>
<div class="flex flex-col">
<button onclick="openFileUpload()" reset class="group relative h-12 w-48 overflow-hidden rounded-lg bg-indigo-500 text-lg shadow">
<div class="absolute inset-0 w-3 bg-orange-600 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
<span class="grow-0 relative text-black group-hover:text-white">Upload Markdown File</span>
</button>
<!-- <button uploadButton class = "bg-[#0074D9]" type="button" onclick="openFileUpload()">Upload Markdown File</button> -->
<input uploadedFile class = "bg-[#0074D9] no-effect" type="file" id="fileInput" accept=".md" style="display: none;">
</div>
</div>
<!-- <button class="grow-0 bg-orange-600" reset>Reset</button> -->
<textarea paste class="w-full h-full focus:outline-none" placeholder="Paste Markdown Content Here..."></textarea>
</div>
<!-- output -->
<div class="flex flex-col flex-auto items-center justify-center gap-2">
<button copy class="group relative h-12 w-48 overflow-hidden rounded-lg bg-teal-500 text-lg shadow">
<div class="absolute inset-0 w-3 bg-orange-600 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
<span class="grow-0 relative text-black group-hover:text-white">Copy Result</span>
</button>
<!-- <button class="grow-0 bg-orange-600" copy>Copy Result</button> -->
<textarea op class="w-full h-full" placeholder="Output Will Be Displayed Here..."></textarea>
</div>
</div>
<script src="index.js"></script>
<h3>Made for public service by <a href="https://github.com/xmp-er" target="_blank" class="text-xl text-blue-400">xmp-er <i style="font-size:24px" class="fa"></i></a></h3>
</div>
</body>
</html>