Skip to content

Commit

Permalink
updates
Browse files Browse the repository at this point in the history
  • Loading branch information
rcossette2 committed Sep 30, 2023
1 parent d32bc05 commit 76c266a
Show file tree
Hide file tree
Showing 17 changed files with 156 additions and 136 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
208 changes: 99 additions & 109 deletions books.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,24 +60,14 @@ <h1 class="logo_header">The Retro New</h1>
</header>

<div class="container spacing">
<div class="row">
<div class="row justify-content-center">
<!-- Thumbnails -->
<!-- <div class="col-md-3 col-sm-6 mb-4">
<img src="img/old/samurai_jack_old.jpg" alt="Thumbnail" class="img-fluid"
onclick="openModal('img/new/samurai_jack_new.jpg', 'img/old/samurai_jack_old.jpg', 0)" />
</div>
<div class="col-md-3 col-sm-6 mb-4">
<img src="img/old/ssw_old.jpg" alt="Thumbnail" class="img-fluid"
onclick="openModal('img/new/ssw_new.jpg', 'img/old/ssw_old.jpg', 1)" />
</div>
<div class="col-md-3 col-sm-6 mb-4">
<img src="img/old/tsomi_old.jpg" alt="Thumbnail" class="img-fluid"
onclick="openModal('img/new/tsomi_new.jpg', 'img/old/tsomi_old.jpg', 2)" />
<!-- <div class="thumbnail-container">
<img src="img/old/samurai_jack_old.jpg" alt="Thumbnail" class="thumbnail"
onclick="openModal('img/new/samurai_jack_new.jpg', 'img/old/samurai_jack_old.jpg', 0)" />
</div> -->
</div>
<div class="col-md-3 col-sm-6 mb-4">
<img src="img/old/ewj_old.jpg" alt="Thumbnail" class="img-fluid"
onclick="openModal('img/new/ewj_new.jpg', 'img/old/ewj_old.jpg', 3)" />
</div> -->
</div>
</div>

Expand Down Expand Up @@ -108,125 +98,125 @@ <h1 class="logo_header">The Retro New</h1>

<script>
let currentImageIndex = 0;

function setClipPath(compareDiv) {
const rangeInput = compareDiv.querySelector('.c-rng.c-compare__range');
const newImg = compareDiv.querySelector('.c-compare__left');
const oldImg = compareDiv.querySelector('.c-compare__right');
const value = `${rangeInput.value}%`;
newImg.style.clipPath = `polygon(0% 0%, ${value} 0%, ${value} 100%, 0% 100%)`;
oldImg.style.clipPath = `polygon(100% 0%, ${value} 0%, ${value} 100%, 100% 100%)`;
const rangeInput = compareDiv.querySelector('.c-rng.c-compare__range');
const newImg = compareDiv.querySelector('.c-compare__left');
const oldImg = compareDiv.querySelector('.c-compare__right');
const value = `${rangeInput.value}%`;
newImg.style.clipPath = `polygon(0% 0%, ${value} 0%, ${value} 100%, 0% 100%)`;
oldImg.style.clipPath = `polygon(100% 0%, ${value} 0%, ${value} 100%, 100% 100%)`;
}

function openModal(newImgSrc, oldImgSrc, index) {
console.log("openModal function triggered");
console.log("New Image Source:", newImgSrc);
console.log("Old Image Source:", oldImgSrc);

const modal = document.getElementById('myModal');
const modalContent = document.querySelector('.modal-content');

// Create the comparison div
const compareDiv = document.createElement('div');
compareDiv.className = 'c-compare';
compareDiv.style.setProperty('--value', '50%');

// Create the new image
const newImg = document.createElement('img');
newImg.className = 'c-compare__left';
newImg.src = newImgSrc;
newImg.alt = 'New';
compareDiv.appendChild(newImg);

// Create the old image
const oldImg = document.createElement('img');
oldImg.className = 'c-compare__right';
oldImg.src = oldImgSrc;
oldImg.alt = 'Original';
compareDiv.appendChild(oldImg);

// Create the range input
const rangeInput = document.createElement('input');
rangeInput.type = 'range';
rangeInput.className = 'c-rng c-compare__range';
rangeInput.min = '0';
rangeInput.max = '100';
rangeInput.value = '50';

// Add the oninput function for the range input
rangeInput.oninput = function () {
console.log("openModal function triggered");
console.log("New Image Source:", newImgSrc);
console.log("Old Image Source:", oldImgSrc);

const modal = document.getElementById('myModal');
const modalContent = document.querySelector('.modal-content');

// Create the comparison div
const compareDiv = document.createElement('div');
compareDiv.className = 'c-compare';
compareDiv.style.setProperty('--value', '50%');

// Create the new image
const newImg = document.createElement('img');
newImg.className = 'c-compare__left';
newImg.src = newImgSrc;
newImg.alt = 'New';
compareDiv.appendChild(newImg);

// Create the old image
const oldImg = document.createElement('img');
oldImg.className = 'c-compare__right';
oldImg.src = oldImgSrc;
oldImg.alt = 'Original';
compareDiv.appendChild(oldImg);

// Create the range input
const rangeInput = document.createElement('input');
rangeInput.type = 'range';
rangeInput.className = 'c-rng c-compare__range';
rangeInput.min = '0';
rangeInput.max = '100';
rangeInput.value = '50';

// Add the oninput function for the range input
rangeInput.oninput = function () {
compareDiv.style.setProperty('--value', `${this.value}%`);
};
};

compareDiv.appendChild(rangeInput);
compareDiv.appendChild(rangeInput);

// Append the comparison div to the modal content
modalContent.innerHTML = '';
modalContent.appendChild(compareDiv);
// Append the comparison div to the modal content
modalContent.innerHTML = '';
modalContent.appendChild(compareDiv);

// Manually trigger the oninput event to set the initial state
rangeInput.dispatchEvent(new Event('input'));
// Manually trigger the oninput event to set the initial state
rangeInput.dispatchEvent(new Event('input'));

modal.style.display = "block";
currentImageIndex = index;
modal.style.display = "block";
currentImageIndex = index;

// Close modal when clicking on the modal's background
modal.onclick = function(event) {
// Close modal when clicking on the modal's background
modal.onclick = function (event) {
if (event.target === modal) {
closeModal();
closeModal();
}
};
};

// Stop event propagation for the modal's content
modalContent.onclick = function(event) {
// Stop event propagation for the modal's content
modalContent.onclick = function (event) {
event.stopPropagation();
};
}
f
};
}
f

function closeModal() {
const modal = document.getElementById('myModal');
modal.style.display = "none";
const modal = document.getElementById('myModal');
modal.style.display = "none";
}

function previousImage() {
if (currentImageIndex > 0) {
currentImageIndex--;
const newImgSrc = getRelativePath(document.querySelectorAll('.thumbnail-grid img')[currentImageIndex].src);
const oldImgSrc = newImgSrc.replace('/new/', '/old/');
openModal(newImgSrc, oldImgSrc, currentImageIndex);
}
if (currentImageIndex > 0) {
currentImageIndex--;
const newImgSrc = getRelativePath(document.querySelectorAll('.thumbnail-grid img')[currentImageIndex].src);
const oldImgSrc = newImgSrc.replace('/new/', '/old/');
openModal(newImgSrc, oldImgSrc, currentImageIndex);
}
}

function nextImage() {
if (currentImageIndex < document.querySelectorAll('.thumbnail-grid img').length - 1) {
currentImageIndex++;
const newImgSrc = getRelativePath(document.querySelectorAll('.thumbnail-grid img')[currentImageIndex].src);
const oldImgSrc = newImgSrc.replace('/new/', '/old/');
openModal(newImgSrc, oldImgSrc, currentImageIndex);
}
if (currentImageIndex < document.querySelectorAll('.thumbnail-grid img').length - 1) {
currentImageIndex++;
const newImgSrc = getRelativePath(document.querySelectorAll('.thumbnail-grid img')[currentImageIndex].src);
const oldImgSrc = newImgSrc.replace('/new/', '/old/');
openModal(newImgSrc, oldImgSrc, currentImageIndex);
}
}

function getRelativePath(absoluteUrl) {
const a = document.createElement('a');
a.href = absoluteUrl;
return a.pathname.startsWith('/') ? a.pathname.substring(1) : a.pathname;
const a = document.createElement('a');
a.href = absoluteUrl;
return a.pathname.startsWith('/') ? a.pathname.substring(1) : a.pathname;
}

document.addEventListener('DOMContentLoaded', function () {
const compareDivs = document.querySelectorAll('.c-compare');
compareDivs.forEach(div => div.style.setProperty('--value', '50%'));
const compareDivs = document.querySelectorAll('.c-compare');
compareDivs.forEach(div => div.style.setProperty('--value', '50%'));
});

document.addEventListener('keydown', function (event) {
if (event.key === "ArrowLeft") {
previousImage();
} else if (event.key === "ArrowRight") {
nextImage();
}
if (event.key === "ArrowLeft") {
previousImage();
} else if (event.key === "ArrowRight") {
nextImage();
}
});
</script>
</script>




Expand Down
20 changes: 5 additions & 15 deletions comics.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,24 +60,14 @@ <h1 class="logo_header">The Retro New</h1>
</header>

<div class="container spacing">
<div class="row">
<div class="row justify-content-center">
<!-- Thumbnails -->
<!-- <div class="col-md-3 col-sm-6 mb-4">
<img src="img/old/samurai_jack_old.jpg" alt="Thumbnail" class="img-fluid"
onclick="openModal('img/new/samurai_jack_new.jpg', 'img/old/samurai_jack_old.jpg', 0)" />
<div class="thumbnail-container">
<img src="img/old/samurai_jack_old.jpg" alt="Thumbnail" class="thumbnail"
onclick="openModal('img/new/samurai_jack_new.jpg', 'img/old/samurai_jack_old.jpg', 0)" />
</div> -->
</div>
<div class="col-md-3 col-sm-6 mb-4">
<img src="img/old/ssw_old.jpg" alt="Thumbnail" class="img-fluid"
onclick="openModal('img/new/ssw_new.jpg', 'img/old/ssw_old.jpg', 1)" />
</div>
<div class="col-md-3 col-sm-6 mb-4">
<img src="img/old/tsomi_old.jpg" alt="Thumbnail" class="img-fluid"
onclick="openModal('img/new/tsomi_new.jpg', 'img/old/tsomi_old.jpg', 2)" />
</div>
<div class="col-md-3 col-sm-6 mb-4">
<img src="img/old/ewj_old.jpg" alt="Thumbnail" class="img-fluid"
onclick="openModal('img/new/ewj_new.jpg', 'img/old/ewj_old.jpg', 3)" />
</div> -->
</div>
</div>

Expand Down
17 changes: 16 additions & 1 deletion css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ body {
}

.spacing {
margin-top: 15px;
margin-top: 30px;
}

.accentcolor {
Expand All @@ -41,12 +41,27 @@ ul li a:hover {
font-family: 'serious3b', sans-serif;
font-weight: bold;
color:#ffffff

}

.tagline-color {
color:#ffffff
}

.thumbnail-container {
overflow: hidden;
position: relative;
padding-top: 100%; /* 1:1 aspect ratio */
}
.thumbnail {
object-fit: cover;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

/* modal */
.modal {
display: none; /* Changed to none */
Expand Down
39 changes: 31 additions & 8 deletions games.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,24 +60,47 @@ <h1 class="logo_header">The Retro New</h1>
</header>

<div class="container spacing">
<div class="row">
<div class="row justify-content-center">
<!-- Thumbnails -->
<div class="col-md-3 col-sm-6 mb-4">
<img src="img/old/ssw_old.jpg" alt="Thumbnail" class="img-fluid"
onclick="openModal('img/new/ssw_new.jpg', 'img/old/ssw_old.jpg', 1)" />
<div class="thumbnail-container">
<img src="img/old/ssw_old.jpg" alt="Thumbnail" class="thumbnail"
onclick="openModal('img/old/ssw_old.jpg', 'img/new/ssw_new.jpg')" />
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<img src="img/old/tsomi_old.jpg" alt="Thumbnail" class="img-fluid"
onclick="openModal('img/new/tsomi_new.jpg', 'img/old/tsomi_old.jpg', 2)" />
<div class="thumbnail-container">
<img src="img/old/tsomi_old.jpg" alt="Thumbnail" class="thumbnail"
onclick="openModal('img/old/tsomi_old.jpg', 'img/new/tsomi_new.jpg')" />
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<img src="img/old/ewj_old.jpg" alt="Thumbnail" class="img-fluid"
onclick="openModal('img/new/ewj_new.jpg', 'img/old/ewj_old.jpg', 3)" />
<div class="thumbnail-container">
<img src="img/old/kings_quest_old.jpg" alt="Thumbnail" class="thumbnail"
onclick="openModal('img/old/kings_quest_old.jpg', 'img/new/kings_quest_new.jpg')" />
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="thumbnail-container">
<img src="img/old/contra_old.jpg" alt="Thumbnail" class="thumbnail"
onclick="openModal('img/old/contra_old.jpg', 'img/new/contra_new.jpg')" />
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="thumbnail-container">
<img src="img/old/myst_old.jpg" alt="Thumbnail" class="thumbnail"
onclick="openModal('img/old/myst_old.jpg', 'img/new/myst_new.jpg')" />
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="thumbnail-container">
<img src="img/old/dkc1_old.jpg" alt="Thumbnail" class="thumbnail"
onclick="openModal('img/old/dkc1_old.jpg', 'img/new/dkc1_new.jpg')" />
</div>
</div>
</div>
</div>


<!-- <div class="row-cols-1">
<div class="column thumbnail-grid">
<img src="img/old/samurai_jack_old.jpg" alt="Thumbnail"
Expand Down
Binary file modified img/.DS_Store
View file
Binary file not shown.
Binary file added img/new/.DS_Store
View file
Binary file not shown.
Binary file added img/new/contra_new.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/new/dkc1_new.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/new/myst_new.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/old/.DS_Store
View file
Binary file not shown.
Binary file added img/old/contra_old.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/old/dkc1_old.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified img/old/kings_quest_old.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/old/myst_old.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/old/myst_old2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 5 additions & 3 deletions movies.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,13 @@ <h1 class="logo_header">The Retro New</h1>
</header>

<div class="container spacing">
<div class="row">
<div class="row justify-content-center">
<!-- Thumbnails -->
<div class="col-md-3 col-sm-6 mb-4">
<img src="img/old/samurai_jack_old.jpg" alt="Thumbnail" class="img-fluid"
onclick="openModal('img/new/samurai_jack_new.jpg', 'img/old/samurai_jack_old.jpg', 0)" />
<div class="thumbnail-container">
<img src="img/old/samurai_jack_old.jpg" alt="Thumbnail" class="thumbnail"
onclick="openModal('img/new/samurai_jack_new.jpg', 'img/old/samurai_jack_old.jpg', 0)" />
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 76c266a

Please sign in to comment.