<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Krabps - Gaming Results Portal</title>
<link rel="stylesheet" href="theme.css">
<script src="api-client.js"></script>
</head>
<body>
<div class="header">
<div class="container">
<div class="brand">
<div class="brand-logo">KG</div>
<div>
<h1>Krabps Groups</h1>
<p class="u-muted">Tirwala.com</p>
</div>
</div>
<nav class="nav">
<a href="index.html" class="active">Home</a>
<a href="play.html">GameZone</a>
<a href="Account .html">Account</a>
<a href="contact.html">Contact</a>
</nav>
</div>
</div>
<div class="container">
<!-- Game Results Section -->
<section class="section">
<h2 class="text-center mb-4">Today's Results</h2>
<div class="d-flex flex-wrap gap-3 justify-center">
<!-- Shillong Card -->
<div class="card">
<div class="card-header">
<h3>Shillong Teer</h3>
</div>
<div class="card-body">
<table class="table">
<tr>
<td>1st Round</td>
<td><strong>14</strong></td>
</tr>
<tr>
<td>2nd Round</td>
<td><strong>17</strong></td>
</tr>
</table>
</div>
</div>
<!-- Jowai Card -->
<div class="card">
<div class="card-header">
<h3>Jowai-Ladrymbai</h3>
</div>
<div class="card-body">
<table class="table">
<tr>
<td>1st Round</td>
<td><strong>48</strong></td>
</tr>
<tr>
<td>Ladrymbai </td>
<td><strong>80</strong></td>
</tr>
</table>
</div>
</div>
<!-- Khanapara Card -->
<div class="card">
<div class="card-header">
<h3>Khanapara</h3>
</div>
<div class="card-body">
<table class="table">
<tr>
<td>1st Round</td>
<td><strong>75</strong></td>
</tr>
<tr>
<td>2nd Round</td>
<td><strong>40</strong></td>
</tr>
</table>
</div>
</div>
</div>
</section>
<!-- Information Table Section -->
<section class="section">
<h2 class="text-center mb-4">Game Information</h2>
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>Place</th>
<th>Days</th>
<th>Arrows</th>
<th>Men Arrows</th>
<th>Target</th>
<th>Distance</th>
</tr>
</thead>
<tbody>
<tr>
<td>Shillong 1st</td>
<td>Coming Soon</td>
<td> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Shillong 2nd</td>
<td>Coming Soon</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Jowai 1st</td>
<td>Comming Soon</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Jowai 2nd</td>
<td>Coming Soon</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Ladrymbai</td>
<td>Coming Soon</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Login Section -->
<section class="section">
<h2 class="text-center mb-4">User Login</h2>
<div class="form-container" id="loginContainer">
<form id="loginForm">
<div class="form-group">
<label for="username">Username or Email</label>
<input type="text" id="username" placeholder="Enter username or email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password" required>
</div>
<div class="form-group">
<label style="display: flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" id="rememberMe">
Remember me
</label>
</div>
<button type="submit" class="btn">Login</button>
<div id="loginMessage" class="message" style="display: none;"></div>
<div class="text-center mt-3">
<a href="#" id="forgotLink" style="color: #007bff;">Forgot Password?</a>
</div>
<div class="text-center mt-3">
<a href="Account .html" style="color: #007bff;">Don't have an account? Create one</a>
</div>
</form>
</div>
</section>
</div>
<script>
// Global logout function
function logout() {
KrabpsAPI.logout().then(() => {
window.location.reload();
});
}
// Authentication System - Login with API
document.addEventListener('DOMContentLoaded', function() {
const loginForm = document.getElementById('loginForm');
const loginMessage = document.getElementById('loginMessage');
// Check if already logged in
showGreetingIfLoggedIn();
// Handle login form submission
loginForm.addEventListener('submit', async function(e) {
e.preventDefault();
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value;
if (!username || !password) {
showMessage('Please enter both username/email and password', 'error');
return;
}
// Show loading state
const submitBtn = loginForm.querySelector('button[type="submit"]');
const originalText = submitBtn.textContent;
submitBtn.textContent = 'Logging in...';
submitBtn.disabled = true;
try {
const result = await KrabpsAPI.login(username, password);
if (result.success) {
showMessage(`Welcome back, ${result.data.user.full_name}!`, 'success');
setTimeout(() => {
window.location.href = 'play.html';
}, 1000);
} else {
showMessage(result.data.message || 'Login failed', 'error');
}
} catch (error) {
showMessage('Network error. Please check if the server is running.', 'error');
} finally {
submitBtn.textContent = originalText;
submitBtn.disabled = false;
}
});
// Handle forgot password
// Account creation success handler (example, adapt as needed)
const accountForm = document.getElementById('accountForm');
if (accountForm) {
accountForm.addEventListener('submit', async function(e) {
e.preventDefault();
// ...collect account creation fields...
// Example:
// const username = ...;
// const password = ...;
// const email = ...;
// const result = await KrabpsAPI.createAccount(username, password, email);
// if (result.success) {
// window.location.href = 'play.html';
// }
});
}
// ...existing forgot password code...
});
// Show greeting if logged in
function showGreetingIfLoggedIn() {
if (KrabpsAPI.isLoggedIn()) {
const user = KrabpsAPI.getStoredUser();
const loginContainer = document.getElementById('loginContainer');
if (loginContainer && user) {
loginContainer.innerHTML = `
<div style="text-align: center; padding: 2rem;">
<h3 style="color: #000000; margin-bottom: 1rem;">Welcome back, ${user.full_name}!</h3>
<p style="color: #000000; margin-bottom: 1.5rem;">You are successfully logged in.</p>
<button onclick="logout()" class="btn btn-secondary">Logout</button>
</div>
`;
}
}
}
// Show message helper
function showMessage(message, type = 'info') {
const messageDiv = document.getElementById('loginMessage');
if (messageDiv) {
messageDiv.textContent = message;
messageDiv.className = `message ${type}`;
messageDiv.style.display = 'block';
// Auto-hide after 5 seconds
setTimeout(() => {
messageDiv.style.display = 'none';
}, 5000);
}
}
</script>
// Show greeting if logged in
// ...existing code...
// ...existing code...
</script>
<footer>
© 2023 Krabps. All rights reserved.
</footer>
</body>
</html>
Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.