-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
99 lines (86 loc) · 4.25 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./img/ico/logo.ico" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
<title>Nik-to-Link</title>
</head>
<body class="min-h-screen flex flex-col bg-gray-100">
<header class="w-full flex items-center p-4 bg-gray-100">
<a href=""><img class="w-32 h-auto" src="./img/logo.png" alt="Logo"></a>
<p class="ml-4">BETA</p>
</header>
<main class="flex-grow p-4">
<section class="mb-8">
<h1 class="text-2xl font-bold mb-4">About</h1>
<p>This site was invented to quickly tag people from an Instagram post - in the description with links for YouTube.</p>
<p>The site works with Instagram, YouTube, TikTok and Telegram type link</p>
<h2 class="text-xl font-semibold mt-4 mb-2">Example</h2>
<p class="text-orange-500">Instagram post:</p>
<p>Hana as Niki @kamilla.rst <br>
Tori as Jugwon @msvxl
</p>
<p class="text-orange-500 mt-2">After converter with config "Instagram"</p>
<p>Hana as Niki https://www.instagram.com/kamilla.rst <br>
Tori as Jugwon https://www.instagram.com/msvxl
</p>
<p class="text-orange-500 mt-2">After converter with config "Instagram" and "Only Links"</p>
<p>https://www.instagram.com/kamilla.rst <br>
https://www.instagram.com/msvxl
</p>
</section>
<section id="converter" class="mb-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div class="bg-white p-4 shadow rounded relative" >
<h2 class="text-lg font-semibold mb-2">@NIK</h2>
<button id="clear-btn" class="absolute top-2 right-2 bg-orange-500 text-white px-2 py-1 rounded">Clear</button>
<textarea id="nik-textarea" class="w-full h-56 p-2 border border-gray-300 rounded resize-none"></textarea>
</div>
<div class="bg-white p-4 shadow rounded relative">
<h2 class="text-lg font-semibold mb-2">LINK</h2>
<div id="link-textarea" class="flex flex-col h-56 overflow-y-auto border border-gray-300 rounded p-2">
<button id="link-copy-btn" class="absolute top-2 right-2 bg-orange-500 text-white px-2 py-1 rounded">Copy</button>
<div id="link-text" class="font-normal"></div>
</div>
</div>
</div>
<div class="flex flex-wrap mb-4">
<label class="mr-4">
<input checked type="radio" id="type-link-1" name="typesLink" value="instagram" class="mr-1"> Instagram
</label>
<label class="mr-4">
<input type="radio" id="type-link-2" name="typesLink" value="telegram" class="mr-1"> Telegram
</label>
<label class="mr-4">
<input type="radio" id="type-link-3" name="typesLink" value="youtube" class="mr-1"> YouTube
</label>
<label class="mr-4">
<input type="radio" id="type-link-4" name="typesLink" value="tiktok" class="mr-1"> TikTok
</label>
</div>
<div class="flex flex-wrap mb-4">
<label class="mr-4">
<input class="config-box mr-1" id="without-text" type="checkbox"> Only Links
</label>
<label class="mr-4">
<input class="config-box mr-1" id="clean-link" type="checkbox"> Clean Link
</label>
<label class="mr-4">
<input class="config-box mr-1" id="replace-socials-links" type="checkbox"> Replace Social Links
</label>
</div>
<div class="text-center">
<button id="get-link-button" class="bg-orange-500 text-white px-4 py-2 rounded">GET LINK</button>
</div>
</section>
</main>
<footer class="w-full bg-gray-800 p-4 text-center text-white">
<p>© Made by DenisGasilo <a target="_blank" href="https://github.com/DenisGas/nik-to-link" class="text-orange-500 hover:text-orange-300">Project Page</a></p>
</footer>
<div id="message-container" class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-4 border border-gray-300 rounded shadow hidden opacity-0 transition-opacity duration-300"></div>
<script defer src="./js/main.js"></script>
</body>
</html>