Add project files.

This commit is contained in:
Junior 2023-05-12 17:44:41 -03:00
commit 0a12c6baa0
41 changed files with 2698 additions and 0 deletions

View file

@ -0,0 +1,2 @@
[LAUNCHER]
version=1.0.0

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 307 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 326 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 311 KiB

View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News Panel</title>
<link rel="stylesheet" href="/launcher/news/style.css">
</head>
<body oncontextmenu="return false;">
<div class="slider-container">
<div class="slider">
<img src="/launcher/news/images/lb_cashshop_banner07.png?text=Halloween" alt="Halloween" onclick="location.href='https://your-website.com/news/Halloween.html';">
<img src="/launcher/news/images/lb_cashshop_banner08.png?text=Winter" alt="Winter" onclick="location.href='https://your-website.com/news/Winter.html';">
<img src="/launcher/news/images/lb_cashshop_banner09.png?text=Happy New Year" alt="Happy New Year" onclick="location.href='https://your-website.com/news/Happy_New_Year.html';">
</div>
<div class="slider-arrow slider-arrow-left">&lt;</div>
<div class="slider-arrow slider-arrow-right">&gt;</div>
<div class="slider-dots">
<div class="slider-dot active"></div>
<div class="slider-dot"></div>
<div class="slider-dot"></div>
</div>
</div>
<div class="tab-links">
<div class="tab-link active" data-tab="events">Events</div>
<div class="tab-link" data-tab="notices">Notices</div>
<div class="tab-link" data-tab="info">Info</div>
</div>
<div class="tab-content tab events active">
<a href="https://your-website.com/news/Halloween.html">Halloween</a> - <span class="tab-date">20/10/2023</span><br>
<a href="https://your-website.com/news/Winter.html">Winter</a> - <span class="tab-date">10/12/2023</span><br>
<a href="https://your-website.com/news/Happy_New_Year.html">Happy New Year</a> - <span class="tab-date">01/01/2024</span><br>
</div>
<div class="tab-content tab notices">
<a href="#">Notice 1</a> - <span class="tab-date">01/01/2023</span><br>
<a href="#">Notice 2</a> - <span class="tab-date">02/01/2023</span><br>
<a href="#">Notice 3</a> - <span class="tab-date">03/01/2023</span><br>
</div>
<div class="tab-content tab info">
<a href="#">Info 1</a> - <span class="tab-date">01/01/2023</span><br>
<a href="#">Info 2</a> - <span class="tab-date">02/01/2023</span><br>
<a href="#">Info 3</a> - <span class="tab-date">03/01/2023</span><br>
</div>
<script src="/launcher/news/script.js"></script>
</body>
</html>

View file

@ -0,0 +1,91 @@
/* Slider */
const slider = document.querySelector('.slider');
const slides = slider.querySelectorAll('img');
const arrowLeft = document.querySelector('.slider-arrow-left');
const arrowRight = document.querySelector('.slider-arrow-right');
const dots = document.querySelectorAll('.slider-dot');
let currentSlide = 0;
let interval;
function showSlide(index) {
slides.forEach(slide => slide.style.transform = `translateX(-${index * 100}%)`);
dots.forEach(dot => dot.classList.remove('active'));
dots[index].classList.add('active');
currentSlide = index;
}
function nextSlide() {
currentSlide++;
if (currentSlide >= slides.length) {
currentSlide = 0;
}
showSlide(currentSlide);
}
function prevSlide() {
currentSlide--;
if (currentSlide < 0) {
currentSlide = slides.length - 1;
}
showSlide(currentSlide);
}
function startInterval() {
interval = setInterval(() => {
nextSlide();
}, 5000);
}
function stopInterval() {
clearInterval(interval);
}
arrowLeft.addEventListener('click', () => {
stopInterval();
prevSlide();
startInterval();
});
arrowRight.addEventListener('click', () => {
stopInterval();
nextSlide();
startInterval();
});
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
stopInterval();
showSlide(index);
startInterval();
});
});
slider.addEventListener('mouseenter', () => {
arrowLeft.style.display = 'block';
arrowRight.style.display = 'block';
});
slider.addEventListener('mouseleave', () => {
arrowLeft.style.display = 'none';
arrowRight.style.display = 'none';
});
startInterval();
/* Tabs */
const tabLinks = document.querySelectorAll('.tab-link');
const tabs = document.querySelectorAll('.tab');
function showTab(tab) {
tabs.forEach(tab => tab.classList.remove('active'));
tab.classList.add('active');
}
tabLinks.forEach(link => {
link.addEventListener('click', () => {
const tab = document.querySelector(`.tab.${link.dataset.tab}`);
showTab(tab);
tabLinks.forEach(link => link.classList.remove('active'));
link.classList.add('active');
});
});

View file

@ -0,0 +1,135 @@
body {
background-color: #151d4c;
}
/* Slider styles */
.slider-container {
position: relative;
width: 460px;
height: 214px;
overflow: hidden;
margin-bottom: 0;
}
.slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
transition: all 0.5s ease;
}
.slider img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 400px;
background-color: rgb(0 0 0 / 75%);
color: #fff;
font-size: 24px;
font-weight: 700;
text-align: center;
line-height: 400px;
cursor: pointer;
transition: all 0.3s ease;
display: none;
}
.slider-arrow:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.slider-arrow-left {
left: 0;
}
.slider-arrow-right {
right: 0;
}
.slider-dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.slider-dot {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgb(68 66 66);
margin: -8px 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.slider-dot.active {
background-color: rgb(255 255 255);
}
/* Tab styles */
.tab {
display: none;
width: 460px;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.tab.active {
display: block;
}
.tab-links {
display: flex;
width: 460px;
margin-bottom: 10px;
margin-top: 20px;
background-color: transparent;
border-top: none;
}
.tab-link {
flex: 1;
text-align: center;
color: #e5e6eb;
background-color: #151d4c;
padding: 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.tab-link.active {
background-color: #ffffff;
border-bottom: 1px solid #ccc;
color: #151d4c;
}
.tab-content {
font-size: 15px;
line-height: 1.5;
margin-bottom: 10px;
background-color: #ffffffe3;
}
.tab-date {
font-size: 12px;
color: #000;
text-align: right;
}
.slider-container:hover .slider-arrow {
display: block !important;
}