Html to ওয়েব ভিউ

<!DOCTYPE html>

<head>

<title>ProPlay User</title>

<style>

body { -webkit-tap-highlight-color: transparent; }

.gradient-primary { background: linear-gradient(to right, #3b82f6, #2dd4bf); }

.gradient-success { background: linear-gradient(to right, #22c55e, #14b8a6); }

.gradient-danger { background: linear-gradient(to right, #ef4444, #f97316); }

.whatsapp-btn { background-color: #25D366; color: white; }

</style>

</head>

<i class="fa-solid fa-trophy mr-2 text-blue-500"></i>ProPlay

</h1>

</div>

</header>

</div>

<h2 class="text-2xl font-bold text-gray-800 mb-1">Welcome Gamer</h2>

</form>

</div>

<h2 class="text-xl font-bold z-10">Daily Tournaments</h2>

<p class="text-blue-100 text-sm z-10">Win big prizes every day!</p>

</div>

<h3 class="font-bold text-lg text-gray-700 mb-3 border-l-4 border-blue-500 pl-2">Upcoming Matches</h3>

</div>

<h3 class="font-bold text-lg text-gray-700 mb-3 border-l-4 border-teal-500 pl-2">My Participation</h3>

</div>

<p class="text-gray-400 text-xs uppercase tracking-wider">Total Balance</p>

<i class="fa-solid fa-circle-plus mr-1"></i> Add Money

</button>

<i class="fa-solid fa-building-columns mr-1"></i> Withdraw

</button>

</div>

<h3 class="font-bold text-gray-700 border-l-4 border-blue-500 pl-2">All Transactions</h3>

<i class="fa-solid fa-trash"></i> Clear

</button>

</div>

</div>

</div>

<i class="fa-brands fa-whatsapp text-xl"></i> Customer Support

</a>

</div>

<button onclick="firebase.auth().signOut()" class="mt-4 w-full mx-4 gradient-danger text-white p-3 rounded-lg shadow-md font-bold" style="width: calc(100% - 2rem);">Logout</button>

</div>

</main>

<h3 class="font-bold text-lg">Add Money</h3>

</div>

</div>

<p class="text-[10px] text-gray-400">UPI: Bankind45@ybl</p>

</div>

<button onclick="submitDeposit()" class="w-full gradient-success text-white py-3 rounded-lg font-bold shadow">Verify & Add</button>

</div>

<h3 class="font-bold text-lg">Withdraw</h3>

</div>

<p class="text-xs text-red-500 mb-2 font-bold">Note: ₹5 Platform Fee will be extra.</p>

<button onclick="submitWithdraw()" class="w-full gradient-danger text-white py-3 rounded-lg font-bold shadow">Withdraw</button>

<p class="text-xs text-center text-gray-400 mt-3">Processed in 10 mins</p>

</div>

</nav>

</div>

// !!! REPLACE WITH YOUR FIREBASE KEYS !!!

const firebaseConfig = {

apiKey: "AIzaSyD6gTGwjCTl2Uva4NMdeqDQ_dyOySNc_Lw",

authDomain: "trnpro-24232.firebaseapp.com",

databaseURL: "https://trnpro-24232-default-rtdb.firebaseio.com",

projectId: "trnpro-24232",

storageBucket: "trnpro-24232.firebasestorage.app",

messagingSenderId: "195332525848",

appId: "1:195332525848:web:3e7af28760d036ac74d86d",

measurementId: "G-MN3NWEBYQF"

};

firebase.initializeApp(firebaseConfig);

const auth = firebase.auth();

const db = firebase.database();

let currentUser = null;

let currentBalance = 0;

let selectedDepositAmount = 0;

auth.onAuthStateChanged(user => {

if (user) {

currentUser = user;

document.getElementById('view-auth').classList.add('hidden');

document.getElementById('app-content').classList.remove('hidden');

document.getElementById('bottom-nav').classList.remove('hidden');

document.getElementById('header-wallet').classList.remove('hidden');

document.getElementById('profile-email').innerText = user.email;

initUserData(user);

loadTournaments();

} else {

document.getElementById('view-auth').classList.remove('hidden');

}

});

document.getElementById('auth-form').addEventListener('submit', async (e) => {

e.preventDefault();

const email = document.getElementById('auth-email').value;

const pass = document.getElementById('auth-pass').value;

try {

await auth.signInWithEmailAndPassword(email, pass);

} catch (e) {

try {

const u = await auth.createUserWithEmailAndPassword(email, pass);

await db.ref('users/' + u.user.uid).set({ email: email, balance: 0 });

} catch (e2) { alert(e2.message); }

}

});

function initUserData(user) {

db.ref('users/' + user.uid + '/balance').on('value', snap => {

currentBalance = snap.val() || 0;

document.getElementById('wallet-balance').innerText = '₹' + currentBalance;

document.getElementById('wallet-page-balance').innerText = '₹' + currentBalance;

});

db.ref('transactions/' + user.uid).on('value', snap => {

const list = document.getElementById('transaction-list');

list.innerHTML = '';

if(!snap.exists()) { list.innerHTML = "<div class='text-center text-gray-400 text-sm py-8'><i class='fa-solid fa-file-invoice text-2xl mb-2'></i><br>No transactions found</div>"; return; }

let transactions = [];

snap.forEach(child => transactions.push(child.val()));

transactions.sort((a, b) => b.date - a.date);

transactions.forEach(t => {

const dateObj = new Date(t.date);

const dateStr = dateObj.toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' });

const timeStr = dateObj.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit' });

let isCredit = (t.type === 'Deposit' || t.type === 'Winning' || t.type === 'Refund');

let iconClass = isCredit ? (t.type === 'Winning' ? 'fa-trophy' : 'fa-arrow-down') : (t.type === 'Withdraw' || t.type === 'Fee' ? 'fa-building-columns' : 'fa-gamepad');

let iconBg = isCredit ? (t.type === 'Winning' ? 'bg-yellow-100 text-yellow-600' : 'bg-green-100 text-green-600') : (t.type === 'Withdraw' || t.type === 'Fee' ? 'bg-red-100 text-red-600' : 'bg-blue-100 text-blue-600');

let textCol = isCredit ? 'text-green-600' : 'text-red-600';

let sign = isCredit ? '+' : '-';

list.innerHTML += `

<div><p class="font-bold text-sm text-gray-800 leading-tight">${t.desc}</p><div class="text-[10px] text-gray-400 mt-1 flex items-center gap-2"><span><i class="fa-regular fa-calendar"></i> ${dateStr}</span><span><i class="fa-regular fa-clock"></i> ${timeStr}</span></div></div>

</div>

<span class="font-bold ${textCol} text-base whitespace-nowrap">${sign}₹${t.amount}</span>

</div>`;

});

}

window.clearHistory = async () => {

if(!confirm("Are you sure you want to DELETE all transaction history?\nThis cannot be undone.")) return;

try { await db.ref('transactions/' + currentUser.uid).remove(); } catch(e) { alert("Error: " + e.message); }

};

// --- NEW: SCREENSHOT UPLOAD LOGIC ---

function loadTournaments() {

// Upcoming Matches (Unchanged)

db.ref('tournaments').orderByChild('status').equalTo('Upcoming').on('value', snap => {

const list = document.getElementById('tournament-list');

list.innerHTML = '';

if(!snap.exists()) list.innerHTML = "<p class='text-center text-gray-400 mt-4'>No Upcoming Matches</p>";

snap.forEach(c => {

let t = c.val();

let joined = t.participants && t.participants[currentUser.uid];

let btn = joined ? `<button disabled class="w-full bg-gray-200 text-gray-500 py-2 rounded text-sm font-bold">Joined</button>` : `<button onclick="join('${c.key}',${t.fee},'${t.title}')" class="w-full gradient-primary text-white py-2 rounded text-sm font-bold shadow hover:opacity-90">Join ₹${t.fee}</button>`;

list.innerHTML += `<div class="bg-white rounded-xl overflow-hidden border shadow-md hover:shadow-lg transition"><img src="${t.image || 'https://via.placeholder.com/400x200'}" class="w-full h-36 object-cover"><div class="p-4"><h4 class="font-bold text-gray-800">${t.title}</h4><div class="flex justify-between text-xs text-gray-500 mb-3"><span>${t.game}</span> <span>Prize: <b class="text-green-600">₹${t.prize}</b></span></div>${btn}</div></div>`;

});

// My Matches (Updated with Screenshot Button)

db.ref('tournaments').on('value', snap => {

const myList = document.getElementById('my-matches-list');

myList.innerHTML = '';

snap.forEach(c => {

let t = c.val();

let tid = c.key;

if(t.participants && t.participants[currentUser.uid]) {

let statusBadge = '', actionArea = '';

if(t.status === 'Upcoming') {

statusBadge = '<span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded font-bold">Upcoming</span>';

actionArea = '<div class="mt-2 text-center text-xs text-gray-400">Wait for Live</div>';

} else if(t.status === 'Live') {

statusBadge = '<span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded font-bold animate-pulse">LIVE</span>';

// Added Upload Screenshot Button below Play Game

actionArea = `

<div class="flex justify-between text-sm mb-1"><span class="text-gray-600">ID: <b class="select-all">${t.roomID || 'N/A'}</b></span><span class="text-gray-600">Pass: <b class="select-all">${t.roomPass || 'N/A'}</b></span></div>

<i class="fa-solid fa-upload"></i> Upload Screenshot

</label>

</div>

</div>`;

} else {

statusBadge = '<span class="bg-gray-200 text-gray-600 text-xs px-2 py-1 rounded font-bold">Completed</span>';

actionArea = '<div class="mt-2 text-center text-xs text-gray-400">Match Ended</div>';

}

myList.innerHTML += `<div class="bg-white rounded-xl p-4 border border-gray-200 shadow-sm"><div class="flex justify-between mb-2"><h4 class="font-bold text-gray-800">${t.title}</h4>${statusBadge}</div>${actionArea}</div>`;

}

});

}

// --- SCREENSHOT UPLOAD FUNCTION ---

function uploadScreenshot(input, matchId) {

const file = input.files[0];

if(!file) return;

// Simple Size Check (Max 2MB)

if(file.size > 2 * 1024 * 1024) return alert("Image too large. Max 2MB.");

const reader = new FileReader();

reader.onload = function(e) {

const base64Img = e.target.result;

// Save to: screenshots/{matchId}/{userId}

db.ref(`screenshots/${matchId}/${currentUser.uid}`).set(base64Img)

.then(() => alert("Screenshot Uploaded Successfully!"))

.catch(err => alert("Upload Failed: " + err.message));

};

reader.readAsDataURL(file);

}

window.join = async (id, fee, title) => {

if(currentBalance < fee) return alert("Low Balance");

if(!confirm("Join for ₹"+fee+"?")) return;

await db.ref('users/'+currentUser.uid).update({balance: currentBalance-fee});

await db.ref('transactions/'+currentUser.uid).push({type:'Debit', amount:fee, desc:'Join: '+title, date:Date.now()});

await db.ref('tournaments/'+id+'/participants/'+currentUser.uid).set({email:currentUser.email});

alert("Joined!"); switchTab('matches');

};

window.openModal = (t) => { document.getElementById('modal-'+t).classList.remove('hidden'); if(t=='add') setAddAmount(0); };

window.closeModals = () => document.querySelectorAll('[id^="modal-"]').forEach(e => e.classList.add('hidden'));

window.submitDeposit = async () => { let u=document.getElementById('add-utr').value; if(selectedDepositAmount<=0||!u)return; await db.ref('payment_requests').push({uid:currentUser.uid,email:currentUser.email,type:'Deposit',amount:selectedDepositAmount,utr:u,status:'Pending'}); alert("Submitted"); closeModals(); };

window.switchTab = (t) => {

document.querySelectorAll('.view-section').forEach(e=>e.classList.add('hidden'));

document.getElementById('view-'+t).classList.remove('hidden');

document.querySelectorAll('.nav-btn').forEach(b=>b.classList.replace('text-blue-500','text-gray-400'));

document.getElementById('nav-'+t).classList.replace('text-gray-400','text-blue-500');

};

</script>

</body>

</html>

Search This Blog

A

Html to ওয়েব ভিউ

ProPlay App Preview

Comments

Post a Comment

Popular posts from this blog

Payment getway

MovieBox

Bengali Calendar 1432