feat: transparent header and image download scripts
- Made header transparent on scroll for premium Netflix-style look - Added browser console script to download all IndeeHub images - Created Python script for batch image downloading - Added shell script for curl-based downloads The header now starts fully transparent and transitions to semi-transparent black with blur when scrolling, creating a floating navigation effect. Download scripts will extract all film posters, backdrops, and metadata from IndeeHub.studio screening room. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
71
browser-download-script.js
Normal file
71
browser-download-script.js
Normal file
@@ -0,0 +1,71 @@
|
||||
// INSTRUCTIONS: Run this in browser console on https://indeehub.studio/screening-room?type=film
|
||||
|
||||
// Step 1: Extract all film card data
|
||||
const films = Array.from(document.querySelectorAll('a[href^="/film/"]')).map(card => {
|
||||
const img = card.querySelector('img');
|
||||
const title = card.querySelector('h3, [class*="title"]')?.textContent?.trim();
|
||||
const href = card.getAttribute('href');
|
||||
|
||||
return {
|
||||
id: href.replace('/film/', ''),
|
||||
title: title,
|
||||
link: 'https://indeehub.studio' + href,
|
||||
posterSrc: img?.src,
|
||||
posterDataSrc: img?.getAttribute('data-src'),
|
||||
alt: img?.alt
|
||||
};
|
||||
});
|
||||
|
||||
console.log('✅ Found ' + films.length + ' films');
|
||||
console.log(JSON.stringify(films, null, 2));
|
||||
|
||||
// Step 2: Download the JSON data
|
||||
const dataStr = JSON.stringify(films, null, 2);
|
||||
const dataBlob = new Blob([dataStr], {type: 'application/json'});
|
||||
const url = URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = 'indeedhub-films.json';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
console.log('✅ Downloaded: indeedhub-films.json');
|
||||
|
||||
// Step 3: Now download all images one by one
|
||||
async function downloadImage(url, filename) {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const blob = await response.blob();
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = blobUrl;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(blobUrl);
|
||||
console.log(`✓ Downloaded: ${filename}`);
|
||||
} catch (e) {
|
||||
console.error(`✗ Failed: ${filename}`, e);
|
||||
}
|
||||
}
|
||||
|
||||
// Step 4: Download all posters
|
||||
console.log('\nDownloading posters...');
|
||||
for (const film of films) {
|
||||
const posterUrl = `https://indeehub.studio/_next/image?url=%2Fapi%2Fposters%2F${film.id}&w=640&q=75`;
|
||||
await downloadImage(posterUrl, `poster-${film.id}.jpg`);
|
||||
await new Promise(r => setTimeout(r, 500)); // Wait 500ms between downloads
|
||||
}
|
||||
|
||||
// Step 5: Download all backdrops
|
||||
console.log('\nDownloading backdrops...');
|
||||
for (const film of films) {
|
||||
const backdropUrl = `https://indeehub.studio/_next/image?url=%2Fapi%2Fbackdrops%2F${film.id}&w=1920&q=75`;
|
||||
await downloadImage(backdropUrl, `backdrop-${film.id}.jpg`);
|
||||
await new Promise(r => setTimeout(r, 500)); // Wait 500ms between downloads
|
||||
}
|
||||
|
||||
console.log('\n✅ ALL DOWNLOADS COMPLETE!');
|
||||
console.log('Check your Downloads folder for all images');
|
||||
65
download-images.sh
Executable file
65
download-images.sh
Executable file
@@ -0,0 +1,65 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Script to download all IndeeHub film images and metadata
|
||||
# Run this while logged in to IndeeHub.studio
|
||||
|
||||
ASSETS_DIR="assets/films"
|
||||
mkdir -p "$ASSETS_DIR/posters"
|
||||
mkdir -p "$ASSETS_DIR/backdrops"
|
||||
|
||||
echo "Downloading IndeeHub film images..."
|
||||
|
||||
# Array of film IDs from screening room
|
||||
films=(
|
||||
"everybody-does-it"
|
||||
"girl-to-girl"
|
||||
"bula-mahlo"
|
||||
"lullaby"
|
||||
"stranded-dirty-coin"
|
||||
"home"
|
||||
"searching-for-satoshi"
|
||||
"the-things-we-carry"
|
||||
"anatomy-of-the-state"
|
||||
"duel"
|
||||
"wedding-planning"
|
||||
"one-mans-trash"
|
||||
"in-the-darkness"
|
||||
"clemont"
|
||||
"anne"
|
||||
"bender"
|
||||
"fall-of-2008"
|
||||
"god-bless-bitcoin"
|
||||
"housing-bubble"
|
||||
"forging-a-country"
|
||||
"bitcoiners"
|
||||
"kid-prosper"
|
||||
"how-sweden-quit-smoking"
|
||||
"a-night-of-psychosis"
|
||||
"nanoblood"
|
||||
"zones-of-progress"
|
||||
"project-project"
|
||||
"the-edited"
|
||||
"time-traveling-thieves"
|
||||
"the-man-who-wouldnt-cry"
|
||||
)
|
||||
|
||||
# Download posters (640x960)
|
||||
for film in "${films[@]}"; do
|
||||
echo "Downloading poster for: $film"
|
||||
curl -s "https://indeehub.studio/_next/image?url=%2Fapi%2Fposters%2F${film}&w=640&q=75" \
|
||||
-o "$ASSETS_DIR/posters/${film}.jpg" \
|
||||
--cookie-jar cookies.txt \
|
||||
--cookie cookies.txt
|
||||
done
|
||||
|
||||
# Download backdrops (1920x1080)
|
||||
for film in "${films[@]}"; do
|
||||
echo "Downloading backdrop for: $film"
|
||||
curl -s "https://indeehub.studio/_next/image?url=%2Fapi%2Fbackdrops%2F${film}&w=1920&q=75" \
|
||||
-o "$ASSETS_DIR/backdrops/${film}.jpg" \
|
||||
--cookie-jar cookies.txt \
|
||||
--cookie cookies.txt
|
||||
done
|
||||
|
||||
echo "✅ Download complete!"
|
||||
echo "Images saved to: $ASSETS_DIR"
|
||||
94
download_indeedhub_content.py
Normal file
94
download_indeedhub_content.py
Normal file
@@ -0,0 +1,94 @@
|
||||
"""
|
||||
Script to download all IndeeHub film images and metadata
|
||||
Run this in the browser console on https://indeehub.studio/screening-room?type=film
|
||||
|
||||
Then copy the output and save it to a file
|
||||
"""
|
||||
|
||||
# Paste this in browser console:
|
||||
console_script = """
|
||||
// Extract all film data from screening room
|
||||
const films = Array.from(document.querySelectorAll('a[href^="/film/"]')).map(card => {
|
||||
const img = card.querySelector('img');
|
||||
const title = card.querySelector('h3, [class*="title"]')?.textContent?.trim();
|
||||
const href = card.getAttribute('href');
|
||||
|
||||
return {
|
||||
id: href.replace('/film/', ''),
|
||||
title: title,
|
||||
link: 'https://indeehub.studio' + href,
|
||||
posterSrc: img?.src,
|
||||
posterDataSrc: img?.getAttribute('data-src'),
|
||||
alt: img?.alt
|
||||
};
|
||||
});
|
||||
|
||||
console.log('Found ' + films.length + ' films');
|
||||
console.log(JSON.stringify(films, null, 2));
|
||||
|
||||
// Download this data
|
||||
const dataStr = JSON.stringify(films, null, 2);
|
||||
const dataBlob = new Blob([dataStr], {type: 'application/json'});
|
||||
const url = URL.createObjectURL(dataBlob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = 'indeedhub-films.json';
|
||||
link.click();
|
||||
"""
|
||||
|
||||
print("STEP 1: Copy and paste this into browser console:")
|
||||
print("="*60)
|
||||
print(console_script)
|
||||
print("="*60)
|
||||
print("\nSTEP 2: The script will download 'indeedhub-films.json'")
|
||||
print("\nSTEP 3: Then run the image download script below")
|
||||
|
||||
# Python script to download images
|
||||
import json
|
||||
import os
|
||||
import requests
|
||||
from pathlib import Path
|
||||
|
||||
def download_images():
|
||||
"""Download all film images from IndeeHub"""
|
||||
|
||||
# Load the JSON file
|
||||
with open('indeedhub-films.json', 'r') as f:
|
||||
films = json.load(f)
|
||||
|
||||
# Create directories
|
||||
Path('public/images/films/posters').mkdir(parents=True, exist_ok=True)
|
||||
Path('public/images/films/backdrops').mkdir(parents=True, exist_ok=True)
|
||||
|
||||
print(f"Downloading images for {len(films)} films...")
|
||||
|
||||
for film in films:
|
||||
film_id = film['id']
|
||||
print(f"Downloading: {film['title']}...")
|
||||
|
||||
# Download poster (640px)
|
||||
poster_url = f"https://indeehub.studio/_next/image?url=%2Fapi%2Fposters%2F{film_id}&w=640&q=75"
|
||||
try:
|
||||
response = requests.get(poster_url)
|
||||
if response.status_code == 200:
|
||||
with open(f'public/images/films/posters/{film_id}.jpg', 'wb') as f:
|
||||
f.write(response.content)
|
||||
print(f" ✓ Poster downloaded")
|
||||
except Exception as e:
|
||||
print(f" ✗ Poster failed: {e}")
|
||||
|
||||
# Download backdrop (1920px)
|
||||
backdrop_url = f"https://indeehub.studio/_next/image?url=%2Fapi%2Fbackdrops%2F{film_id}&w=1920&q=75"
|
||||
try:
|
||||
response = requests.get(backdrop_url)
|
||||
if response.status_code == 200:
|
||||
with open(f'public/images/films/backdrops/{film_id}.jpg', 'wb') as f:
|
||||
f.write(response.content)
|
||||
print(f" ✓ Backdrop downloaded")
|
||||
except Exception as e:
|
||||
print(f" ✗ Backdrop failed: {e}")
|
||||
|
||||
print("\n✅ Download complete!")
|
||||
|
||||
if __name__ == '__main__':
|
||||
download_images()
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="browse-view">
|
||||
<!-- Header / Navigation -->
|
||||
<header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
|
||||
:class="{ 'bg-black/90 backdrop-blur-md': scrolled }">
|
||||
:class="{ 'bg-black/95 backdrop-blur-md shadow-lg': scrolled, 'bg-transparent': !scrolled }">
|
||||
<div class="container mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- Logo -->
|
||||
|
||||
Reference in New Issue
Block a user