<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Friends Message</title>
<style>
body { font-family: Arial, sans-serif; background: #f0f2f5; margin: 0; padding: 20px; }
.container { max-width: 400px; margin: 50px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 6px; }
button { width: 100%; padding: 12px; background: #1a73e8; color: white; border: none; border-radius: 6px; cursor: pointer; margin: 5px 0; }
button:hover { background: #1557b0; }
.message { margin: 10px 0; padding: 10px; background: #f0f0f0; border-radius: 6px; }
</style>
</head>
<body>
<div class="container" id="app">
<h1>Friends Message</h1>
<div id="auth-form">
<input type="email" id="email" placeholder="Email" required><br>
<input type="password" id="password" placeholder="Password" required><br>
<button onclick="signUp()">Sign Up</button>
<button onclick="signIn()">Sign In</button>
</div>
<div id="chat" style="display:none;">
<h2>Welcome, <span id="user-email"></span></h2>
<button onclick="signOut()">Sign Out</button>
<div id="messages"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script>
const SUPABASE_URL = 'https://yhxazvicsnmcrvriqutq.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InloeGF6dmljc25tY3J2cmlxdXRxIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODQ1MTY5OTUsImV4cCI6MjEwMDA5Mjk5NX0.YkgVOD3fX8syTngR3kNe93AgZLrV3imw7FQgLZtflBQ';
const supabase = Supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
async function signUp() {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const { error } = await supabase.auth.signUp({ email, password });
if (error) alert(error.message);
else alert('Check your email for confirmation link!');
}
async function signIn() {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const { data, error } = await supabase.auth.signInWithPassword({ email, password });
if (error) alert(error.message);
else showChat(data.user);
}
function showChat(user) {
document.getElementById('auth-form').style.display = 'none';
document.getElementById('chat').style.display = 'block';
document.getElementById('user-email').textContent = user.email;
}
async function signOut() {
await supabase.auth.signOut();
location.reload();
}
// Check if already logged in
supabase.auth.getSession().then(({ data: { session } }) => {
if (session) showChat(session.user);
});
</script>
</body>
</html>