Corrupted Theme - Extensions Showcase

Gallery System

A complete gallery system with responsive grid layout, category filtering, and lightbox integration. Perfect for portfolios, image galleries, and showcases.

Filter Bar

Gallery Grid

Mountain Vista

Landscape • Nature

Color Flow

Abstract • Digital

Portrait Study

Portrait • Photography

Forest Path

Landscape • Nature

Fluid Motion

Abstract • Art

Expression

Portrait • Studio

Gallery Variants

.gallery-container.compact - Smaller grid items
.gallery-container.large - Larger grid items
.gallery-item.square - 1:1 aspect ratio
.gallery-item.portrait - 3:4 aspect ratio
.gallery-item.landscape - 16:9 aspect ratio

<!-- HTML Structure -->
<div class="filter-bar">
  <button class="filter-btn active" data-filter="all">All</button>
  <button class="filter-btn" data-filter="photos">Photos</button>
</div>

<div class="gallery-container">
  <div class="gallery-item" data-tags="photos">
    <img src="image.jpg" alt="Description">
    <div class="gallery-caption">
      <div class="title">Image Title</div>
      <div class="meta">Category • Date</div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script type="module">
  import { initGallery } from '@whykusanagi/corrupted-theme/gallery';
  const gallery = initGallery('#demo-gallery');
</script>

Lightbox

Fullscreen image viewer with keyboard navigation (Arrow keys, Escape), touch gestures for mobile, and image counter. Automatically integrates with the gallery system.

Features

Click any gallery image to open lightbox
Arrow keys for navigation
Escape key to close
Swipe gestures on mobile
Click outside image to close
Image counter and captions

Try clicking any image in the gallery above to see the lightbox in action.

<!-- Lightbox is auto-created by gallery.js -->
<!-- Manual API access: -->
<script type="module">
  import { initGallery } from '@whykusanagi/corrupted-theme/gallery';
  
  const gallery = initGallery('#my-gallery', {
    enableLightbox: true,
    enableKeyboard: true,
    onLightboxOpen: (image, index) => console.log('Opened:', image),
    onLightboxClose: () => console.log('Closed')
  });
  
  // Manual control
  gallery.openLightbox(0);  // Open first image
  gallery.closeLightbox(); // Close lightbox
</script>

NSFW Content Blur

Content warning system with blur overlay that reveals on click. Perfect for galleries with age-restricted content. Automatically removes blur when opened in lightbox.

Demo (Click to Reveal)

Hidden Content

Click the overlay to reveal

Custom Warning Text

Uses data-warning attribute

Normal Image

No NSFW class applied

<!-- Add nsfw-content class to blur -->
<div class="gallery-item nsfw-content" data-warning="18+ Click to View">
  <img src="sensitive-image.jpg" alt="Description">
</div>

<!-- Custom warning text -->
<div class="gallery-item nsfw-content" data-warning="Sensitive Content">
  <img src="image.jpg" alt="Description">
</div>

<!-- JavaScript API -->
<script type="module">
  import { initGallery } from '@whykusanagi/corrupted-theme/gallery';
  
  const gallery = initGallery('#gallery', {
    enableNsfw: true,
    nsfwWarning: '18+ Click to View',
    onNsfwReveal: (element) => console.log('Revealed:', element)
  });
</script>

Social Links List

Link-in-bio style social links layout with profile avatar, name, bio, and styled link buttons. Perfect for profile pages, link aggregation, and social showcases.

Demo

Avatar Sizes

.profile-avatar.sm

.profile-avatar

.profile-avatar.lg

<div class="social-links-container">
  <img src="profile.jpg" alt="Profile" class="profile-avatar">
  <h1 class="profile-name">@username</h1>
  <p class="profile-bio">Your bio text here.</p>
  
  <div class="link-list">
    <!-- Platform-specific hover colors -->
    <a href="#" class="link-item twitter">
      <i class="fab fa-twitter"></i> Twitter
    </a>
    <a href="#" class="link-item instagram">
      <i class="fab fa-instagram"></i> Instagram
    </a>
    <a href="#" class="link-item youtube">
      <i class="fab fa-youtube"></i> YouTube
    </a>
    <a href="#" class="link-item github">
      <i class="fab fa-github"></i> GitHub
    </a>
    <a href="#" class="link-item discord">
      <i class="fab fa-discord"></i> Discord
    </a>
    <a href="#" class="link-item twitch">
      <i class="fab fa-twitch"></i> Twitch
    </a>
    <!-- Default accent color -->
    <a href="#" class="link-item">
      <i class="fas fa-globe"></i> Website
    </a>
  </div>
</div>

Countdown Widget

Sophisticated event countdown widget with configurable shapes, character images, overlay effects, and animated popup messages. Supports JSON configuration for multiple events.

Live Demo

Shape Variants

Available shape containers (all maintain 375px base size):

diamond circle heart star hexagon octagon

Configuration Options

Property	Type	Description
`title`	string	Title displayed above countdown
`eventDate`	ISO 8601	Target date/time for countdown
`character.image`	string	Character image URL
`character.background.type`	string	Shape type (diamond, circle, etc.)
`character.overlay`	object	Overlay image with animation
`popup`	object	Popup message configuration
`completedMessage`	string	Message shown when countdown ends

<!-- HTML -->
<div id="countdown-widget"></div>

<!-- JavaScript with inline config -->
<script type="module">
  import { initCountdown } from '@whykusanagi/corrupted-theme/countdown';
  
  initCountdown({
    config: {
      title: 'Product Launch',
      eventDate: '2025-04-01T00:00:00-07:00',
      completedMessage: 'Now Available!',
      character: {
        image: 'character.png',
        rotation: 0,
        background: {
          type: 'diamond',
          color: 'radial-gradient(circle, rgba(54, 83, 161, 0.6), rgba(217, 79, 144, 0.6))',
          borderColor: '#4c2967'
        },
        overlay: {
          image: 'overlay.png',
          position: 'behind',
          animation: 'float'
        }
      },
      popup: {
        message: '<strong>Don\'t miss it!</strong><br>Pre-order now!',
        frequency: 15000,
        duration: 5000
      }
    }
  });
</script>

<!-- Or load from JSON via URL parameter -->
<!-- Access: page.html?event=kirara loads /data/countdown/kirara.json -->
<script type="module">
  import { initCountdown } from '@whykusanagi/corrupted-theme/countdown';
  initCountdown(); // Reads ?event= from URL
</script>

JSON Configuration File

{
  "title": "Manga Launch Countdown",
  "eventDate": "2025-04-01T04:00:00-07:00",
  "basicMessage": "Fall of Kirara manga launch",
  "completedMessage": "Now Available! Get your copy today!",
  "style": "compact",
  "character": {
    "image": "Fall_of_Kirara.png",
    "rotation": 0,
    "background": {
      "type": "diamond",
      "color": null,
      "borderColor": "#4c2967",
      "pattern": false
    },
    "overlay": {
      "image": "Tentacle_Foil.png",
      "position": "behind",
      "animation": "float",
      "rotation": null
    }
  },
  "popup": {
    "message": "📚 Pre-order now! <a href='#'>Shop</a>",
    "frequency": 10000,
    "duration": 5000,
    "colors": {
      "bg": "#3653a1",
      "border": "#d94f90",
      "text": "#ffffff"
    }
  },
  "colors": {
    "primary": null,
    "accent": null,
    "text": null
  }
}

Extension Components