From ded8440a8ba4c895bbfb51867d28448a83a8a577 Mon Sep 17 00:00:00 2001 From: Saketh Date: Sun, 27 Oct 2024 09:05:39 +0530 Subject: [PATCH 1/3] add animes.css --- static/animes.css | 98 ++++++++++++++++++++++++++++++++++++++++++++ templates/index.html | 11 +++++ 2 files changed, 109 insertions(+) create mode 100644 static/animes.css create mode 100644 templates/index.html diff --git a/static/animes.css b/static/animes.css new file mode 100644 index 0000000..baedc24 --- /dev/null +++ b/static/animes.css @@ -0,0 +1,98 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + background-color: #121212; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + flex-direction: column; +} + +.container { + display: flex; + flex-wrap: wrap; + gap: 20px; + margin: 20px 0; +} + +.anime-card { + position: relative; + width: 250px; + height: 350px; + overflow: hidden; + border-radius: 10px; + cursor: pointer; + transition: transform 0.3s; +} + +.anime-card:hover { + transform: scale(1.1); +} + +.anime-card img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.7); + color: #fff; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 10px; + opacity: 0; + transition: opacity 0.3s; +} + +.anime-card:hover .overlay { + opacity: 1; +} + +.overlay h3 { + font-size: 20px; + margin-bottom: 10px; + text-align: center; +} + +.overlay p { + font-size: 15px; + text-align: center; + margin-bottom: 15px; +} + +.overlay button { + background-color: #ff5722; + border: none; + color: #fff; + padding: 10px 20px; + font-size: 16px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; + opacity: 0; + transform: translateY(10px); +} + +.anime-card:hover .overlay button { + opacity: 1; + transform: translateY(0); +} + +.overlay button:hover { + background-color: #e64a19; +} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..4a29874 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,11 @@ + + + + + + Document + + +

Hello World

+ + \ No newline at end of file From 80c51102b8531bb5f8f6cc98ed2c561fe6cb4f88 Mon Sep 17 00:00:00 2001 From: saketh Date: Sun, 27 Oct 2024 12:16:37 +0530 Subject: [PATCH 2/3] changes --- app.py | 218 ++++++++++++++++++++++++++++++++++ static/home.css | 72 +++++++++++ static/login.css | 82 +++++++++++++ static/menupage.css | 77 ++++++++++++ static/register.css | 74 ++++++++++++ templates/action.html | 40 +++++++ templates/base.html | 15 +++ templates/home.html | 41 +++++++ templates/index.html | 11 -- templates/isakai.html | 40 +++++++ templates/login.html | 38 ++++++ templates/menupage.html | 59 +++++++++ templates/quiz.html | 70 +++++++++++ templates/quiz_completed.html | 46 +++++++ templates/register.html | 47 ++++++++ templates/shonen.html | 40 +++++++ 16 files changed, 959 insertions(+), 11 deletions(-) create mode 100644 app.py create mode 100644 static/home.css create mode 100644 static/login.css create mode 100644 static/menupage.css create mode 100644 static/register.css create mode 100644 templates/action.html create mode 100644 templates/base.html create mode 100644 templates/home.html delete mode 100644 templates/index.html create mode 100644 templates/isakai.html create mode 100644 templates/login.html create mode 100644 templates/menupage.html create mode 100644 templates/quiz.html create mode 100644 templates/quiz_completed.html create mode 100644 templates/register.html create mode 100644 templates/shonen.html diff --git a/app.py b/app.py new file mode 100644 index 0000000..6fcdddd --- /dev/null +++ b/app.py @@ -0,0 +1,218 @@ +from flask import Flask, render_template, request, redirect, url_for, flash, session +from flask_sqlalchemy import SQLAlchemy +from werkzeug.security import generate_password_hash, check_password_hash +import os + +app = Flask(__name__) +app.secret_key = os.urandom(24) # Use a strong random secret key in production +app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db' +app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False +db = SQLAlchemy(app) + +# User model +class User(db.Model): + id = db.Column(db.Integer, primary_key=True) + email = db.Column(db.String(120), unique=True, nullable=False) + password = db.Column(db.String(128), nullable=False) + +# Create the database if it doesn't exist +with app.app_context(): + db.create_all() + +@app.route('/') +def home(): + return render_template('home.html') + +@app.route('/login', methods=['GET', 'POST']) +def login(): + if request.method == 'POST': + email = request.form['email'] + password = request.form['password'] + + user = User.query.filter_by(email=email).first() + + if user and check_password_hash(user.password, password): + session['user_id'] = user.id + flash('Login successful!', 'success') + return redirect(url_for('menu')) # Redirect to menu page after login + else: + flash('Invalid email or password', 'danger') + + return render_template('login.html') + +@app.route('/register', methods=['GET', 'POST']) +def register(): + if request.method == 'POST': + email = request.form['email'] + password = request.form['password'] + + # Check if the email already exists + existing_user = User.query.filter_by(email=email).first() + if existing_user: + flash('Email already registered. Please choose another.', 'danger') + return redirect(url_for('register')) + + # Hash the password and create a new user + hashed_password = generate_password_hash(password, method='pbkdf2:sha256') + new_user = User(email=email, password=hashed_password) + db.session.add(new_user) + db.session.commit() + flash('Registration successful! You can now log in.', 'success') + return redirect(url_for('login')) + + return render_template('register.html') + +@app.route('/menupage', methods=["GET", "POST"]) +def menu(): + if 'user_id' not in session: # Ensure the user is logged in + flash('You must be logged in to view this page.', 'danger') + return redirect(url_for('login')) + + if request.method == "POST": + submit_value = request.form.get('submit') # Get the value of the submitted button + + if submit_value == "ExploreAction-1": + return redirect(url_for('anime', action='action')) # Redirect to action page + elif submit_value == "ExploreAction-2": + return redirect(url_for('anime', action='shonen')) # Redirect to shonen page + elif submit_value == "ExploreAction-3": + return redirect(url_for('anime', action='isakai')) # Redirect to isekai page + + return render_template("menupage.html") # Render the menu page on GET + + +@app.route('/anime', methods=["GET"]) +def anime(): + action = request.args.get('action') + + if action == 'action': + return render_template('action.html') # Render action.html + elif action == 'shonen': + return render_template('shonen.html') # Render shonen.html + elif action == 'isakai': + return render_template('isakai.html') # Render isakai.html + else: + return "Anime type not found", 404 # Handle unknown actions + +@app.route('/quiz', methods=["GET", "POST"]) +def quiz(): + anime = request.args.get('anime') + + # Define questions for each anime + questions = { + "attack_on_titan": [ + {"question": "Who is the main protagonist of Attack on Titan?", "options": ["Eren Yeager", "Armin Arlert", "Mikasa Ackerman", "Levi Ackerman"], "answer": "Eren Yeager"}, + {"question": "What are the giant humanoid creatures called?", "options": ["Titans", "Ogres", "Giants", "Colossi"], "answer": "Titans"}, + {"question": "Which faction does Eren join?", "options": ["Survey Corps", "Military Police", "Garrison", "Titans"], "answer": "Survey Corps"}, + {"question": "What is the main objective of the Survey Corps?", "options": ["Defend humanity", "Study Titans", "Kill Titans", "Find Eren"], "answer": "Find Eren"}, + {"question": "What is the name of the wall protecting humanity?", "options": ["Wall Rose", "Wall Maria", "Wall Sina", "Wall Eren"], "answer": "Wall Maria"}, + ], + "demon_slayer": [ + {"question": "What is the name of the main character?", "options": ["Tanjiro Kamado", "Zenitsu Agatsuma", "Inosuke Hashibira", "Giyu Tomioka"], "answer": "Tanjiro Kamado"}, + {"question": "What demon does Tanjiro seek to cure his sister Nezuko?", "options": ["Muzan Kibutsuji", "Akaza", "Rui", "Kibutsuji"], "answer": "Muzan Kibutsuji"}, + {"question": "What is the main weapon used by demon slayers?", "options": ["Ninjato", "Katana", "Bokken", "Dao"], "answer": "Katana"}, + {"question": "What is the name of Tanjiro's sister?", "options": ["Nezuko Kamado", "Mitsuri Kanroji", "Shinobu Kocho", "Kanao Tsuyuri"], "answer": "Nezuko Kamado"}, + {"question": "What technique does Tanjiro use to enhance his abilities?", "options": ["Breathing Techniques", "Demon Arts", "Sword Techniques", "Haki"], "answer": "Breathing Techniques"}, + ], + "my_hero_academia": [ + {"question": "What is the name of the main protagonist?", "options": ["Izuku Midoriya", "Katsuki Bakugo", "All Might", "Shoto Todoroki"], "answer": "Izuku Midoriya"}, + {"question": "What is All Might's real name?", "options": ["Toshinori Yagi", "Shota Aizawa", "Hizashi Yamada", "Hizashi Hōgetsu"], "answer": "Toshinori Yagi"}, + {"question": "Which school do the main characters attend?", "options": ["U.A. High School", "Ketsubutsu Academy", "Shiketsu High School", "Shiketsu Academy"], "answer": "U.A. High School"}, + {"question": "What is Midoriya's Quirk?", "options": ["One For All", "Explosive", "Fire", "Ice"], "answer": "One For All"}, + {"question": "Who is the principal of U.A. High School?", "options": ["Nezu", "Aizawa", "Hizashi", "All Might"], "answer": "Nezu"}, + ], + "one_piece": [ + {"question": "Who is the main character of One Piece?", "options": ["Monkey D. Luffy", "Roronoa Zoro", "Nami", "Sanji"], "answer": "Monkey D. Luffy"}, + {"question": "What is Luffy searching for?", "options": ["One Piece", "Treasure", "Pirate King", "Adventure"], "answer": "One Piece"}, + {"question": "What is Luffy's crew called?", "options": ["Straw Hat Pirates", "Red-Haired Pirates", "Whitebeard Pirates", "Blackbeard Pirates"], "answer": "Straw Hat Pirates"}, + {"question": "What is Luffy's ability?", "options": ["Gomu Gomu no Mi", "Mera Mera no Mi", "Suna Suna no Mi", "Yami Yami no Mi"], "answer": "Gomu Gomu no Mi"}, + {"question": "Who is Luffy's first mate?", "options": ["Zoro", "Sanji", "Nami", "Usopp"], "answer": "Zoro"}, + ], + "naruto": [ + {"question": "What is Naruto's dream?", "options": ["To become Hokage", "To find Sasuke", "To become a ninja", "To protect his village"], "answer": "To become Hokage"}, + {"question": "What is the name of Naruto's village?", "options": ["Konoha", "Suna", "Kiri", "Kumo"], "answer": "Konoha"}, + {"question": "Who is Naruto's main rival?", "options": ["Sasuke Uchiha", "Sakura Haruno", "Kakashi Hatake", "Orochimaru"], "answer": "Sasuke Uchiha"}, + {"question": "What demon fox is sealed inside Naruto?", "options": ["Kurama", "Shukaku", "Matatabi", "Isobu"], "answer": "Kurama"}, + {"question": "What is the name of Naruto's teacher?", "options": ["Kakashi Hatake", "Jiraiya", "Minato Namikaze", "Tobirama Senju"], "answer": "Kakashi Hatake"}, + ], + "bleach": [ + {"question": "What is the main character's name?", "options": ["Ichigo Kurosaki", "Renji Abarai", "Rukia Kuchiki", "Uryu Ishida"], "answer": "Ichigo Kurosaki"}, + {"question": "What is Ichigo's role?", "options": ["Soul Reaper", "Hollow", "Quincy", "Human"], "answer": "Soul Reaper"}, + {"question": "What is the name of Ichigo's sword?", "options": ["Zangetsu", "Tensa Zangetsu", "Muramasa", "Shikai"], "answer": "Zangetsu"}, + {"question": "Who is the main antagonist of the Soul Society Arc?", "options": ["Aizen", "Gin", "Urahara", "Yamamoto"], "answer": "Aizen"}, + {"question": "What is Rukia's last name?", "options": ["Kuchiki", "Abarai", "Urahara", "Ishida"], "answer": "Kuchiki"}, + ], + "solo_leveling": [ + {"question": "What is the name of the main character?", "options": ["Sung Jin-Woo", "Cha Hae-In", "Go Gun-Hee", "Kim Sung-Il"], "answer": "Sung Jin-Woo"}, + {"question": "What is the term used for hunters?", "options": ["E-Rank", "D-Rank", "C-Rank", "S-Rank"], "answer": "E-Rank"}, + {"question": "What is Jin-Woo's special ability?", "options": ["Shadow Monarch", "S-Rank Hunter", "Dual Ability", "Rebirth"], "answer": "Shadow Monarch"}, + {"question": "Who is Jin-Woo's mentor?", "options": ["Go Gun-Hee", "Cha Hae-In", "Thomas Andre", "Giant"], "answer": "Go Gun-Hee"}, + {"question": "What is the name of the system Jin-Woo receives?", "options": ["System", "Game", "Leveling", "Quest"], "answer": "System"}, + ], + "overlord": [ + {"question": "What is the main character's name?", "options": ["Ainz Ooal Gown", "Shalltear Bloodfallen", "Albedo", "Demiurge"], "answer": "Ainz Ooal Gown"}, + {"question": "What game does Ainz come from?", "options": ["Yggdrasil", "World of Warcraft", "Final Fantasy", "Sword Art Online"], "answer": "Yggdrasil"}, + {"question": "What is the name of Ainz's guild?", "options": ["Ainz Ooal Gown", "Dark Warrior", "Giant Of the East", "Great Tomb of Nazarick"], "answer": "Ainz Ooal Gown"}, + {"question": "Who is Ainz's first guardian?", "options": ["Shalltear", "Albedo", "Demiurge", "Cocytus"], "answer": "Shalltear"}, + {"question": "What is Ainz's goal in the new world?", "options": ["To become the strongest", "To find his guild members", "To conquer the world", "To revive Yggdrasil"], "answer": "To find his guild members"}, + ], + "sword_art_online": [ + {"question": "What is the main character's name?", "options": ["Kirito", "Asuna", "Klein", "Shino"], "answer": "Kirito"}, + {"question": "What game do they get trapped in?", "options": ["SAO", "ALO", "GGO", "VRMMO"], "answer": "SAO"}, + {"question": "What is Kirito's special ability?", "options": ["Dual Wielding", "Sword Skills", "Speed", "Strength"], "answer": "Dual Wielding"}, + {"question": "What is the name of Asuna's character?", "options": ["Sinon", "Leafa", "Lizbeth", "Asuna"], "answer": "Asuna"}, + {"question": "What is the goal of the players in SAO?", "options": ["Clear the game", "Level up", "Kill the boss", "Survive"], "answer": "Clear the game"}, + ], + } + if 'score' not in session: + session['score'] = 0 + + selected_questions = questions.get(anime, []) + total_questions = len(selected_questions) + + if total_questions == 0: + return render_template('quiz.html', questions=[], score=0, anime=anime) + + if request.method == "POST": + current_question_index = int(request.form.get('current_question', 0)) + answer = request.form.get('answer') + + # Increment score if the answer is correct + if answer == selected_questions[current_question_index]["answer"]: + session['score'] += 1 + + current_question_index += 1 + + if current_question_index >= total_questions: + final_score = session['score'] + session.pop('score', None) # Clear the score from session + return redirect(url_for('quiz_completed', score=final_score, total_questions=total_questions, anime=anime)) # Pass anime + + + return render_template('quiz.html', + questions=selected_questions, + current_question_index=current_question_index, + total_questions=total_questions, + anime=anime) + + return render_template('quiz.html', + questions=selected_questions, + current_question_index=0, + total_questions=total_questions, + anime=anime) + +@app.route('/quiz_completed') +def quiz_completed(): + score = request.args.get('score', default=0, type=int) + total_questions = request.args.get('total_questions', default=0, type=int) + anime = request.args.get('anime', default='') # Get the anime from the request args + return render_template('quiz_completed.html', score=score, total_questions=total_questions, anime=anime) + +@app.route('/logout') +def logout(): + session.pop('user_id', None) + flash('You have been logged out.', 'success') + return redirect(url_for('home')) + +if __name__ == '__main__': + app.run(debug=True) \ No newline at end of file diff --git a/static/home.css b/static/home.css new file mode 100644 index 0000000..8ca21d0 --- /dev/null +++ b/static/home.css @@ -0,0 +1,72 @@ +body, html { + margin: 0; + padding: 0; + height: 100%; + font-family: 'Roboto', sans-serif; + background-color: #121212; + color: white; +} + +.welcome-container { + height: 100vh; +} + +.left-side { + padding: 0; + position: relative; + +} + +.right-side { + padding: 2rem; + background-color: rgba(18, 18, 18, 0.8); +} + +.left-side img { + width: 100%; + height: 100vh; + object-fit: cover; +} + +.overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + pointer-events: none; + +} + +.title { + font-size: 4rem; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); +} + +.btn-dark-violet { + color: white; + background-color: #8977b5; + border-color: #5e4b8d; + border-radius: 8px; + padding: 5px 10px; + font-size: 20px; +} + +.btn-dark-violet:hover { + background-color:#343a40; + color:white; + border-color: #4b3e7f; + box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6); +} +.logo { + position: absolute; /* Absolute positioning */ + top: 20px; /* Distance from the top */ + left: 20px; /* Distance from the left */ + width: 90px; /* Fixed width */ + height: 90px; /* Fixed height to maintain aspect ratio */ + border-radius: 50%; /* Make the image circular */ + overflow: hidden; /* Hide overflow to maintain the circular shape */ + object-fit: cover; /* Cover the entire area while maintaining aspect ratio */ + z-index: 10; /* Ensure it appears above other elements */ +} \ No newline at end of file diff --git a/static/login.css b/static/login.css new file mode 100644 index 0000000..5c9a852 --- /dev/null +++ b/static/login.css @@ -0,0 +1,82 @@ +@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap'); + +body, html { + height: 100%; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + background-image: url('https://e1.pxfuel.com/desktop-wallpaper/1001/385/desktop-wallpaper-gfx-shonen-jump.jpg'); /* Set the background image */ + background-size: cover; /* Ensure it covers the entire body */ + background-position: center; /* Center the background image */ + background-repeat: no-repeat; /* Prevent background image from repeating */ +} + +body::before { + content: ''; + position: absolute; /* Position it absolutely within the body */ + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(30, 0, 0, 0.5); /* Adjusted opacity for transparency */ + z-index: 0; /* Make sure it's behind other content */ +} + +.box { + width: 400px; /* Fixed width */ + height: 400px; /* Fixed height for equal dimensions */ + padding: 20px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); + border-radius: 12px; + background-color: rgba(31, 31, 33, 0.85); /* Slightly less transparent */ + color: white; /* Set text color to white */ + position: relative; /* Ensure it's positioned relative to the body */ + z-index: 1; /* Make sure it appears above the background */ + text-align: center; /* Center text inside the box */ + display: flex; /* Enable flexbox */ + flex-direction: column; /* Align children vertically */ + justify-content: center; /* Center children vertically */ +} + +.title { + font-family: "M PLUS 1", sans-serif; + font-weight: 700; /* Use bold weight for the title */ + font-size: 28px; /* Title font size */ + margin-bottom: 20px; /* Space below the title */ +} + +.form-group { + margin-bottom: 15px; /* Space between form elements */ +} + +.btn-custom { + background-color: #FF6F61; /* Coral color */ + border: none; /* Remove border */ + color: white; /* Text color */ + width: 100%; /* Full width */ + padding: 10px; /* Increase padding */ + border-radius: 5px; /* Rounded corners */ +} + +.btn-custom:hover { + background-color: #FF4F3B; /* Darker Coral for hover effect */ + transition: background-color 0.3s ease; /* Smooth transition */ +} + +.m-plus-1-uniquifier { + font-family: "M PLUS 1", sans-serif; + font-weight: 400; /* Regular weight */ + font-size: 16px; /* Font size */ + margin-top: 15px; /* Space above */ + color: white; /* Ensure text color is white */ +} + +a { + color: #FF6F61; /* Link color */ + text-decoration: none; /* Remove underline */ +} + +a:hover { + text-decoration: underline; /* Underline on hover */ +} \ No newline at end of file diff --git a/static/menupage.css b/static/menupage.css new file mode 100644 index 0000000..20d03df --- /dev/null +++ b/static/menupage.css @@ -0,0 +1,77 @@ +body { + background-color: #121212; /* Dark background color */ + color: black; /* Default text color */ + font-family: 'M PLUS 1', sans-serif; +} + +.container { + margin-top: 50px; /* Space above the container */ + background-color: #121212; /* Container background color */ + padding: 20px; /* Add some padding around the container */ + border-radius: 10px; /* Rounded corners for the container */ + transition: box-shadow 0.3s; /* Smooth shadow effect on hover */ +} + +.card { + color:white; + background-color: #151616; /* Card background color */ + border: none; /* Remove card border */ + transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s; /* Smooth scaling and shadow effect */ + margin: 20px 0; /* Space between cards vertically */ + height: 100%; /* Allow cards to be responsive */ + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Shadow for the card */ + display: flex; /* Use flexbox for alignment */ + flex-direction: column; /* Align items vertically */ + justify-content: space-between; /* Space items evenly */ +} + +.card:hover { + transform: scale(1.05); /* Slightly scale up on hover */ + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7); /* Stronger shadow on hover */ + background-color:#343a40;/* Change background color on hover */ +} + +.card-img-top { + height: 250px; /* Fixed height for the image */ + object-fit: cover; /* Cover the area without distortion */ + border-top-left-radius: 10px; /* Rounded corners for the image */ + border-top-right-radius: 10px; /* Rounded corners for the image */ +} + +.card-body { + display: flex; /* Use flexbox for alignmen*/ + flex-direction: column; /* Align items vertically */ + justify-content: center; /* Center content vertically */ + align-items: center; /* Center content horizontally */ + flex-grow: 1; /* Allow body to grow and take space */ +} + +.genre-title { + font-weight: bold; /* Make genre title bold */ + font-size: 1.5rem; /* Genre title font size */ + margin: 10px 0; /* Space above and below genre title */ + text-align: center; /* Center align the text */ + transition: text-shadow 1s; /* Smooth text shadow effect */ +} + +.card:hover .genre-title { + text-shadow: 0 0 10px rgba(255, 255, 255, 0.9); /* Add text shadow on hover */ + font-size: 1.8rem; +} + +.btn-custom { + background-color: #ffffff; /* Button background color */ + color: #52057B; /* Button text color */ + transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; /* Smooth transition for button */ + margin-top: 10px; + border-radius: 8px; /* Rounded corners for the button */ + padding: 10px 20px; /* Add padding for better appearance */ + border: none; /* Remove default border */ +} + +.btn-custom:hover { + background-color: #343a40; /* Change button background color on hover */ + color: white; /* Change button text color on hover */ + box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6); + font:bold;/* Glowing effect */ +} \ No newline at end of file diff --git a/static/register.css b/static/register.css new file mode 100644 index 0000000..45f25d2 --- /dev/null +++ b/static/register.css @@ -0,0 +1,74 @@ +@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap'); + +body, html { + height: 100%; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + background-image: url('https://e1.pxfuel.com/desktop-wallpaper/1001/385/desktop-wallpaper-gfx-shonen-jump.jpg'); /* Set the background image */ + background-size: cover; /* Ensure it covers the entire body */ + background-position: center; /* Center the background image */ + background-repeat: no-repeat; /* Prevent background image from repeating */ +} + +body::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(30, 0, 0, 0.3); + z-index: 0; +} + +.box { + width: 400px; /* Fixed width */ + height: 400px; /* Fixed height for equal dimensions */ + padding: 20px; + box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); + border-radius: 8px; + display: flex; + flex-direction: column; /* Align form elements vertically */ + align-items: center; + justify-content: center; + background-color: rgba(31, 31, 33, 0.85); + color: white; + position: relative; + z-index: 1; +} + +.centering { + display: flex; + justify-content: center; + width: 100%; +} + +.m-plus-1-uniquifier { + font-family: "M PLUS 1", sans-serif; + font-weight: 400; + color: white; + font-size: 16px; +} + +.form-title { + font-family: "M PLUS 1", sans-serif; + font-weight: 700; + font-size: 24px; + color: white; + margin-bottom: 20px; +} + +.btn-custom { + background-color: #FF6F61; /* Coral color */ + border: none; + color: white; + width: 100%; /* Full width for buttons */ + padding: 10px; /* Increase padding */ +} + +.btn-custom:hover { + background-color: #FF4F3B; /* Darker Coral for hover effect */ + transition: background-color 0.3s ease; +} \ No newline at end of file diff --git a/templates/action.html b/templates/action.html new file mode 100644 index 0000000..04a19f8 --- /dev/null +++ b/templates/action.html @@ -0,0 +1,40 @@ +{% extends "base.html" %} + +{% block title %}Action Anime{% endblock %} +{% block header %}Action Anime{% endblock %} + +{% block content %} +
+ Attack on Titan +
+

Attack on Titan

+

Humans fight for survival against terrifying giants.

+
+ + +
+
+
+
+ Demon Slayer +
+

Demon Slayer

+

A young boy fights demons to save his sister.

+
+ + +
+
+
+
+ My Hero Academia +
+

My Hero Academia

+

In a world of superpowers, a boy dreams of becoming a hero.

+
+ + +
+
+
+{% endblock %} \ No newline at end of file diff --git a/templates/base.html b/templates/base.html new file mode 100644 index 0000000..ddad0c4 --- /dev/null +++ b/templates/base.html @@ -0,0 +1,15 @@ + + + + + + {% block title %}Anime{% endblock %} + + + +

{% block header %}Anime Genre{% endblock %}

+
+ {% block content %}{% endblock %} +
+ + \ No newline at end of file diff --git a/templates/home.html b/templates/home.html new file mode 100644 index 0000000..ccc269c --- /dev/null +++ b/templates/home.html @@ -0,0 +1,41 @@ + + + + + + Anime Trivia Showdown + + + + + + + +
+ +
+
+
+

WELCOME!

+

Quizaku

+

Anime Trivia Showdown

+
+ +
+
+
+
+ Anime Background +
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/templates/index.html b/templates/index.html deleted file mode 100644 index 4a29874..0000000 --- a/templates/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - Document - - -

Hello World

- - \ No newline at end of file diff --git a/templates/isakai.html b/templates/isakai.html new file mode 100644 index 0000000..a1cf1e6 --- /dev/null +++ b/templates/isakai.html @@ -0,0 +1,40 @@ +{% extends "base.html" %} + +{% block title %}Isekai Anime{% endblock %} +{% block header %}Isekai Anime{% endblock %} + +{% block content %} +
+ Solo Leveling +
+

Solo Leveling

+

A weak hunter gains powers to level up and grow stronger.

+
+ + +
+
+
+
+ Overlord +
+

Overlord

+

A gamer is trapped in a fantasy world as his character.

+
+ + +
+
+
+
+ Sword Art Online +
+

Sword Art Online

+

Players are trapped in a virtual world where dying means death.

+
+ + +
+
+
+{% endblock %} \ No newline at end of file diff --git a/templates/login.html b/templates/login.html new file mode 100644 index 0000000..bc279be --- /dev/null +++ b/templates/login.html @@ -0,0 +1,38 @@ + + + + + + Login - Anime Trivia Showdown + + + + + + + +
+ +
+

Login

+
+
+ +
+
+ +
+ +
+

+ Don't have an account? Register here +

+
+
+ + + + + + + \ No newline at end of file diff --git a/templates/menupage.html b/templates/menupage.html new file mode 100644 index 0000000..7278d06 --- /dev/null +++ b/templates/menupage.html @@ -0,0 +1,59 @@ + + + + + + Anime Genres + + + + + + +
+
+
+
+ Action +
+
Action
+

Action anime often features intense battles, high stakes, and adrenaline-pumping sequences that keep viewers on the edge of their seats.

+
+ +
+
+
+
+
+
+ Shonen +
+
Shonen
+

Shonen anime typically targets a male audience and often features themes of adventure, friendship, and self-improvement.

+
+ +
+
+
+
+
+
+ Isekai +
+
Isekai
+

Isekai anime typically involves a protagonist being transported to a different world, often with fantasy or sci-fi elements.

+
+ +
+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/templates/quiz.html b/templates/quiz.html new file mode 100644 index 0000000..2509b4a --- /dev/null +++ b/templates/quiz.html @@ -0,0 +1,70 @@ +{% extends "base.html" %} + +{% block title %}Quiz - {{ anime | capitalize }}{% endblock %} +{% block header %}Quiz for {{ anime | capitalize }}{% endblock %} + +{% block content %} +
+

Question {{ current_question_index + 1 }} of {{ total_questions }}

+
+

{{ questions[current_question_index].question }}

+
+ {% for option in questions[current_question_index].options %} +
+ + +
+ {% endfor %} + + +
+
+
+ + +{% endblock %} \ No newline at end of file diff --git a/templates/quiz_completed.html b/templates/quiz_completed.html new file mode 100644 index 0000000..341e0cc --- /dev/null +++ b/templates/quiz_completed.html @@ -0,0 +1,46 @@ +{% extends "base.html" %} + +{% block title %}Quiz Completed{% endblock %} +{% block content %} +
+

Quiz Completed!

+

Your Score: {{ score }} out of {{ total_questions }}

+ Go Back to Home + Try Again +
+ + +{% endblock %} \ No newline at end of file diff --git a/templates/register.html b/templates/register.html new file mode 100644 index 0000000..d22f287 --- /dev/null +++ b/templates/register.html @@ -0,0 +1,47 @@ + + + + + + Register - Anime Trivia Showdown + + + + + + + +
+ +
+
+
+

Register

+
+
+ + +
+
+ + +
+ +
+

Already have an account? Login here

+
+
+
+ Anime Background +
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/templates/shonen.html b/templates/shonen.html new file mode 100644 index 0000000..3a06445 --- /dev/null +++ b/templates/shonen.html @@ -0,0 +1,40 @@ +{% extends "base.html" %} + +{% block title %}Shonen Anime{% endblock %} +{% block header %}Shonen Anime{% endblock %} + +{% block content %} +
+ One Piece +
+

One Piece

+

A young pirate sails to find the ultimate treasure.

+
+ + +
+
+
+
+ Naruto +
+

Naruto

+

A ninja strives to become the strongest and protect his village.

+
+ + +
+
+
+
+ Bleach +
+

Bleach

+

A teenager gains the powers of a Soul Reaper to protect others.

+
+ + +
+
+
+{% endblock %} \ No newline at end of file From 998df5516327caa645024e1f8b2ce7268a93fbf7 Mon Sep 17 00:00:00 2001 From: sakethpragallapati Date: Sun, 27 Oct 2024 13:11:11 +0530 Subject: [PATCH 3/3] Update menupage.html --- templates/menupage.html | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/templates/menupage.html b/templates/menupage.html index 7278d06..604db6c 100644 --- a/templates/menupage.html +++ b/templates/menupage.html @@ -18,8 +18,10 @@
Action

Action anime often features intense battles, high stakes, and adrenaline-pumping sequences that keep viewers on the edge of their seats.

-
- + +
@@ -30,8 +32,10 @@
Action
Shonen

Shonen anime typically targets a male audience and often features themes of adventure, friendship, and self-improvement.

-
- + +
@@ -42,8 +46,10 @@
Shonen
Isekai

Isekai anime typically involves a protagonist being transported to a different world, often with fantasy or sci-fi elements.

-
- + +
@@ -56,4 +62,4 @@
Isekai
- \ No newline at end of file +