-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
158 lines (137 loc) · 4.54 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #1C1C1C;
color: #F1F1F1;
}
.container {
max-height: 100vh;
overflow-y: scroll;
border: 1px solid #3F3F3F;
position: relative;
background-color: #262626; /* Added gray background to container */
}
.card {
box-sizing: border-box;
padding: 20px;
border: 1px solid #3F3F3F;
margin: 10px;
background-color: #2D2D2D;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Added subtle gray shadow for depth */
}
.card img {
width: 100%;
height: auto;
display: block;
border-bottom: 1px solid #3F3F3F; /* Added gray border at the bottom of the image */
}
.card:hover {
background-color: #383838; /* Added gray hover effect on card */
}
.card h2,
.card h3,
.card h4,
.card h5,
.card h6 {
color: #C0C0C0; /* Added gray color to heading elements */
}
.card p {
color: #B0B0B0; /* Added lighter gray color to paragraph text */
}
</style>
<title>Scrolling with Space</title>
</head>
<body>
<div class="wrapper">
<div class="centered-content">
<div class="container" id="container">
<!-- Add your cards here -->
</div>
</div>
</div>
<script>
const numCards = 200;
let lastLoadedCard = -1;
// Emulate an AJAX call to fetch card data
async function fetchCardData(cardId) {
const imgHeight = Math.floor(Math.random() * (200 - 40) + 40);
await new Promise((resolve) => setTimeout(resolve, 100));
return {
id: `Card: ${cardId}`,
imgSrc: `https://via.placeholder.com/400x${imgHeight}`,
label: `In a shocking turn of events, the small town of Bumbleton has been taken over by a group of well-trained llamas. According to local reports, these llamas have been plotting their takeover for months, coordinating their efforts in secret. The mayor of Bumbleton, Mary Potters, has released a statement urging residents to remain calm and stay indoors. The town's law enforcement is currently working with llama experts to formulate a plan to retake the town.`
};
}
// Create a card with the given data
function createCard(cardData) {
const card = document.createElement('div');
card.classList.add('card');
if (Math.floor(Math.random() * 3) + 1==1) {
card.innerHTML = `
<p>${cardData.id}</p>
<p>${cardData.label}</p>
`;}
else {
card.innerHTML = `
<p>${cardData.id}</p>
<p>${cardData.label}</p>
<img src="${cardData.imgSrc}" alt="Placeholder image" />
`;
}
return card;
}
// Load more cards if needed
async function loadMoreCardsIfNeeded(container) {
const windowHeight = container.offsetHeight;
const cards = container.querySelectorAll('.card');
const lastCard = cards[cards.length - 1];
if (lastLoadedCard < numCards - 1 && (!lastCard || lastCard.getBoundingClientRect().bottom - windowHeight * 2 <= 0)) {
const nextCardId = lastLoadedCard + 1;
const nextCardData = await fetchCardData(nextCardId);
const nextCard = createCard(nextCardData);
container.appendChild(nextCard);
lastLoadedCard = nextCardId;
loadMoreCardsIfNeeded(container);
}
}
// Function to handle space key press
function handleSpaceKey(container) {
const currentScrollTop = container.scrollTop;
const windowHeight = container.offsetHeight;
const cards = container.querySelectorAll('.card');
let nextScrollTop = currentScrollTop;
for (const card of cards) {
const cardTop = card.offsetTop;
const cardBottom = cardTop + card.offsetHeight;
if (cardBottom > currentScrollTop + windowHeight) {
nextScrollTop = cardTop;
break;
}
}
container.scrollTop = nextScrollTop;
}
// Add event listener for keydown on the document
document.addEventListener('keydown', (e) => {
if (e.code === 'Space') {
e.preventDefault();
handleSpaceKey(document.getElementById('container'));
}
});
// Add event listener for scroll on the container
const container = document.getElementById('container');
container.addEventListener('scroll', () => {
loadMoreCardsIfNeeded(container);
});
// Load the initial cards into the container
(async function () {
await loadMoreCardsIfNeeded(container);
})();
</script>
</body>
</html>