Skip to content

Commit

Permalink
fix: mobile handling
Browse files Browse the repository at this point in the history
  • Loading branch information
@jackd248
jackd248 committed Sep 27, 2024
1 parent 45b0744 commit 6534e45
Showing 1 changed file with 43 additions and 97 deletions.
140 changes: 43 additions & 97 deletions pycasso/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,80 +6,25 @@
<title>pycasso showreel</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Overpass:[email protected]&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Caveat:[email protected]&display=swap" rel="stylesheet">
<style>
* {
font-family: "Overpass", sans-serif;
font-optical-sizing: auto;
color: #323A45;
}
a {
text-decoration: none;
color: #E57373;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;
height: 100vh;
flex-direction: column;
}
.slider {
position: relative;
width: 512px;
overflow: hidden;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
box-sizing: border-box;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.slide img {
width: 512px;
height: 512px;
background: #f5f5f5;
display: block;
}
.title {
margin-top: 10px;
font-size: 20px;
color: #333;
font-family: "Caveat", cursive;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
.prev {
left: 10px;
}
.next {
right: 10px;
* { font-family: "Overpass", sans-serif; color: #323A45; }
a { text-decoration: none; color: #E57373; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column; }
.slider { position: relative; width: 512px; overflow: hidden; }
.slides { display: flex; transition: transform 0.5s ease-in-out; }
.slide { min-width: 100%; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.slide img { width: 512px; height: 512px; background: #f5f5f5; }
.title { margin-top: 10px; font-size: 20px; color: #333; font-family: "Caveat", cursive; }
.prev, .next { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px; cursor: pointer; }
.prev { left: 10px; }
.next { right: 10px; }
@media screen and (max-width: 600px) {
.slider { width: 100%; }
.slide img { width: 100%; height: auto; }
.prev, .next { padding: 5px; }
}
</style>
</head>
Expand All @@ -92,58 +37,59 @@ <h1><a href="https://github.com/jezs00/pycasso" target="_blank">pycasso</a> show
</div>

<script>
let startX = 0, endX = 0, currentSlide = 0, isSliding = false;

function handleTouchStart(e) { startX = e.touches[0].clientX; }
function handleTouchMove(e) { endX = e.touches[0].clientX; }
function handleTouchEnd() {
if (startX > endX + 50) moveSlide(1);
else if (startX < endX - 50) moveSlide(-1);
}

async function fetchImages() {
const response = await fetch('https://raw.githubusercontent.com/jackd248/pycasso--collection/main/images.json');
const data = await response.json();
const res = await fetch('https://raw.githubusercontent.com/jackd248/pycasso--collection/main/images.json');
const data = await res.json();
return data.files.reverse();
}

function extractTitle(filename) {
const regex = /pycasso - (.+), (?:digital|fantasy) art, trending on artstation\.png/;
const match = filename.match(regex);
const match = filename.match(/pycasso - (.+), (?:digital|fantasy) art, trending on artstation\.png/);
return match ? match[1] : null;
}

function createSlide(imageFile) {
const slide = document.createElement('div');
slide.className = 'slide';
const img = document.createElement('img');
img.src = `https://raw.githubusercontent.com/jackd248/pycasso--collection/main/generated/${imageFile}`;
const title = document.createElement('div');
title.className = 'title';
title.textContent = extractTitle(imageFile);
slide.appendChild(img);
slide.appendChild(title);
slide.innerHTML = `<img src="https://raw.githubusercontent.com/jackd248/pycasso--collection/main/generated/${imageFile}"><div class="title">${extractTitle(imageFile)}</div>`;
return slide;
}

async function initSlider() {
const slidesContainer = document.getElementById('slides');
const images = await fetchImages();
images.forEach(imageFile => {
const slide = createSlide(imageFile);
slidesContainer.appendChild(slide);
});
images.forEach(imageFile => slidesContainer.appendChild(createSlide(imageFile)));
}

let currentSlide = 0;

function moveSlide(direction) {
if (isSliding) return;
isSliding = true;
const slides = document.querySelectorAll('.slide');
currentSlide = (currentSlide + direction + slides.length) % slides.length;
const offset = -currentSlide * 100;
document.querySelector('.slides').style.transform = `translateX(${offset}%)`;
document.querySelector('.slides').style.transform = `translateX(${-currentSlide * 100}%)`;
setTimeout(() => isSliding = false, 500);
}

document.addEventListener('DOMContentLoaded', () => {
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
initSlider();
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowLeft') {
moveSlide(-1);
} else if (event.key === 'ArrowRight') {
moveSlide(1);
}
document.addEventListener('keydown', e => {
if (e.key === 'ArrowLeft') moveSlide(-1);
else if (e.key === 'ArrowRight') moveSlide(1);
});
const slider = document.querySelector('.slider');
slider.addEventListener('touchstart', handleTouchStart, false);
slider.addEventListener('touchmove', handleTouchMove, false);
slider.addEventListener('touchend', handleTouchEnd, false);
});
</script>
</body>
Expand Down

0 comments on commit 6534e45

Please sign in to comment.