<div class=”custom-popup-container”>
<!– Top Illustration Area –>
<div class=”popup-illustration”>
<img src=”https://img.icons8.com/illustrations/80/parachute.png” alt=”Parachute illustration”>
</div>
<h2 class=”popup-title”>Sign Up</h2>
<!– Google Login Placeholder Button –>
<button class=”google-sign-in-btn”>
<img src=”https://img.icons8.com/color/16/000000/google-logo.png” alt=”Google”>
Sign in with Google
</button>
<div class=”popup-divider”>Or, register with email</div>
<!– Registration Form Elements –>
<form id=”ajax-registration-form” method=”post”>
<!– Email Input Row –>
<div class=”input-row-group”>
<span class=”input-icon-label”>✉</span>
<input type=”email” name=”user_email” placeholder=”Email Id” required>
</div>
<!– Mobile Number Input Row –>
<div class=”input-row-group”>
<span class=”input-icon-label”>📱</span>
<input type=”tel” name=”user_mobile” placeholder=”Mobile Number” required>
</div>
<!– Password Input Row –>
<div class=”input-row-group”>
<span class=”input-icon-label”>🔒</span>
<input type=”password” name=”user_password” placeholder=”Password” required>
</div>
<!– Matching Academy Action Button –>
<button type=”submit” class=”popup-submit-btn”>REGISTER</button>
</form>
<div class=”popup-footer-text”>
Already a user? <a href=”#” class=”login-toggle-link”>Login</a>
</div>
</div>
<style>
/* Container Window Styling */
.custom-popup-container {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
text-align: center;
padding: 10px 15px;
background: #ffffff;
}
.popup-illustration img {
width: 90px;
margin-bottom: 5px;
}
.popup-title {
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
text-align: left;
margin-bottom: 15px;
}
/* Google Button Interface styling */
.google-sign-in-btn {
width: 100%;
background: #ffffff;
border: 1px solid #dcdcdc;
padding: 10px;
border-radius: 4px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
font-weight: 500;
}
.popup-divider {
font-size: 12px;
color: #666;
margin: 15px 0;
}
/* Minimalist Bottom-Border Form Rows */
.input-row-group {
display: flex;
align-items: center;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
padding-bottom: 5px;
}
.input-icon-label {
font-size: 16px;
color: #444;
margin-right: 10px;
width: 20px;
}
.input-row-group input {
border: none !important;
outline: none !important;
width: 100%;
font-size: 14px;
padding: 5px 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* Red Academy Theme Action Button */
.popup-submit-btn {
width: 100%;
background-color: #0b1f3b; /* Fallback Navy or replace with matching #cc0000 Red */
background: #cc0000 !important;
color: #ffffff !important;
border: none;
padding: 12px;
border-radius: 6px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
letter-spacing: 0.5px;
margin-top: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.popup-footer-text {
font-size: 13px;
color: #333;
margin-top: 20px;
}
.popup-footer-text a {
color: #00a2ff;
text-decoration: none;
font-weight: 500;
}
</style>