Skip to content

README.md

Latest commit

 

History

History
236 lines (170 loc) · 7.45 KB

README.md

File metadata and controls

236 lines (170 loc) · 7.45 KB
Raw

🔥 NFT CARD GENERATOR PRO

Animated on-chain ready NFT card generator with flame black interface. Generate, customize, mint on Monad Mainnet, download PNG & video — all from one HTML file. No dependencies, no build tools, open directly in browser.

Monad HTML License

🌐 Live Demo

→ Open NFT Card Generator

✨ Features

  • 🎴 Animated NFT card with canvas rendering at 30 FPS
  • 🖼️ Drag & drop image upload (PNG, JPG, GIF, WEBP)
  • 🎨 12 neon lightning colors — toggle individually or use palette presets
  • ⚡ 4 palette presets: NEON / MATRIX (green/black) / MONO (white/grey/black) / FIRE
  • 💪 4 customizable power stats with live sliders (Attack, Defense, Speed, Magic)
  • ⭐ 6 rarity grades: SSS+ Mythic / SSS Legendary / SS Epic / S Rare / A Uncommon / B Common
  • 💾 Download as PNG (full resolution 800×1200)
  • 🎬 Download as animated WebM/MP4 video (5 seconds at 30 FPS)
  • 🌿 Mint on Monad Mainnet — sends 100 MON to owner wallet
  • 🔥 Flame black interface with rising ember particles
  • ⚡ Every button vibrates on click
  • 📱 Fully responsive — works on mobile

🗂 File Structure

NFT-CARD-GENERATOR-PRO/
├── index.html     # Complete app — single file, no dependencies
└── README.md

⚙️ All Functions

🖼️ Image & Upload

Function Description
loadImage(file) Reads image via FileReader, sets img variable, auto-triggers generateCard()
Drag & drop dragover / dragleave / drop events on .upload-zone
File input change event on #imageInput — accepts image/*

🎨 Card Generation & Animation

Function Description
generateCard() Shows canvas, enables download buttons, starts animation loop
animate(ts) requestAnimationFrame loop — increments time, calls drawCard(), tracks FPS
drawCard() Full canvas render — background, orbs, image, floating icons, rarity badge, name panel, stat bars, watermark
drawStatBar(stat, y, cols, t) Draws one animated stat bar with shimmer effect
drawCornerAccents(col) Draws 4 glowing corner bracket decorations
roundRect(ctx, x, y, w, h, r) Canvas helper — draws rounded rectangle path

🎨 Colors & Palettes

Function Description
setPalette(name) Sets active colors from preset — 'neon' / 'matrix' / 'mono' / 'fire'
Color button toggle Click .color-btn to add/remove color from activeColors array

Palette presets:

Name Colors
neon Green, Cyan, Magenta, Yellow, Pink, Purple, Red, Blue
matrix Green, Lime, Dark green, White shades
mono White, Grey, Black shades
fire Red, Orange, Yellow, Gold shades

💾 Download PNG

Function Description
downloadCard() Pauses animation → renders final frame → canvas.toBlob() → triggers download as {name}.png

Output: 800×1200px PNG, named from NFT name field.

🎬 Download Video

Function Description
downloadVideo() Records 5-second canvas stream using MediaRecorder API

Details:

  • Tries MIME types in order: video/webm;codecs=vp9 → video/webm;codecs=vp8 → video/webm → video/mp4
  • Records at 8 Mbps, 30 FPS
  • Shows red REC indicator with countdown timer
  • Shows progress bar during recording
  • Auto-downloads as {name}-animated.webm or .mp4
  • Requires Chrome or Firefox (Safari has limited MediaRecorder support)

🌿 Mint On-Chain — Monad Mainnet

Function Description
mintOnChain() Connects MetaMask → switches to Monad → sends 100 MON to owner → polls for receipt → auto-downloads PNG on success

Config:

const OWNER_ADDRESS = '0x592B35c8917eD36c39Ef73D0F5e92B0173560b2e';
const MONAD_CHAIN_ID = '0x8F'; // 143
const MINT_PRICE_WEI = '0x' + BigInt('100000000000000000000').toString(16); // 100 MON

Flow:

  1. eth_requestAccounts — connect wallet
  2. wallet_switchEthereumChain — switch to Monad (chain ID 143)
  3. wallet_addEthereumChain — adds Monad if not present
  4. eth_sendTransaction — sends 100 MON to owner address (gas: 21000)
  5. Polls eth_getTransactionReceipt every 2 seconds (max 60 attempts = 2 min)
  6. On success → auto-downloads card PNG

⚡ Vibrate On Click

document.addEventListener('click', e => {
  const btn = e.target.closest('button, .color-btn, .upload-zone');
  if (!btn || btn.disabled) return;
  btn.classList.remove('vibrating');
  void btn.offsetWidth; // reflow to restart animation
  btn.classList.add('vibrating');
  btn.addEventListener('animationend', () => btn.classList.remove('vibrating'), { once: true });
});

Every button on the page vibrates when clicked — 10-step shake with translate + rotate + scale.

📊 Stats Display

Function Description
updatePreviewSize() Updates preview info bar — size (800×1200) and LIVE/PAUSED status. Runs every 500ms via setInterval

🎴 Card Layout (800×1200px)

┌─────────────────────────┐  ← Animated flame border + corner accents
│                         │
│   [IMAGE AREA 720×560]  │  ← User image, shimmer overlay, floating icons
│         ⭐ SS ⭐         │  ← Rarity badge with pulse glow
│                         │
│  NAME              #001 │  ← Name panel (black bg)
│       Edition: 1/100    │
│                         │
│  ⚔️ ATTACK   ████░  85  │  ← Animated stat bars with shimmer
│  🛡️ DEFENSE  ███░░  70  │
│  ⚡ SPEED    █████  90  │
│  ✨ MAGIC    ████░  75  │
│                         │
│    imperamonad.xyz      │  ← Watermark
└─────────────────────────┘

🔧 How to Deploy

# Clone repo
git clone https://github.com/00impera/NFT-CARD-GENERATOR-PRO
cd NFT-CARD-GENERATOR-PRO

# No build needed — open directly
open index.html

# OR deploy to GitHub Pages
# Settings → Pages → Branch: main → / (root) → Save
# Live at: https://nftgeneratornft.nelutz2you.workers.dev/

🌿 Mint Configuration

To change mint price or owner address, edit these lines in index.html:

const OWNER_ADDRESS = '0x592B35c8917eD36c39Ef73D0F5e92B0173560b2e'; // ← your wallet
const MONAD_CHAIN_ID = '0x8F';                                        // ← 143 = Monad
const MINT_PRICE_WEI = '0x' + BigInt('100000000000000000000').toString(16); // ← 100 MON

To change price to 50 MON:

const MINT_PRICE_WEI = '0x' + BigInt('50000000000000000000').toString(16);

📱 Browser Support

Browser Generate PNG Video Mint
Chrome ✅ ✅ ✅ ✅
Firefox ✅ ✅ ✅ ✅
Safari ✅ ✅ ⚠️ Limited ✅
Mobile Chrome ✅ ✅ ✅ ✅
Mobile Safari ✅ ✅ ❌ ✅

📄 License

MIT — see LICENSE

Built on Monad Mainnet · Pure HTML/Canvas/JS · No dependencies