<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Learn With Arshyan – Signup & Login</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
<style>
.form-section {
min-height: 100%;
transition: all 0.3s ease-in-out;
}
</style>
</head>
<body class="bg-gradient-to-tr from-indigo-100 via-pink-100 to-yellow-100 min-h-screen flex items-center justify-center p-6">
<div class="bg-white shadow-2xl rounded-3xl max-w-4xl w-full h-[580px] grid grid-cols-1 md:grid-cols-2 overflow-hidden">
<!-- Left Panel -->
<div class="bg-gradient-to-br from-indigo-500 to-purple-600 text-white flex flex-col justify-center items-center p-10 space-y-4">
<h2 class="text-3xl font-bold text-center">Welcome to Learn With Arshyan</h2>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2094722033678002"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p class="text-center">Build your coding future with free HTML, CSS, JavaScript & Python tutorials</p>
<button id="toggleBtn" class="bg-white text-indigo-600 px-6 py-2 rounded-full font-semibold hover:bg-gray-200 transition">
Switch to Signup
</button>
</div>
<!-- Right Panel -->
<div class="relative p-8 bg-white h-full">
<!-- Signup Form -->
<form id="signupForm" class="form-section absolute inset-0 space-y-6 px-6 py-8 overflow-y-auto hidden">
<h3 class="text-2xl font-bold text-indigo-600 text-center">Create Account</h3>
<div class="flex space-x-4 justify-center">
<button type="button" class="flex items-center space-x-2 bg-white shadow px-4 py-2 border rounded-xl">
<i class="fab fa-google text-red-500"></i>
<span>Google</span>
</button>
<button type="button" class="flex items-center space-x-2 bg-white shadow px-4 py-2 border rounded-xl">
<i class="fab fa-facebook text-blue-600"></i>
<span>Facebook</span>
</button>
</div>
<div class="flex items-center my-4">
<div class="flex-grow h-px bg-gray-300"></div>
<span class="px-3 text-gray-500 text-sm">or</span>
<div class="flex-grow h-px bg-gray-300"></div>
</div>
<input type="text" placeholder="Full Name" class="w-full border rounded-xl px-4 py-3" required>
<input type="email" placeholder="Email Address" class="w-full border rounded-xl px-4 py-3" required>
<input type="password" placeholder="Password" class="w-full border rounded-xl px-4 py-3" required>
<button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-xl font-semibold hover:bg-indigo-700 transition">
Sign Up
</button>
</form>
<!-- Login Form -->
<form id="loginForm" class="form-section absolute inset-0 space-y-6 px-6 py-8 overflow-y-auto">
<h3 class="text-2xl font-bold text-indigo-600 text-center">Login to Your Account</h3>
<div class="flex space-x-4 justify-center">
<button type="button" class="flex items-center space-x-2 bg-white shadow px-4 py-2 border rounded-xl">
<i class="fab fa-google text-red-500"></i>
<span>Google</span>
</button>
<button type="button" class="flex items-center space-x-2 bg-white shadow px-4 py-2 border rounded-xl">
<i class="fab fa-facebook text-blue-600"></i>
<span>Facebook</span>
</button>
</div>
<div class="flex items-center my-4">
<div class="flex-grow h-px bg-gray-300"></div>
<span class="px-3 text-gray-500 text-sm">or</span>
<div class="flex-grow h-px bg-gray-300"></div>
</div>
<input type="email" placeholder="Email Address" class="w-full border rounded-xl px-4 py-3" required>
<input type="password" placeholder="Password" class="w-full border rounded-xl px-4 py-3" required>
<button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-xl font-semibold hover:bg-indigo-700 transition">
Login
</button>
</form>
</div>
</div>
<script>
const toggleBtn = document.getElementById("toggleBtn");
const signupForm = document.getElementById("signupForm");
const loginForm = document.getElementById("loginForm");
toggleBtn.addEventListener("click", () => {
signupForm.classList.toggle("hidden");
loginForm.classList.toggle("hidden");
toggleBtn.textContent = signupForm.classList.contains("hidden") ? "Switch to Signup" : "Switch to Login";
});
</script>
</body>
</html>
]]>
