Add project files.
This commit is contained in:
Junior
commit
0a12c6baa0
41 changed files with 2698 additions and 0 deletions
BIN
public/launcher/news/favicon.ico
Normal file
BIN
public/launcher/news/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
public/launcher/news/images/lb_cashshop_banner07.png
Normal file
BIN
public/launcher/news/images/lb_cashshop_banner07.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
BIN
public/launcher/news/images/lb_cashshop_banner08.png
Normal file
BIN
public/launcher/news/images/lb_cashshop_banner08.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 326 KiB |
BIN
public/launcher/news/images/lb_cashshop_banner09.png
Normal file
BIN
public/launcher/news/images/lb_cashshop_banner09.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 311 KiB |
47
public/launcher/news/news-panel.html
Normal file
47
public/launcher/news/news-panel.html
Normal 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"><</div>
|
||||
<div class="slider-arrow slider-arrow-right">></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>
|
||||
91
public/launcher/news/script.js
Normal file
91
public/launcher/news/script.js
Normal 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');
|
||||
});
|
||||
});
|
||||
135
public/launcher/news/style.css
Normal file
135
public/launcher/news/style.css
Normal 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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue