AniPay

Darling in the Franxx Inspired Payment Gateway

A beautiful, anime-themed personal profile page with social links, posts, and payments.
One config file. Full customization. Zero code changes needed.

---

📖 Table of Contents

• What is AniPay?
• Screenshots
• Features
• Quick Start
• Customization
• Configuration Reference
• Project Structure
• Tech Stack
• Changelog
• Contributing
• Support
• License
• Contact

---

🎯 What is AniPay?

AniPay is a single-page personal profile & payment gateway with an anime aesthetic. It combines a Twitter-style profile, social media links, Instagram-style posts, and multi-method payments — all controlled by one config file.

Fork → Edit config.js → Done.

No HTML editing. No build tools. No npm install. Pure HTML + CSS + JS.

👤 Profile	🔗 Socials	📸 Posts	💳 Payments
Twitter/X style Banner, avatar, bio Verified badge, stats Typing animation	34 platforms Enable/disable any Hover color effects	Instagram grid Carousel + lightbox Configurable columns	11 methods 3 categories Copy, QR, links

---

📸 Screenshots

---

✨ Features

👤 Twitter/X-Style Profile

Feature	Description
Banner Image	Full-width banner with gradient overlay
Profile Avatar	Circular avatar with border and hover zoom
Verified Badge	Blue checkmark — toggle on/off
Display Name + Username	Bold name + muted handle
Bio	Multi-line bio with typing animation (character-by-character reveal)
Bio Link	Clickable link with icon
Location	Location with map pin icon
Join Date	Calendar icon + date text
Stats	Posts / Followers / Following — animated counters
Profile QR Code	One-click QR popover linking to your profile
Share Button	Share to Twitter/X, WhatsApp, or copy link

🔗 Social Media Icons (34 Platforms)

Developer & Code

GitHub · CodePen · Dev.to · Hashnode · Stack Overflow · Figma

Social Networks

X / Twitter · Instagram · Threads · Bluesky · Mastodon · Facebook · LinkedIn · Pinterest · Snapchat · Reddit

Messaging

Telegram · Discord · WhatsApp · Signal

Streaming & Content

YouTube · TikTok · Twitch · Spotify

Design & Creative

Dribbble · Behance · Medium · Steam

Support & Donations

Buy Me a Coffee · Ko-fi · Patreon · PayPal · Email

Each icon shows a tooltip on hover and changes to the platform's brand color.

📸 Instagram-Style Posts

Feature	Description
Grid Layout	Configurable columns: 2, 3, or 4
Single Images	One image per post
Carousel	Multiple images with swipe/dots navigation
Likes Overlay	Heart + count shown on hover
Lightbox	Click to expand — prev/next, keyboard arrows, touch swipe
Carousel Indicator	Image count badge on multi-image posts

💳 Payment Methods

🇮🇳 India (3 methods)

Method	Type	Features
UPI QR Code	QR	Scan & pay, download QR
UPI ID	ID	Copy to clipboard
PhonePe	URL	Direct app link

🌍 International (3 methods)

Method	Type	Features
PayPal	URL	PayPal.Me link
Buy Me a Coffee	URL	Support link
Ko-fi	URL	Tip link

₿ Crypto (5 methods)

Method	Type	Features
Binance Pay	ID	Copy UID
Bybit Wallet	ID	Copy UID
Tonkeeper	Address	Copy TON address
Ethereum	Address	Copy ERC-20 address
Bitcoin	Address	Copy BTC address

🎨 Design & UI

Feature	Description
Dark / Light Theme	Toggle with one click, persists via localStorage
Multiple Accent Themes	Pink, teal, purple, gold — with floating picker
Custom Accent Color	Pick any hex color for your accent
Glassmorphism	Frosted glass cards with backdrop blur
Particle Background	Animated multi-color canvas particles
Scroll Progress	Gradient bar at the top of the page
Hover Effects	Scale, glow, accent color on every interactive element
Toast Notifications	Stacking toasts for copy/download feedback
Anime.js Animations	Smooth entry animations for all sections
Responsive	Desktop, tablet, and mobile
Keyboard Shortcuts	Esc reset · Ctrl+K navigate · Arrow keys in lightbox

⚡ Quick Wins

Feature	Description
PWA Support	Installable on phone/desktop with service worker caching
Open Graph / SEO	Social share previews for Twitter, Discord, Telegram
Page Loading Animation	Animated splash screen with pulsing logo
Custom Fonts	Pick fonts from config — no CSS editing
Typing Animation	Bio text types out character-by-character

---

🚀 Quick Start

# 1. Fork this repo on GitHub

# 2. Clone your fork
git clone https://github.com/YOUR_USERNAME/AniPay.git
cd AniPay

# 3. Open in browser (no build step needed)
open index.html

# Or serve locally
python3 -m http.server 8000
# → http://localhost:8000

Deploy to GitHub Pages:

1. Go to Settings → Pages
2. Source: Deploy from a branch
3. Branch: main / folder: / (root)
4. Save → your site is live at https://YOUR_USERNAME.github.io/AniPay/

---

🔧 Customization

Everything lives in assets/js/config.js. No HTML editing needed.

Enable / Disable Sections

features: {
  profile: true,        // Twitter-style profile at top
  socials: true,        // Social media icons grid
  posts: true,          // Instagram-style posts
  payments: true,       // Payment methods
  themeToggle: true,    // Light/dark toggle button
  particles: true,      // Animated background
  scrollProgress: true, // Top scroll bar
  backToTop: true,      // Back to top button
  stats: true,          // Stats counter
}

Edit Profile

profile: {
  banner: "https://...",          // Banner image URL
  avatar: "https://...",          // Profile picture URL
  displayName: "Your Name",       // Display name
  username: "@yourhandle",        // Username
  bio: "Your bio text here...",   // Bio (typing animation auto-enabled)
  bioTyping: true,                // Character-by-character reveal
  bioLink: {
    url: "https://...",
    label: "your-site.com",
    enabled: true,
  },
  location: "City, Country",      // Set "" to hide
  joinDate: "January 2024",       // Set "" to hide
  verified: true,                 // Blue checkmark
  qrCode: { enabled: true },     // QR code popover
  stats: {
    posts:     { count: 420,  label: "Posts",     enabled: true },
    followers: { count: 12500, label: "Followers", enabled: true },
    following: { count: 380,  label: "Following", enabled: true },
  },
}

Toggle Social Links

socials: [
  { platform: "github",   url: "https://github.com/you",   enabled: true  },
  { platform: "twitter",  url: "https://x.com/you",        enabled: true  },
  { platform: "discord",  url: "https://discord.gg/you",   enabled: false }, // hidden
  // ... 34 platforms available — see config.js for full list
]

Add Posts

posts: {
  title: "Latest Posts",
  subtitle: "Snapshots from my world",
  columns: 3,  // 2, 3, or 4
  items: [
    {
      images: ["https://..."],           // Single image
      caption: "My first post ✨",
      likes: 245,
      enabled: true,
    },
    {
      images: ["https://...", "..."],    // Carousel (multiple images)
      caption: "Multiple photos!",
      likes: 512,
      enabled: true,
    },
  ]
}

Add a Payment Method

// Add to any category's items[] array:
{
  name: "Stripe",              // Display name
  icon: "fab fa-stripe-s",     // Font Awesome 6 icon
  iconBg: "#635bff",           // Icon circle background
  type: "url",                 // "id" | "url" | "qr" | "address"
  value: "https://...",        // Payment ID / URL / address
  label: "Stripe Link",        // Small label above value
  description: "Pay via card", // One-line description
  color: "#635bff",            // Card accent color
  enabled: true,               // Show or hide
  copyable: true,              // Show copy button
  badge: "new"                 // "popular" | "new" | "beta" | null
}

Add a Payment Category

payments: {
  // ... existing categories
  wallets: {
    title: "Digital Wallets",
    subtitle: "Apple Pay, Google Pay & more",
    icon: "fas fa-wallet",
    items: [
      { name: "Apple Pay", ... },
      { name: "Google Pay", ... }
    ]
  }
}

---

📝 Configuration Reference

Accent Themes

theme: {
  accentPicker: true,           // Show floating color picker
  accent: "pink",               // Default: "pink" | "teal" | "purple" | "gold" | "custom"
  customColor: "#ff2a6d",       // Used when accent is "custom"
  accents: {
    pink:   { color: "#ff2a6d", label: "Pink" },
    teal:   { color: "#5ffbf1", label: "Teal" },
    purple: { color: "#a855f7", label: "Purple" },
    gold:   { color: "#fbbf24", label: "Gold" },
  },
}

Custom Fonts

fonts: {
  main:    { family: "Inter",        weights: "300;400;500;600;700;800" },
  heading: { family: "Josefin Sans", weights: "300;400;600;700" },
  mono:    { family: "JetBrains Mono", weights: "400;500" },
}

Use any Google Fonts name — fonts are loaded dynamically.

Share Button

share: {
  enabled: true,
  platforms: ["twitter", "whatsapp", "copy"],  // Which options to show
}

Loading Animation

loading: {
  enabled: true,
  duration: 1500,            // Minimum display time (ms)
  logo: "./Source/logo.png", // Logo path
  text: "AniPay",            // Text below logo
}

SEO / Open Graph

seo: {
  enabled: true,
  title: "AniPay | Darling in the Franxx Payment Gateway",
  description: "A beautiful, anime-themed profile page...",
  image: "./Source/Banner1.png",    // OG image (1200x630 recommended)
  url: "https://your-domain.com/",
  twitterCard: "summary_large_image",
}

Social Platform Reference

Category	Platforms
Developer	GitHub, CodePen, Dev.to, Hashnode, Stack Overflow, Figma
Social	X/Twitter, Instagram, Threads, Bluesky, Mastodon, Facebook, LinkedIn, Pinterest, Snapchat, Reddit
Messaging	Telegram, Discord, WhatsApp, Signal
Streaming	YouTube, TikTok, Twitch, Spotify
Creative	Dribbble, Behance, Medium, Steam
Support	Buy Me a Coffee, Ko-fi, Patreon, PayPal, Email

Payment Field Reference

Field	Type	Description
name	string	Display name (required)
icon	string	Font Awesome 6 class (required)
iconBg	string	Background color for icon circle
type	string	"id" · "url" · "qr" · "address" · "wallet"
value	string	Payment ID / URL / address (required)
label	string	Small label above value
description	string	One-line description
color	string	Card accent color
enabled	boolean	true = shown · false = hidden
copyable	boolean	Shows copy button
downloadable	boolean	Shows download button (qr type)
badge	string	"popular" · "new" · "beta" · null

---

📁 Project Structure

AniPay/
├── index.html                    → Semantic HTML, zero inline code
├── manifest.json                 → PWA manifest (installable app)
├── sw.js                         → Service worker (offline caching)
├── assets/
│   ├── css/
│   │   └── styles.css            → All styles, themes, responsive
│   ├── js/
│   │   ├── config.js             → ⚡ EDIT THIS — all site content
│   │   └── app.js                → Rendering engine, animations, features
│   └── favicons/
│       ├── favicon.ico           → Multi-size ICO (16/32/48)
│       ├── favicon-16x16.png     → Small favicon
│       ├── favicon-32x32.png     → Standard favicon
│       ├── apple-touch-icon.png  → iOS home screen icon
│       ├── android-chrome-*.png  → Android install icons
├── Source/
│   ├── logo.png                  → Site logo
│   └── Banner*.png               → Screenshots & banners
├── CHANGELOG.md                  → Version history
├── LICENSE                       → MIT License
└── README.md                     → You're reading it

---

🛠️ Tech Stack

Component	Details
Fonts	Inter (primary) · Josefin Sans (display) · JetBrains Mono (code) — configurable
Icons	Font Awesome 6.5.1 (Free) — 34 social platform mappings
Animations	Anime.js 3.2.2
QR API	goqr.me API (auto-generated)
Hosting	GitHub Pages (static)
PWA	Service worker + manifest — installable on mobile & desktop

---

📋 Changelog

See CHANGELOG.md for full version history.

Version	Date	Highlights
v4.2.0	2026-05-06	Share button, custom fonts in config, page loading animation
v4.1.1	2026-05-06	Proper favicon suite (ICO, PNG, apple-touch, android-chrome)
v4.1.0	2026-05-06	PWA support, OG/SEO tags, typing bio, accent themes, profile QR
v4.0.0	2026-05-06	Twitter profile, 34 social links, Instagram posts, lightbox, feature toggles
v3.1.0	2026-05-06	Icon CDN fix, light/dark theme, README overhaul
v3.0.0	2026-05-06	Complete rebuild, new design, all methods enabled, theme toggle
v2.0.0	2026-05-06	Modular architecture, data-driven config
v1.0.0	2025-01-01	Initial release

---

🤝 Contributing

Contributions are welcome! Here's how:

1. Fork the repo
2. Create a branch (git checkout -b feature/awesome)
3. Commit your changes (git commit -m "Add awesome feature")
4. Push to the branch (git push origin feature/awesome)
5. Open a Pull Request

Ideas for Contributions

• New payment methods or categories
• New social platform icons
• Accessibility improvements
• Animation performance optimizations
• New background presets (stars, waves, nebula)
• i18n / multi-language support
• Guestbook feature
• Blog/articles section

---

💖 Support

If you find AniPay useful, consider supporting:

---

📜 License

This project is licensed under the MIT License — see the LICENSE file for details.

You are free to use, modify, and distribute this project. Attribution appreciated but not required.

---

📬 Contact

Made with ❤️ by Shinei Nouzen