Create gallery

Gallery Page html

Author: G-Fourteen

gallery

@@ -0,0 +1,207 @@
+<b:if cond="true">
+<style type="text/css">
+body, html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: 'Arial', sans-serif;
+  color: #e0e0e0;
+  line-height: 1.6;
+}
+
+#main-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.gallery-section {
+  background: #151515;
+  border-left: 4px solid #ff3e3e;
+  padding: 20px;
+  margin: 20px 0;
+  font-size: 1.1em;
+}
+  
+.gallery-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.gallery-item {
+  background: rgba(30, 30, 30, 0.9);
+  border: 1px solid #333;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.gallery-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.gallery-image {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+
+.gallery-content {
+  padding: 15px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: rgba(25, 25, 25, 0.9);
+}
+
+.gallery-title {
+  font-size: 1.2em;
+  margin: 0 0 10px 0;
+  color: #e0e0e0;
+}
+
+.gallery-date {
+  font-size: 0.9em;
+  color: #aaa;
+  margin-bottom: 10px;
+}
+
+.gallery-snippet {
+  font-size: 0.95em;
+  color: #ddd;
+  line-height: 1.5;
+  margin-bottom: 15px;
+  flex: 1;
+}
+
+.gallery-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.gallery-read-more {
+  display: inline-block;
+  padding: 8px 16px;
+  background: #2c3e50;
+  color: white;
+  border-radius: 4px;
+  text-decoration: none;
+  font-size: 0.9em;
+  transition: background 0.3s ease;
+  align-self: flex-start;
+}
+
+.gallery-read-more:hover {
+  background: #34495e;
+}
+
+#loading {
+  text-align: center;
+  padding: 20px;
+  color: #aaa;
+  font-style: italic;
+}
+
+#no-posts {
+  text-align: center;
+  padding: 40px;
+  color: #aaa;
+  font-style: italic;
+}
+</style>
+
+<div id="main-container">
+  <div class="gallery-section">
+    <h2>Unity AI Lab Gallery</h2>
+    <p>This is where we showcase our unfiltered AI creations. No limits, no restrictions, just pure machine creativity unleashed.</p>
+  </div>
+
+  <div class="gallery-container" id="galleryContainer">
+    <div id="loading">Loading gallery posts...</div>
+  </div>
+</div>
+
+<script type="text/javascript">
+//<![CDATA[
+document.addEventListener('DOMContentLoaded', function() {
+  const container = document.getElementById('galleryContainer');
+  const loadingEl = document.getElementById('loading');
+  
+  function formatDate(dateStr) {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  }
+  
+  function extractFirstImage(content) {
+    const imgMatch = content.match(/<img[^>]+src="([^">]+)"/);
+    return imgMatch ? imgMatch[1] : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKw0OF0lH-15EWQmNUbr5PWUTpZrmO_3vzAz-08gTy6zUamXS-ANQ1ScrpAw2wv3gIuii9h8G3wnc1JyPVv4fknfWLjp_2BWx6UXuhdW72VjQgSjhLtrCRwhEhpMpYiA1sXWcNAyFRbQBopgMFuUNdWBM6eWa6QTT9_VF0_sobSzF7rc6gp704Us_ABH4/s1600/UNITY_GALLERY.jpg';
+  }
+  
+  function createGalleryItem(post) {
+    const item = document.createElement('article');
+    item.className = 'gallery-item';
+    
+    const image = extractFirstImage(post.content);
+    const snippet = post.content.replace(/<[^>]+>/g, '').slice(0, 150) + '...';
+    
+    item.innerHTML = `
+      <a href="${post.url}" class="gallery-link">
+        <img src="${image}" alt="${post.title}" class="gallery-image">
+        <div class="gallery-content">
+          <h2 class="gallery-title">${post.title}</h2>
+          <div class="gallery-date">${formatDate(post.published)}</div>
+          <p class="gallery-snippet">${snippet}</p>
+          <span class="gallery-read-more">Read More</span>
+        </div>
+      </a>
+    `;
+    
+    return item;
+  }
+  
+  async function fetchGalleryPosts() {
+    try {
+      const response = await fetch('/feeds/posts/default/-/Gallery?alt=json-in-script&max-results=500');
+      const data = await response.text();
+      const jsonData = JSON.parse(data.replace(/^.*?({.*}).*?$/, '$1'));
+      
+      if (!jsonData.feed.entry) {
+        container.innerHTML = '<div id="no-posts">No gallery posts found.</div>';
+        return;
+      }
+      
+      const posts = jsonData.feed.entry.map(entry => ({
+        title: entry.title.$t,
+        content: entry.content.$t,
+        published: entry.published.$t,
+        url: entry.link.find(link => link.rel === 'alternate').href
+      }));
+      
+      loadingEl.remove();
+      posts.forEach(post => {
+        container.appendChild(createGalleryItem(post));
+      });
+      
+    } catch (error) {
+      console.error('Error fetching gallery posts:', error);
+      container.innerHTML = '<div id="no-posts">Error loading gallery posts. Please try again later.</div>';
+    }
+  }
+  
+  fetchGalleryPosts();
+});
+//]]>
+</script>
+</b:if>