Spaces:

pranit144
/

page3

Sleeping

App Files Files Community

page3 / templates /welcome.html

pranit144

Upload 15 files

09d8270 verified 7 months ago

raw

history blame contribute delete

8.88 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>🌧️ Rainwater Quest Adventure</title>
	<style>
	/* Import Google Fonts */
	@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Roboto:wght@300;400;500;700&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');


	/* Main styling */
	body {
	background: linear-gradient(135deg, #e0f2f7 0%, #b3e0f2 100%); /* Light blue gradient */
	font-family: 'Roboto', sans-serif;
	margin: 0;
	padding: 0;
	color: #333; /* Default text color */
	}

	.container {
	max-width: 1200px;
	margin: 20px auto;
	padding: 20px;
	}

	/* Header styling */
	.game-header {
	background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1);
	background-size: 300% 300%;
	animation: gradientShift 3s ease infinite;
	color: white;
	text-align: center;
	padding: 20px;
	border-radius: 15px;
	margin-bottom: 20px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.3);
	font-family: 'Orbitron', monospace;
	font-weight: 900;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	}

	@keyframes gradientShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
	}

	/* Game card styling */
	.game-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	padding: 25px;
	margin: 15px 0;
	box-shadow: 0 15px 35px rgba(0,0,0,0.1);
	backdrop-filter: blur(10px);
	border: 2px solid rgba(255,255,255,0.18);
	transition: all 0.3s ease;
	}

	.game-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.15);
	}

	/* Progress bar styling */
	.progress-container {
	background: rgba(255,255,255,0.2);
	border-radius: 25px;
	padding: 5px;
	margin: 20px 0;
	}

	.progress-bar {
	background: linear-gradient(90deg, #00C9FF, #92FE9D);
	height: 30px;
	border-radius: 20px;
	transition: width 0.5s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	min-width: 0; /* Allow it to be 0% width */
	}

	/* XP and Level styling */
	.stats-container {
	display: flex;
	justify-content: space-around;
	margin: 20px 0;
	flex-wrap: wrap; /* Allow wrapping on smaller screens */
	gap: 10px; /* Space between items */
	}

	.stat-item {
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;
	padding: 15px 20px;
	border-radius: 15px;
	text-align: center;
	min-width: 120px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
	font-family: 'Orbitron', monospace;
	flex-grow: 1; /* Allow items to grow */
	}

	.stat-value {
	font-size: 24px;
	font-weight: 900;
	margin-bottom: 5px;
	}

	.stat-label {
	font-size: 12px;
	opacity: 0.8;
	}

	/* General button styling */
	.button-group {
	display: flex;
	gap: 10px; /* Space between buttons */
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 20px;
	}

	.button-group button, .button-full-width {
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;
	border: none;
	border-radius: 15px;
	padding: 15px 25px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
	flex: 1; /* Make buttons grow to fill space */
	min-width: 150px; /* Minimum width for buttons */
	text-decoration: none; /* For anchor tags acting as buttons */
	display: inline-block;
	}

	.button-full-width {
	width: 100%;
	}

	.button-group button:hover, .button-full-width:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.3);
	background: linear-gradient(135deg, #7b8cec, #8a5bb8);
	}


	/* Achievement badge */
	.achievement {
	background: linear-gradient(45deg, #FFD700, #FFA500);
	color: #333;
	padding: 10px 20px;
	border-radius: 25px;
	display: inline-block;
	margin: 10px 5px;
	font-weight: bold;
	box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
	}

	/* Welcome screen styling */
	.welcome-container {
	text-align: center;
	padding: 50px;
	background: rgba(255,255,255,0.1);
	border-radius: 30px;
	backdrop-filter: blur(10px);
	margin: 20px auto; /* Centered */
	max-width: 900px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.1);
	}

	.welcome-title {
	font-size: 3.5em;
	font-family: 'Orbitron', monospace;
	font-weight: 900;
	background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 20px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	}

	.welcome-text {
	font-size: 1.3em;
	color: #34495e; /* Darker text for readability */
	margin: 30px 0;
	line-height: 1.6;
	}

	.welcome-text strong {
	color: #2c3e50;
	}

	.welcome-image {
	max-width: 100%;
	max-height: 100px; /* ✅ fixed syntax */
	border-radius: 12px; /* slightly softer than 15px */
	margin-top:60px;
	object-fit: contain; /* keeps aspect ratio without distortion */
	display: block;
	margin-left: auto;
	margin-right: auto; /* ✅ centers the image */
	box-shadow: 0 6px 15px rgba(0,0,0,0.15); /* softer shadow for a clean look */
	}


	/* Certificate styling */
	.certificate {
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;
	padding: 40px;
	border-radius: 20px;
	text-align: center;
	margin: 20px auto;
	max-width: 600px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.3);
	border: 3px solid #FFD700;
	}

	/* Video container styling */
	.video-container {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 15px 35px rgba(0,0,0,0.2);
	margin: 20px 0;
	width: 100%; /* Ensure video container takes full width */
	}

	.video-container video {
	width: 100%;
	height: auto;
	display: block;
	}

	/* Question container styling */
	.question-container {
	background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
	color: white;
	padding: 25px;
	border-radius: 20px;
	margin: 20px 0;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	text-align: center;
	}

	/* Video watched indicator */
	.video-watched {
	background: rgba(76, 175, 80, 0.1);
	border: 2px solid #4CAF50;
	border-radius: 10px;
	padding: 15px;
	margin: 10px 0;
	color: #2E7D32;
	font-weight: bold;
	text-align: center;
	}

	/* Feedback messages */
	.feedback.success {
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #badbcc;
	padding: 15px;
	margin: 15px 0;
	border-radius: 8px;
	text-align: center;
	}

	.feedback.error {
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
	padding: 15px;
	margin: 15px 0;
	border-radius: 8px;
	text-align: center;
	}

	.feedback.info {
	background-color: #d1ecf1;
	color: #0c5460;
	border: 1px solid #bee5eb;
	padding: 15px;
	margin: 15px 0;
	border-radius: 8px;
	text-align: center;
	}

	/* Utility classes for layout */
	.columns-3 {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;
	flex-wrap: wrap; /* Allow wrapping */
	}

	.columns-3 > div {
	flex: 1;
	min-width: 250px; /* Ensure columns don't get too small */
	}

	.columns-5 {
	display: flex;
	justify-content: space-around;
	gap: 10px;
	margin-top: 20px;
	flex-wrap: wrap;
	}

	.columns-5 > div {
	flex: 1;
	min-width: 150px;
	}

	h1, h2, h3, h4, h5, h6 {
	font-family: 'Orbitron', monospace;
	color: #34495e;
	}

	p {
	line-height: 1.6;
	}
	</style>
	</head>
	<body>
	<div class="welcome-container">
	<h1 class="welcome-title">🌧️ RAINWATER QUEST 🌧️</h1>

	<img src="{{ url_for('static', filename='images/1.png') }}" alt="Rainwater Collection" class="welcome-image">
	<p style="font-size: 0.9em; color: #7f8c8d; margin-top: 10px;">Your adventure in water conservation begins now!</p>

	<form action="{{ url_for('begin_quest') }}" method="post" style="margin-top: 40px;">
	<button type="submit" class="button-full-width">🚀 BEGIN QUEST</button>
	</form>
	</div>
	</body>
	</html>