new site test

site/categories.json

@@ -0,0 +1,46 @@
+{
+    "sky_cloudy001_hdr.7z": 		["Afternoon", "Cloudy"],
+    "sky_cloudy002_hdr.7z": 		["Afternoon", "Cloudy"],
+    "sky_cloudy003_hdr.7z": 		["Afternoon", "Cloudy"],
+    "sky_cloudy004_hdr.7z": 		["Afternoon", "Cloudy"],
+    "sky_cloudy005_hdr.7z": 		["Afternoon", "Cloudy"],
+    "Sky_cloudy006_hdr.7z": 		["Afternoon", "Cloudy"],
+    "Sky_cloudy007_hdr.7z": 		["Afternoon", "Cloudy"],
+    "Sky_cloudy008_hdr.7z": 		["Afternoon", "Cloudy"],
+    "sky_cloudy009_hdr.7z": 		["Afternoon", "Cloudy"],
+    "sky_cloudy010_hdr.7z": 		["Afternoon", "Cloudy"],
+    "sky_cloudy012_hdr.7z": 		["Afternoon", "Cloudy"],
+    "sky_cloudy013_hdr.7z": 		["Afternoon", "Cloudy", "Stormy"],
+    "sky_cloudy014_hdr.7z": 		["Morning", "Afternoon", "Cloudy"],
+    "sky_morning001_hdr.7z": 		["Morning", "Evening", "Cloudy"],
+    "sky_night001_hdr.7z": 			["Night", "Cloudy"],
+    "sky_night002_hdr.7z": 			["Night","Cloudy"],
+    "sky_night003_hdr.7z": 			["Night", "Clear"],
+    "Sky_night004_hdr.7z": 			["Night", "Hazy"],
+    "Sky_night005_hdr.7z": 			["Night", "Cloudy"],
+    "sky_night006.7z": 				["Night","Clear"],
+    "sky_night007_hdr.7z": 			["Night","Cloudy"],
+    "sky_night008_hdr.7z": 			["Night", "Cloudy"],
+    "sky_nightcity01_hdr.7z": 		["Night", "Cloudy"],
+    "sky_overcast001_hdr.7z": 		["Overcast", "Cloudy"],
+    "sky_overcast002_hdr.7z": 		["Afternoon", "Clear" , "Hazy"],
+    "sky_overcast003_hdr.7z": 		["Afternoon", "Stormy", "Overcast", "Cloudy"],
+    "sky_stormy01_hdr.7z": 			["Stormy", "Cloudy"],
+    "sky_stormy02_hdr.7z": 			["Stormy", "Cloudy"],
+    "Sky_Sunny0001_hdr.7z": 			["Afternoon", "Clear"],
+    "sky_sunny0002_hdr.7z": 			["Afternoon", "Clear"],
+    "sky_sunny003_hdr.7z": 			["Morning", "Clear"],
+    "Sky_sunny004_hdr.7z": 			["Morning","Evening", "Cloudy"],
+    "sky_sunny005.7z": 				["Morning", "Clear"],
+    "sky_sunny006.7z": 				["Morning", "Clear"],
+    "sky_sunset001_hdr.7z": 			["Evening"],
+    "sky_sunset002_hdr.7z": 		["Evening"],
+    "sky_sunset003_hdr.7z": 		["Evening", "Cloudy"],
+    "Sky_sunset004_hdr.7z": 		["Evening"],
+    "sky_sunset005.7z": 			["Evening", "Cloudy"],
+    "sky_sunset005_smaller.7z": 	["Evening"],
+    "sky_sunset006_hdr.7z": 		["Evening", "Cloudy"],
+    "Sky_sunset007_hdr.7z": 		["Evening", "Cloudy"],
+    "sky_devroom_hdr.7z": 			["Misc"],
+    "sky_lab_hdr.7z": 				["Misc"]
+}

site/fetch_skyboxes.js

@@ -0,0 +1,195 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const container = document.getElementById('skybox-container');
+    const categories = {};
+
+    function fetchCategories() {
+        return fetch('categories.json')
+            .then(response => response.json())
+            .then(data => {
+                Object.assign(categories, data);
+            });
+    }
+
+    function fetchSkyboxes() {
+        return fetch('https://api.github.com/repos/Jacobdeanr/Source_Skyboxes/contents')
+            .then(response => response.json())
+            .then(data => {
+                return data.filter(item => item.type === 'file' && item.name.endsWith('.7z'));
+            });
+    }
+
+    function displaySkyboxes(skyboxes, selectedTime, selectedWeather) {
+        container.innerHTML = '';
+        skyboxes.forEach(item => {
+            const itemCategories = categories[item.name];
+            if (!itemCategories) return;
+
+            const hasSelectedTime = selectedTime ? itemCategories.includes(selectedTime) : true;
+            const hasSelectedWeather = selectedWeather ? itemCategories.includes(selectedWeather) : true;
+
+            if (hasSelectedTime && hasSelectedWeather) {
+                const itemElement = document.createElement('div');
+                itemElement.classList.add('skybox-item');
+
+                const title = document.createElement('h3');
+                title.textContent = item.name.replace('.7z', '');
+
+                const img = document.createElement('img');
+                img.src = `preview/${item.name.replace('.7z', '.jpg')}`;
+                img.alt = item.name;
+
+                const link = document.createElement('a');
+                link.href = `#${item.name.replace('.7z', '')}`;
+                link.textContent = 'View Details';
+
+                itemElement.appendChild(title);
+                itemElement.appendChild(img);
+                itemElement.appendChild(link);
+
+                container.appendChild(itemElement);
+            }
+        });
+    }
+
+	function create3DPreview(basePath) {
+		const container = document.getElementById('preview-container');
+		container.innerHTML = '';
+
+		const scene = new THREE.Scene();
+		const camera = new THREE.PerspectiveCamera(90, container.clientWidth / container.clientHeight, 0.1, 1000);
+		const renderer = new THREE.WebGLRenderer();
+		renderer.setSize(container.clientWidth, container.clientHeight);
+		container.appendChild(renderer.domElement);
+
+		const urls = [
+			`${basePath}/ft.jpg`,  // posz
+			`${basePath}/bk.jpg`,  // negz
+			`${basePath}/up.jpg`,  // posy
+			`${basePath}/dn.jpg`,  // negy
+			`${basePath}/rt.jpg`,  // posx
+			`${basePath}/lf.jpg`   // negx
+		];
+
+		const loader = new THREE.CubeTextureLoader();
+		const texture = loader.load(urls);
+
+		scene.background = texture;
+
+		camera.position.set(0, 0, 1);
+		camera.rotation.order = 'YXZ'; // default is 'XYZ'
+
+
+		let autoRotateAngle = 0;
+
+		function animate() {
+			requestAnimationFrame(animate);
+			autoRotateAngle += 0.005; // Adjust this value to change rotation speed
+			camera.rotation.x = 0.785398; //Radian value of 45 degrees rotation
+			camera.rotation.y = autoRotateAngle;
+			renderer.render(scene, camera);
+		}
+
+
+
+		window.addEventListener('resize', onWindowResize, false);
+
+		function onWindowResize() {
+			camera.aspect = container.clientWidth / container.clientHeight;
+			camera.updateProjectionMatrix();
+			renderer.setSize(container.clientWidth, container.clientHeight);
+		}
+
+		animate();
+
+		container.addEventListener('mousemove', (event) => {
+			const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
+			const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
+
+			camera.rotation.y = mouseX * Math.PI;
+			camera.rotation.x = mouseY * Math.PI / 4;
+		});
+	}
+
+    function fetchSkyboxDetails(name) {
+        fetch('https://api.github.com/repos/Jacobdeanr/Source_Skyboxes/contents')
+            .then(response => response.json())
+            .then(data => {
+                const item = data.find(item => item.name === `${name}.7z`);
+                if (item) {
+                    const detailsContainer = document.getElementById('details-container');
+                    detailsContainer.innerHTML = '';
+
+                    const title = document.createElement('h2');
+                    title.textContent = item.name.replace('.7z', '');
+
+                    const img = document.createElement('img');
+                    img.src = `preview/${item.name.replace('.7z', '.jpg')}`;
+                    img.alt = item.name;
+
+                    const link = document.createElement('a');
+                    link.href = item.download_url;
+                    link.textContent = 'Download';
+
+                    const description = document.createElement('p');
+                    description.textContent = `File size: ${formatFileSize(item.size)}`;
+
+                    //const previewContainer = document.createElement('div');
+                    //previewContainer.id = 'preview-container';
+
+                    detailsContainer.appendChild(title);
+                    detailsContainer.appendChild(img);
+                    //detailsContainer.appendChild(previewContainer);
+                    detailsContainer.appendChild(description);
+                    detailsContainer.appendChild(link);
+
+                    document.getElementById('skybox-container').style.display = 'none';
+                    detailsContainer.style.display = 'block';
+
+                    //create3DPreview(`Thumbnails/${item.name.replace('.7z', '')}`);
+                }
+            })
+            .catch(error => console.error('Error fetching the repository contents:', error));
+    }
+
+    function formatFileSize(bytes) {
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        if (bytes === 0) return '0 Byte';
+        const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+        return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sizes[i]}`;
+    }
+
+    function router() {
+        const hash = window.location.hash.substring(1);
+        if (hash) {
+            fetchSkyboxDetails(hash);
+        } else {
+            document.getElementById('skybox-container').style.display = 'flex';
+            document.getElementById('details-container').style.display = 'none';
+        }
+    }
+
+    function init() {
+        fetchCategories().then(() => {
+            return fetchSkyboxes();
+        }).then(skyboxes => {
+            const timeSelect = document.getElementById('time-select');
+            const weatherSelect = document.getElementById('weather-select');
+
+            const updateDisplay = () => {
+                const selectedTime = timeSelect.value;
+                const selectedWeather = weatherSelect.value;
+                displaySkyboxes(skyboxes, selectedTime, selectedWeather);
+            };
+
+            timeSelect.addEventListener('change', updateDisplay);
+            weatherSelect.addEventListener('change', updateDisplay);
+
+            updateDisplay();
+        });
+
+        window.addEventListener('hashchange', router);
+        window.addEventListener('load', router);
+    }
+
+    init();
+});

site/index.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Jacob Robbins' Skyboxes</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+
+    <meta name="description" content="Download high-quality skyboxes for your projects. Browse through various categories like Morning, Afternoon, Evening, and different weather conditions.">
+    <meta name="keywords" content="Jacob robbins, firegod522, source engine, gmod, garrysmod, skyboxes, 3D skyboxes, free skyboxes, skybox download, 3D models, HDRI skyboxes, skybox textures, skybox library">
+
+    <!-- Structured Data -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebSite",
+      "name": "Jacob Robbins Skyboxes",
+      "url": "https://jacobdeanr.github.io/Source_Skyboxes/",
+      "potentialAction": {
+        "@type": "SearchAction",
+        "target": "https://jacobdeanr.github.io/Source_Skyboxes/search?query={search_term_string}",
+        "query-input": "required name=search_term_string"
+      }
+    }
+    </script>
+
+</head>
+<body>
+    <h1>Jacob Robbins' Source Skyboxes</h1>
+    <select id="time-select">
+        <option value="">All Times</option>
+        <option value="Morning">Morning</option>
+        <option value="Afternoon">Afternoon</option>
+        <option value="Evening">Evening</option>
+        <option value="Night">Night</option>
+        <option value="Misc">Misc</option>
+    </select>
+    <select id="weather-select">
+        <option value="">All Weather Conditions</option>
+        <option value="Clear">Clear</option>
+        <option value="Cloudy">Cloudy</option>
+        <option value="Hazy">Hazy</option>
+        <option value="Overcast">Overcast</option>
+        <option value="Stormy">Stormy</option>
+    </select>
+    <div id="skybox-container"></div>
+    <div id="details-container" style="display:none;">
+        <div id="preview-container" style="width: 100%; height: 400px;"></div>
+    </div>
+
+    <h2>Contact Information</h2>
+    <div id="contact-info">
+        <p>
+            <a href="https://github.com/Jacobdeanr" target="_blank"><i class="fab fa-github"></i>GitHub</a> |
+            <a href="https://discord.com/users/160963792367386624" target="_blank"><i class="fab fa-discord"></i>Discord</a> |
+            <a href="https://www.instagram.com/jakobiobrien/" target="_blank"><i class="fab fa-instagram"></i> Instagram</a> |
+            <a href="https://steamcommunity.com/id/Jakobi_OBrien/" target="_blank"><i class="fab fa-steam"></i> Steam</a> 
+        </p>
+    </div>
+
+    <script src="fetch_skyboxes.js"></script>
+</body>
+</html>