Spaces:

Gaurav-Mhatre
/

TrueFrame

Sleeping

App Files Files Community

TrueFrame / templates /register.html

Gaurav-Mhatre

Initial commit: TrueFrame

49c4c8c 5 months ago

Raw

History Blame Contribute Delete

9.84 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Register - TrueFrame</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<style>
	/* --- CSS Reset and Variables --- */
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	}

	:root {
	--bg-dark: #0a0e17;
	--panel-dark: #131c2a;
	--accent-primary: #00f2fe;
	--accent-secondary: #4facfe;
	--error-color: #ff4b4b;
	--text-light: #e0e0e0;
	--text-muted: #8d97a5;
	}

	body {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--bg-dark);
	background-color: var(--bg-dark);
	background-image:
	radial-gradient(circle at 20% 20%, rgba(19, 54, 75, 0.945) 0%, transparent 50%),
	radial-gradient(circle at 80% 80%, rgba(13, 42, 70, 0.801) 0%, transparent 50%);
	overflow: hidden;
	}

	/* --- Main Container --- */
	.login-container {
	display: flex;
	width: 900px;
	max-width: 95%;
	height: 600px;
	background-color: var(--panel-dark);
	border-radius: 20px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	border: 1px solid rgba(0, 242, 254, 0.1);
	}

	/* --- Left Side: Visuals --- */
	.visual-side {
	flex: 1;
	background: linear-gradient(135deg, rgba(0, 242, 254, 0.1), rgba(79, 172, 254, 0.2));
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	padding: 40px;
	color: var(--text-light);
	}

	.visual-content h2 {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 10px;
	text-align: center;
	}

	.visual-content h2 span {
	color: var(--accent-primary);
	}

	.visual-content p {
	color: var(--text-muted);
	font-size: 0.9rem;
	text-align: center;
	}

	/* --- INTEGRATED SCANNER CSS --- */
	.scanner-graphic {
	margin-top: 40px;
	position: relative;
	width: 150px;
	height: 150px;
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 20px rgba(0, 242, 254, 0.2);
	border: 2px solid rgba(0, 242, 254, 0.2);
	}

	#character-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.4;
	transition: opacity 0.3s ease;
	mix-blend-mode: screen;
	}

	.scan-beam {
	position: absolute;
	top: 0;
	left: -10%;
	width: 120%;
	height: 3px;
	background: var(--accent-primary);
	box-shadow: 0 0 15px var(--accent-primary), 0 0 30px var(--accent-secondary);
	animation: scanning 2.5s linear infinite;
	}

	@keyframes scanning {
	0% { top: -5%; opacity: 0; }
	5% { opacity: 1; }
	95% { opacity: 1; }
	100% { top: 105%; opacity: 0; }
	}

	/* --- Right Side: Form --- */
	.form-side {
	flex: 1;
	padding: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	}

	.form-header {
	margin-bottom: 25px;
	}

	.form-header h1 {
	color: var(--text-light);
	font-size: 1.8rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
	}

	/* Flask Flashed Messages Styling */
	.error-message {
	background-color: rgba(255, 75, 75, 0.1);
	border-left: 4px solid var(--error-color);
	color: var(--error-color);
	padding: 10px 15px;
	border-radius: 4px;
	font-size: 0.9rem;
	margin-bottom: 20px;
	font-weight: 500;
	}

	/* Input Groups */
	.input-group {
	margin-bottom: 20px;
	}

	.input-group input {
	width: 100%;
	padding: 12px 15px;
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	color: var(--text-light);
	font-size: 1rem;
	transition: all 0.3s ease;
	box-sizing: border-box;
	}

	.input-group input::placeholder {
	color: rgba(255, 255, 255, 0.4);
	}

	.input-group input:focus {
	outline: none;
	border-color: var(--accent-primary);
	box-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
	background-color: rgba(255, 255, 255, 0.08);
	}

	/* Buttons */
	.login-btn {
	width: 100%;
	padding: 14px;
	border: none;
	border-radius: 8px;
	background: linear-gradient(to right, #00f2fe, #4facfe);
	color: var(--bg-dark);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
	margin-top: 10px;
	margin-bottom: 15px;
	}

	.login-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0, 242, 254, 0.4);
	}

	/* Bottom Links */
	.signup-link {
	text-align: center;
	margin-top: 25px;
	font-size: 0.9rem;
	color: var(--text-muted);
	}

	.signup-link a {
	color: var(--accent-primary);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s;
	}

	.signup-link a:hover {
	color: var(--accent-secondary);
	}

	/* --- Responsive Design --- */
	@media (max-width: 768px) {
	.login-container {
	flex-direction: column;
	height: auto;
	}
	.visual-side {
	padding: 30px 20px;
	min-height: 200px;
	}
	.scanner-graphic {
	display: none;
	}
	.form-side {
	padding: 30px 20px;
	}
	}
	</style>
	</head>
	<body>

	<div class="login-container">
	<div class="visual-side">
	<div class="visual-content">
	<h2>True<span>Frame</span></h2>
	<p>Authenticating media. Protecting truth.</p>
	</div>

	<div class="scanner-graphic">
	<img id="character-img" src="" alt="Analyzing Media...">
	<div class="scan-beam"></div>
	</div>
	</div>

	<div class="form-side">
	<div class="form-header">
	<h1>Create Account</h1>
	</div>

	{% with messages = get_flashed_messages() %}
	{% if messages %}
	<div class="error-message">{{ messages[0] }}</div>
	{% endif %}
	{% endwith %}

	<form method="POST" action="/register">

	<div class="input-group">
	<input type="text" name="name" placeholder="Full Name" required>
	</div>

	<div class="input-group">
	<input type="email" name="email" placeholder="Email Address" required>
	</div>

	<div class="input-group">
	<input type="password" name="password" placeholder="Create Password" required>
	</div>

	<button type="submit" class="login-btn">Sign Up</button>
	</form>

	<div class="signup-link">
	Already have an account? <a href="/login">Login here</a>
	</div>
	</div>
	</div>

	<script>
	// 1. Array of Flask static image paths
	const maleImages = [
	"{{ url_for('static', filename='avatars/Male1.png') }}",
	"{{ url_for('static', filename='avatars/Male2.png') }}"
	];

	const femaleImages = [
	"{{ url_for('static', filename='avatars/Female1.png') }}",
	"{{ url_for('static', filename='avatars/Female2.png') }}"
	];

	let showMaleNext = true;
	const imgElement = document.getElementById('character-img');

	// 2. Function to pick a random image and alternate genders
	function getRandomImage() {
	let selectedArray = showMaleNext ? maleImages : femaleImages;
	showMaleNext = !showMaleNext;

	const randomIndex = Math.floor(Math.random() * selectedArray.length);
	return selectedArray[randomIndex];
	}

	// Initialize the first image
	imgElement.src = getRandomImage();

	// Loop to match the CSS scanner
	setInterval(() => {
	// Fade out
	imgElement.style.opacity = 0;

	setTimeout(() => {
	// Swap image
	imgElement.src = getRandomImage();

	// Fade back in to 0.4
	imgElement.style.opacity = 0.4;
	}, 300);

	}, 2500);
	</script>

	</body>
	</html>