231 lines
7.1 KiB
HTML
231 lines
7.1 KiB
HTML
<!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>
|
|
|