274 lines
6.9 KiB
HTML
274 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<script type="module" src="js/popup.js"> </script>
|
||
<meta charset="UTF-8">
|
||
|
||
<style>
|
||
|
||
@font-face {
|
||
font-family: "Inner";
|
||
src:
|
||
local("Inner Tight"),
|
||
url("assets/InterTight-VariableFont_wght.ttf") format("truetype"),
|
||
url("assets/InterTight-Italic-VariableFont_wght.ttf") format("truetype"),
|
||
url("assets/static/InterTight-Medium.ttf") format("truetype")
|
||
;
|
||
}
|
||
|
||
html, body, div, span, applet, object, iframe,
|
||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||
a, abbr, acronym, address, big, cite, code,
|
||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||
small, strike, strong, sub, sup, tt, var,
|
||
b, u, i, center,
|
||
dl, dt, dd, ol, ul, li,
|
||
fieldset, form, section, legend,
|
||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||
article, aside, canvas, details, embed,
|
||
figure, figcaption, footer, header, hgroup,
|
||
menu, nav, output, ruby, section, summary,
|
||
time, mark, audio, video {
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
font-size: 100%;
|
||
font: inherit;
|
||
vertical-align: baseline;
|
||
}
|
||
/* HTML5 display-role reset for older browsers */
|
||
article, aside, details, figcaption, figure,
|
||
footer, header, hgroup, menu, nav, section {
|
||
display: block;
|
||
}
|
||
body {
|
||
line-height: 1;
|
||
}
|
||
ol, ul {
|
||
list-style: none;
|
||
}
|
||
blockquote, q {
|
||
quotes: none;
|
||
}
|
||
blockquote:before, blockquote:after,
|
||
q:before, q:after {
|
||
content: '';
|
||
content: none;
|
||
}
|
||
table {
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
}
|
||
|
||
:root {
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
input, ::placeholder {
|
||
font-family: "Inner", sans-serif;
|
||
font-weight: 300;
|
||
}
|
||
|
||
body {
|
||
font-family: "Inner", sans-serif;
|
||
background-color:#000;
|
||
background-image:
|
||
radial-gradient(at 76% 92%, hsla(215,53%,18%,1) 0px, transparent 50%),
|
||
radial-gradient(at 35% 70%, hsla(176,53%,18%,1) 0px, transparent 50%),
|
||
radial-gradient(at 73% 70%, hsla(72,53%,18%,1) 0px, transparent 50%),
|
||
radial-gradient(at 22% 82%, hsla(203,53%,18%,1) 0px, transparent 50%),
|
||
radial-gradient(at 14% 36%, hsla(229,53%,18%,1) 0px, transparent 50%),
|
||
radial-gradient(at 19% 58%, hsla(112,53%,18%,1) 0px, transparent 50%);
|
||
|
||
color: white;
|
||
}
|
||
|
||
#app {
|
||
margin: 10px;
|
||
padding: 15px;
|
||
background: rgba(0, 0, 0, .88);
|
||
border-radius: 2px;
|
||
min-width: 600px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
a, a:visited {
|
||
color: rgba(220, 220, 230, 1);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
a:hover {
|
||
color: rgba(255, 255, 255, 1);
|
||
text-decoration: none;
|
||
}
|
||
|
||
#app > section {
|
||
width: 49%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
#app > section > span {
|
||
margin-bottom: 5px;
|
||
font-size: 0.77em;
|
||
}
|
||
|
||
|
||
input[type=text], input[type=number] {
|
||
height: 24px;
|
||
font-size: 13px;
|
||
padding: 2px 10px;
|
||
background: rgba(244, 244, 244, .85);
|
||
outline: none;
|
||
border: none;
|
||
}
|
||
|
||
|
||
input[type=checkbox] {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
h2 {
|
||
width: 100%;
|
||
text-transform: lowercase;
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
|
||
#app > section:nth-child(odd) {
|
||
text-align: right;
|
||
}
|
||
|
||
#app > * {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
section > h4 {
|
||
font-size: .667em;
|
||
margin-top: 11px;
|
||
margin-bottom: 5px;
|
||
font-weight: 555;
|
||
}
|
||
|
||
section > h5 {
|
||
font-size: .50em;
|
||
margin-bottom: 5px;
|
||
font-weight: 300;
|
||
padding-left: 5px;
|
||
}
|
||
|
||
#app > section:nth-child(odd) > h5 {
|
||
padding-right: 5px;
|
||
}
|
||
|
||
.controls {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
}
|
||
|
||
.controls h3 {
|
||
font-size: .667em;
|
||
font-weight: 555;
|
||
}
|
||
|
||
.control-section {
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 49.5%;
|
||
}
|
||
.control-section:first-of-type {
|
||
border-right: solid 1px rgba(255, 255, 255, .887);
|
||
}
|
||
|
||
.control-section:first-of-type h3 {
|
||
text-align: right;
|
||
}
|
||
|
||
.control-section:last-of-type section {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.control-section span {
|
||
font-size: .54em;
|
||
display: block;
|
||
text-align: right;
|
||
}
|
||
|
||
.control-section section {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
footer {
|
||
font-size: 0.77em;
|
||
}
|
||
|
||
</style>
|
||
<body>
|
||
<div id="app">
|
||
<h2>↓ TGX2</h2>
|
||
|
||
|
||
<section>
|
||
<h4>Токен бота</h4>
|
||
<h5>(брать здесь: <a target="_blank" href="https://t.me/BotFather">t.me/BotFather</a>)</h5>
|
||
<input type="text" id="token" placeholder="your telegram bot token">
|
||
</section>
|
||
<section>
|
||
<h4>ID группы/чата</h4>
|
||
<h5>(ID каналов и групп начинаются с -100)</h5>
|
||
<input type="text" id="group" placeholder="your group/channel id">
|
||
</section>
|
||
<section>
|
||
<h4>Кастомный домен</h4>
|
||
<h5>(дефолт — x.com, можно использовать зеркала с пофикшенными превью, типа fixupx.com (никаких гарантий)</h5>
|
||
<input type="text" id="domain" placeholder="domain">
|
||
</section>
|
||
|
||
<section>
|
||
<h4>Заголовок</h4>
|
||
<h5>Будет отображаться перед ссылкой на твит. Можно использовать теги {me} и {notme}.</h5>
|
||
<input type="text" id="header" placeholder="your custom header message">
|
||
</section>
|
||
|
||
<section>
|
||
<h4>Фильтр пользователей</h4>
|
||
<h5>(без @, через запятую, лайки аккаунтам с юзернеймами из списка не будут отправлены боту)</h5>
|
||
<input type="text" id="blacklist" placeholder="(ex.: elonmusk,elonmusksmom,elonmusksgrandmother,elonmusksdad,elonmusksdog)">
|
||
</section>
|
||
|
||
<!-- <section> -->
|
||
<!-- <h4>Задержка для скриншота</h4> -->
|
||
<!-- <h5>(если включена функция скриншота; мс; 0-300; дефолт 0)</h5> -->
|
||
<!-- <input type="number" id="delay" min="0" max="300" placeholder="delay"> -->
|
||
<!-- </section> -->
|
||
|
||
|
||
<div class="controls">
|
||
<div class="control-section">
|
||
<h3>Посты</h3>
|
||
<section><input type="checkbox" id="posts" disabled><span>Включить</span></section>
|
||
</div>
|
||
<div class="control-section">
|
||
<h3>Лайки</h3>
|
||
<section><input type="checkbox" id="likes"><span>Включить</span></section>
|
||
<section><input type="checkbox" id="private"><span>Включая закрытки</span></section>
|
||
<section><input type="checkbox" id="screenshot"><span>Делать скриншот (experimental)</span></section>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>// <a target="_blank" href="https://t.me/fedpostltd">yk</a> (<a target="_blank" href="https://x.com/ymkeller">x/twitter</a>)</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|