- 扫描 ID：
- 76893658-f26f-40e8-aec3-53b8af270ac9已完成
- 提交的 URL：
- https://juntario.org/
- 报告完成时间：
链接 · 找到 0 个
从页面中识别出的传出链接
JavaScript 变量 · 找到 14 个
在页面窗口对象上加载的全局 JavaScript 变量是在函数外部声明的变量，可以从当前范围内的代码中的任何位置访问
| 名称 | 类型 |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| __cfBeacon | object |
| __cfQR | object |
| slider | object |
| images | object |
| currentImage | number |
| changeImage | function |
| showParagraph | function |
控制台日志消息 · 找到 8 条
记录到 Web 控制台的消息
| 类型 | 类别 | 记录 |
|---|---|---|
| warning | other |
|
| warning | other |
|
| warning | other |
|
| warning | other |
|
| warning | other |
|
| warning | other |
|
| warning | other |
|
| warning | other |
|
HTML
页面的原始 HTML 正文
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Juntario</title>
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.juntario.org/">
<meta property="og:title" content="Juntario">
<meta property="og:description" content="The Official Website for hosting Juntario's artworks, and receiving answers to the FAQs.">
<meta property="og:image" content="https://www.juntario.org/poster.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link rel="canonical" href="https://www.juntario.org">
<link rel="stylesheet" href="style.css">
<style>
@media (max-width: 600px) {
#acceptCookies, #privacyInfo {
width: 100%;
margin-top: 10px;
box-sizing: border-box;
}
.cookie-banner {
width: auto;
padding: 10px;
}
}
#acceptCookies, #privacyInfo {
border: 2px solid red;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
</style></head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="https://www.juntario.org/">Juntario</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="socials">Socials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq">FAQ</a>
</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript">
const removeBanner = (cookieBanner) => {
if (document.body.contains(cookieBanner)) {
document.body.removeChild(cookieBanner);
}
};
const createBanner = () => {
const cookieBanner = document.createElement('div');
cookieBanner.style.position = 'fixed';
cookieBanner.style.bottom = '20px';
cookieBanner.style.left = '20px';
cookieBanner.style.right = '20px';
cookieBanner.style.backgroundColor = '#333';
cookieBanner.style.color = 'white';
cookieBanner.style.padding = '15px 20px';
cookieBanner.style.textAlign = 'center';
cookieBanner.style.zIndex = '9999';
cookieBanner.style.fontFamily = 'Arial, sans-serif';
cookieBanner.style.borderRadius = '8px';
cookieBanner.style.boxSizing = 'border-box';
const bannerText = document.createElement('span');
bannerText.textContent = 'This website uses necessary cookies to ensure its basic functionalities, such as Cloudflare Services and Content Delivery Networks (CDNs). By continuing to use this site, you agree to our use of necessary cookies.';
const acceptButton = document.createElement('button');
acceptButton.id = 'acceptCookies';
acceptButton.textContent = 'OK';
acceptButton.style.marginTop = '10px';
acceptButton.style.padding = '10px 20px';
acceptButton.style.backgroundColor = '#007BFF';
acceptButton.style.color = 'white';
acceptButton.style.border = 'none';
acceptButton.style.borderRadius = '4px';
acceptButton.style.cursor = 'pointer';
acceptButton.style.marginRight = '10px';
const privacyButton = document.createElement('button');
privacyButton.id = 'privacyInfo';
privacyButton.textContent = 'Privacy info';
privacyButton.style.marginTop = '10px';
privacyButton.style.padding = '10px 20px';
privacyButton.style.backgroundColor = '#28A745';
privacyButton.style.color = 'white';
privacyButton.style.border = 'none';
privacyButton.style.borderRadius = '4px';
privacyButton.style.cursor = 'pointer';
cookieBanner.appendChild(bannerText);
cookieBanner.appendChild(document.createElement('br'));
cookieBanner.appendChild(acceptButton);
cookieBanner.appendChild(privacyButton);
document.body.appendChild(cookieBanner);
acceptButton.addEventListener('click', () => {
try {
localStorage.setItem('cookiesAccepted', 'true');
removeBanner(cookieBanner);
} catch (error) {
console.error('Error saving cookiesAccepted to localStorage:', error);
}
});
privacyButton.addEventListener('click', () => {
bannerText.textContent = 'Juntario.org does not collect personal information about the visitors nor share it with any Third-Parties / Advertisers / Companies. The only information obtained is publicly available such as your IP address. The Cloudflare Services provide error handling and reporting (RUM) analytics to identify performance issues, this does not collect personal information for Advertisers or any other Entity. Some functionality of the website depends on the collection of the screen width and height of the device. This data is used to optimize the user experience (e.g., adjusting layouts for mobile or desktop views).';
});
};
try {
const cookiesAccepted = localStorage.getItem('cookiesAccepted');
if (cookiesAccepted !== 'true') {
createBanner();
}
} catch (error) {
console.error('Error accessing localStorage:', error);
}
const style = document.createElement('style');
style.innerHTML = `
@media (max-width: 600px) {
#acceptCookies, #privacyInfo {
width: 100%;
margin-top: 10px;
box-sizing: border-box;
}
.cookie-banner {
width: auto;
padding: 10px;
}
}
#acceptCookies, #privacyInfo {
border: 2px solid red;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
`;
document.head.appendChild(style);
</script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
<script type="text/javascript">
window.onload = function() {
var screenWidth = window.innerWidth;
var currentUrl = window.location.href;
var url = new URL(currentUrl);
if (!url.searchParams.has('sw')) {
url.searchParams.append('sw', screenWidth);
window.location.href = url.href;
} else {
url.searchParams.delete('sw');
window.history.replaceState({}, document.title, url.pathname);
}
};
</script>
<style>
#subtext {
font-size: 1.2em;
}
.glitch {
font-size: 5rem;
position: relative;
color: black;
font-weight: none;
animation: glitch-skew 3s infinite;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
color: inherit;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: glitch-anim 2s infinite ease-in-out;
}
.glitch::before {
left: 2px;
text-shadow: -2px 0 red;
clip: rect(2px, 900px, 90px, 0);
animation: glitch-anim 2.5s infinite linear alternate-reverse;
}
.glitch::after {
left: -2px;
text-shadow: -2px 0 cyan;
clip: rect(10px, 900px, 85px, 0);
animation: glitch-anim2 1.5s infinite linear alternate-reverse;
}
@keyframes glitch-skew {
0%, 100% {
transform: skew(0deg);
}
50% {
transform: skew(5deg);
}
}
@keyframes glitch-anim {
0%, 20%, 40%, 60%, 80%, 100% {
clip: rect(0, 900px, 0, 0);
}
10% {
clip: rect(80px, 900px, 90px, 0);
}
30% {
clip: rect(40px, 900px, 50px, 0);
}
50% {
clip: rect(60px, 900px, 70px, 0);
}
70% {
clip: rect(20px, 900px, 30px, 0);
}
90% {
clip: rect(100px, 900px, 110px, 0);
}
}
@keyframes glitch-anim2 {
0%, 20%, 40%, 60%, 80%, 100% {
clip: rect(0, 900px, 0, 0);
}
10% {
clip: rect(70px, 900px, 80px, 0);
}
30% {
clip: rect(50px, 900px, 60px, 0);
}
70% {
clip: rect(10px, 900px, 20px, 0);
}
90% {
clip: rect(90px, 900px, 100px, 0);
}
}
.bk {
background-color: #111;
color: white;
width: 100%;
padding: 15px 0;
margin-top: 150px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
position: relative;
z-index: 10;
white-space: nowrap;
}
.mDT {
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1.375;
letter-spacing: 0.5px;
display: flex;
white-space: nowrap;
letter-spacing: 2px;
}
.tC {
display: flex;
animation: mT 200s linear infinite;
}
.tC span {
display: inline-block;
padding-right: 12.5px;
}
@keyframes mT {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
</style>
<div class="container" style="padding-top: 70px;">
<h1 class="glitch" data-text="Juntario" id="welcome-text" style="text-align: center; color: white; text-shadow: rgba(0, 0, 0, 0.6) 0px 2px 4px; transform: skew(3deg) translate(1px, 3px);">Juntario</h1>
<p class="glitch" data-text="The Official Website" id="subtext" style="text-align: center; padding-bottom: 50px; color: white; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.60);">The Official Website</p>
</div>
<div class="container" style="text-align: center; padding-top: 50px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.60);">
<h1 class="head" style="color: white; font-size: 62px; margin: 0 20px; display: inline-block; font-style: italic;">Entertainment.</h1>
<h1 class="head" style="color: white; font-size: 62px; margin: 0 20px; display: inline-block; font-style: italic;">Artworks.</h1>
<h1 class="head" style="color: white; font-size: 62px; margin: 0 20px; display: inline-block; font-style: italic;">Specialties.</h1>
</div>
<div class="bk">
<div class="mDT">
<div class="tC">
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
<span>PHOTOGRAPHY IS THE EASIEST WAY TO RELAX OUTDOORS WHILE STILL MAINTAINING THE FEELING OF BEING PRODUCTIVE. </span>
</div>
</div>
</div>
<div class="imagination" style="background-image: url('https://juntario.org/bgi.png'); background-size: cover; background-attachment: fixed; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; width: 100%; height: 100vh; z-index: 99;">
<h1 style="margin: 0; padding: 0; position: relative; top: 10%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 50px 'Poppins', sans-serif; color:white; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);">The Featured Artworks</h1>
<style>
img {
border: 50px solid #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.imagination-slider {
position: relative;
width: 1000px;
height: 750px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.imagination-slider img {
position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.imagination-slider img.active {
opacity: 1;
}
@media only screen and (max-width: 1030px) {
h1 {
top: 15%;
}
.imagination-slider {
width: 100%;
height: 60vh;
max-height: 60vh;
max-width: 100%;
position: relative;
top: 10%;
left: 0;
transform: none;
overflow: hidden;
}
.imagination-slider img {
width: 100%;
height: 100%;
max-height: 60vh;
max-width: 100%;
object-fit: cover;
}
}
</style>
<div class="imagination-slider">
<img src="https://64.media.tumblr.com/90109b82fdda03d5fe5d10c7f67dbf17/c09ca58dc8fe7578-7b/s2048x3072/d2af4a7d670b5b6baaa5ca2573f3bf7d04490f2a.png" alt="Image 1" class=""><img src="https://64.media.tumblr.com/25e988cfe59f35b0d2a33eca8e48a7b3/10a26d020241670d-32/s2048x3072/12902d5d794902b4fa0704a6a64a20faf7c49a96.png" alt="Image 2" class="active"><img src="https://64.media.tumblr.com/0440252c4e10fadf7f226e61af8aedb3/389e668ef77fcb6b-e7/s2048x3072/b994349c9227847ec8eb1a3e9f560cb47946776e.png" alt="Image 3" class=""><img src="https://64.media.tumblr.com/8d41668dc506d74881b92774a4cfad6b/469fce35d631e7e3-f0/s2048x3072/036253f1cf9dac407ab9c34d7ac71ea53045838b.png" alt="Image 4" class=""><img src="https://64.media.tumblr.com/65bc33c27ee097daaa68a1c03e55c961/cb92cf27dc8b214e-91/s2048x3072/984c2f5053c904b3697acd53ca506370625e3104.png" alt="Image 5" class=""></div>
<script type="text/javascript">
var slider = document.querySelector('.imagination-slider');
var images = slider.getElementsByTagName('img');
var currentImage = 0;
function changeImage() {
images[currentImage].classList.remove('active');
currentImage = (currentImage + 1) % images.length;
images[currentImage].classList.add('active');
}
setInterval(changeImage, 3000);
</script>
</div>
<style>
.bb {
background-color: #111;
color: white;
width: 100%;
padding: 15px 0;
/* margin-top: 150px; */
margin-top: 0px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
position: relative;
z-index: 10;
white-space: nowrap;
}
.bbs {
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1.375;
letter-spacing: 0.5px;
display: flex;
white-space: nowrap;
letter-spacing: 2px;
}
.te-black {
display: flex;
animation: mBT 200s linear infinite;
}
.te-black span {
display: inline-block;
padding-right: 12.5px;
}
@keyframes mBT {
0% {
transform: translateX(-50%);
}
100% {
transform: translateX(0%);
}
}
</style>
<div class="bb">
<div class="bbs">
<div class="te-black">
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
<span>DIGITAL ARTWORKS ARE A GREAT WAY TO VISUALISE OUR FAVORITE MEMORIES AND THE WAY WE VIEW THE WORLD. </span>
</div>
</div>
</div>
<div class="vi" style="background-image: url('https://juntario.org/bg.png'); background-size: cover; background-attachment: fixed; background-position: center; background-repeat: no-repeat; margin: 0; padding: 0; width: 100%; height: 100vh; z-index: 99;">
<h1 style="margin: 0; padding: 0; position: relative; top: 10%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 50px 'Poppins', sans-serif; color:white; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);">Writing & Ideas</h1>
<style>
img {
border: 50px solid #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.vi {
width: 100%;
height: 100vh;
max-height: 100vh;
max-width: 100%;
position: relative;
top: 0%;
left: 0;
transform: none;
overflow: hidden;
}
.vi img {
position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.vi img.active {
opacity: 1;
}
@media only screen and (max-width: 1030px) {
.vi {
width: 100%;
height: 100vh;
max-height: 100vh;
max-width: 100%;
position: relative;
top: 0%;
left: 0;
transform: none;
overflow: hidden;
}
.vi img {
width: 100%;
height: 100%;
max-height: 60vh;
max-width: 100%;
object-fit: cover;
}
</style>
<style>
.fade {
opacity: 0;
transition: opacity 2s ease-in-out;
}
.fade.av {
opacity: 1;
}
</style>
<div class="vi" overflow:="" hidden;="">
<p class="fade av" id="para1" style="background-color: rgba(0, 0, 0, 0.6); margin: 0; padding: 15px; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 48px 'Poppins', sans-serif; color:white; text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);">The only way to lose is to do nothing.</p>
<p class="fade" id="para2" style="background-color: rgba(0, 0, 0, 0.6); margin: 0; padding: 15px; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 48px 'Poppins', sans-serif; color:white; text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);">Practice takes time, sometimes years, but don't lose hope.</p>
<p class="fade" id="para3" style="background-color: rgba(0, 0, 0, 0.6); margin: 0; padding: 15px; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 48px 'Poppins', sans-serif; color:white; text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);">You may feel defeated sometimes, but remember, even if that is true you have still gained experience.</p>
<p class="fade" id="para4" style="background-color: rgba(0, 0, 0, 0.6); margin: 0; padding: 15px; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 48px 'Poppins', sans-serif; color:white; text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);">You are not God, remind yourself that you need to take breaks for various reasons.</p>
<p class="fade" id="para5" style="background-color: rgba(0, 0, 0, 0.6); margin: 0; padding: 15px; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 48px 'Poppins', sans-serif; color:white; text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);">Recommendations, suggestions and opinions are not orders and criticism is unavoidable.</p>
<p class="fade" id="para6" style="background-color: rgba(0, 0, 0, 0.6); margin: 0; padding: 15px; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; font: 48px 'Poppins', sans-serif; color:white; text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.6);">Enjoy the simple things in life.</p>
</div>
</div>
<script type="text/javascript">
let currentIndex = 0;
const paragraphs = document.querySelectorAll('.fade');
function showParagraph(index) {
paragraphs.forEach((para, i) => {
para.classList.toggle('av', i === index);
});
}
function cycleParagraphs() {
showParagraph(currentIndex);
currentIndex = (currentIndex + 1) % paragraphs.length;
}
setInterval(cycleParagraphs, 7000);
cycleParagraphs();
</script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
const glitchText = document.querySelector('.glitch');
function randomGlitchEffect() {
let randomSkew = Math.floor(Math.random() * 10) - 5;
let randomXOffset = Math.floor(Math.random() * 10) - 5;
let randomYOffset = Math.floor(Math.random() * 10) - 5;
glitchText.style.transform = `skew(${randomSkew}deg) translate(${randomXOffset}px, ${randomYOffset}px)`;
setTimeout(randomGlitchEffect, Math.random() * 500);
}
randomGlitchEffect();
});
</script>
<footer class="text-center py-4" style="position: relative; bottom: 0; margin: 0; padding: 0; width: 100%; height: 1vh; display: flex; justify-content: center; align-items: center;">
<p style="margin: 0; padding: 10px; color: white; font-size: 12px;">© 2024 Juntario.All rights reserved.</p>
<script defer="" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
</footer>
<script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{"rayId":"8f21d0cfcf1f3833","version":"2024.10.5","r":1,"serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}},"token":"8c83dd7285724c2896b5d4e44d86e658","b":1}" crossorigin="anonymous"></script>
<div style="position: fixed; bottom: 20px; left: 20px; right: 20px; background-color: rgb(51, 51, 51); color: white; padding: 15px 20px; text-align: center; z-index: 9999; font-family: Arial, sans-serif; border-radius: 8px; box-sizing: border-box;"><span>This website uses necessary cookies to ensure its basic functionalities, such as Cloudflare Services and Content Delivery Networks (CDNs). By continuing to use this site, you agree to our use of necessary cookies.</span><br><button id="acceptCookies" style="margin-top: 10px; padding: 10px 20px; background-color: rgb(0, 123, 255); color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">OK</button><button id="privacyInfo" style="margin-top: 10px; padding: 10px 20px; background-color: rgb(40, 167, 69); color: white; border: none; border-radius: 4px; cursor: pointer;">Privacy info</button></div></body></html>