-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (163 loc) · 6.85 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
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="shortcut icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='bg' gradientUnits='userSpaceOnUse' x1='0%25' y1='0%25' x2='100%25' y2='0%25' gradientTransform='rotate(45)'%3E%3Cstop offset='0%25' stop-color='%23FBDA61' stop-opacity='0'/%3E%3Cstop offset='100%25' stop-color='%23FF5ACD' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23bg)' width='22' height='22' x='1' y='1' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='0.5' rx='1'%3E%3C/rect%3E%3C/svg%3E"
type="image/svg+xml"
/>
<title>Генерация фейковых превью ссылок</title>
<meta
name="description"
content="Сервис фейковых превью ссылок для социальных сетей и мессенджеров"
/>
<meta
name="keywords"
content="social network,twitter,vk,vkontakte,discord,telegram,fake preview,prank,joke"
/>
<meta property="og:title" content="Генерация фейковых превью ссылок" />
<meta property="twitter:title" content="Генерация фейковых превью ссылок" />
<meta
property="og:description"
content="Сервис фейковых превью ссылок для социальных сетей и мессенджеров"
/>
<meta
property="twitter:description"
content="Сервис фейковых превью ссылок для социальных сетей и мессенджеров"
/>
<meta property="og:url" content="https://link-to.pages.dev/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://link-to.pages.dev/og/og.png" />
<meta
property="twitter:image"
content="https://link-to.pages.dev/og/og.png"
/>
<meta property="twitter:card" content="summary_large_image" />
<meta name="theme-color" content="#000000" />
<link rel="canonical" href="https://link-to.pages.dev" />
</head>
<body>
<header>
<h1>Link to</h1>
<nav>
<a href="#usage">Применение</a>
/
<a href="#create">Создать такую ссылку</a>
/
<a href="#preview">Предпросмотр</a>
</nav>
</header>
<section role="main">
<h2 id="usage">Применение</h2>
<p>
Вы можете отправить вашему другу ссылку, якобы ведущую на сайт "Милых
котят", но вместо них он получит что-то более интересное
<span role="img" aria-label="Подмигивает">😉</span>
</p>
<p>Круто, правда?</p>
</section>
<br />
<section>
<h2 id="create">Создать такую ссылку</h2>
<form>
<p>
<label for="title">Заголовок</label>
<br />
<input
required
id="title"
type="text"
name="title"
autocomplete="off"
minlength="1"
maxlength="70"
/>
</p>
<p>
<label for="description">Описание</label>
<br />
<input
required
id="description"
type="text"
name="description"
autocomplete="off"
minlength="1"
maxlength="150"
/>
</p>
<p>
<label for="image">Картинка</label>
<br />
<input
required
id="image"
type="text"
name="image"
autocomplete="off"
/>
</p>
<p>
<label for="redirect">Куда будет происходить переход</label>
<br />
<input
required
id="redirect"
type="text"
name="redirect"
autocomplete="off"
/>
</p>
<p>
<button type="button">Создать</button>
<button type="reset">Сбросить форму</button>
</p>
</form>
<div id="output"></div>
</section>
<section>
<h2 id="preview">Предпросмотр</h2>
<div class="metaInfo">
<div class="previews">
<article class="twitter">
<h3>Twitter</h3>
<div class="metaInner for-twitter">
<div class="twitterCard largeImage">
<div class="twitterLargeImage"></div>
<div class="twitterTextBlock">
<h2></h2>
<p></p>
<span>
<svg viewBox="0 0 24 24">
<path
d="M11.96 14.945c-.067 0-.136-.01-.203-.027-1.13-.318-2.097-.986-2.795-1.932-.832-1.125-1.176-2.508-.968-3.893s.942-2.605 2.068-3.438l3.53-2.608c2.322-1.716 5.61-1.224 7.33 1.1.83 1.127 1.175 2.51.967 3.895s-.943 2.605-2.07 3.438l-1.48 1.094c-.333.246-.804.175-1.05-.158-.246-.334-.176-.804.158-1.05l1.48-1.095c.803-.592 1.327-1.463 1.476-2.45.148-.988-.098-1.975-.69-2.778-1.225-1.656-3.572-2.01-5.23-.784l-3.53 2.608c-.802.593-1.326 1.464-1.475 2.45-.15.99.097 1.975.69 2.778.498.675 1.187 1.15 1.992 1.377.4.114.633.528.52.928-.092.33-.394.547-.722.547z"
></path>
<path
d="M7.27 22.054c-1.61 0-3.197-.735-4.225-2.125-.832-1.127-1.176-2.51-.968-3.894s.943-2.605 2.07-3.438l1.478-1.094c.334-.245.805-.175 1.05.158s.177.804-.157 1.05l-1.48 1.095c-.803.593-1.326 1.464-1.475 2.45-.148.99.097 1.975.69 2.778 1.225 1.657 3.57 2.01 5.23.785l3.528-2.608c1.658-1.225 2.01-3.57.785-5.23-.498-.674-1.187-1.15-1.992-1.376-.4-.113-.633-.527-.52-.927.112-.4.528-.63.926-.522 1.13.318 2.096.986 2.794 1.932 1.717 2.324 1.224 5.612-1.1 7.33l-3.53 2.608c-.933.693-2.023 1.026-3.105 1.026z"
></path>
</svg>
</span>
</div>
</div>
</div>
</article>
<article class="discord">
<h3>Discord</h3>
<div class="metaInner for-discord">
<div class="discordCard discordLarge">
<div class="discordWrap">
<div class="discordTitle"></div>
<div class="discordDescription"><span></span></div>
<div class="discordImage"><img alt="" /></div>
</div>
</div>
</div>
</article>
</div>
</div>
</section>
<script type="module" src="/src/main.ts"></script>
</body>
</html>