Update
This commit is contained in:
Valeria Fadeeva
parent
7aa27614ea
commit
c3fbdcdd2b
|
|
@ -1,4 +1,5 @@
|
|||
html, body {
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #aaaaaa;
|
||||
|
|
@ -21,13 +22,21 @@ html, body {
|
|||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Add animation to "page content" */
|
||||
|
|
@ -36,17 +45,29 @@ html, body {
|
|||
-webkit-animation-name: animatebottom;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-name: animatebottom;
|
||||
animation-duration: 1s
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animatebottom {
|
||||
from { bottom:-100px; opacity:0 }
|
||||
to { bottom:0px; opacity:1 }
|
||||
from {
|
||||
bottom: -100px;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
bottom: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animatebottom {
|
||||
from{ bottom:-100px; opacity:0 }
|
||||
to{ bottom:0; opacity:1 }
|
||||
from {
|
||||
bottom: -100px;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#main {
|
||||
|
|
@ -111,10 +132,12 @@ html, body {
|
|||
|
||||
.b-example-divider {
|
||||
height: 3rem;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
border: solid rgba(0, 0, 0, .15);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border: solid rgba(0, 0, 0, 0.15);
|
||||
border-width: 1px 0;
|
||||
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
|
||||
box-shadow:
|
||||
inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
|
||||
inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.b-example-vr {
|
||||
|
|
@ -124,7 +147,7 @@ html, body {
|
|||
}
|
||||
|
||||
.bi {
|
||||
vertical-align: -.125em;
|
||||
vertical-align: -0.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
|
|
@ -176,3 +199,21 @@ html, body {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.article-card {
|
||||
text-align: center;
|
||||
/* border: 1px solid #444; */
|
||||
border-radius: 10px;
|
||||
/* background-color: #353535; */
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.shadow-10-10-20-black {
|
||||
box-shadow: 10px 10px 20px black;
|
||||
}
|
||||
|
||||
|
||||
.shadow-15-15-30-black {
|
||||
box-shadow: 15px 15px 30px black;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
async function fetchData(log, tpl) {
|
||||
var log = document.getElementById('log');
|
||||
var log = document.getElementById("log");
|
||||
|
||||
var server_address = `techhub.social`;
|
||||
|
||||
// const response = await fetch('json/posts.json');
|
||||
|
||||
const response = await fetch(`https://${server_address}/api/v1/accounts/111518136987654656/statuses`);
|
||||
const response = await fetch(
|
||||
`https://${server_address}/api/v1/accounts/111518136987654656/statuses`,
|
||||
);
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
data.forEach(obj => {
|
||||
data.forEach((obj) => {
|
||||
let post_tpl = tpl;
|
||||
var media_link = "";
|
||||
Object.entries(obj).forEach(([key, value]) => {
|
||||
|
|
@ -21,7 +23,10 @@ async function fetchData(log, tpl) {
|
|||
post_tpl = post_tpl.replace(/{id}/g, `${value.id}`);
|
||||
post_tpl = post_tpl.replace(/{name}/g, `${value.display_name}`);
|
||||
post_tpl = post_tpl.replace(/{server_address}/g, `${server_address}`);
|
||||
post_tpl = post_tpl.replace(/{account_name}/g, `<a href="https://${server_address}/@${value.username}" target="_blank">@${value.username}@${server_address}</a>`);
|
||||
post_tpl = post_tpl.replace(
|
||||
/{account_name}/g,
|
||||
`<a href="https://${server_address}/@${value.username}" target="_blank">@${value.username}@${server_address}</a>`,
|
||||
);
|
||||
// post_tpl = post_tpl.replace('{avatar}', `<img src="${value.avatar}" alt="${value.username}'s Avatar" style="width:48px;height:48px;">`);
|
||||
post_tpl = post_tpl.replace(/{avatar}/g, `${value.avatar}`);
|
||||
post_tpl = post_tpl.replace(/{profile_link}/g, `${value.url}`);
|
||||
|
|
@ -32,14 +37,22 @@ async function fetchData(log, tpl) {
|
|||
|
||||
let youtube_frame_arr = [];
|
||||
let spl_arr = text.split('"');
|
||||
let youtube_link_start = 'https://www.youtube.com/watch?v=';
|
||||
let youtube_links_start = [
|
||||
"https://www.youtube.com/watch?v=",
|
||||
"https://youtube.com/watch?v=",
|
||||
"https://youtube.com/v/",
|
||||
"https://m.youtube.com/watch?v=",
|
||||
"https://m.youtube.com/v/",
|
||||
];
|
||||
|
||||
for (let i = 0; i < spl_arr.length; i++) {
|
||||
youtube_links_start.forEach((youtube_link_start) => {
|
||||
if (spl_arr[i].indexOf(youtube_link_start) === 0) {
|
||||
let id = spl_arr[i].replace(youtube_link_start, '');
|
||||
let id = spl_arr[i].replace(youtube_link_start, "");
|
||||
let text_frame = `<iframe class="youtube-video" src="https://www.youtube.com/embed/${id}?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`;
|
||||
youtube_frame_arr.push(text_frame);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
youtube_frame_arr.forEach(function (elem) {
|
||||
|
|
@ -51,20 +64,19 @@ async function fetchData(log, tpl) {
|
|||
|
||||
value = text;
|
||||
|
||||
post_tpl = post_tpl.replace('{content}', `${value}`);
|
||||
post_tpl = post_tpl.replace("{content}", `${value}`);
|
||||
}
|
||||
|
||||
if (key == "media_attachments") {
|
||||
value.forEach(obj1 => {
|
||||
value.forEach((obj1) => {
|
||||
Object.entries(obj1).forEach(([k, v]) => {
|
||||
if (k == "preview_url") {
|
||||
media_link += `<img src="${v}" full_src="${obj1.url}" class="fullscreen" onclick="showFullscreenImage(this);">`;
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
post_tpl = post_tpl.replace('{media_attachments}', `${media_link}`);
|
||||
post_tpl = post_tpl.replace("{media_attachments}", `${media_link}`);
|
||||
}
|
||||
|
||||
if (key == "created_at") {
|
||||
|
|
@ -74,8 +86,11 @@ async function fetchData(log, tpl) {
|
|||
if (key == "created_at") {
|
||||
var isoDate = `${value}`;
|
||||
var d = new Date(isoDate);
|
||||
var datetime_ = d.toLocaleString('en-GB', { hour12: false, timeZone: "Asia/Yekaterinburg" });
|
||||
//var datetime_ = d.toLocaleString('ru-RU', { hour12: false, timeZone: "Asia/Yekaterinburg" });
|
||||
//var datetime_ = d.toLocaleString('en-GB', { hour12: false, timeZone: "Asia/Yekaterinburg" });
|
||||
var datetime_ = d.toLocaleString("ru-RU", {
|
||||
hour12: false,
|
||||
timeZone: "Asia/Yekaterinburg",
|
||||
});
|
||||
|
||||
post_tpl = post_tpl.replace(/{created_at_show}/g, `${datetime_}`);
|
||||
}
|
||||
|
|
@ -102,11 +117,11 @@ async function fetchData(log, tpl) {
|
|||
});
|
||||
}
|
||||
async function openInNewTab(url) {
|
||||
window.open(url, '_blank').focus();
|
||||
window.open(url, "_blank").focus();
|
||||
}
|
||||
|
||||
async function getLog() {
|
||||
let log = document.getElementById('log');
|
||||
let log = document.getElementById("log");
|
||||
if (log == null) {
|
||||
setTimeout(getLog, 1000);
|
||||
} else {
|
||||
|
|
@ -114,9 +129,9 @@ async function getLog() {
|
|||
}
|
||||
}
|
||||
async function getMastodonPage() {
|
||||
let log = document.getElementById('log');
|
||||
let log = document.getElementById("log");
|
||||
|
||||
let tplUrl = '/json/mastodon-tpl.html';
|
||||
let tplUrl = "/json/mastodon-tpl.html";
|
||||
let response = await fetch(tplUrl);
|
||||
var tpl = "";
|
||||
|
||||
|
|
@ -131,10 +146,9 @@ async function getMastodonPage() {
|
|||
try {
|
||||
const response = await fetch(tplUrl, { signal });
|
||||
tpl = await response.text();
|
||||
|
||||
} catch (error) {
|
||||
// DOMException: The user aborted a request.
|
||||
console.log('Error: ', error);
|
||||
console.log("Error: ", error);
|
||||
log.innerHTML = "<p>1) Ой всё сломалось :(</p>";
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -94,6 +94,10 @@ switch (query) {
|
|||
bodyFetch(query);
|
||||
break;
|
||||
|
||||
case "/reading":
|
||||
bodyFetch(query);
|
||||
break;
|
||||
|
||||
default:
|
||||
bodyFetch();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,16 +72,16 @@
|
|||
<!-- /Yandex.Metrika counter -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="bg-dark">
|
||||
<div id="loader"></div>
|
||||
|
||||
<button type="button" class="btn btn-danger btn-floating btn-lg" id="btn-back-to-top">
|
||||
<button type="button" class="btn btn-danger btn-floating btn-lg shadow-10-10-20-black" id="btn-back-to-top">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
</button>
|
||||
|
||||
<header class="mb-auto">
|
||||
|
||||
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark border-bottom" aria-label="Main navigation">
|
||||
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark shadow-15-15-30-black" aria-label="Main navigation">
|
||||
<div class="container">
|
||||
|
||||
<a class="navbar-brand justify-content-center float-md-start mb-0" href="/">
|
||||
|
|
|
|||
|
|
@ -1,35 +1,57 @@
|
|||
<article class="container" data-id="{post_id}" style="border: 1px solid #444; border-radius: 10px; background-color: #353535; margin-top: 1rem; margin-bottom: 1rem;">
|
||||
<article
|
||||
class="container article-card shadow-10-10-20-black bg-dark"
|
||||
data-id="{post_id}"
|
||||
>
|
||||
<div data-id="{post_id}">
|
||||
|
||||
<div class="row" style="padding: 1rem 0; border-bottom: 1px solid #444;">
|
||||
<div class="row" style="padding: 1rem 0; border-bottom: 1px solid #444">
|
||||
<div class="col-md-6">
|
||||
<a href="https://{server_address}/@{name}" title="{name}" target="_blank" rel="noopener noreferrer">
|
||||
<span style="width: 46px; height: 46px;"><img src="{avatar}" alt="{name}" style="width: 46px; height: 46px; border-radius: 50%;"></span>
|
||||
<a
|
||||
href="https://{server_address}/@{name}"
|
||||
title="{name}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span style="width: 46px; height: 46px"
|
||||
><img
|
||||
src="{avatar}"
|
||||
alt="{name}"
|
||||
style="
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 50%;
|
||||
"
|
||||
/></span>
|
||||
<span><span>@{name}</span></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<a href="https://{server_address}/@{name}/{post_id}" target="_blank" rel="noopener noreferrer">
|
||||
<a
|
||||
href="https://{server_address}/@{name}/{post_id}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span><i class="fa fa-globe" title="Публичный"></i></span>
|
||||
<time datetime="{created_at}" title="{created_at}">{created_at_show}</time>
|
||||
<time datetime="{created_at}" title="{created_at}"
|
||||
>{created_at_show}</time
|
||||
>
|
||||
<abbr title="Последнее изменение: {edited_at}"> *</abbr>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content" style="padding: 1rem; text-align: start;">
|
||||
<div class="content" style="padding: 1rem; text-align: start">
|
||||
{content}
|
||||
</div>
|
||||
|
||||
<div class="media_attachments" style="padding: 1rem;">
|
||||
<div class="media_attachments" style="padding: 1rem">
|
||||
{media_attachments}
|
||||
</div>
|
||||
|
||||
<div class="tags" style="padding: 1rem;">
|
||||
<a href="https://{server_address}/tags/MelawyLinux">#<span>MelawyLinux</span></a>
|
||||
<div class="tags" style="padding: 1rem">
|
||||
<a href="https://{server_address}/tags/MelawyLinux"
|
||||
>#<span>MelawyLinux</span></a
|
||||
>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,96 @@
|
|||
|
||||
<div id="myCarousel" class="carousel slide carousel-fade carousel-light py-4" data-bs-ride="carousel">
|
||||
|
||||
<div
|
||||
id="myCarousel"
|
||||
class="carousel slide carousel-fade carousel-light py-4"
|
||||
data-bs-ride="carousel"
|
||||
>
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="3" aria-label="Slide 3"></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide-to="0"
|
||||
class="active"
|
||||
aria-current="true"
|
||||
aria-label="Slide 1"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide-to="1"
|
||||
aria-label="Slide 2"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide-to="2"
|
||||
aria-label="Slide 3"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide-to="3"
|
||||
aria-label="Slide 3"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div class="carousel-inner">
|
||||
|
||||
<div class="carousel-item active">
|
||||
<img src="/assets/img/slide1.png" class="d-block w-100">
|
||||
<img src="/assets/img/slide1.png" class="d-block w-100" />
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<img src="/assets/img/slide4.png" class="d-block w-100">
|
||||
<img src="/assets/img/slide4.png" class="d-block w-100" />
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<img src="/assets/img/slide6.png" class="d-block w-100">
|
||||
<img src="/assets/img/slide6.png" class="d-block w-100" />
|
||||
</div>
|
||||
|
||||
<div class="carousel-item">
|
||||
<img src="/assets/img/slide8.png" class="d-block w-100">
|
||||
<img src="/assets/img/slide8.png" class="d-block w-100" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
|
||||
<button
|
||||
class="carousel-control-prev"
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide="prev"
|
||||
>
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
|
||||
<button
|
||||
class="carousel-control-next"
|
||||
type="button"
|
||||
data-bs-target="#myCarousel"
|
||||
data-bs-slide="next"
|
||||
>
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="container py-5 my-5">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<article class="container" style="text-align: center; border: 1px solid #444; border-radius: 10px; background-color: #353535; margin-top: 1rem; margin-bottom: 1rem;">
|
||||
|
||||
<div class="row" style="padding: 1rem 0; border-bottom: 1px solid #444;">
|
||||
<article class="container article-card shadow-10-10-20-black bg-dark">
|
||||
<div class="row" style="padding: 1rem 0; border-bottom: 1px solid #444">
|
||||
<div class="col-md-6">
|
||||
<a href="https://melawy.ru/about" title="Valeria Fadeeva" target="_blank">
|
||||
<span style="width: 46px; height: 46px;"><img src="/assets/avatar/Valeria_Fadeeva.jpg" alt="Valeria Fadeeva" style="width: 46px; height: 46px; border-radius: 50%;"></span>
|
||||
<a
|
||||
href="https://melawy.ru/about"
|
||||
title="Valeria Fadeeva"
|
||||
target="_blank"
|
||||
>
|
||||
<span style="width: 46px; height: 46px"
|
||||
><img
|
||||
src="/assets/avatar/Valeria_Fadeeva.jpg"
|
||||
alt="Valeria Fadeeva"
|
||||
style="
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 50%;
|
||||
"
|
||||
/></span>
|
||||
<span><span>@Valeria Fadeeva</span></span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -63,7 +105,9 @@
|
|||
</div>
|
||||
|
||||
<div style="padding: 1rem; text-align: start;">
|
||||
<h2 class="blog-post-title mb-1">Distribution release Melawy Linux</h2>
|
||||
<h2 class="blog-post-title mb-1">
|
||||
Distribution release Melawy Linux
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
Quietly and almost imperceptibly, after 1.5 years of work, the first release of the Melawy Linux operating system was released.
|
||||
|
|
@ -111,42 +155,28 @@
|
|||
</li>
|
||||
|
||||
<li>
|
||||
Support for Luks2 full-disk encryption using the latest Argon2 algorithm.
|
||||
Support for Luks2 full-disk encryption using the latest Argon2id algorithm.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Beautiful, informative visual design:
|
||||
<ul>
|
||||
<li>
|
||||
operating system boot selection screen
|
||||
</li>
|
||||
<li>operating system boot selection screen</li>
|
||||
|
||||
<li>
|
||||
stage of loading the kernel and base environment initrd
|
||||
</li>
|
||||
<li>stage of loading the kernel and base environment initrd</li>
|
||||
|
||||
<li>
|
||||
login
|
||||
</li>
|
||||
<li>login</li>
|
||||
|
||||
<li>
|
||||
working environment:
|
||||
<ul>
|
||||
<li>
|
||||
styles
|
||||
</li>
|
||||
<li>styles</li>
|
||||
|
||||
<li>
|
||||
color
|
||||
</li>
|
||||
<li>color</li>
|
||||
|
||||
<li>
|
||||
icons
|
||||
</li>
|
||||
<li>icons</li>
|
||||
|
||||
<li>
|
||||
cursors
|
||||
</li>
|
||||
<li>cursors</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
|
@ -190,5 +220,5 @@
|
|||
<a class="btn btn-outline-secondary rounded-pill disabled">Newer</a>
|
||||
</nav>
|
||||
-->
|
||||
|
||||
</div><!-- /.container -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
|
|
|
|||
|
|
@ -312,17 +312,15 @@
|
|||
<ul>
|
||||
<li>melawy</li>
|
||||
<li>melawy-core</li>
|
||||
<li>melawy-3party</li>
|
||||
<li>melawy-archlinux</li>
|
||||
<li>cachyos</li>
|
||||
<li>core</li>
|
||||
<li>extra</li>
|
||||
<li>multilib</li>
|
||||
<li>melawy-3party</li>
|
||||
<li>chaotic-aur</li>
|
||||
<li>arcolinux_repo</li>
|
||||
<li>arcolinux_repo_xlarge</li>
|
||||
<li>arcolinux_repo_3party</li>
|
||||
<li>garuda</li>
|
||||
<li>chaotic-aur</li>
|
||||
<li>endeavouros</li>
|
||||
</ul>
|
||||
<p>Programs and designs specific to ArcoLinux, Garuda Linux, EndeavourOS are not used.</p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue