Spaces:

CommanderLazarus
/

alien-lens-chronicles

Running

App Files Files Community

CommanderLazarus commited on Jan 9

Commit

c3bb20b

verified ·

1 Parent(s): 3216ecf

Create me a website dedicated to my photos of awesome alien and ufo photos. Give me the option to enter details about each piece, so that I may tell a story.

Browse files

Files changed (8) hide show

README.md +7 -4
add-photo.html +99 -0
components/footer.js +59 -0
components/navbar.js +78 -0
components/photo-card.js +94 -0
index.html +48 -19
script.js +73 -0
style.css +41 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Alien Lens Chronicles
-emoji: 🏢
-colorFrom: indigo
 colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Alien Lens Chronicles 👽📸
+colorFrom: red
 colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

add-photo.html ADDED Viewed

	@@ -0,0 +1,99 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Add New Sighting | Alien Lens Chronicles</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8 max-w-4xl">
+        <h1 class="text-4xl font-bold mb-8 text-purple-500">Document Your Encounter</h1>
+        <form id="photo-form" class="space-y-6">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <label for="title" class="block text-sm font-medium mb-1">Sighting Title</label>
+                    <input type="text" id="title" name="title" required class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                </div>
+                <div>
+                    <label for="date" class="block text-sm font-medium mb-1">Date of Sighting</label>
+                    <input type="date" id="date" name="date" required class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                </div>
+            </div>
+            <div>
+                <label for="location" class="block text-sm font-medium mb-1">Location</label>
+                <input type="text" id="location" name="location" required class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+            </div>
+            <div>
+                <label for="image" class="block text-sm font-medium mb-1">Upload Image</label>
+                <div class="flex items-center justify-center w-full">
+                    <label for="image" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-700 border-dashed rounded-lg cursor-pointer bg-gray-800 hover:bg-gray-800/50">
+                        <div class="flex flex-col items-center justify-center pt-5 pb-6">
+                            <i data-feather="upload" class="w-12 h-12 mb-3 text-gray-400"></i>
+                            <p class="mb-2 text-sm text-gray-400">Click to upload</p>
+                            <p class="text-xs text-gray-500">PNG, JPG, GIF (MAX. 5MB)</p>
+                        </div>
+                        <input id="image" type="file" class="hidden" accept="image/*" required>
+                    </label>
+                </div>
+            </div>
+            <div>
+                <label for="description" class="block text-sm font-medium mb-1">Your Story</label>
+                <textarea id="description" name="description" rows="5" required class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Describe your encounter in detail..."></textarea>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <label for="type" class="block text-sm font-medium mb-1">Type of Sighting</label>
+                    <select id="type" name="type" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                        <option value="ufo">UFO</option>
+                        <option value="alien">Alien Being</option>
+                        <option value="light">Strange Lights</option>
+                        <option value="artifact">Alien Artifact</option>
+                        <option value="other">Other</option>
+                    </select>
+                </div>
+                <div>
+                    <label for="credibility" class="block text-sm font-medium mb-1">Credibility Rating</label>
+                    <div class="flex items-center space-x-2">
+                        <input type="range" id="credibility" name="credibility" min="0" max="10" value="5" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+                        <span id="credibility-value" class="text-purple-400 font-medium">5</span>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end space-x-4 pt-4">
+                <a href="index.html" class="px-6 py-2 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors">Cancel</a>
+                <button type="submit" class="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors flex items-center gap-2">
+                    <i data-feather="save"></i>
+                    <span>Save Encounter</span>
+                </button>
+            </div>
+        </form>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Update credibility rating display
+        document.getElementById('credibility').addEventListener('input', function() {
+            document.getElementById('credibility-value').textContent = this.value;
+        });
+    </script>
+</body>
+</html>

components/footer.js ADDED Viewed

	@@ -0,0 +1,59 @@

+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    background-color: rgba(17, 24, 39, 0.8);
+                    backdrop-filter: blur(10px);
+                    border-top: 1px solid rgba(255, 255, 255, 0.1);
+                }
+                .social-icon {
+                    transition: all 0.3s ease;
+                }
+                .social-icon:hover {
+                    transform: translateY(-3px) scale(1.1);
+                    color: #a855f7;
+                }
+            </style>
+            <footer class="py-8 mt-12">
+                <div class="container mx-auto px-6">
+                    <div class="flex flex-col md:flex-row justify-between items-center">
+                        <div class="mb-6 md:mb-0">
+                            <h3 class="text-xl font-bold text-purple-400 mb-2">Alien Lens Chronicles</h3>
+                            <p class="text-gray-400 max-w-md">Documenting the unexplained through the lens of curiosity</p>
+                        </div>
+                        <div class="flex space-x-6">
+                            <a href="#" class="text-gray-400 hover:text-purple-400 social-icon">
+                                <i data-feather="twitter"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-purple-400 social-icon">
+                                <i data-feather="instagram"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-purple-400 social-icon">
+                                <i data-feather="youtube"></i>
+                            </a>
+                            <a href="#" class="text-gray-400 hover:text-purple-400 social-icon">
+                                <i data-feather="github"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
+                        <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Alien Lens Chronicles. All rights reserved.</p>
+                        <div class="flex space-x-6">
+                            <a href="#" class="text-gray-500 hover:text-purple-400 text-sm">Privacy Policy</a>
+                            <a href="#" class="text-gray-500 hover:text-purple-400 text-sm">Terms of Service</a>
+                            <a href="#" class="text-gray-500 hover:text-purple-400 text-sm">Contact</a>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,78 @@

+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background-color: rgba(17, 24, 39, 0.8);
+                    backdrop-filter: blur(10px);
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                }
+                .nav-link {
+                    position: relative;
+                }
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -2px;
+                    left: 0;
+                    width: 0;
+                    height: 2px;
+                    background-color: #a855f7;
+                    transition: width 0.3s ease;
+                }
+                .nav-link:hover::after {
+                    width: 100%;
+                }
+                .logo {
+                    text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
+                }
+            </style>
+            <nav class="py-4 px-6 sticky top-0 z-50">
+                <div class="container mx-auto flex justify-between items-center">
+                    <a href="index.html" class="text-2xl font-bold text-purple-400 logo flex items-center gap-2">
+                        <i data-feather="camera"></i>
+                        <span>Alien Lens</span>
+                    </a>
+                    <div class="hidden md:flex items-center space-x-8">
+                        <a href="index.html" class="text-gray-300 hover:text-purple-400 transition-colors nav-link">Gallery</a>
+                        <a href="add-photo.html" class="text-gray-300 hover:text-purple-400 transition-colors nav-link">Add Sighting</a>
+                        <a href="#" class="text-gray-300 hover:text-purple-400 transition-colors nav-link">About</a>
+                    </div>
+                    <button id="mobile-menu-button" class="md:hidden text-gray-300 hover:text-purple-400">
+                        <i data-feather="menu"></i>
+                    </button>
+                </div>
+                <!-- Mobile menu -->
+                <div id="mobile-menu" class="hidden md:hidden mt-4 space-y-3 pb-4">
+                    <a href="index.html" class="block px-4 py-2 text-gray-300 hover:bg-gray-800 rounded-lg transition-colors">Gallery</a>
+                    <a href="add-photo.html" class="block px-4 py-2 text-gray-300 hover:bg-gray-800 rounded-lg transition-colors">Add Sighting</a>
+                    <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-800 rounded-lg transition-colors">About</a>
+                </div>
+            </nav>
+        `;
+        // Mobile menu toggle
+        this.shadowRoot.getElementById('mobile-menu-button').addEventListener('click', () => {
+            const menu = this.shadowRoot.getElementById('mobile-menu');
+            menu.classList.toggle('hidden');
+            const icon = this.shadowRoot.querySelector('#mobile-menu-button i');
+            if (menu.classList.contains('hidden')) {
+                icon.setAttribute('data-feather', 'menu');
+            } else {
+                icon.setAttribute('data-feather', 'x');
+            }
+            feather.replace();
+        });
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

components/photo-card.js ADDED Viewed

	@@ -0,0 +1,94 @@

+class CustomPhotoCard extends HTMLElement {
+    connectedCallback() {
+        const id = this.getAttribute('data-id');
+        const title = this.getAttribute('data-title');
+        const date = this.getAttribute('data-date');
+        const location = this.getAttribute('data-location');
+        const image = this.getAttribute('data-image');
+        const description = this.getAttribute('data-description');
+        const type = this.getAttribute('data-type');
+        const credibility = this.getAttribute('data-credibility');
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .card {
+                    transition: all 0.3s ease;
+                    transform-style: preserve-3d;
+                }
+                .card:hover {
+                    transform: translateY(-5px) rotateX(5deg);
+                    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+                }
+                .type-badge {
+                    position: absolute;
+                    top: 1rem;
+                    right: 1rem;
+                    z-index: 10;
+                }
+                .credibility-meter {
+                    height: 4px;
+                    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
+                }
+                .credibility-indicator {
+                    width: ${credibility * 10}%;
+                    height: 100%;
+                    background-color: white;
+                    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
+                }
+            </style>
+            <div class="card bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300">
+                <div class="relative">
+                    <img src="${image}" alt="${title}" class="w-full h-48 object-cover">
+                    <span class="type-badge px-3 py-1 rounded-full text-xs font-semibold ${
+                        type === 'ufo' ? 'bg-purple-600' :
+                        type === 'alien' ? 'bg-green-600' :
+                        'bg-blue-600'
+                    }">
+                        ${type.charAt(0).toUpperCase() + type.slice(1)}
+                    </span>
+                </div>
+                <div class="p-6">
+                    <div class="flex justify-between items-start mb-2">
+                        <h3 class="text-xl font-bold text-purple-400">${title}</h3>
+                        <span class="text-gray-400 text-sm">${new Date(date).toLocaleDateString()}</span>
+                    </div>
+                    <div class="flex items-center text-gray-400 text-sm mb-4">
+                        <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
+                        <span>${location}</span>
+                    </div>
+                    <p class="text-gray-300 mb-4 line-clamp-3">${description}</p>
+                    <div class="credibility-meter rounded-full mb-4 overflow-hidden">
+                        <div class="credibility-indicator"></div>
+                    </div>
+                    <div class="flex justify-between text-xs text-gray-400">
+                        <span>Questionable</span>
+                        <span>Credible</span>
+                    </div>
+                    <a href="photo-detail.html?id=${id}" class="mt-4 inline-block px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors text-sm font-medium">
+                        View Full Story
+                    </a>
+                </div>
+            </div>
+        `;
+        // Replace feather icons after the element is rendered
+        setTimeout(() => {
+            const featherIcons = this.shadowRoot.querySelectorAll('[data-feather]');
+            featherIcons.forEach(icon => {
+                feather.replace(icon);
+            });
+        }, 100);
+    }
+}
+customElements.define('custom-photo-card', CustomPhotoCard);

index.html CHANGED Viewed

@@ -1,19 +1,48 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alien Lens Chronicles 👽📸</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/photo-card.js"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <section class="text-center mb-12">
+            <h1 class="text-5xl font-bold mb-4 text-purple-500">Alien Lens Chronicles</h1>
+            <p class="text-xl text-gray-300 max-w-2xl mx-auto">Documenting the unexplained through the lens of curiosity</p>
+        </section>
+        <div class="flex justify-end mb-6">
+            <a href="add-photo.html" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-colors">
+                <i data-feather="plus"></i>
+                <span>Add New Sighting</span>
+            </a>
+        </div>
+        <div id="gallery" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <!-- Photo cards will be inserted here by JavaScript -->
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Load sample data on page load
+        document.addEventListener('DOMContentLoaded', () => {
+            loadGallery();
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,73 @@

+// Sample data for the gallery
+const samplePhotos = [
+    {
+        id: 1,
+        title: "The Phoenix Lights",
+        date: "1997-03-13",
+        location: "Phoenix, Arizona",
+        image: "http://static.photos/technology/640x360/1",
+        description: "One of the most famous mass UFO sightings in history. Thousands of people reported seeing a huge V-shaped object with lights silently gliding over the city.",
+        type: "ufo",
+        credibility: 8
+    },
+    {
+        id: 2,
+        title: "Roswell Incident",
+        date: "1947-07-08",
+        location: "Roswell, New Mexico",
+        image: "http://static.photos/science/640x360/2",
+        description: "The alleged crash of an extraterrestrial spacecraft and subsequent cover-up by the U.S. government. The debris field contained strange metallic fragments with unearthly properties.",
+        type: "alien",
+        credibility: 7
+    },
+    {
+        id: 3,
+        title: "Tic-Tac Encounter",
+        date: "2004-11-14",
+        location: "Pacific Ocean",
+        image: "http://static.photos/aerial/640x360/3",
+        description: "Navy pilots encountered a white, oblong object resembling a tic-tac candy that demonstrated impossible flight characteristics, captured on FLIR video.",
+        type: "ufo",
+        credibility: 9
+    }
+];
+// Load gallery with sample data
+function loadGallery() {
+    const gallery = document.getElementById('gallery');
+    if (!gallery) return;
+    gallery.innerHTML = '';
+    samplePhotos.forEach(photo => {
+        const photoCard = document.createElement('custom-photo-card');
+        photoCard.setAttribute('data-id', photo.id);
+        photoCard.setAttribute('data-title', photo.title);
+        photoCard.setAttribute('data-date', photo.date);
+        photoCard.setAttribute('data-location', photo.location);
+        photoCard.setAttribute('data-image', photo.image);
+        photoCard.setAttribute('data-description', photo.description);
+        photoCard.setAttribute('data-type', photo.type);
+        photoCard.setAttribute('data-credibility', photo.credibility);
+        gallery.appendChild(photoCard);
+    });
+    feather.replace();
+}
+// Handle form submission for new sightings
+document.getElementById('photo-form')?.addEventListener('submit', function(e) {
+    e.preventDefault();
+    // In a real app, you would save to a database
+    // For now, we'll just redirect to the gallery
+    alert('Sighting saved successfully!');
+    window.location.href = 'index.html';
+});
+// Initialize the app
+document.addEventListener('DOMContentLoaded', () => {
+    feather.replace();
+});

style.css CHANGED Viewed

@@ -1,28 +1,51 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');
 body {
+    font-family: 'Space Mono', monospace;
+}
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Orbitron', sans-serif;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
+::-webkit-scrollbar-track {
+    background: #1a1a1a;
 }
+::-webkit-scrollbar-thumb {
+    background: #7e22ce;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #9333ea;
 }
+/* Animation for alien-themed elements */
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
 }
+.float-animation {
+    animation: float 4s ease-in-out infinite;
+}
+/* Glow effect for UFO elements */
+.glow-effect {
+    box-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
+    transition: box-shadow 0.3s ease;
+}
+.glow-effect:hover {
+    box-shadow: 0 0 25px rgba(124, 58, 237, 0.8);
+}