legacy repo
BIN
images/.DS_Store
vendored
Normal file
BIN
images/image1.jpg
Normal file
|
After Width: | Height: | Size: 106 KiB |
BIN
images/image10.jpg
Normal file
|
After Width: | Height: | Size: 151 KiB |
BIN
images/image11.jpg
Normal file
|
After Width: | Height: | Size: 147 KiB |
BIN
images/image12.jpg
Normal file
|
After Width: | Height: | Size: 148 KiB |
BIN
images/image13.jpg
Normal file
|
After Width: | Height: | Size: 156 KiB |
BIN
images/image14.jpg
Normal file
|
After Width: | Height: | Size: 177 KiB |
BIN
images/image15.jpg
Normal file
|
After Width: | Height: | Size: 270 KiB |
BIN
images/image16.jpg
Normal file
|
After Width: | Height: | Size: 297 KiB |
BIN
images/image17.jpg
Normal file
|
After Width: | Height: | Size: 279 KiB |
BIN
images/image18.jpg
Normal file
|
After Width: | Height: | Size: 296 KiB |
BIN
images/image2.jpg
Normal file
|
After Width: | Height: | Size: 210 KiB |
BIN
images/image3.jpg
Normal file
|
After Width: | Height: | Size: 153 KiB |
BIN
images/image4.jpg
Normal file
|
After Width: | Height: | Size: 333 KiB |
BIN
images/image5.jpg
Normal file
|
After Width: | Height: | Size: 306 KiB |
BIN
images/image6.jpg
Normal file
|
After Width: | Height: | Size: 238 KiB |
BIN
images/image7.jpg
Normal file
|
After Width: | Height: | Size: 170 KiB |
BIN
images/image8.jpg
Normal file
|
After Width: | Height: | Size: 385 KiB |
BIN
images/image9.jpg
Normal file
|
After Width: | Height: | Size: 201 KiB |
BIN
images/nyaa.gif
Executable file
|
After Width: | Height: | Size: 22 KiB |
230
index.html
Normal file
@@ -0,0 +1,230 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Natalie Kha New Tab Page</title>
|
||||
<style>
|
||||
/* Reset some default styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body, html {
|
||||
height: 100%;
|
||||
font-family: Arial, sans-serif;
|
||||
overflow: auto; /* Allow scrolling if content overflows */
|
||||
background-color: #111; /* Optional: Set a background color */
|
||||
}
|
||||
|
||||
/* Background container */
|
||||
.background {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
gap: 20px; /* Space between rows */
|
||||
}
|
||||
|
||||
/* Each row in the background */
|
||||
.bg-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px; /* Space between images */
|
||||
}
|
||||
|
||||
/* Individual images in the background */
|
||||
.bg-row img {
|
||||
width: auto; /* Fixed width */
|
||||
height: 29vh; /* Variable height */
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
cursor: pointer; /* Change cursor to pointer on hover */
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.bg-row img:hover {
|
||||
transform: scale(1.05); /* Slightly enlarge on hover */
|
||||
}
|
||||
|
||||
/* Floating central box */
|
||||
.central-box {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #FFBAD2; /* Fully opaque white background */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
||||
width: 500px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Search bar styling */
|
||||
.search-bar {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
.search-bar input[type="text"] {
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
border: 1px solid #FFBAD2;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Links grid styling */
|
||||
.links-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.links-grid a {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
background-color: #f2f2f2;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.links-grid a:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 500px) {
|
||||
.central-box {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.links-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Background with image grid -->
|
||||
<div class="background">
|
||||
<div class="bg-row">
|
||||
<img src="images/image1.jpg" alt="Image 1">
|
||||
<img src="images/image2.jpg" alt="Image 2">
|
||||
<img src="images/image3.jpg" alt="Image 3">
|
||||
<!-- Add more images as needed -->
|
||||
</div>
|
||||
<div class="bg-row">
|
||||
<img src="images/image4.jpg" alt="Image 4">
|
||||
<img src="images/image5.jpg" alt="Image 5">
|
||||
<img src="images/image6.jpg" alt="Image 6">
|
||||
<!-- Add more images as needed -->
|
||||
</div>
|
||||
<div class="bg-row">
|
||||
<img src="images/image7.jpg" alt="Image 7">
|
||||
<img src="images/image8.jpg" alt="Image 8">
|
||||
<img src="images/image9.jpg" alt="Image 9">
|
||||
<!-- Add more images as needed -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Central floating box -->
|
||||
<div class="central-box">
|
||||
<!-- Search bar -->
|
||||
<form class="search-bar" action="https://www.google.com/search" method="get">
|
||||
<input type="text" name="q" placeholder="Search Google..." required>
|
||||
</form>
|
||||
|
||||
<!-- Links grid -->
|
||||
<div class="links-grid">
|
||||
<a href="https://www.pinterest.com/">>_< pinterest</a>
|
||||
<a href="https://canvas.calpoly.edu/">:3 canvas</a>
|
||||
<a href="https://broflix.cc/watch/tv/37680?title=Suits&imdb=tt1632701&season=1&episode=5">:p surprise</a>
|
||||
<a href="https://mail.google.com/mail/u/0/#inbox">@-@ gmail</a>
|
||||
<a href="https://drive.google.com/drive/u/0/home">:> google drive</a>
|
||||
<a href="https://myportal.calpoly.edu/">^-^ school portal</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<img src="images/nyaa.gif" alt="nyaa" style="position:fixed; bottom:0; left:0; width:100px; height:auto; object-fit:cover; pointer-events:none; z-index:9999;">-->
|
||||
|
||||
<script>
|
||||
// List of all available images
|
||||
const allImages = [
|
||||
'images/image1.jpg',
|
||||
'images/image2.jpg',
|
||||
'images/image3.jpg',
|
||||
'images/image4.jpg',
|
||||
'images/image5.jpg',
|
||||
'images/image6.jpg',
|
||||
'images/image7.jpg',
|
||||
'images/image8.jpg',
|
||||
'images/image9.jpg',
|
||||
'images/image10.jpg',
|
||||
'images/image11.jpg',
|
||||
'images/image12.jpg',
|
||||
'images/image13.jpg',
|
||||
'images/image14.jpg',
|
||||
'images/image15.jpg',
|
||||
'images/image16.jpg',
|
||||
'images/image17.jpg',
|
||||
'images/image18.jpg',
|
||||
// Add more image paths as needed
|
||||
];
|
||||
|
||||
// Set to keep track of images currently in use
|
||||
const usedImages = new Set();
|
||||
|
||||
// Select all images within the background
|
||||
const bgImages = document.querySelectorAll('.bg-row img');
|
||||
|
||||
// Initialize the usedImages set with the currently displayed images
|
||||
bgImages.forEach(img => {
|
||||
usedImages.add(img.getAttribute('src'));
|
||||
});
|
||||
|
||||
// Function to get a random unused image
|
||||
function getRandomUnusedImage(currentSrc) {
|
||||
// Filter out the images that are currently in use
|
||||
const availableImages = allImages.filter(img => img !== currentSrc && !usedImages.has(img));
|
||||
|
||||
if (availableImages.length === 0) {
|
||||
// If no available images, reset the usedImages set except the current image
|
||||
usedImages.clear();
|
||||
usedImages.add(currentSrc);
|
||||
return currentSrc; // No replacement possible
|
||||
}
|
||||
|
||||
// Select a random image from the available ones
|
||||
const randomIndex = Math.floor(Math.random() * availableImages.length);
|
||||
return availableImages[randomIndex];
|
||||
}
|
||||
|
||||
bgImages.forEach(img => {
|
||||
img.addEventListener('click', () => {
|
||||
const currentSrc = img.getAttribute('src');
|
||||
const newSrc = getRandomUnusedImage(currentSrc);
|
||||
|
||||
if (newSrc !== currentSrc) {
|
||||
// Update the src attribute
|
||||
img.setAttribute('src', newSrc);
|
||||
|
||||
// Update the usedImages set
|
||||
usedImages.delete(currentSrc);
|
||||
usedImages.add(newSrc);
|
||||
}
|
||||
// If newSrc === currentSrc, no change is made to prevent duplicates
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||