mirror of
https://github.com/System-End/riceathon.git
synced 2026-04-19 22:05:16 +00:00
fix: lint + use relative path
This commit is contained in:
Saahil
GitHub
parent
bb7f9cf391
commit
fbb04785b7
1 changed files with 101 additions and 98 deletions
|
|
@ -12,13 +12,14 @@
|
|||
<meta name="description" content="Gallery of the rice's " />
|
||||
<meta property="og:description" content="Gallery of the rice's" />
|
||||
<meta name="twitter:description" content="Gallery of the rice's" />
|
||||
<link rel="stylesheet" href="carousel.css">
|
||||
<link rel="stylesheet" href="./carousel.css">
|
||||
<style>
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1;
|
||||
margin: 10px;
|
||||
|
|
@ -26,12 +27,13 @@
|
|||
transition-duration: 250ms;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.col:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Delete this HTML and replace with your own HTML -->
|
||||
<!-- starter code below -->
|
||||
|
|
@ -43,10 +45,10 @@
|
|||
<h1 class="ultratitle">Gallery</h1>
|
||||
<p class="headline" id="headline">Gallery of the {count} rice's</p>
|
||||
</header>
|
||||
<div id="gallery"></div>
|
||||
<div id="gallery"></div>
|
||||
</body>
|
||||
<script src="carousel.js"></script>
|
||||
<script src="icon.js"></script>
|
||||
<script src="./carousel.js"></script>
|
||||
<script src="./icon.js"></script>
|
||||
<script>
|
||||
function groupArray(arr, size = 3) {
|
||||
const groups = []
|
||||
|
|
@ -57,108 +59,109 @@
|
|||
}
|
||||
async function mainIfHome(gallery) {
|
||||
console.log(1)
|
||||
|
||||
document.getElementById('headline').innerText = `Gallery of the ${gallery.length} rices`
|
||||
// console.log(groupArray(gallery), 0)
|
||||
const grouped = groupArray(gallery)
|
||||
let index = 0;
|
||||
for(const group of grouped) {
|
||||
const row=document.createElement('div')
|
||||
row.classList.add('row')
|
||||
for(const cold of group) {
|
||||
const col=document.createElement('a')
|
||||
col.classList.add('card')
|
||||
col.classList.add('col')
|
||||
col.href = `#${index}`
|
||||
const img = document.createElement('img')
|
||||
// lazy load
|
||||
img.setAttribute('loading', 'lazy')
|
||||
img.src = cold.images[0]
|
||||
img.alt = cold.name
|
||||
img.style.width = "90%"
|
||||
img.style.height = "90%"
|
||||
img.style.borderRadius = "10px"
|
||||
const h1 = document.createElement('h1')
|
||||
// h1.append(setupIcon(cold.distro))
|
||||
h1.innerText = cold.name
|
||||
h1.style.paddingBottom = "10px"
|
||||
col.appendChild(h1)
|
||||
col.appendChild(img)
|
||||
row.appendChild(col)
|
||||
index++
|
||||
}
|
||||
|
||||
document.getElementById('gallery').appendChild(row)
|
||||
document.getElementById('headline').innerText = `Gallery of the ${gallery.length} rices`
|
||||
// console.log(groupArray(gallery), 0)
|
||||
const grouped = groupArray(gallery)
|
||||
let index = 0;
|
||||
for (const group of grouped) {
|
||||
const row = document.createElement('div')
|
||||
row.classList.add('row')
|
||||
for (const cold of group) {
|
||||
const col = document.createElement('a')
|
||||
col.classList.add('card')
|
||||
col.classList.add('col')
|
||||
col.href = `#${index}`
|
||||
const img = document.createElement('img')
|
||||
// lazy load
|
||||
img.setAttribute('loading', 'lazy')
|
||||
img.src = cold.images[0]
|
||||
img.alt = cold.name
|
||||
img.style.width = "90%"
|
||||
img.style.height = "90%"
|
||||
img.style.borderRadius = "10px"
|
||||
const h1 = document.createElement('h1')
|
||||
// h1.append(setupIcon(cold.distro))
|
||||
h1.innerText = cold.name
|
||||
h1.style.paddingBottom = "10px"
|
||||
col.appendChild(h1)
|
||||
col.appendChild(img)
|
||||
row.appendChild(col)
|
||||
index++
|
||||
}
|
||||
|
||||
document.getElementById('gallery').appendChild(row)
|
||||
}
|
||||
}
|
||||
}
|
||||
async function mainIfViewIndex(gallery) {
|
||||
const index = parseInt(window.location.hash.slice(1))
|
||||
const data =gallery[index]
|
||||
if(!data) window.location.hash = ''
|
||||
console.log(data)
|
||||
const carousel = document.createElement('div')
|
||||
carousel.classList.add('carousel-container')
|
||||
const imgCarousel = document.createElement('div')
|
||||
imgCarousel.classList.add('carousel')
|
||||
for(const image of data.images) {
|
||||
const img = document.createElement('img')
|
||||
img.src = image
|
||||
img.alt = data.name
|
||||
img.style.width = "100%"
|
||||
img.style.height = "auto"
|
||||
imgCarousel.appendChild(img)
|
||||
}
|
||||
carousel.appendChild(imgCarousel)
|
||||
const next = document.createElement('button')
|
||||
next.classList.add('next')
|
||||
next.innerText = 'Next Image'
|
||||
const prev = document.createElement('button')
|
||||
prev.classList.add('prev')
|
||||
prev.innerText = 'Prev Image'
|
||||
if(data.images.length > 1){
|
||||
carousel.appendChild(prev)
|
||||
carousel.appendChild(next)
|
||||
}
|
||||
const titleThing = document.createElement('div')
|
||||
titleThing.innerText = data.name
|
||||
const div = titleThing
|
||||
div.style.display = "flex"
|
||||
div.style.justifyContent = "center"
|
||||
div.style.alignItems = "center"
|
||||
div.style.gap = "var(--spacing-2)"
|
||||
div.style.fontSize = "var(--font-5)"
|
||||
div.style.fontWeight = "var(--font-weight-bold)"
|
||||
|
||||
const gitLink = document.createElement('a')
|
||||
gitLink.href = data.git
|
||||
gitLink.innerText = "Dotfiles"
|
||||
gitLink.style.textDecoration = "none"
|
||||
gitLink.target = "_blank"
|
||||
|
||||
async function mainIfViewIndex(gallery) {
|
||||
const index = parseInt(window.location.hash.slice(1))
|
||||
const data = gallery[index]
|
||||
if (!data) window.location.hash = ''
|
||||
console.log(data)
|
||||
const carousel = document.createElement('div')
|
||||
carousel.classList.add('carousel-container')
|
||||
const imgCarousel = document.createElement('div')
|
||||
imgCarousel.classList.add('carousel')
|
||||
for (const image of data.images) {
|
||||
const img = document.createElement('img')
|
||||
img.src = image
|
||||
img.alt = data.name
|
||||
img.style.width = "100%"
|
||||
img.style.height = "auto"
|
||||
imgCarousel.appendChild(img)
|
||||
}
|
||||
carousel.appendChild(imgCarousel)
|
||||
const next = document.createElement('button')
|
||||
next.classList.add('next')
|
||||
next.innerText = 'Next Image'
|
||||
const prev = document.createElement('button')
|
||||
prev.classList.add('prev')
|
||||
prev.innerText = 'Prev Image'
|
||||
if (data.images.length > 1) {
|
||||
carousel.appendChild(prev)
|
||||
carousel.appendChild(next)
|
||||
}
|
||||
const titleThing = document.createElement('div')
|
||||
titleThing.innerText = data.name
|
||||
const div = titleThing
|
||||
div.style.display = "flex"
|
||||
div.style.justifyContent = "center"
|
||||
div.style.alignItems = "center"
|
||||
div.style.gap = "var(--spacing-2)"
|
||||
div.style.fontSize = "var(--font-5)"
|
||||
div.style.fontWeight = "var(--font-weight-bold)"
|
||||
|
||||
const gitLink = document.createElement('a')
|
||||
gitLink.href = data.git
|
||||
gitLink.innerText = "Dotfiles"
|
||||
gitLink.style.textDecoration = "none"
|
||||
gitLink.target = "_blank"
|
||||
|
||||
div.appendChild(document.createTextNode(" - "))
|
||||
div.appendChild(gitLink)
|
||||
div.appendChild(setupIcon(data.distro))
|
||||
document.body.appendChild(titleThing)
|
||||
document.body.appendChild(carousel)
|
||||
const acarousel = setupCarousel()
|
||||
next.onclick = () => acarousel.moveSlide(1)
|
||||
prev.onclick = () => acarousel.moveSlide(-1)
|
||||
}
|
||||
document.body.appendChild(carousel)
|
||||
const acarousel = setupCarousel()
|
||||
next.onclick = () => acarousel.moveSlide(1)
|
||||
prev.onclick = () => acarousel.moveSlide(-1)
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const gallery = await fetch(
|
||||
"https://raw.githubusercontent.com/hackclub/riceathon/refs/heads/main/members.json"
|
||||
).then(r=>r.json())
|
||||
if(isNaN(window.location.hash.slice(1)) || window.location.hash == "#" || window.location.hash == "") {
|
||||
console.log(`Loading main`)
|
||||
mainIfHome(gallery)
|
||||
} else {
|
||||
console.log(`#${window.location.hash.slice(1)}`)
|
||||
document.getElementById('headline').remove()
|
||||
mainIfViewIndex(gallery)
|
||||
).then(r => r.json())
|
||||
if (isNaN(window.location.hash.slice(1)) || window.location.hash == "#" || window.location.hash == "") {
|
||||
console.log(`Loading main`)
|
||||
mainIfHome(gallery)
|
||||
} else {
|
||||
console.log(`#${window.location.hash.slice(1)}`)
|
||||
document.getElementById('headline').remove()
|
||||
mainIfViewIndex(gallery)
|
||||
}
|
||||
window.addEventListener('hashchange', () => location.reload())
|
||||
}
|
||||
window.addEventListener('hashchange', () => location.reload())
|
||||
}
|
||||
main()
|
||||
main()
|
||||
</script>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue