mobile version, optimizations, navalny, welcome improved

This commit is contained in:
Arsen Mirzaev Tatyano-Muradovich 2024-03-20 20:16:11 +07:00
parent d774e1cf6e
commit 3e222f397a
13 changed files with 463 additions and 247 deletions

View File

@ -8,6 +8,9 @@ namespace mirzaev\site\repression\controllers;
use mirzaev\site\repression\controllers\core,
mirzaev\site\repression\models\views;
// Фреймворк для сайта ipinfo.io
use ipinfo\ipinfo\IPinfo;
/**
* Контроллер основной страницы
*
@ -16,24 +19,27 @@ use mirzaev\site\repression\controllers\core,
*/
final class index_controller extends core
{
/**
* Главная страница
*
* @param array $parameters Параметры запроса
*/
public function index(array $parameters = []): ?string
{
// Инициализация шутника
$this->variables['troller'] = [
/**
* Главная страница
*
* @param array $parameters Параметры запроса
*/
public function index(array $parameters = []): ?string
{
// Инициализация шутника
$this->variables['troller'] = [
'instasamka' => rand(1, 11),
'southern' => rand(1, 3),
'vk' => (bool) rand(0, 1),
'whatsapp' => (bool) rand(0, 1),
'iphone' => (bool) rand(0, 1),
'southern' => rand(1, 3),
'vk' => (bool) rand(0, 1),
'whatsapp' => (bool) rand(0, 1),
'iphone' => (bool) rand(0, 1),
];
// Получение дополнительных данных
$data = (array) (new IPinfo(require '../settings/ipinfo.php'))->getDetails($_SERVER['cf-connecting-ip'] ?? $_SERVER['HTTP_X_FORWARDED_FOR'] ?? $_SERVER['REMOTE_ADDR']);
// Запись просмотра
views::increase();
views::increase($data);
// Инициализация счётчика просмотров
$this->variables['views'] = [
@ -44,7 +50,9 @@ final class index_controller extends core
'last' => views::last(10)
];
// Генерация представления
return $this->view->render(DIRECTORY_SEPARATOR . 'index.html', $this->variables);
}
$this->variables['creepy'] = "{$data['continent']['name']}, {$data['country_name']}, {$data['city']}, {$data['latitude']}, {$data['longitude']}, {$data['org']}, {$data['ip']}, seen in extremist chats, seen in LGBTQ+ chats, anti-state activities, problems with studies, was in contact with a criminal group (2017), wears strange pants, suspect in the case of January 15, 2024 No. 2360501";
// Генерация представления
return $this->view->render(DIRECTORY_SEPARATOR . 'index.html', $this->variables);
}
}

View File

@ -8,9 +8,6 @@ namespace mirzaev\site\repression\models;
use mirzaev\arangodb\collection,
mirzaev\arangodb\document;
// Фреймворк для сайта ipinfo.io
use ipinfo\ipinfo\IPinfo;
// Библиотека для ArangoDB
use ArangoDBClient\Document as _document;
@ -30,17 +27,25 @@ class views extends core
*/
final public const COLLECTION = 'views';
public static function increase(array &$errors = []): ?bool
/**
* Увеличить счётчик посещений используя данные пользователя из запроса
*
* @param ?array $data Дополнительные данные пользователя
*
* @return bool Записано в базу данных?
*/
public static function increase(array $data = null, array &$errors = []): bool
{
try {
if (collection::init(static::$arangodb->session, self::COLLECTION))
if ($_SERVER['HTTP_USER_AGENT'] === 'nginx-ssl early hints') return null;
else if (document::write(static::$arangodb->session, self::COLLECTION, [
'ip' => $_SERVER['REMOTE_ADDR'] ?? null,
'cf-connecting-ip' => $_SERVER['cf-connecting-ip'] ?? null,
'x-forwarded-for' => $_SERVER['HTTP_X_FORWARDED_FOR'] ?? null,
'referer' => $_SERVER['HTTP_REFERER'] ?? null,
'useragent' => $_SERVER['HTTP_USER_AGENT'] ?? null
] + (array) (new IPinfo(require '../settings/ipinfo.php'))->getDetails($_SERVER['HTTP_X_FORWARDED_FOR'] ?? $_SERVER['REMOTE_ADDR']))) return true;
] + $data)) return true;
else throw new exception('Не удалось создать аккаунт');
else throw new exception('Не удалось инициализировать коллекцию');
} catch (exception $e) {

View File

@ -20,9 +20,9 @@
--red-light: #bf3737;
--red: #a43333;
--red-dark: #8d2a2a;
--grey-light: #c0c0c0;
--grey : #858585;
--grey-dark : #565656;
--grey-light: #c0c0c0;
--grey: #858585;
--grey-dark: #565656;
}
* {
@ -81,56 +81,61 @@ button[disabled]:is(:hover, :active) {
background-color: var(--button-light-red);
}
body {
--padding-vertical: min(200px, 20vh);
margin: 0;
position: relative;
height: 100vh;
overflow-x: hidden;
background-color: black;
position: relative;
width: 100vw;
height: 100%;
padding-top: var(--padding-vertical);
padding-bottom: var(--padding-vertical);
overflow-x: clip;
background-color: black;
}
body > :is(article, section)[data-layer] {
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
transition: 0.2s ease-out;
body> :is(article, section)[data-layer] {
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
transition: 0.2s ease-out;
}
body > article[data-layer] {
body>article[data-layer] {
position: absolute;
}
body > section[data-layer] > canvas.shell {
body>section[data-layer]>canvas.shell {
position: fixed;
width: 100%;
}
body > section[data-layer] > canvas.shell {
box-shadow: -1px 1px 47px 20px rgba(0, 0, 0, 1);
-webkit-box-shadow: -1px 1px 47px 20px rgba(0, 0, 0, 1);
-moz-box-shadow: -1px 1px 47px 20px rgba(0, 0, 0, 1);
/* outline: 10vw solid; */
filter: url("#blob");
body>section[data-layer]>canvas.shell {
box-shadow: -1px 1px 47px 20px rgba(0, 0, 0, 1);
-webkit-box-shadow: -1px 1px 47px 20px rgba(0, 0, 0, 1);
-moz-box-shadow: -1px 1px 47px 20px rgba(0, 0, 0, 1);
/* outline: 10vw solid; */
filter: url("#blob");
}
body > aside {
body>aside {
z-index: 500;
}
body > article {
body>article {
position: relative !important;
margin: 20vh auto 0 !important;
margin: 0 auto !important;
width: 800px !important;
border-radius: 10px;
background-color: var(--background-dark);
}
body > :last-child {
body> :last-child {
margin-bottom: 20vh !important;
}
body > article > div#cover {
body>article>div#cover {
z-index: 6000;
height: 300px;
display: flex;
@ -138,13 +143,13 @@ body > article > div#cover {
border-radius: 10px 10px 0 0;
}
body > article > div#cover > img {
body>article>div#cover>img {
width: 100%;
/* object-fit: cover;
object-position: top; */
}
body > article > header {
body>article>header {
z-index: 5000;
top: 0;
position: sticky;
@ -153,9 +158,10 @@ body > article > header {
clip-path: border-box;
border-radius: 0px 0px 10px 10px;
background-color: var(--background-dark);
}
body > article > header > section {
body>article>header>section {
position: relative;
height: 100%;
display: flex;
@ -163,62 +169,62 @@ body > article > header > section {
background: #750000;
}
body > article > header > section > h1 {
body>article>header>section>h1 {
font-size: 2.5rem;
margin: auto;
text-align: center;
color: red;
}
body > article > header > section > canvas#title {
body>article>header>section>canvas#title {
z-index: -5000;
position: absolute;
width: 100%;
height: 100%;
}
body > article > main,
body > section.block {
body>article>main,
body>section.block {
z-index: 1000;
background-color: var(--background-light);
}
body > section.block {
body>section.block {
box-sizing: border-box;
border-radius: 10px;
margin: 20px auto 0;
width: 700px;
width: 800px;
padding: 30px 50px;
display: block;
}
body > article > main {
body>article>main {
padding-top: 10px;
border-radius: 0 0 10px 10px;
/* box-shadow: 1px 6px 11px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 1px 6px 11px 3px rgba(0,0,0,0.6);
-moz-box-shadow: 1px 6px 11px 3px rgba(0,0,0,0.6); */
}
body > article > main > section {
body>article>main>section {
position: relative;
margin: 30px 50px;
}
body > article > main > section > p.digression {
body>article>main>section>p.digression {
margin-left: 30px;
color: var(--grey-dark);
}
body > article > main > section > p.digression * {
body>article>main>section>p.digression * {
color: var(--grey-dark);
}
body > article > main > section#assault > img#wet_bebra {
body>article>main>section#assault>img#wet_bebra {
width: 200px;
float: right;
shape-outside: polygon(68px 202px, 200px 197px, 158px 173px, 159px 50px, 192px 25px, 165px 0px, 56px 3px, 41px 27px, 56px 42px, 112px 47px, 103px 68px, 97px 116px, 58px 120px, 40px 169px, 6px 186px);
clip-path: polygon(208px 199px, 162px 170px, 162px 54px, 194px 21px, 155px -4px, 48px 7px, 54px 43px, 103px 51px, 91px 114px, 56px 116px, 45px 165px, -1px 186px, 51px 201px, 153px 202px);
}
body > article > main > section#assault > img#scary {
body>article>main>section#assault>img#scary {
margin-left: -20px;
padding-right: 10px;
width: 200px;
@ -227,7 +233,7 @@ body > article > main > section#assault > img#scary {
clip-path: polygon(208px 91px, 181px 75px, 203px 22px, 140px 1px, 58px 1px, -8px 112px, 55px 173px, 70px 201px, 136px 201px, 139px 176px, 175px 152px);
}
body > article > main > section#car > img#crying_bebra {
body>article>main>section#car>img#crying_bebra {
margin-left: -20px;
width: 200px;
float: left;
@ -235,7 +241,7 @@ body > article > main > section#car > img#crying_bebra {
clip-path: polygon(22px 169px, 44px 200px, 122px 207px, 165px 192px, 173px 151px, 187px 141px, 188px 108px, 169px 103px, 178px 52px, 150px 12px, 86px -7px, 41px 33px, 19px 67px);
}
body > article > main > section#car > img#chill_bebra {
body>article>main>section#car>img#chill_bebra {
margin-right: -20px;
width: 200px;
float: right;
@ -243,7 +249,7 @@ body > article > main > section#car > img#chill_bebra {
clip-path: polygon(11px 126px, -6px 194px, 71px 199px, 179px 181px, 204px 90px, 175px 32px, 118px -5px, 60px 27px, 80px 102px, 52px 124px, 54px 60px, 16px 58px, -1px 83px);
}
body > article > main > section#car > img#just {
body>article>main>section#car>img#just {
margin-left: -20px;
padding-right: 10px;
width: 200px;
@ -252,7 +258,7 @@ body > article > main > section#car > img#just {
clip-path: polygon(-6px 171px, 76px 170px, 106px 201px, 165px 198px, 193px 159px, 206px 81px, 180px 26px, 129px -5px, 63px 15px, 32px 51px, 29px 124px);
}
body > article > main > section#car > img#evil_bebra {
body>article>main>section#car>img#evil_bebra {
margin-top: 30px;
margin-right: -25px;
width: 200px;
@ -261,7 +267,7 @@ body > article > main > section#car > img#evil_bebra {
clip-path: polygon(193px 197px, 161px 10px, 92px -8px, 19px 46px, 23px 138px, 7px 168px, 21px 196px);
}
body > article > main > section#deal > img#marta_with_broken_heart {
body>article>main>section#deal>img#marta_with_broken_heart {
margin-top: 30px;
margin-right: -15px;
width: 200px;
@ -270,16 +276,16 @@ body > article > main > section#deal > img#marta_with_broken_heart {
clip-path: polygon(199px 146px, 204px 26px, 125px -1px, 65px -7px, -7px 96px, 19px 169px, 62px 195px, 150px 199px);
}
body > article > main > section#deal > img#two_bebras {
body>article>main>section#deal>img#two_bebras {
margin-top: 50px;
margin-right: -10px;
width: 200px;
float: right;
shape-outside: polygon(188px 222px, 212px 145px, 133px 49px, 101px 75px, 36px 92px, 22px 167px, -8px 181px, 21px 252px);
clip-path: polygon(215px 104px, 132px -2px, 108px 22px, 33px 40px, 20px 114px, -6px 127px, 20px 201px, 177px 179px);
margin-right: -10px;
width: 200px;
float: right;
shape-outside: polygon(188px 222px, 212px 145px, 133px 49px, 101px 75px, 36px 92px, 22px 167px, -8px 181px, 21px 252px);
clip-path: polygon(215px 104px, 132px -2px, 108px 22px, 33px 40px, 20px 114px, -6px 127px, 20px 201px, 177px 179px);
}
body > article > main > section#deal > img#fuck {
body>article>main>section#deal>img#fuck {
margin-left: -20px;
width: 200px;
float: left;
@ -287,40 +293,40 @@ body > article > main > section#deal > img#fuck {
clip-path: polygon(25px 194px, 100px 207px, 180px 190px, 171px 142px, 188px 90px, 179px 46px, 152px 5px, 75px -7px, 6px 56px, 28px 144px);
}
body > article > main > section#friendship > img#no_comments {
margin-top: 50px;
margin-right: 0px;
width: 200px;
float: right;
shape-outside: polygon(199px 248px, 208px 48px, 92px 49px, 43px 94px, -12px 112px, 44px 121px, 50px 186px, 38px 248px);
clip-path: polygon(208px 115px, 200px 41px, 145px -7px, 69px 13px, 46px 44px, -10px 58px, 39px 78px, 48px 141px, 46px 187px, 121px 201px, 192px 191px);
body>article>main>section#friendship>img#no_comments {
margin-top: 50px;
margin-right: 0px;
width: 200px;
float: right;
shape-outside: polygon(199px 248px, 208px 48px, 92px 49px, 43px 94px, -12px 112px, 44px 121px, 50px 186px, 38px 248px);
clip-path: polygon(208px 115px, 200px 41px, 145px -7px, 69px 13px, 46px 44px, -10px 58px, 39px 78px, 48px 141px, 46px 187px, 121px 201px, 192px 191px);
}
body > article > main > section#friendship > img#nu_tipa {
margin-top: 100px;
margin-right: 0px;
width: 200px;
float: left;
shape-outside: polygon(183px 237px, 172px 225px, 197px 202px, 162px 188px, 158px 153px, 132px 100px, -5px 100px, -3px 291px, 184px 289px, 176px 257px);
clip-path: polygon(179px 142px, 176px 117px, 195px 100px, 163px 87px, 153px 26px, 91px -12px, 11px 39px, 1px 197px, 181px 203px, 172px 157px);
body>article>main>section#friendship>img#nu_tipa {
margin-top: 100px;
margin-right: 0px;
width: 200px;
float: left;
shape-outside: polygon(183px 237px, 172px 225px, 197px 202px, 162px 188px, 158px 153px, 132px 100px, -5px 100px, -3px 291px, 184px 289px, 176px 257px);
clip-path: polygon(179px 142px, 176px 117px, 195px 100px, 163px 87px, 153px 26px, 91px -12px, 11px 39px, 1px 197px, 181px 203px, 172px 157px);
}
body > article > main > section > img {
body>article>main>section>img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 3px;
}
body > article > main > section#conclusion {
height: 425px;
body>article>main>section#conclusion {
margin-bottom: 50px;
}
body > article > main > section#conclusion > h2 {
body>article>main>section#conclusion>h2 {
margin-bottom: 20px;
}
body > article > main > section#conclusion > a > img {
body>article>main>section#conclusion>a>img {
margin-top: 30px;
margin-right: -4%;
height: 300px;
@ -329,84 +335,84 @@ body > article > main > section#conclusion > a > img {
clip-path: polygon(136px 80px, 122px 10px, 92px 30px, 66px 36px, 36px 32px, 36px 91px, 55px 141px, 34px 145px, 32px 181px, 41px 189px, 81px 208px, 28px 264px, 47px 287px, 81px 295px, 155px 266px, 162px 232px, 180px 212px, 179px 180px, 196px 174px, 191px 152px, 146px 157px, 145px 135px, 161px 110px, 165px 92px);
}
body > article > main > section > h2:before {
body>article>main>section>h2:before {
margin-right: 10px;
}
body > article > main > section#assault > h2:before {
body>article>main>section#assault>h2:before {
content: '🤕';
}
body > article > main > section#reasons > h2:before {
body>article>main>section#reasons>h2:before {
content: '😼';
}
body > article > main > section#car > h2:before {
body>article>main>section#car>h2:before {
content: '😵';
}
body > article > main > section#deal > h2:before {
body>article>main>section#deal>h2:before {
content: '🤝';
}
body > article > main > section#friendship > h2:before {
body>article>main>section#friendship>h2:before {
content: '🥳';
}
body > article > main > section#court > h2:before {
body>article>main>section#court>h2:before {
content: '😥';
}
body > article > main > section#return > h2:before {
body>article>main>section#return>h2:before {
content: '🥱';
}
body > article > main > section#conclusion > h2:before {
body>article>main>section#conclusion>h2:before {
content: '🤟';
}
body > article > main > section > p + p,
body > article > main > section > p > small + small {
body>article>main>section>p+p,
body>article>main>section>p>small+small {
margin-top: 10px;
}
body > article > main > section > h2 {
body>article>main>section>h2 {
font-size: 1.8rem;
}
body > article > main > section > h2 + h3 {
body>article>main>section>h2+h3 {
margin-top: 3px;
}
body > article > main > section > :is(h2, h3) {
body>article>main>section> :is(h2, h3) {
margin-bottom: 0px;
line-height: 35px;
}
body > article > main > section > :is(h2, h3) + p {
body>article>main>section> :is(h2, h3)+p {
margin-top: 15px;
}
body > article > main > section > p:last-of-type {
body>article>main>section>p:last-of-type {
margin-bottom: 20px;
}
body > article > footer {
body>article>footer {
z-index: 3000;
}
body > section#contacts > section {
body>section#contacts>section {
display: flex;
}
body > section#contacts > section#author {
body>section#contacts>section#author {
margin-top: 20px;
margin-bottom: 35px;
}
body > section#contacts > section#author > section#avatar {
body>section#contacts>section#author>section#avatar {
margin-left: 10px;
margin-right: 25px;
position: relative;
@ -415,7 +421,7 @@ body > section#contacts > section#author > section#avatar {
clip-path: circle(50px);
}
body > section#contacts > section#author > section#avatar > img {
body>section#contacts>section#author>section#avatar>img {
left: 0;
top: 0;
position: absolute;
@ -424,104 +430,102 @@ body > section#contacts > section#author > section#avatar > img {
cursor: none;
}
body > section#contacts > section#author > section#avatar > img:first-of-type {
body>section#contacts>section#author>section#avatar>img:first-of-type {
z-index: 1000;
transition: .2s ease-in;
}
body > section#contacts > section#author > section#avatar > img:first-of-type:hover {
body>section#contacts>section#author>section#avatar>img:first-of-type:hover {
opacity: 0;
transition: unset;
}
body > section#contacts > section#author > section#name {
body>section#contacts>section#author>section#name {
display: flex;
flex-direction: column;
justify-content: center;
}
body > section#contacts > section#author > section#name > h3 > a {
body>section#contacts>section#author>section#name>h3>a {
color: var(--text);
}
body > section#contacts > section#author > section#name > h3,
body > section#contacts > section#author > section#name > p {
body>section#contacts>section#author>section#name>h3,
body>section#contacts>section#author>section#name>p {
margin: unset;
}
body > section#contacts > section#author > section#name > p > span {
body>section#contacts>section#author>section#name>p>span {
margin-left: 8px;
}
body > section#contacts > section#links {
body>section#contacts>section#links {
flex-direction: column;
}
body > section#views {
display: flex;
gap: 25px;
body>section#views {
display: flow-root;
}
body > section#views > section {
body>section#views>h3 {
margin: 0 0 15px;
height: 1.4rem;
display: flex;
}
body>section#views>section {
float: left;
display: flex;
flex-direction: column;
overflow: hidden;
}
body > section#views > section:first-of-type {
body>section#views>section:first-of-type {
margin-right: 25px;
width: calc(80% - 25px);
display: flex;
flex-direction: column;
flex-grow: 1;
}
body > section#views > section:last-of-type {
body>section#views>section:last-of-type {
width: 20%
}
body > section#views > section:last-of-type > p:first-of-type {
margin-top: calc(1.3rem + 15px);
}
body > section#views > section > h3 {
margin: 0 0 15px;
height: 1.4rem;
display: flex;
}
body > section#views > section > h3 > i.icon {
body>section#views>section>h3>i.icon {
margin-left: auto;
}
body > section#views > section > p {
body>section#views>section>p {
margin: unset;
height: 1.2rem;
display: flex;
gap: 10px;
}
body > section#views > section > p:not(:last-of-type) {
body>section#views>section>p:not(:last-of-type) {
margin: 0 0 5px 0;
}
body > section#views > section:first-of-type > p > span:nth-of-type(2) {
body>section#views>section:first-of-type>p>span:nth-of-type(2) {
margin-right: auto;
max-width: 150px;
min-width: 50px;
}
body > section#views > section > p > span,
body > section#views > section > p > samp > small {
body>section#views>section>p>span,
body>section#views>section>p>samp>small {
text-overflow: ellipsis;
overflow: clip;
}
body > section#views > section > p > samp {
body>section#views>section>p>samp {
margin-right: 10px;
max-width: 80px;
display: flex;
}
body > section#views > section > p > samp > small {
body>section#views>section>p>samp>small {
margin: auto;
max-width: 100%;
display: ruby;
@ -529,49 +533,49 @@ body > section#views > section > p > samp > small {
direction: rtl;
}
body > section#views > section:first-of-type > p > span:nth-of-type(3) {
body>section#views>section:first-of-type>p>span:nth-of-type(3) {
max-width: 150px;
direction: rtl;
}
body > section#views > section:last-of-type > p > span:last-of-type {
body>section#views>section:last-of-type>p>span:last-of-type {
margin-left: auto;
direction: rtl;
max-width: 70px;
}
body > section#license {
body>section#license {
position: relative;
}
body > section#license > p {
body>section#license>p {
margin: 5px 0;
display: inline-flex;
flex-direction: column;
}
body > section#license > p > b {
body>section#license>p>b {
margin-bottom: 5px;
text-align: center;
font-size: 1.3rem;
}
body > section#license > p > span:first-of-type {
body>section#license>p>span:first-of-type {
text-align: center;
margin-bottom: 25px;
font-size: 1.1rem;
}
body > section#license > p > :is(span:nth-child(3), span:nth-child(4)) {
body>section#license>p> :is(span:nth-child(3), span:nth-child(4)) {
margin-bottom: 18px;
}
body > section#license > p > span:last-of-type {
body>section#license>p>span:last-of-type {
margin-top: 15px;
margin-left: 30px;
}
body > section#license > img {
body>section#license>img {
position: absolute;
right: -65px;
bottom: -50px;
@ -579,8 +583,112 @@ body > section#license > img {
transition: 5s;
}
@media (max-width: 800px) {
body>svg#navalny2 {
width: 800px;
height: 300px;
padding: unset;
}
body>section#navalny {
width: 800px;
height: 190px;
padding: unset;
cursor: pointer;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-mask-image: url(#NAVALNY);
-webkit-mask-size: contain;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-image: url(#NAVALNY);
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
-webkit-backdrop-filter: saturate(100%) hue-rotate(230deg) blur(22px);
backdrop-filter: saturate(100%) hue-rotate(230deg) blur(22px);
background-color: rgba(0, 3, 210, 0.05);
}
body>section#navalny:hover {
-webkit-backdrop-filter: saturate(600%) hue-rotate(240deg) blur(18px);
backdrop-filter: saturate(600%) hue-rotate(240deg) blur(18px);
background-color: rgba(0, 3, 210, 0.1);
}
@media (max-width: 840px) {
body {
padding-bottom: unset;
padding-top: unset;
padding-bottom: 20px;
}
body>article>header {
position: relative;
}
body>article {
width: 100% !important;
margin: unset;
border-radius: unset;
}
body>article>div#cover,
body>article>main {
border-radius: unset;
}
body>article>main {
box-shadow: 1px 6px 11px 3px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 1px 6px 11px 3px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 1px 6px 11px 3px rgba(0, 0, 0, 0.6);
}
body>section.block {
width: calc(100% - 40px) !important;
margin-left: 20px !important;
margin-right: 20px !important;
}
mask#NAVALNY>text {
font-size: calc(5rem - (5rem - 17vw)) !important;
transform: translate(0, 120px) !important;
}
}
@media (max-width: 710px) {
body>article>header {
height: calc(140px + (110px - 20vw));
}
body>article>header>section>h1 {
padding: 0 10vw;
}
}
@media (max-width: 600px) {
body>section.block#views>h3 {
display: block;
text-align: center;
}
body>section.block#views>section:first-of-type>p>span:nth-of-type(3) {
display: none;
}
body>section.block#views>section:first-of-type {
margin-right: 0;
margin-bottom: 15px;
width: 100%;
}
body>section.block#views>section:last-of-type {
width: 100%;
}
}
@media (max-width: 430px) {
body>article>header>section>h1 {
padding: 0 5vw;
}
}

View File

@ -1,56 +1,73 @@
section.popup {
z-index: 999999;
left: 0;
top: 0;
position: fixed;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000000DD;
z-index: 999999;
left: 0;
top: 0;
position: fixed;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000000DD;
}
section.popup>div.wrap {
width: 320px;
padding: 30px 25px;
display: flex;
flex-direction: column;
gap: 20px;
border-radius: 2px;
background-color: var(--background-light);
width: 330px;
padding: 30px 25px;
display: flex;
flex-direction: column;
gap: 20px;
border-radius: 2px;
background-color: var(--background-light);
}
section.popup>div.wrap>h4 {
margin: auto;
padding-top: 8px;
font-size: 1.6rem;
margin: auto;
margin-bottom: 8px;
padding-top: 8px;
font-size: 1.8rem;
}
section.popup>div.wrap>p {
margin: 0px 20px;
section.popup>div.wrap>:is(p, ul) {
margin: 0px 20px;
}
section.popup>div.wrap>div.row {
width: 100%;
display: flex;
gap: 12px;
width: 100%;
display: flex;
gap: 12px;
}
section.popup>div.wrap>div.row>button {
padding: 6px 20px;
border-radius: 2px;
}
section.popup>div.wrap>div.row>button:first-child {
margin-left: auto;
padding: 6px 20px;
border-radius: 2px;
}
section.popup>div.wrap>div.row>button:last-child{
margin-right: auto;
section.popup>div.wrap>div.row>button:first-child {
margin-left: auto;
}
section.popup>div.wrap>div.row>button:last-child {
margin-right: auto;
flex-grow: 1;
}
section.popup>div.wrap>div.row>button[disabled]:is(:hover, :active) {
cursor: none;
cursor: none;
}
@media (max-width: 430px) {
section.popup>div.wrap {
width: 100vw;
margin: auto 25px;
}
}
@media (max-width: 330px) {
section.popup>div.wrap {
width: 100vw;
margin: unset;
border-radius: unset;
}
}

View File

@ -0,0 +1,13 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Created using Krita: https://krita.org -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:krita="http://krita.org/namespaces/svg/krita"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
width="648.72pt"
height="98.16pt"
viewBox="0 0 648.72 98.16">
<defs/>
<text id="shape0" krita:useRichText="true" text-rendering="auto" krita:textVersion="3" transform="translate(25.679998194793, 33.4399986334414)" fill="#000000" stroke-opacity="0" stroke="#000000" stroke-width="0" stroke-linecap="square" stroke-linejoin="bevel" letter-spacing="0" text-anchor="middle" word-spacing="0" style="text-align: start;text-align-last: auto;font-family: Gidugu;font-size: 200;"><tspan x="329.0390625">NAVALNY</tspan></text>
</svg>

After

Width:  |  Height:  |  Size: 950 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

View File

@ -4,9 +4,9 @@
{% endblock %}
{% block body %}
<section id="account">
<!-- <section id="account">
<button id="login" title="Authentication" onclick="return account.authentication()"><i class='icon authentication'></i></button>
</section>
</section> -->
{% endblock %}
{% block js %}

View File

@ -4,7 +4,7 @@
{% block meta %}
<meta charset="utf-8" />
<meta name="viewport" content="width=800px" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="width" />
<meta content='yes' name='apple-mobile-web-app-capable' />
@ -35,13 +35,26 @@
<meta property="twitter:description"
content="I was kidnapped and recruited by Wagner PMC in Khabarovsk due to anti-government posts on my blog">
<meta property="twitter:image" content="https://repression.mirzaev.sexy/images/mirzaev.jpg">
<link rel="icon" type="image/gif" href="/images/favicon/favicon.gif">
<link rel="icon" type="image/gif" href="/images/favicon/favicon_alternative.gif">
<script>
const e = document.querySelector('link[rel=icon]');
let i = 0;
setTimeout(fn => setInterval("e.href = '/images/favicon_2/' + (++i > 69 ? i = 0 : i) + '.gif'", 150), 5000);
if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
// Не смартфон
const e = document.querySelector('link[rel=icon]');
// let i = 0;
// setTimeout(fn => setInterval(fn => e.href = '/images/favicon_2/' + (++i > 69 ? i = 0 : i) + '.gif', 150), 60000);
if (/Firefox/i.test(navigator.userAgent)) {
// Firefox
e.href = '/images/favicon/favicon.gif';
}
}
</script>
<script>
if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
// Не смартфон
setTimeout(fn => {
const buffer = document.title;
const length = buffer.length;
@ -54,8 +67,9 @@
setInterval(fn => {
for(let i = 8; --i > 0;) document.title = document.title.replaceAt(Math.random() * length, symbols[Math.floor(Math.random() * _length)]);
setTimeout(fn => document.title = buffer, 20);
}, 600);
}, 5000);
}, 300);
}, 20000);
}
</script>
{% for meta in head.metas %}
<meta {% for name, value in meta.attributes %}{{name}}="{{value}}" {% endfor %} />

View File

@ -71,11 +71,11 @@
</section>
</section>
<section id="views" class="block">
<h3>
Last 10 unique views
<!-- <i class="icon eye"></i> -->
</h3>
<section>
<h3>
Last 10 unique views
<!-- <i class="icon eye"></i> -->
</h3>
{% for view in views.last %}
<p>
<span title="{{ view.country_name }}" class="unselectable">{{ view.country_flag.emoji }}</span>
@ -83,7 +83,8 @@
{% if view.referer is not null %}<samp>(<small title="{{ view.referer }}&lrm;">{{ view.referer
}}&lrm;</small>)</samp>{% endif %}
<span title="{{ view.useragent }}">{{ view['x-forwarded-for'] ?? view.ip }}</span>
<span title="{{ view.created }}" data-date-convert="title" data-date-convert-format="year.month.day hour:minute:second">
<span title="{{ view.created }}" data-date-convert="title"
data-date-convert-format="year.month.day hour:minute:second">
<b data-date-convert="value">{{ view.created }}</b>
</span>
</p>
@ -111,10 +112,23 @@
<span>0. You just DO WHAT THE FUCK YOU WANT TO.</span>
</p>
<img src="/images/pmc_boykisser.png" alt="PMC Boykisser Group" class="unselectable" ondragstart="return false">
<img style="rotate: 30deg" src="/images/pmc_boykisser.png" alt="PMC Boykisser Group" class="unselectable" ondragstart="return false">
</section>
<section id="navalny" class="block unselectable" onclick="location.href = 'https://en.wikipedia.org/wiki/Death_and_funeral_of_Alexei_Navalny'">
<svg style="width: 100%;">
<mask id="NAVALNY" width="100%" height="100%" x="0%" y="0%" >
<text fill="#ffffff"
style="font-family: commissioner;font-size: 9.5rem;font-weight: bold; transform: translate(0px, 150px)"
x="50%" text-anchor="middle">
<tspan>NAVALNY</tspan>
</text>
</mask>
</svg>
</section>
<!-- <section data-layer><video src="/videos/bahmut.mp4" poster="/images/misha.png" width="100%" muted="false" loop="true" autoplay></video></section> -->
<section data-layer-color="red" data-layer-width="50" data-layer-height="35" data-layer-speed="0.003" data-layer>
<section data-layer-color="red" data-layer-width="50" data-layer-height="40" data-layer-speed="0.0004" data-layer>
<canvas class="shell"></canvas>
</section>
<!-- <section data-layer-color="blue" data-layer-width="100" data-layer-height="160" data-layer-speed="0.004" data-layer>
@ -123,10 +137,10 @@
<canvas class="shell"></canvas></section>
-->
<svg>
<svg style="position: absolute; width: 0px; height: 0px; opacity: 0;">
<defs>
<filter id="blob">
<feGaussianBlur in="SourceGraphic" stdDeviation="24" result="blur"></feGaussianBlur>
<feGaussianBlur in="SourceGraphic" stdDeviation="28" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="blob">
</feColorMatrix>
</filter>
@ -213,7 +227,7 @@
bloodchaos.init(800, 80);
bloodchaos.generate('#444');
});
document.addEventListener('hollow.loaded', function(h) {
document.addEventListener('womb.loaded', function(w) {
// Инициализация слоёв
@ -224,15 +238,15 @@
layers.blur = false;
layers.generate(0);
window.addEventListener("wheel", function(e) {
const layer = document.querySelectorAll('[data-layer]')[layers.current()].lastElementChild.getBoundingClientRect();
//window.addEventListener("wheel", function(e) {
// const layer = document.querySelectorAll('[data-layer]')[layers.current()].lastElementChild.getBoundingClientRect();
// У слоёв есть отрицательный margin а так же height за пределами 100%
//const offset = window.innerHeight * 12.5 / 100;
//if (e.wheelDelta > 0 && layer.bottom - offset * 2 <= window.innerHeight) layers.next();
//else if (layer.top + offset >= 0) layers.previous();
});
//});
for (const shell of document.querySelectorAll('section[data-layer]>[class=shell]')) {
// Перебор оболочек
@ -240,19 +254,19 @@
if (layer instanceof w.detail.womb) {
// Перебор слоёв
// Инициализация цвета слоя
// Инициализация цвета
const color = shell.parentElement.getAttribute('data-layer-color');
// Инициализация цвета слоя
// Инициализация ширины
const width = +shell.parentElement.getAttribute('data-layer-width');
// Инициализация цвета слоя
// Инициализация высоты
const height = +shell.parentElement.getAttribute('data-layer-height');
// Инициализация цвета слоя
// Инициализация скорости
const speed = +shell.parentElement.getAttribute('data-layer-speed');
// Инициализация динамичности слоя
// Инициализация динамичности
let offset = Math.random() * 100;
// Удалось инициализировать слой
@ -261,22 +275,27 @@
layer.block.height = height;
layer.generate(offset += speed, color);
// Инициализация сдвига
setInterval(function() {
layer.dump();
layer.generate(offset += speed, color);
}, 30);
if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
// Не смартфон
// Инициализация сдвига
setInterval(function() {
layer.dump();
layer.generate(offset += speed, color);
}, 120);
window.addEventListener('resize', function(e) {
layer.init();
layer.dump();
layer.generate(offset += speed, color);
}, true);
window.addEventListener('resize', function(e) {
layer.init();
layer.dump();
layer.generate(offset += speed, color);
}, true);
}
}
}
});
});
function glitch(element, amount = 8, reset = 20, duration = 12, sleep = 10000) {
setTimeout(fn => {
const buffer = element.innerText;
@ -308,14 +327,18 @@
const boykisser = document.getElementById('license').getElementsByTagName('img')[0];
// Initialize iterator
let r = 0;
//if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
// Не смартфон
if (boykisser instanceof HTMLElement) {
// Found element
// Initialize iterator
let r = 0;
// Rotate
setInterval('boykisser.style.rotate = --r + "deg"', 240);
}
if (boykisser instanceof HTMLElement) {
// Found element
// Rotate
//setInterval(fn => boykisser.style.rotate = --r + "deg", 240);
}
//} else boykisser.remove();
</script>
{% endblock %}

View File

@ -3,23 +3,47 @@
{% endblock %}
{% block body %}
<section class="popup">
<video style="z-index: 999999; position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; display: none; object-fit: cover;
cursor: none;" id="end" class="unselectable"src="/videos/end.mp4" poster="/images/misha.png" ondragstart="return false"></video>
<video style="z-index: 999999; position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; display: none; object-fit: cover;
cursor: none;" id="end_post" class="unselectable"src="/videos/end_post.mp4" poster="/images/misha.png" ondragstart="return false"></video>
<section id="welcome" class="popup" style="display: none">
<div class="wrap">
<h4>WARNING</h4>
<ul>
<li><b>Bright</b> graphics libraries</li>
<li>Can be <b>screamers</b></li>
<li>Political content</li>
<li>Sounds and music</li>
<li><b>Cruel</b> information</li>
<li><b>Cringe</b> information</li>
</ul>
<p>
My site uses my <b>bright</b> graphics libraries, be careful.
</p>
<p>
If you are from Russia, then refrain from distributing this material - it is <b>dangerous for your life</b>
If you are from Russia, then <b>refrain</b> from distributing this material
</p>
<div class="row separated">
<button
<button
onclick="this.parentElement.parentElement.parentElement.remove();">
I understand
</button>
<button onclick="bebra.what.play(); alert('I know your geolocation'); this.disabled = true">I didn't
<button
onclick="bebra.what.play(); this.innerText = 'I see you'; setTimeout(fn => {alert('{{ creepy }}'); this.removeAttribute('onmouseover'); this.removeAttribute('onmouseleave'); setTimeout(fn => this.innerText = 'you have 5 minutes', 10); setTimeout(fn => this.innerText = 'you have 4 minutes', 60010); setTimeout(fn => this.innerText = 'you have 3 minutes', 120010); setTimeout(fn => this.innerText = 'you have 2 minutes', 180010); setTimeout(fn => this.innerText = 'you have 1 minute', 240010); setTimeout(fn => { const end = document.getElementById('end'); end.style.display = 'block'; this.parentElement.parentElement.parentElement.remove(); end.play(); end.onended = fn => {end.remove(); const end_post = document.getElementById('end_post'); end_post.style.display = 'block'; end_post.play(); end_post.onended = fn => {end_post.remove(); body.innerText = 'теперь посмотри на свою страницу вконтакте'; body.classList.add('unselectable'); body.setAttribute('style', 'color: #1f2631; text-align: end; margin-right: 10vw; width: 90vw; margin-top: 60vh; overflow-y: hidden;')};}}, 320010); this.disabled = true; }, 10);"
onmouseover="this.innerText = 'Are you sure?'"
onmouseleave="this.innerText = 'I did not understand'"
>I did not
understand</button>
</div>
</div>
</section>
<script>
const welcome = e => {
if(e.deltaY >= 0) {
window.removeEventListener('wheel', welcome);
document.getElementById('welcome').removeAttribute('style');
}
};
window.addEventListener('wheel', welcome);
</script>
{% endblock %}

View File

@ -31,8 +31,12 @@
// Вызов события о том, что шутник инициализирован
document.dispatchEvent(new CustomEvent("troller.initialized"));
if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
// Не смартфон
// Активация изображения при потере фокуса с окна
setTimeout(() => bebra.what.enable(), 300000);
}
setTimeout(() => bebra.furgal.start(true), 120000);