AniPay

A stunning anime-inspired payment gateway interface featuring Zero Two (Code:002) from Darling in the Franxx. This project combines beautiful UI design with functional payment methods for both Indian and international users.

Features

• Zero Two Themed UI

  • Beautiful pink and teal color scheme inspired by Zero Two
  • Particle animation background with anime.js
  • Responsive design for all devices

• Payment Methods

  • Indian Payments
    • QR Code payment with download option
    • UPI payment with copy functionality
  • International Payments
    • Binance ID
    • Bybit ID
    • Tonkeeper address

• Advanced Animations

  • Smooth entrance animations for all elements
  • Interactive button hover effects
  • Particle system background
  • Notification system

• Modern Technologies 🔧

  • Built with pure HTML, CSS, and JavaScript
  • Uses anime.js for advanced animations
  • Josefin Sans font for elegant typography

ㅤㅤ

Getting Started

1. Clone the repository

   git clone https://github.com/Shimeii86/AniPay.git

2. Open the project

   cd AniPay

3. Open index.html in your browser

   • Simply double-click the index.html file
   • Or run a local server:

     python -m http.server

     Then visit http://localhost:8000

Customization

1. Change Payment Details Edit the payment details in the HTML file:

<!-- Indian UPI ID -->
<div class="id-display">
  shinei@anipay
</div>

<!-- Binance ID -->
<div class="id-display">
  853904044
</div>

<!-- Bybit ID -->
<div class="id-display">
  199911528
</div>

<!-- Tonkeeper Address -->
<div class="id-display">
  UQBmK_-2A-gHnhx0hmWdFeQc8X7iZ0O_UkxQbQGU2uA6OwmX
</div>

2. Modify Colors Edit the CSS variables in the style section:

:root {
  --primary: #ff2a6d;      /* Pink color */
  --secondary: #5ffbf1;    /* Teal color */
  --dark-bg: #0c0c1d;      /* Dark background */
}

3. Adjust Animations Modify the anime.js parameters in the script section:

// Particle count
const particleCount = 150;  /* Increase for more particles */

// Title animation
anime({
  targets: '.title',
  opacity: [0, 1],
  translateY: [-30, 0],
  duration: 1500,          /* Animation duration */
  easing: 'easeOutExpo'
});

How to Add QR Code by URL

I've implemented QR code integration using an external URL. Here's how it works:

1. QR Code Generation:

<img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=upi://pay?pa=zerotwo002@animebank&pn=Zero%20Two%20Pay&mc=0000&mode=02&purpose=00" 
     alt="UPI QR Code" 
     class="qr-image"
     id="qr-image">

2. URL Parameters Explained:

• size=150x150: Sets the dimensions of the QR code
• data=upi://pay?pa=...: Contains the UPI payment details
• pn=Zero%20Two%20Pay: Sets the payee name
• mc=0000: Merchant code
• mode=02: Transaction mode

4. Download Functionality:

document.getElementById('download-qr').addEventListener('click', function() {
    const qrImage = document.getElementById('qr-image');
    const imageUrl = qrImage.src;
    
    // Create a temporary link
    const link = document.createElement('a');
    link.href = imageUrl;
    link.download = 'anipay-qrcode.png';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    showNotification('QR Code downloaded!');
});

4. Copy to Clipboard:

document.querySelectorAll('.copy-btn').forEach(button => {
    button.addEventListener('click', function() {
        const targetId = this.getAttribute('data-target');
        const textElement = document.getElementById(targetId);
        const text = textElement.textContent;
        
        navigator.clipboard.writeText(text).then(() => {
            showNotification('Copied to clipboard!');
        });
    });
});

Technologies Used

• Frontend

• Libraries

• Fonts

---

License

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

Loved My Work?

 Give a star to this project
 Follow me on GitHub

Wondering where to get these animated emojis? Visit here! You also should look around my other github repos. Maybe you'll find some cool useful stuff there.

Contact

For inquiries or collaborations:

^{Copyright © 2025 Shinei Nouzen All Rights Reserved}