<!DOCTYPE html>

<head>

<title>PixelPi - Photography NFT Marketplace</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

min-height: 100vh;

color: #333;

line-height: 1.6;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 20px;

}

/* Header Styles */

.header {

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(10px);

border-radius: 20px;

padding: 20px;

margin-bottom: 30px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}

.logo {

display: flex;

align-items: center;

gap: 15px;

margin-bottom: 15px;

}

.logo h1 {

font-size: 2.5em;

background: linear-gradient(45deg, #667eea, #764ba2);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

font-weight: bold;

}

.logo-icon {

font-size: 2.5em;

}

.pi-status {

background: #f8f9fa;

border-radius: 15px;

padding: 15px;

border-left: 4px solid #ffc107;

display: flex;

justify-content: space-between;

align-items: center;

flex-wrap: wrap;

gap: 10px;

}

.connect-btn {

background: linear-gradient(45deg, #667eea, #764ba2);

color: white;

border: none;

padding: 10px 20px;

border-radius: 20px;

cursor: pointer;

font-weight: 600;

transition: all 0.3s ease;

}

.connect-btn:hover {

transform: translateY(-2px);

box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);

}

/* Main Content */

.main-content {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 30px;

margin-bottom: 30px;

}

.upload-section, .gallery-section {

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(10px);

border-radius: 20px;

padding: 25px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}

.section-title {

font-size: 1.5em;

margin-bottom: 20px;

color: #333;

border-bottom: 2px solid #667eea;

padding-bottom: 10px;

}

/* Upload Styles */

.upload-area {

border: 3px dashed #667eea;

border-radius: 15px;

padding: 40px;

text-align: center;

background: #f8f9ff;

transition: all 0.3s ease;

cursor: pointer;

}

.upload-area:hover {

border-color: #764ba2;

background: #f0f4ff;

transform: translateY(-2px);

}

.upload-area.drag-over {

border-color: #28a745;

background: #f0fff4;

}

.upload-icon {

font-size: 3em;

color: #667eea;

margin-bottom: 15px;

}

.form-group {

margin-bottom: 20px;

}

.form-group label {

display: block;

margin-bottom: 8px;

font-weight: 600;

color: #555;

}

.form-group input, .form-group textarea, .form-group select {

width: 100%;

padding: 12px;

border: 2px solid #e1e5e9;

border-radius: 10px;

font-size: 14px;

transition: border-color 0.3s ease;

font-family: inherit;

}

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {

outline: none;

border-color: #667eea;

}

.btn {

background: linear-gradient(45deg, #667eea, #764ba2);

color: white;

border: none;

padding: 12px 25px;

border-radius: 25px;

cursor: pointer;

font-size: 16px;

font-weight: 600;

transition: all 0.3s ease;

text-transform: uppercase;

letter-spacing: 1px;

}

.btn:hover {

transform: translateY(-2px);

box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);

}

.btn:disabled {

background: #ccc;

cursor: not-allowed;

transform: none;

}

/* Gallery Styles */

.photo-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

gap: 20px;

}

.photo-card {

background: white;

border-radius: 15px;

overflow: hidden;

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);

transition: transform 0.3s ease;

}

.photo-card:hover {

transform: translateY(-5px);

}

.photo-image {

width: 100%;

height: 200px;

object-fit: cover;

background: #f0f0f0;

}

.photo-info {

padding: 15px;

}

.photo-title {

font-weight: 600;

margin-bottom: 8px;

color: #333;

}

.photo-price {

color: #667eea;

font-weight: bold;

font-size: 1.1em;

}

.photo-description {

color: #666;

font-size: 0.9em;

margin: 8px 0;

}

.photo-status {

display: inline-block;

padding: 4px 12px;

border-radius: 20px;

font-size: 0.8em;

font-weight: 600;

text-transform: uppercase;

}

.status-available {

background: #d4edda;

color: #155724;

}

.status-sold {

background: #f8d7da;

color: #721c24;

}

/* Stats Section */

.stats-section {

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(10px);

border-radius: 20px;

padding: 25px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}

.stats-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 20px;

}

.stat-card {

background: linear-gradient(45deg, #667eea, #764ba2);

color: white;

padding: 20px;

border-radius: 15px;

text-align: center;

}

.stat-number {

font-size: 2em;

font-weight: bold;

margin-bottom: 5px;

}

.stat-label {

font-size: 0.9em;

opacity: 0.9;

}

/* Message Styles */

.error-message {

background: #f8d7da;

color: #721c24;

padding: 10px;

border-radius: 5px;

margin: 10px 0;

border: 1px solid #f5c6cb;

}

.success-message {

background: #d4edda;

color: #155724;

padding: 10px;

border-radius: 5px;

margin: 10px 0;

border: 1px solid #c3e6cb;

}

/* Footer */

.footer {

background: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(10px);

border-radius: 20px;

padding: 25px;

text-align: center;

margin-top: 30px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}

.footer p {

color: #666;

font-size: 0.9em;

}

/* Loading Spinner */

.spinner {

border: 3px solid #f3f3f3;

border-top: 3px solid #667eea;

border-radius: 50%;

width: 20px;

height: 20px;

animation: spin 1s linear infinite;

display: inline-block;

margin-right: 10px;

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

.hidden {

display: none !important;

}

/* Responsive Design */

@media (max-width: 768px) {

.container {

padding: 15px;

}

.main-content {

grid-template-columns: 1fr;

}

.stats-grid {

grid-template-columns: 1fr 1fr;

}

.logo h1 {

font-size: 2em;

}

</style>

</head>

<body>

<h1>PixelPi</h1>

</div>

<div>

<strong>Pi Network Status:</strong> <span id="piStatus">Disconnected</span> |

<strong>User:</strong> <span id="walletAddress">Not Connected</span>

</div>

<span id="connectBtnText">Connect to Pi Network</span>

</button>

</div>

<h2 class="section-title">🚀 Upload New Photography NFT</h2>

<h3>Drop your photo here or click to browse</h3>

<p>Support for JPG, PNG, GIF up to 10MB</p>

</div>

<label for="photoTitle">Photo Title *</label>

</div>

<label for="photoDescription">Description *</label>

</div>

<label for="photoPrice">Price (Pi) *</label>

</div>

<label for="photoCategory">Category *</label>

<option value="">Select Category</option>

<option value="landscape">Landscape</option>

<option value="portrait">Portrait</option>

<option value="street">Street Photography</option>

<option value="nature">Nature & Wildlife</option>

<option value="abstract">Abstract</option>

<option value="architecture">Architecture</option>

<option value="macro">Macro</option>

<option value="events">Events</option>

<option value="fashion">Fashion</option>

<option value="other">Other</option>

</select>

</div>

</button>

</div>

</div>

<h2 class="section-title">🖼️ Photography Marketplace</h2>

</div>

<h2 class="section-title">📊 Your Marketplace Stats</h2>

<div class="stat-label">Photos Listed</div>

</div>

<div class="stat-label">Total Sales</div>

</div>

<div class="stat-label">Total Earnings</div>

</div>

<div class="stat-label">Total Views</div>

</div>

</div>

// Configuration - Connected to your real backend

const CONFIG = {

API_BASE_URL: 'https://pixelpi-backend-production.up.railway.app/api',

PI_SANDBOX: false,

MAX_FILE_SIZE: 10 * 1024 * 1024

};

// App State

let appState = {

photos: [],

piConnected: false,

accessToken: null,

user: null,

totalEarnings: 0,

totalSales: 0,

totalViews: 0

};

// Initialize app

async function initializeApp() {

const connectBtn = document.getElementById('connectBtn');

const connectBtnText = document.getElementById('connectBtnText');

try {

connectBtn.disabled = true;

connectBtnText.innerHTML = '<span class="spinner"></span>Connecting...';

// Check if we're in Pi Browser

if (!window.Pi) {

throw new Error('Pi SDK not available - this app must be accessed through Pi Browser');

}

// Initialize Pi SDK

await Pi.init({

version: "2.0",

sandbox: CONFIG.PI_SANDBOX

});

console.log('Pi SDK initialized successfully');

// Authenticate with Pi Network

const authResult = await Pi.authenticate(

['payments', 'username'],

onIncompletePaymentFound

);

appState.piConnected = true;

appState.user = authResult.user;

appState.accessToken = authResult.accessToken;

console.log('Pi user authenticated:', authResult.user);

connectBtnText.textContent = 'Connected ✓';

connectBtn.style.background = '#28a745';

connectBtn.disabled = true;

updateUI();

loadMarketplaceData();

showMessage(`Welcome ${authResult.user.username || 'Pioneer'}! Connected to Pi Network successfully!`, 'success');

} catch (error) {

console.error('Pi Network connection failed:', error);

document.getElementById('piStatus').textContent = 'Connection Failed';

appState.piConnected = false;

connectBtn.disabled = false;

connectBtnText.textContent = 'Retry Connection';

if (!window.Pi) {

showMessage('❌ Pi SDK not found. Please open this app in the Pi Browser.', 'error');

} else if (error.message && error.message.includes('User denied')) {

showMessage('❌ Authentication cancelled. Please allow access to use Pi features.', 'error');

} else {

showMessage(`❌ Connection failed: ${error.message}. Please try again.`, 'error');

}

// Handle incomplete payments

function onIncompletePaymentFound(payment) {

console.log('Incomplete payment found:', payment);

Pi.completePayment(payment.identifier);

}

// Load marketplace data from real backend

async function loadMarketplaceData() {

try {

const response = await fetch(`${CONFIG.API_BASE_URL}/nfts`);

if (response.ok) {

const data = await response.json();

appState.photos = data.nfts || [];

updateUI();

}

} catch (error) {

console.error('Failed to load marketplace data:', error);

showMessage('Failed to load marketplace data. Some features may be limited.', 'error');

}

// Update UI elements

function updateUI() {

document.getElementById('piStatus').textContent = appState.piConnected ? 'Connected' : 'Disconnected';

document.getElementById('walletAddress').textContent = appState.user ?

(appState.user.username || 'Connected User') : 'Not Connected';

document.getElementById('totalPhotos').textContent = appState.photos.length;

document.getElementById('totalSales').textContent = appState.totalSales;

document.getElementById('totalEarnings').textContent = appState.totalEarnings.toFixed(2) + 'π';

document.getElementById('viewCount').textContent = appState.photos.reduce((sum, p) => sum + (p.views || 0), 0);

renderPhotoGallery();

}

// Handle file upload

document.addEventListener('DOMContentLoaded', function() {

const uploadArea = document.getElementById('uploadArea');

const photoInput = document.getElementById('photoInput');

if (uploadArea && photoInput) {

uploadArea.addEventListener('click', () => {

if (!appState.piConnected) {

showMessage('Please connect to Pi Network first.', 'error');

return;

}

photoInput.click();

});

photoInput.addEventListener('change', handleFileSelect);

// Handle drag and drop

uploadArea.addEventListener('dragover', (e) => {

e.preventDefault();

uploadArea.classList.add('drag-over');

});

uploadArea.addEventListener('dragleave', () => {

uploadArea.classList.remove('drag-over');

});

uploadArea.addEventListener('drop', (e) => {

e.preventDefault();

uploadArea.classList.remove('drag-over');

if (!appState.piConnected) {

showMessage('Please connect to Pi Network first.', 'error');

return;

}

const files = e.dataTransfer.files;

if (files.length > 0) {

photoInput.files = files;

handleFileSelect({ target: { files } });

}

});

}

// Add mint button event listener

const mintBtn = document.getElementById('mintNFTBtn');

if (mintBtn) {

mintBtn.addEventListener('click', mintNFT);

}

// Load marketplace data on startup

loadMarketplaceData();

updateUI();

});

function handleFileSelect(event) {

const file = event.target.files[0];

if (file && file.type.startsWith('image/')) {

if (file.size > CONFIG.MAX_FILE_SIZE) {

showMessage('File size must be less than 10MB', 'error');

return;

}

const reader = new FileReader();

reader.onload = function(e) {

document.getElementById('uploadForm').style.display = 'block';

showMessage('Photo loaded! Fill in the details below to mint your NFT.', 'success');

};

reader.readAsDataURL(file);

} else {

showMessage('Please select a valid image file (JPG, PNG, GIF)', 'error');

}

// Real NFT minting function - CONNECTS TO YOUR BACKEND

async function mintNFT() {

const title = document.getElementById('photoTitle').value.trim();

const description = document.getElementById('photoDescription').value.trim();

const price = parseFloat(document.getElementById('photoPrice').value);

const category = document.getElementById('photoCategory').value;

const file = document.getElementById('photoInput').files[0];

// Validation

if (!title || !description || !price || !category || !file) {

showMessage('Please fill in all required fields and select a photo.', 'error');

return;

}

if (price <= 0) {

showMessage('Price must be greater than 0 Pi.', 'error');

return;

}

if (!appState.piConnected) {

showMessage('Please connect to Pi Network first.', 'error');

return;

}

try {

const mintBtn = document.getElementById('mintNFTBtn');

const mintBtnText = document.getElementById('mintBtnText');

mintBtn.disabled = true;

mintBtnText.innerHTML = '<span class="spinner"></span>Minting NFT...';

// Create FormData for real backend

const formData = new FormData();

formData.append('image', file);

formData.append('title', title);

formData.append('description', description);

formData.append('price', price.toString());

formData.append('category', category);

formData.append('creator', appState.user?.uid || 'anonymous');

// Upload to real backend

showMessage('📤 Uploading to IPFS...', 'success');

const response = await fetch(`${CONFIG.API_BASE_URL}/nfts/mint`, {

method: 'POST',

body: formData

});

if (!response.ok) {

const errorData = await response.json();

throw new Error(errorData.error || 'Minting failed');

}

const data = await response.json();

console.log('NFT minted successfully:', data);

// Reset form

document.getElementById('uploadForm').style.display = 'none';

document.getElementById('photoInput').value = '';

document.getElementById('photoTitle').value = '';

document.getElementById('photoDescription').value = '';

document.getElementById('photoPrice').value = '';

document.getElementById('photoCategory').value = '';

// Reload data from backend

await loadMarketplaceData();

showMessage(`🎉 NFT "${title}" minted successfully! Stored on IPFS and listed for ${price}π!`, 'success');

} catch (error) {

showMessage(`❌ Failed to mint NFT: ${error.message}`, 'error');

console.error('Minting error:', error);

} finally {

const mintBtn = document.getElementById('mintNFTBtn');

const mintBtnText = document.getElementById('mintBtnText');

mintBtn.disabled = false;

mintBtnText.textContent = 'Mint as NFT & List for Sale';

}

// Render photo gallery with real data

function renderPhotoGallery() {

const grid = document.getElementById('photoGrid');

if (appState.photos.length === 0) {

grid.innerHTML = `

<p>Be the first to mint a photography NFT!</p>

</div>

return;

}

grid.innerHTML = appState.photos.map(photo => {

const isOwned = photo.creator === appState.user?.uid;

const imageUrl = photo.imageUrl || (photo.ipfsHash ? `https://gateway.pinata.cloud/ipfs/${photo.ipfsHash}` : '#');

return `

${imageUrl !== '#' ?

`<img src="${imageUrl}" alt="${photo.title}" class="photo-image" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">` :

}

<div class="photo-title">${photo.title}</div>

<div class="photo-description">${photo.description}</div>

<div class="photo-price">${photo.price}π</div>

<span class="photo-status status-${photo.status}">${photo.status}</span>

${isOwned ? '<span style="margin-left: 10px; font-size: 0.8em; color: #666;">Your NFT</span>' : ''}

</div>

<strong>Creator:</strong> ${photo.creator || 'Unknown'}<br>

<strong>Views:</strong> ${photo.views || 0} | <strong>Created:</strong> ${new Date(photo.createdAt).toLocaleDateString()}

</div>

Token ID: ${photo.tokenId}

</div>

`}).join('');

}

// Show messages

function showMessage(text, type) {

const messageDiv = document.getElementById('messages');

const messageClass = type === 'success' ? 'success-message' : 'error-message';

messageDiv.innerHTML = `<div class="${messageClass}">${text}</div>`;

setTimeout(() => {

if (messageDiv.innerHTML.includes(text)) {

messageDiv.innerHTML = '';

}

}, 5000);

}

</script>

</body>

</html>

NFT Marketplace Website Deployment - Claude

Claude content