|
|
<!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"> |
|
|
|
|
|
|
|
|
<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://danielrosehill-ai-assistants-library.hf.space/gallery.html"> |
|
|
<meta property="og:image" content="https://danielrosehill-ai-assistants-library.hf.space/banner.webp"> |
|
|
<meta name="twitter:image" content="https://danielrosehill-ai-assistants-library.hf.space/banner.webp"> |
|
|
|
|
|
|
|
|
<link rel="canonical" href="https://danielrosehill-ai-assistants-library.hf.space/gallery.html"> |
|
|
|
|
|
|
|
|
<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-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); |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
|
|
|
.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> |
|
|
|
|
|
<div class="loading-modal" id="loading-modal"> |
|
|
<div id="random-avatar-container"> |
|
|
|
|
|
</div> |
|
|
<h2>Weird AI Bots On The Way...</h2> |
|
|
<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</h2> |
|
|
<ul id="config-list"> |
|
|
|
|
|
</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"> |
|
|
|
|
|
</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> |
|
|
|
|
|
|
|
|
<div id="avatar-modal" class="modal"> |
|
|
<span class="modal-close">×</span> |
|
|
<img class="modal-content" id="modal-img"> |
|
|
<div id="modal-caption"></div> |
|
|
</div> |
|
|
|
|
|
<script src="scripts.js"></script> |
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const avatarData = [ |
|
|
|
|
|
|
|
|
|
|
|
{ file: "android-and-laptop-wide.webp", category: "robots", name: "Android and Laptop" }, |
|
|
{ file: "android-and-whiteboard.webp", category: "robots", name: "Android and Whiteboard" }, |
|
|
{ file: "android-between-people.webp", category: "robots", name: "Android Between People" }, |
|
|
{ file: "android-celebrating-bday-with-humans.webp", category: "robots", name: "Android Birthday" }, |
|
|
{ file: "android-in-road.webp", category: "robots", name: "Android in Road" }, |
|
|
{ file: "android-in-sift-1.webp", category: "robots", name: "Android in Sift 1" }, |
|
|
{ file: "android-in-sift.webp", category: "robots", name: "Android in Sift" }, |
|
|
{ file: "android-on-circuit-component.webp", category: "robots", name: "Android on Circuit" }, |
|
|
{ file: "android-with-tablet.webp", category: "robots", name: "Android with Tablet" }, |
|
|
{ file: "bot-and-laptop-speech-bubble.webp", category: "robots", name: "Bot with Laptop" }, |
|
|
{ file: "bot-and-spreadsheet.webp", category: "robots", name: "Bot and Spreadsheet" }, |
|
|
{ file: "bot-displaying-wristwatch.webp", category: "robots", name: "Bot with Watch" }, |
|
|
{ file: "bot-drinking-beer-on-beach.webp", category: "robots", name: "Bot on Beach" }, |
|
|
{ file: "bot-orchestration.webp", category: "robots", name: "Bot Orchestration" }, |
|
|
{ file: "bots-and-spreadsheet.webp", category: "robots", name: "Bots and Spreadsheet" }, |
|
|
{ file: "confused-looking-bot.webp", category: "robots", name: "Confused Looking Bot" }, |
|
|
{ file: "cute-bot-typing.webp", category: "robots", name: "Cute Bot Typing" }, |
|
|
{ file: "glum-android.webp", category: "robots", name: "Glum Android" }, |
|
|
{ file: "unhappy-android-in-chair.webp", category: "robots", name: "Unhappy Android" }, |
|
|
|
|
|
|
|
|
{ file: "bartender-sloth.webp", category: "sloths", name: "Bartender Sloth" }, |
|
|
{ file: "chef-sloth-with-frying-pan.webp", category: "sloths", name: "Chef Sloth" }, |
|
|
{ file: "corporate-sloth-being-interviewed.webp", category: "sloths", name: "Corporate Sloth" }, |
|
|
{ file: "ergonomic-sloth.webp", category: "sloths", name: "Ergonomic Sloth" }, |
|
|
{ file: "historic-sloth-writing-prompt.webp", category: "sloths", name: "Historic Sloth" }, |
|
|
{ file: "Operative-sloth.webp", category: "sloths", name: "Operative Sloth" }, |
|
|
{ file: "repo-docs-sloth.webp", category: "sloths", name: "Repo Docs Sloth" }, |
|
|
{ file: "serene-sloth-at-laptop.webp", category: "sloths", name: "Serene Sloth" }, |
|
|
{ file: "sloth-and-android-1.webp", category: "sloths", name: "Sloth and Android 1" }, |
|
|
{ file: "sloth-and-android.webp", category: "sloths", name: "Sloth and Android" }, |
|
|
{ file: "sloth-and-bot-on-workbench.webp", category: "sloths", name: "Sloth and Bot on Workbench" }, |
|
|
{ file: "sloth-and-bot.webp", category: "sloths", name: "Sloth and Bot" }, |
|
|
{ file: "sloth-and-markdown-symbol.webp", category: "sloths", name: "Sloth and Markdown" }, |
|
|
{ file: "sloth-and-monkey-laughing.webp", category: "sloths", name: "Sloth and Monkey" }, |
|
|
{ file: "sloth-and-wide-screens.webp", category: "sloths", name: "Sloth and Screens" }, |
|
|
{ file: "sloth-being-interviewed.webp", category: "sloths", name: "Sloth Being Interviewed" }, |
|
|
{ file: "sloth-boxer.webp", category: "sloths", name: "Sloth Boxer" }, |
|
|
{ file: "sloth-detective.webp", category: "sloths", name: "Sloth Detective" }, |
|
|
{ file: "sloth-director.webp", category: "sloths", name: "Sloth Director" }, |
|
|
{ file: "sloth-eating-popcron.webp", category: "sloths", name: "Sloth Eating Popcorn" }, |
|
|
{ file: "sloth-in-hammock-with-laptop.webp", category: "sloths", name: "Sloth in Hammock" }, |
|
|
{ file: "sloth-librarian.webp", category: "sloths", name: "Sloth Librarian" }, |
|
|
|
|
|
|
|
|
{ file: "cat-and-keyboard.webp", category: "animals", name: "Cat and Keyboard" }, |
|
|
{ file: "cat-in-cinema.webp", category: "animals", name: "Cat in Cinema" }, |
|
|
{ file: "cat-typing-on-computer.webp", category: "animals", name: "Cat Typing" }, |
|
|
{ file: "dog-and-speecc-bubble.webp", category: "animals", name: "Dog and Speech Bubble" }, |
|
|
{ file: "fox-and-bot-1.webp", category: "animals", name: "Fox and Bot 1" }, |
|
|
{ file: "fox-and-bot.webp", category: "animals", name: "Fox and Bot" }, |
|
|
{ file: "fox-typing.webp", category: "animals", name: "Fox Typing" }, |
|
|
{ file: "monkey-looking-at-laptop.webp", category: "animals", name: "Monkey with Laptop" }, |
|
|
{ file: "monkey-sleeping-on-hammock.webp", category: "animals", name: "Monkey in Hammock" }, |
|
|
{ file: "prompt-author-koala.webp", category: "animals", name: "Prompt Author Koala" }, |
|
|
{ file: "tech-support-penguin.webp", category: "animals", name: "Tech Support Penguin" }, |
|
|
|
|
|
|
|
|
{ file: "api-botsi-n-case.webp", category: "abstract", name: "API Bots in Case" }, |
|
|
{ file: "clouds-on-shelves.webp", category: "abstract", name: "Clouds on Shelves" }, |
|
|
{ file: "man-with-cloud-head.webp", category: "abstract", name: "Man with Cloud Head" }, |
|
|
{ file: "vision-icon.webp", category: "abstract", name: "Vision Icon" }, |
|
|
{ file: "words.webp", category: "abstract", name: "Words" } |
|
|
]; |
|
|
|
|
|
|
|
|
function populateGallery() { |
|
|
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); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
populateGallery(); |
|
|
|
|
|
|
|
|
const tabs = document.querySelectorAll('.tab'); |
|
|
const galleryItems = document.querySelectorAll('.gallery-item'); |
|
|
|
|
|
tabs.forEach(tab => { |
|
|
tab.addEventListener('click', function() { |
|
|
|
|
|
tabs.forEach(t => t.classList.remove('active')); |
|
|
|
|
|
|
|
|
this.classList.add('active'); |
|
|
|
|
|
|
|
|
const category = this.getAttribute('data-category'); |
|
|
|
|
|
|
|
|
galleryItems.forEach(item => { |
|
|
if (category === 'all' || item.getAttribute('data-category') === category) { |
|
|
item.style.display = 'block'; |
|
|
} else { |
|
|
item.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
