https://github.com/00impera/lock-unlock-nft-
LOCK UNLOCK NFT
https://github.com/00impera/lock-unlock-nft-
application fotos github json nft nft-gallery nft-generator nftcollection open-source openstack package react readme
Last synced: about 1 month ago
JSON representation
LOCK UNLOCK NFT
- Host: GitHub
- URL: https://github.com/00impera/lock-unlock-nft-
- Owner: 00impera
- Created: 2025-10-31T22:49:50.000Z (7 months ago)
- Default Branch: Telegram8
- Last Pushed: 2025-10-31T23:13:46.000Z (7 months ago)
- Last Synced: 2025-11-01T01:08:34.654Z (7 months ago)
- Topics: application, fotos, github, json, nft, nft-gallery, nft-generator, nftcollection, open-source, openstack, package, react, readme
- Language: HTML
- Homepage: https://00impera.github.io/LOCK-UNLOCK-NFT-: LOCK UNLOCK NFT
- Size: 14.6 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🔒 NFT LOCKED IMAGE GENERATOR
> Generate blurred "locked" preview images for your NFTs in seconds. Upload your artwork, customize the lock overlay, mint on Monad Mainnet for 100 MON, and download the locked.png ready for IPFS + OpenSea metadata.
[](https://monad.xyz)
[](#)
[](LICENSE)
---
## 🌐 Live Demo
**[→ Open NFT Locked Image Generator](https://nft-rarity.imperamonad.xyz)**
---
## 📸 Preview
---
## ✨ Features
- 📤 **Drag & drop** or click to upload your NFT image
- 🎨 **Auto-preview** — original vs locked side-by-side in real-time
- ⚙️ **Customize** — blur, darkness, main text, sub text
- 💾 **Download** — one click to get your `locked.png`
- 🌿 **Mint on Monad** — send 100 MON to register ownership
- 🔥 Flame green/black interface with rising ember particles
- ⚡ Every button vibrates on click
- 📱 Fully responsive — works on mobile
---
## 🚀 HOW TO USE — SUPER SIMPLE
### STEP 1 — Upload Your NFT Image
- Click the upload box **OR** drag your image directly onto it
- Accepts: **JPG · PNG · GIF · WEBP**
- Max size: 10MB
### STEP 2 — Adjust Settings
| Setting | What it does | Default |
|---|---|---|
| **Blur Amount** | Slide to blur more / less | 50px |
| **Darkness** | Make the overlay darker / lighter | 50% |
| **Main Text** | Change the big lock text | `🔒 LOCKED` |
| **Sub Text** | Change the small description | `PURCHASE TO UNLOCK` |
### STEP 3 — See Live Preview
- **Left side** = Your original image
- **Right side** = Locked version — updates automatically as you change settings
### STEP 4 — Download or Mint
| Action | Description |
|---|---|
| 💾 **DOWNLOAD LOCKED.PNG** | Saves `locked-nft.png` to your computer |
| 🌿 **MINT — 100 MON** | Sends 100 MON on Monad Mainnet → auto-downloads after confirmation |
---
## 📋 NEXT STEPS AFTER DOWNLOAD
```
✅ You now have locked.png
📤 Upload to IPFS → Pinata.cloud or NFT.Storage
📝 Copy the IPFS hash (ipfs://Qm...)
🔄 Update your NFT JSON metadata:
"image": "ipfs://YOUR_LOCKED_HASH"
🚀 Mint on OpenSea with locked preview!
```
**Example metadata JSON:**
```json
{
"name": "My NFT #001",
"description": "Purchase to unlock the full artwork.",
"image": "ipfs://QmYOUR_LOCKED_IMAGE_HASH",
"animation_url": "ipfs://QmYOUR_FULL_IMAGE_HASH"
}
```
---
## ⚙️ All Functions
| Function | Description |
|---|---|
| `loadImage(file)` | Reads file via FileReader, sets canvas size, draws original + locked |
| `setupCanvases()` | Sets both canvases to `min(width, height, 800)` square |
| `drawOriginal()` | Draws the source image centered and scaled on the left canvas |
| `drawLocked()` | Draws blurred image + darkness + green tint + scanlines + lock icon + text + border glow |
| `downloadLocked()` | `canvas.toBlob()` → creates download link → triggers save as `locked-nft.png` |
| `mintOnChain()` | Connects MetaMask → switches to Monad → sends 100 MON → polls receipt → auto-downloads on success |
| `resetAll()` | Clears canvases, resets all inputs to defaults |
---
## 🌿 Mint Configuration
```javascript
const OWNER = '0x592B35c8917eD36c39Ef73D0F5e92B0173560b2e'; // receives MON
const CHAIN_HEX = '0x8F'; // Monad chain ID 143
const PRICE_WEI = '0x' + BigInt('100000000000000000000').toString(16); // 100 MON
```
**Mint flow:**
1. `eth_requestAccounts` — connect wallet
2. `wallet_switchEthereumChain` — switch to Monad (adds it automatically if missing)
3. `eth_sendTransaction` — sends 100 MON to owner (gas: 21000)
4. Polls `eth_getTransactionReceipt` every 2s (max 3 minutes)
5. On success → shows clickable TX link to Monad explorer → auto-downloads PNG
---
## 🗂 File Structure
```
NFT-CARD-GENERATOR-RARITY/
├── index.html # Complete app — single file, zero dependencies
└── README.md
```
---
## 📱 Browser Support
| Browser | Upload | Preview | Download | Mint |
|---|---|---|---|---|
| Chrome | ✅ | ✅ | ✅ | ✅ |
| Firefox | ✅ | ✅ | ✅ | ✅ |
| Safari | ✅ | ✅ | ✅ | ✅ |
| Mobile Chrome | ✅ | ✅ | ✅ | ✅ |
| Mobile Safari | ✅ | ✅ | ✅ | ✅ |
---
## 🔗 Related Projects
| Project | URL |
|---|---|
| NFT Card Generator | [nft-rarity.imperamonad.xyz](https://nft-rarity.imperamonad.xyz) |
| PYRATHOS Mining | [pyrathos.imperamonad.xyz](https://pyrathos.imperamonad.xyz) |
| Quantum Engine NFT | [quantum-engine.imperamonad.xyz](https://quantum-engine.imperamonad.xyz) |
| IceBox Mint | [icebox.imperamonad.xyz](https://icebox.imperamonad.xyz) |
| Portfolio | [imperamonad.xyz](https://imperamonad.xyz) |
---
## 📄 License
MIT — see [LICENSE](LICENSE)
---
*Built on [Monad Mainnet](https://monad.xyz) · Pure HTML/Canvas/JS · No dependencies*