Hugging Face's logo

Spaces:
danielrosehill
/
AI-Assistants-Library
Running

App Files Community
AI-Assistants-Library / gallery /index.html
danielrosehill's picture
danielrosehill
updated
f6ba329
raw
history blame contribute delete
14 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AI Assistant Library | Avatar Gallery</title>
 <meta name="description" content="A gallery of AI assistant avatars created by Daniel Rosehill.">
 <meta name="keywords" content="AI, artificial intelligence, assistant, system prompts, avatars, Daniel Rosehill">
 <meta name="author" content="Daniel Rosehill">
<!-- Open Graph / Social Media Meta Tags -->
 <meta property="og:title" content="AI Assistant Library | Avatar Gallery">
 <meta property="og:description" content="A gallery of AI assistant avatars created by Daniel Rosehill.">
 <meta property="og:type" content="website">
 <meta property="og:url" content="https://agents.bydanielrosehill.com/gallery.html">
 <meta property="og:image" content="https://agents.bydanielrosehill.com/banner.webp">
 <meta property="og:image:width" content="1200">
 <meta property="og:image:height" content="630">
<!-- Twitter Card Meta Tags -->
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="AI Assistant Library | Avatar Gallery">
 <meta name="twitter:description" content="A gallery of AI assistant avatars created by Daniel Rosehill.">
 <meta name="twitter:image" content="https://agents.bydanielrosehill.com/banner.webp">
<!-- Canonical URL -->
 <link rel="canonical" href="https://agents.bydanielrosehill.com/gallery.html">
<!-- Favicon -->
 <link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="../styles.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 <link href="https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Monoton&family=Orbitron:wght@400;700&family=Pacifico&family=Press+Start+2P&family=Exo+2:wght@400;700&family=Audiowide&display=swap" rel="stylesheet">
 <style>
 /* Gallery specific styles */
 .gallery-container {
 padding: 30px;
 max-width: 1200px;
 margin: 0 auto;
 }
.gallery-header {
 text-align: center;
 margin-bottom: 30px;
 }
.gallery-header h2 {
 font-family: 'Press Start 2P', cursive;
 color: var(--secondary-color);
 margin-bottom: 15px;
 }
.gallery-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 gap: 25px;
 margin-top: 30px;
 }
.gallery-item {
 background-color: var(--card-bg);
 border-radius: 15px;
 overflow: hidden;
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
 border: 2px solid var(--accent-color);
 transition: transform 0.3s, box-shadow 0.3s;
 display: flex;
 flex-direction: column;
 animation: fadeIn 0.5s ease-out;
 animation-fill-mode: both;
 }
.gallery-item:hover {
 transform: translateY(-10px);
 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
 }
.gallery-item img {
 width: 100%;
 height: 250px;
 object-fit: cover;
 border-bottom: 2px solid var(--accent-color);
 cursor: pointer;
 }
.gallery-item-info {
 padding: 15px;
 text-align: center;
 }
.gallery-item-info h3 {
 font-family: 'Orbitron', sans-serif;
 color: var(--secondary-color);
 margin-bottom: 10px;
 font-size: 1.2rem;
 }
.tabs {
 display: flex;
 justify-content: center;
 margin-bottom: 30px;
 flex-wrap: wrap;
 }
.tab {
 padding: 10px 20px;
 background-color: var(--sidebar-bg);
 color: var(--text-color);
 border: none;
 margin: 0 5px;
 cursor: pointer;
 border-radius: 5px;
 font-family: 'Orbitron', sans-serif;
 transition: background-color 0.3s, transform 0.3s;
 }
.tab.active, .tab:hover {
 background-color: var(--primary-color);
 transform: translateY(-3px);
 }
/* Animation for staggered loading */
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
 }
/* Apply staggered animation to gallery items */
 .gallery-grid .gallery-item:nth-child(1) { animation-delay: 0.1s; }
 .gallery-grid .gallery-item:nth-child(2) { animation-delay: 0.2s; }
 .gallery-grid .gallery-item:nth-child(3) { animation-delay: 0.3s; }
 .gallery-grid .gallery-item:nth-child(4) { animation-delay: 0.4s; }
 .gallery-grid .gallery-item:nth-child(5) { animation-delay: 0.5s; }
 .gallery-grid .gallery-item:nth-child(6) { animation-delay: 0.6s; }
 .gallery-grid .gallery-item:nth-child(7) { animation-delay: 0.7s; }
 .gallery-grid .gallery-item:nth-child(8) { animation-delay: 0.8s; }
@media (max-width: 768px) {
 .gallery-grid {
 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 gap: 15px;
 }
.gallery-item img {
 height: 150px;
 }
.gallery-item-info h3 {
 font-size: 1rem;
 }
.tabs {
 margin-bottom: 20px;
 }
.tab {
 padding: 8px 15px;
 margin-bottom: 10px;
 }
 }
 </style>
</head>
<body>
 <!-- Loading Modal -->
 <div class="loading-modal" id="loading-modal">
 <div id="random-avatar-container">
 <!-- Random avatar will be inserted here by JavaScript -->
 </div>
 <h2>Weird AI Bots On The Way...</h2>
 <p class="desktop-notice">This site is best viewed on a desktop device</p>
 <div class="progress-container">
 <div class="progress-bar" id="loading-progress-bar"></div>
 <div class="progress-emoji">🤖</div>
 </div>
 </div>
<div class="banner">
 <img src="../banner.webp" alt="Banner Image">
 <div class="banner-overlay">
 <div class="header-container">
 <img src="/images/avatar-photos/confused-looking-bot.webp" alt="Confused Bot" class="header-avatar">
 <h1>AI Assistant Library</h1>
 </div>
 <p>A collection of AI assistant configurations by <a href="https://danielrosehill.com" target="_blank" rel="noopener">Daniel Rosehill</a></p>
 </div>
 </div>
<div class="container">
 <div class="sidebar">
 <div class="search-container">
 <div class="nav-links">
 <a href="/" class="nav-link">
 <i class="fas fa-home"></i> Home
 </a>
 <a href="/gallery" class="nav-link active">
 <i class="fas fa-images"></i> Avatar Gallery
 </a>
 </div>
 <a href="https://github.com/danielrosehill/AI-Assistant-System-Prompt-Library-0325-Export/releases/download/V1/configs.zip" class="download-configs-btn">
 <i class="fas fa-download"></i> Download All Configs
 </a>
 <div class="search-input-container">
 <input type="text" id="search-input" placeholder="Search configurations...">
 <button id="search-button"><i class="fas fa-search"></i></button>
 </div>
 <button id="reset-search-button" class="reset-btn"><i class="fas fa-times"></i> Reset</button>
 </div>
 <div class="sidebar-content">
 <h2>Configurations <span class="config-count-small">(600)</span></h2>
 <ul id="config-list">
 <!-- Configuration links will be populated here by JavaScript -->
 </ul>
 </div>
 </div>
<div class="main-content">
 <div class="gallery-container">
 <div class="gallery-header">
 <h2>AI Assistant Avatar Gallery</h2>
 <p>Browse through the collection of AI assistant avatars used in the configurations.</p>
 </div>
<div class="tabs">
 <button class="tab active" data-category="all">All Avatars</button>
 <button class="tab" data-category="robots">Robots</button>
 <button class="tab" data-category="sloths">Sloths</button>
 <button class="tab" data-category="animals">Animals</button>
 <button class="tab" data-category="abstract">Abstract</button>
 </div>
<div class="gallery-grid" id="gallery-grid">
 <!-- Gallery items will be dynamically loaded by JavaScript -->
 </div>
 </div>
 </div>
 </div>
<footer>
 <p>AI Assistant Library by <a href="https://danielrosehill.com" target="_blank" rel="noopener">Daniel Rosehill</a> | 2024-2025</p>
 <p><a href="https://github.com/username/repository" target="_blank" rel="noopener">View on GitHub</a></p>
 </footer>
<!-- Modal for avatar images -->
 <div id="avatar-modal" class="modal">
 <span class="modal-close">&times;</span>
 <img class="modal-content" id="modal-img">
 <div id="modal-caption"></div>
 </div>
<script src="../scripts.js"></script>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
 // Load avatar data from JSON file
 fetch('../avatar-list.json')
 .then(response => response.json())
 .then(avatarData => {
 // Update the gallery header to show the total number of avatars
 const galleryHeader = document.querySelector('.gallery-header p');
 galleryHeader.textContent = `Browse through the collection of ${avatarData.length} AI assistant avatars used in the configurations.`;
// Populate the gallery with all avatars
 populateGallery(avatarData);
// Set up filtering after gallery is populated
 setupFiltering();
 })
 .catch(error => {
 console.error('Error loading avatar list:', error);
 document.getElementById('gallery-grid').innerHTML = '<p>Error loading avatars. Please try again later.</p>';
 });
// Function to populate the gallery with avatar data
 function populateGallery(avatarData) {
 const galleryGrid = document.getElementById('gallery-grid');
avatarData.forEach(avatar => {
 const galleryItem = document.createElement('div');
 galleryItem.className = 'gallery-item';
 galleryItem.setAttribute('data-category', avatar.category);
galleryItem.innerHTML = `
 <img src="/images/avatar-photos/${avatar.file}" alt="${avatar.name}" onclick="openModal('/images/avatar-photos/${avatar.file}', '${avatar.name}')">
 <div class="gallery-item-info">
 <h3>${avatar.name}</h3>
 </div>
 `;
galleryGrid.appendChild(galleryItem);
 });
 }
 });
// Set up filtering functionality
 function setupFiltering() {
 // Wait a moment for the DOM to update with all gallery items
 setTimeout(() => {
 const tabs = document.querySelectorAll('.tab');
 const galleryItems = document.querySelectorAll('.gallery-item');
tabs.forEach(tab => {
 tab.addEventListener('click', function() {
 // Remove active class from all tabs
 tabs.forEach(t => t.classList.remove('active'));
// Add active class to clicked tab
 this.classList.add('active');
// Get category
 const category = this.getAttribute('data-category');
// Filter gallery items
 galleryItems.forEach(item => {
 if (category === 'all' || item.getAttribute('data-category') === category) {
 item.style.display = 'block';
 } else {
 item.style.display = 'none';
 }
 });
 });
 });
}, 100);
 }
// Open modal for avatar image (reusing the function from scripts.js)
 function openModal(src, name) {
 const modal = document.getElementById('avatar-modal');
 const modalImg = document.getElementById('modal-img');
 const modalCaption = document.getElementById('modal-caption');
modal.style.display = "block";
 modalImg.src = src;
 modalCaption.innerHTML = name;
 }
 </script>
</body>
</html>