You've already forked Openterface_assets
mirror of
https://github.com/TechxArtisanStudio/Openterface_assets.git
synced 2025-06-10 16:33:42 -07:00
feat: add slideshow functionality and styles to enhance image display
This commit is contained in:
@@ -1054,3 +1054,83 @@
|
|||||||
width: 100%; /* Set a base width */
|
width: 100%; /* Set a base width */
|
||||||
aspect-ratio: 4 / 1; /* Maintain the aspect ratio */
|
aspect-ratio: 4 / 1; /* Maintain the aspect ratio */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Slideshow styles */
|
||||||
|
.slideshow-container {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slideshow-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slides {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slides img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
max-height: 500px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Update to fix slideshow image sizing */
|
||||||
|
.slides img {
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: 400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slideshow-text {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px;
|
||||||
|
text-align: center;
|
||||||
|
color: #333; /* Dark color for text */
|
||||||
|
}
|
||||||
|
|
||||||
|
.slideshow-text p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-link {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fading animation */
|
||||||
|
.fade {
|
||||||
|
animation-name: fade;
|
||||||
|
animation-duration: 1.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
from {opacity: .4}
|
||||||
|
to {opacity: 1}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive styling for slideshow */
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.slideshow-text {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
.slideshow-text {
|
||||||
|
padding: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
@@ -6,6 +6,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.md-typeset {
|
.md-typeset {
|
||||||
|
|
||||||
.admonition.frequent-question,
|
.admonition.frequent-question,
|
||||||
details.frequent-question,
|
details.frequent-question,
|
||||||
.admonition.faq,
|
.admonition.faq,
|
||||||
@@ -14,24 +15,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.frequent-question, .faq {
|
.frequent-question, .faq {
|
||||||
& > .admonition-title, & > summary {
|
&>.admonition-title, &>summary {
|
||||||
background-color: var(--admonition-bg-color-base);
|
background-color: var(--admonition-bg-color-base);
|
||||||
}
|
}
|
||||||
|
|
||||||
& > .admonition-title::before, & > summary::before {
|
&>.admonition-title::before, &>summary::before {
|
||||||
background-color: var(--admonition-border-color);
|
background-color: var(--admonition-border-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.frequent-question {
|
.frequent-question {
|
||||||
& > .admonition-title::before, & > summary::before {
|
&>.admonition-title::before, &>summary::before {
|
||||||
-webkit-mask-image: var(--icon-frequent-question);
|
-webkit-mask-image: var(--icon-frequent-question);
|
||||||
mask-image: var(--icon-frequent-question);
|
mask-image: var(--icon-frequent-question);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.faq {
|
.faq {
|
||||||
& > .admonition-title::before, & > summary::before {
|
&>.admonition-title::before, &>summary::before {
|
||||||
-webkit-mask-image: var(--icon-faq);
|
-webkit-mask-image: var(--icon-faq);
|
||||||
mask-image: var(--icon-faq);
|
mask-image: var(--icon-faq);
|
||||||
}
|
}
|
||||||
@@ -39,7 +40,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
mark.state1 {
|
mark.state1 {
|
||||||
background-color: #ffd699; /* A somewhat orange color */
|
background-color: #ffd699;
|
||||||
|
/* A somewhat orange color */
|
||||||
}
|
}
|
||||||
|
|
||||||
mark.state2 {
|
mark.state2 {
|
||||||
@@ -61,3 +63,73 @@ mark.state4 {
|
|||||||
.faq {
|
.faq {
|
||||||
color: #FF8D1A
|
color: #FF8D1A
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slideshow-container {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slideshow-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slides {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slides img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
max-height: 500px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slideshow-text {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px;
|
||||||
|
text-align: center;
|
||||||
|
color: #333;
|
||||||
|
/* Dark color for text */
|
||||||
|
}
|
||||||
|
|
||||||
|
.slideshow-text p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fading animation */
|
||||||
|
.fade {
|
||||||
|
animation-name: fade;
|
||||||
|
animation-duration: 1.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
from {
|
||||||
|
opacity: .4
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive styling */
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.slideshow-text {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
.slideshow-text {
|
||||||
|
padding: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
@@ -1,6 +1,6 @@
|
|||||||
window.onload = function() {
|
window.onload = function () {
|
||||||
// Hide the loading message when tweets are loaded
|
// Hide the loading message when tweets are loaded
|
||||||
var hideLoadingMessage = function() {
|
var hideLoadingMessage = function () {
|
||||||
var loadingMessage = document.getElementById('loadingMessage');
|
var loadingMessage = document.getElementById('loadingMessage');
|
||||||
if (loadingMessage) {
|
if (loadingMessage) {
|
||||||
loadingMessage.style.display = 'none';
|
loadingMessage.style.display = 'none';
|
||||||
@@ -18,7 +18,7 @@ window.onload = function() {
|
|||||||
|
|
||||||
// Find all twitter tweets and show them
|
// Find all twitter tweets and show them
|
||||||
var tweets = document.querySelectorAll('.twitter-tweet');
|
var tweets = document.querySelectorAll('.twitter-tweet');
|
||||||
tweets.forEach(function(tweet) {
|
tweets.forEach(function (tweet) {
|
||||||
tweet.classList.add('twitter-tweet-loaded');
|
tweet.classList.add('twitter-tweet-loaded');
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -65,7 +65,7 @@ window.onload = function() {
|
|||||||
setTimeout(initTwitterNavigation, 200);
|
setTimeout(initTwitterNavigation, 200);
|
||||||
};
|
};
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
const dialogue = document.querySelector('.gibby-dialogue');
|
const dialogue = document.querySelector('.gibby-dialogue');
|
||||||
|
|
||||||
function toggleDialogue() {
|
function toggleDialogue() {
|
||||||
@@ -79,3 +79,30 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
// Start the cycle after 1 second
|
// Start the cycle after 1 second
|
||||||
setTimeout(toggleDialogue, 1000);
|
setTimeout(toggleDialogue, 1000);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Slideshow functionality
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
let slideIndex = 0;
|
||||||
|
showSlides();
|
||||||
|
|
||||||
|
function showSlides() {
|
||||||
|
const slides = document.getElementsByClassName("slides");
|
||||||
|
|
||||||
|
// Hide all slides
|
||||||
|
for (let i = 0; i < slides.length; i++) {
|
||||||
|
slides[i].style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Increment slide index and reset if needed
|
||||||
|
slideIndex++;
|
||||||
|
if (slideIndex > slides.length) {
|
||||||
|
slideIndex = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show the current slide
|
||||||
|
slides[slideIndex - 1].style.display = "block";
|
||||||
|
|
||||||
|
// Change slide every 6 seconds
|
||||||
|
setTimeout(showSlides, 6000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
Reference in New Issue
Block a user