diff --git a/Dockerfile b/Dockerfile index afe26860..04d387f6 100644 --- a/Dockerfile +++ b/Dockerfile @@ -3,9 +3,9 @@ FROM karastoyanov/skill-forge-baseimage # Image Labels. Update values for each build LABEL Name="Skill-Forge" -LABEL Version=1.3.13 +LABEL Version=1.3.14 LABEL Release="pre-release" -LABEL ReleaseDate="28.07.2024" +LABEL ReleaseDate="04.08.2024" LABEL Description="Skill Forge is a open-source platform for learning and practicing programming languages." LABEL Maintainer="Aleksandar Karastoyanov " LABEL License="GNU GPL v3.0 license" diff --git a/app/__init__.py b/app/__init__.py index e5be9746..9bf7668b 100644 --- a/app/__init__.py +++ b/app/__init__.py @@ -1,5 +1,5 @@ -from flask import Flask, redirect, url_for, render_template, flash, jsonify +from flask import Flask, redirect, url_for, render_template, flash, jsonify, send_file from config import Config from flask_migrate import Migrate from flask_bcrypt import Bcrypt @@ -13,7 +13,7 @@ from app.models import User # Import scheduler from apscheduler.schedulers.background import BackgroundScheduler -import atexit +import atexit, base64, io migrate = Migrate() bcrypt = Bcrypt() @@ -37,12 +37,13 @@ def create_app(): app.wsgi_app = ProxyFix(app.wsgi_app, x_for=1, x_proto=1, x_host=1, x_port=1, x_prefix=1) # Import routes - from app.routes import routes, user_routes, user_submited_solutions, quests_routes, user_submit_quest_routes + from app.routes import routes, user_routes, user_submited_solutions, quests_routes, user_submit_quest_routes, guild_routes app.register_blueprint(routes.bp) app.register_blueprint(user_routes.bp_usr) app.register_blueprint(user_submit_quest_routes.bp_usq) app.register_blueprint(user_submited_solutions.bp_uss) app.register_blueprint(quests_routes.bp_qst) + app.register_blueprint(guild_routes.bp_guild) # Import websockets # Define ping timeout and ping interval (in seconds) diff --git a/app/forms.py b/app/forms.py index 6f0d2df6..8a428a46 100644 --- a/app/forms.py +++ b/app/forms.py @@ -190,6 +190,7 @@ class ContactForm(FlaskForm): ########### User Profile Form - update user's profile ########### class UserProfileForm(FlaskForm): + about_me = TextAreaField('About Me', validators=[Optional()]) first_name = StringField('First Name', validators=[Optional()]) last_name = StringField('Last Name', validators=[Optional()]) email = StringField('Email', validators=[Optional(), Email(), latin_characters_only]) @@ -199,9 +200,8 @@ class UserProfileForm(FlaskForm): discord_id = StringField('Discord ID', validators=[Optional()]) linked_in = StringField('LinkedIn', validators=[Optional()]) avatar = FileField('Upload Avatar', name="update_avatar", validators=[Optional()]) - submit = SubmitField('Save Changes', name="submit") + submit = SubmitField('Update Profile', name="submit") - ########### Submit Quest Form - as a Regular User ########### class QuestSubmissionForm(FlaskForm): quest_name = StringField('Quest Name', validators=[DataRequired(), Length(max=100)]) @@ -239,4 +239,11 @@ class QuestApprovalForm(FlaskForm): approve = SubmitField('Approve Quest', render_kw={'value': 'approve'}) request_changes = SubmitField('Request Changes', render_kw={'value': 'request-changes'}) reject = SubmitField('Reject Quest', render_kw={'value': 'reject'}) - save_changes = SubmitField('Save Changes', render_kw={'value': 'save-changes'}) \ No newline at end of file + save_changes = SubmitField('Save Changes', render_kw={'value': 'save-changes'}) + +########### Create New Guild Form ########### +class CreateGuildForm(FlaskForm): + name = StringField('Guild Name', validators=[DataRequired(), Length(min=5, max=50)]) + description = TextAreaField('Description', validators=[Optional(), Length(min=10, max=500)]) + avatar = FileField('Avatar') + submit = SubmitField('Create Guild') \ No newline at end of file diff --git a/app/models.py b/app/models.py index 8df7cd88..36e2477b 100644 --- a/app/models.py +++ b/app/models.py @@ -41,16 +41,20 @@ class User(UserMixin, db.Model): github_profile = db.Column(db.String(120), default="") discord_id = db.Column(db.String(120), default="") linked_in = db.Column(db.String(120), default="") + about_me = db.Column(db.Text, default="", nullable=True) is_banned = db.Column(db.Boolean, default=lambda: False) ban_date = db.Column(db.DateTime, nullable=True) ban_reason = db.Column(db.String(120), default=" ", nullable=True) user_online_status = db.Column(db.String(10), default="Offline", nullable=True) last_status_update = db.Column(db.DateTime, default=datetime.now(), nullable=True) + guild_id = db.Column(db.String(20), db.ForeignKey('guilds.guild_id'), nullable=True) # Define the relationship with the UserAchievement model achievements = db.relationship('UserAchievement') # Define the relationship with the Comment model comments = db.relationship('Comment', back_populates='user') + # Define the relationship with the Guild model + guild = db.relationship('Guild', back_populates='members', foreign_keys=[guild_id]) def __init__(self, username, first_name, last_name, password, email, avatar=None): self.username = username @@ -224,3 +228,22 @@ class SubmitedSolution(db.Model): # Define the relationship between the user_submited_solutions and coding_quests table. coding_quest = db.relationship('Quest') + +########### Define the Guild model ########### +class Guild(db.Model): + __tablename__ = 'guilds' + guild_id = db.Column(db.String(20), primary_key=True, nullable=False) + guild_name = db.Column(db.String(100), unique=True, nullable=False) + guild_avatar = db.Column(db.LargeBinary, default=None) + description = db.Column(db.String(200), nullable=True) + guild_master_id = db.Column(db.String(20), db.ForeignKey('users.user_id'), nullable=False) + points = db.Column(db.Integer, default=0) + level = db.Column(db.Integer, default=1) + dungeons_completed = db.Column(db.Integer, default=0) + date_created = db.Column(db.DateTime, default=datetime.now(), nullable=False) + guild_members_count = db.Column(db.Integer, default=1) + + # Define the relationship between the Guild model and the User model + members = db.relationship('User', back_populates='guild', foreign_keys=[User.guild_id]) + # Define the relationship with the User model for guild master + guild_master = db.relationship('User', foreign_keys=[guild_master_id]) \ No newline at end of file diff --git a/app/routes/__init__.py b/app/routes/__init__.py index f0347923..29155cfc 100644 --- a/app/routes/__init__.py +++ b/app/routes/__init__.py @@ -13,4 +13,7 @@ from .user_routes import bp_usr # Import routes from user submited solutions routes -from .user_submited_solutions import bp_uss \ No newline at end of file +from .user_submited_solutions import bp_uss + +# Import routes from guild routes +from .guild_routes import bp_guild \ No newline at end of file diff --git a/app/routes/guild_routes.py b/app/routes/guild_routes.py new file mode 100644 index 00000000..f5dec52c --- /dev/null +++ b/app/routes/guild_routes.py @@ -0,0 +1,100 @@ +import random, string, base64, json, os +from datetime import datetime +from flask import Blueprint, redirect, url_for, request, render_template, jsonify, flash, abort, send_file +from flask_login import login_required, current_user +# Import the forms and models +from app.models import Guild +from app.forms import CreateGuildForm +# Import code runners +from app.code_runners import run_python, run_javascript, run_java, run_csharp +# Import the database instance +from app.database.db_init import db +from sqlalchemy.orm import joinedload +# Import MongoDB transactions functions +from app.database.mongodb_transactions import mongo_transaction +# Import admin_required decorator +from app.user_permission import admin_required +import io +import base64 + +bp_guild = Blueprint('guilds', __name__) + +# Redirect to create new guild page +@bp_guild.route('/create_guild', methods=['GET']) +def open_create_guild(): + form = CreateGuildForm() + return render_template('guild_templates/create_guild.html', form=form) + +# Redirect to the guilds list page +@bp_guild.route('/guilds', methods=['GET']) +def open_guilds_list(): + guilds = Guild.query.all() + return render_template('guild_templates/guilds_list.html', guilds=guilds) + +# Handle the guild avatar image requests +@bp_guild.route('/guilds/avatar/') +def get_guild_avatar(guild_id): + guild = Guild.query.filter_by(guild_id=guild_id).first_or_404() + if guild.guild_avatar: + img_data = guild.guild_avatar + else: + # Return a default image if no avatar is set + with open('app/static/images/default-guild-avatar.png', 'rb') as f: + img_data = f.read() + return send_file(io.BytesIO(img_data), mimetype='image/jpeg') + +# Create new guild +@bp_guild.route('/guilds/create', methods=['GET', 'POST']) +@login_required +def create_new_guild(): + form = CreateGuildForm() + if form.validate_on_submit(): + existing_guild = Guild.query.filter_by(guild_name=form.name.data).first() + if existing_guild: + flash('This guild name is already taken. Please choose a different name.', 'error') + return render_template('create_guild.html', form=form) + + if form.avatar.data: + guild_avatar = form.avatar.data.read() + else: + with open('app/static/images/default-guild-avatar.png', 'rb') as f: + guild_avatar = f.read() + + # Generate a random guild ID + while True: + # Generate a random 7-digit number + random_digits = random.randint(1000000, 9999999) + guild_id = f"GD-{random_digits}" + # Check if this ID already exists in the database + existing_guild = Guild.query.filter_by(guild_id=guild_id).first() + if not existing_guild: + break + + + # Create new guild + guild = Guild( + guild_id=guild_id, + guild_name=form.name.data, + description=form.description.data, + guild_master_id=current_user.user_id, + guild_avatar=guild_avatar) + + db.session.add(guild) + db.session.commit() + + mongo_transaction( + 'guild_create', + action=f'Guild {form.name.data} created by {current_user.username}', + user_id=current_user.user_id, + username=current_user.username, + timestamp=datetime.now().strftime('%Y-%m-%d %H:%M:%S') + ) + flash(f'Guild {form.name.data} created successfully!', 'success') + return redirect(url_for('guilds.create_new_guild')) + else: + # Print form errors as flash messages + for field, errors in form.errors.items(): + for error in errors: + flash(f"Error in the {getattr(form, field).label.text} field - {error}", 'error') + + return render_template('guild_templates/create_guild.html', form=form) \ No newline at end of file diff --git a/app/routes/quests_routes.py b/app/routes/quests_routes.py index e266794a..768648ff 100644 --- a/app/routes/quests_routes.py +++ b/app/routes/quests_routes.py @@ -14,7 +14,6 @@ from app.database.mongodb_transactions import mongo_transaction # Import admin_required decorator from app.user_permission import admin_required -import logging bp_qst = Blueprint('quests', __name__) diff --git a/app/routes/user_routes.py b/app/routes/user_routes.py index d9876205..21ffa964 100644 --- a/app/routes/user_routes.py +++ b/app/routes/user_routes.py @@ -25,6 +25,7 @@ def open_user_profile(): if form.validate_on_submit(): if 'submit' in request.form: + user.about_me = form.about_me.data user.first_name = form.first_name.data user.last_name = form.last_name.data user.email = form.email.data @@ -61,6 +62,7 @@ def open_user_profile(): return redirect(url_for('usr.open_user_profile')) if request.method == 'GET': + form.about_me.data = user.about_me form.first_name.data = user.first_name form.last_name.data = user.last_name form.email.data = user.email @@ -130,7 +132,6 @@ def edit_user_db(): db.session.commit() return redirect(url_for('usr.open_admin_panel')) - # Route to handle the user profile (self-open) @bp_usr.route('/user_profile/', methods=['GET']) @login_required @@ -173,7 +174,6 @@ def open_user_profile_view(username): # Handle the case where the user is not found return abort(404) - # Redirect to the Admin Panel (Admin Role in the database is needed) @bp_usr.route('/admin_panel') @login_required diff --git a/app/static/css/buttons.css b/app/static/css/buttons.css index 5a170dfa..13a6aea1 100644 --- a/app/static/css/buttons.css +++ b/app/static/css/buttons.css @@ -5,45 +5,14 @@ src: url('/static/fonts/ttf/JetBrainsMono-Regular.ttf') format('woff'); } -.button-container { - display: flex; - position: relative; - justify-content: center; - align-items: center; - margin-top: 20px; -} - -.button-container .button-box { - position: relative; - display: flex; - justify-content: center; - align-items: center; -} - -.button-box { - font-family: 'JetBrainsMonoRegular', sans-serif; - position: absolute; - display: flex; - flex-direction: row; - top: 50%; - left: 50%; - width: 900px; - height: 50px; - padding: 40px; - transform: translate(-50%, -50%); - background: rgba(0, 0, 0, .5) !important; - box-sizing: border-box; - box-shadow: 0 15px 25px rgba(0, 0, 0, .6); - border-radius: 10px; -} +.btn { -.button-box .btn { position: relative; display: inline-block; padding: 10px 20px; color: #03e9f4 !important; - background-color: #141e30 !important; + background: rgba(0, 0, 0, .5) !important; font-size: 16px; text-decoration: none; text-transform: uppercase; @@ -52,17 +21,16 @@ letter-spacing: 4px; margin: 10px; border: 0px; - width: 300px; + width: 200px; } - /* Python button styles */ -.button-box .btn.python-btn { +.btn.python-btn { font-family: 'JetBrainsMonoRegular', sans-serif; color: #03e9f4; } -.button-box .btn.python-btn:hover { +.btn.python-btn:hover { background: #ffde57 !important; /* Unique color for Python button hover */ color: #4584b6 !important; border-radius: 5px !important; @@ -74,11 +42,11 @@ /* Java button styles */ -.button-box .btn.java-btn { +.btn.java-btn { font-family: 'JetBrainsMonoRegular', sans-serif; } -.button-box .btn.java-btn:hover { +.btn.java-btn:hover { background: #f89820 !important; /* Unique color for Java button hover */ color: #5382a1 !important; border-radius: 5px !important; @@ -88,16 +56,16 @@ 0 0 100px #f89820; } -.user-box .btn .java-btn span:nth-child(1) { +.btn .java-btn span:nth-child(1) { background: linear-gradient(90deg, transparent, #4caf50); /* Unique color for Java button animation */ } /* JavaScript button styles */ -.button-box .btn.js-btn { +.btn.js-btn { font-family: 'JetBrainsMonoRegular', sans-serif; } -.button-box .btn.js-btn:hover { +.btn.js-btn:hover { background: #f0db4f !important; /* Unique color for JavaScript button hover */ color: #000000 !important; border-radius: 5px !important; @@ -112,11 +80,11 @@ } /* C# button styles */ -.button-box .btn.csharp-btn { +.btn.csharp-btn { font-family: 'JetBrainsMonoRegular', sans-serif; } -.button-box .btn.csharp-btn:hover { +.btn.csharp-btn:hover { background: #9b4993 !important; /* Unique color for C# button hover */ color: #fff !important; border-radius: 5px !important; @@ -126,12 +94,12 @@ 0 0 100px #9b4993; } -.button-box .btn span { +.btn span { position: absolute; display: block; } -.button-box .btn span:nth-child(1) { +.btn span:nth-child(1) { top: 0; left: -100%; width: 100%; @@ -173,7 +141,7 @@ } } -.button-box .btn span:nth-child(3) { +.btn span:nth-child(3) { bottom: 0; right: -100%; width: 100%; diff --git a/app/static/css/contact.css b/app/static/css/contact.css index 676b5500..7c2d5852 100644 --- a/app/static/css/contact.css +++ b/app/static/css/contact.css @@ -44,49 +44,62 @@ body { font-family: 'JetBrainsMonoRegular', sans-serif; display: flex; align-items: center; - padding: 20px; background-color: linear-gradient(#141e30, #243b55); - margin-top: 20px; - margin-bottom: 20px; - margin-left: 50px; } + .description-image { - max-width: 250px; - margin-right: 20px; + max-width: 200px; + margin-right: 20px !important; } .description-text { color: #d2d0d0; } .description-text h2 { - font-size: 24px; - margin-bottom: 10px; + font-size: 16px; + /* margin-bottom: 10px; */ color: #03e9f4; } .description-text p { - font-size: 18px; + font-size: 14px; line-height: 1.5; } -.contact-form .form-control{ - border-radius:1rem; + +.form-title { + font-family: 'JetBrainsMonoRegular', sans-serif; + color: #03e9f4; + text-align: center; } -.contact-image{ - display: inline-block; - flex-direction: column; - align-items: center; - width: 100px; - height: 100px; - border-radius: 50%; - margin: 0%; + +.btn.btn-primary { + font-family: 'JetBrainsMonoRegular', sans-serif; + background: linear-gradient(#141e30, #243b55); + color: #03e9f4; + box-sizing: border-box; + box-shadow: 0 15px 25px rgba(0, 0, 0, .6); + border-radius: 5px; + margin-left: 5px; + margin-right: 5px; + height: 40px; + border: 0px; + vertical-align: middle; + width: 150px; } -.contact-image img{ - border-radius: 6rem; - width: 400px; - height: 450px; - margin-top: 50px; - margin-bottom: 0px; +.btn.btn-primary:hover { + color: #141e30 !important; + background: #03e9f4; + border-radius: 5px; + box-shadow: 0 0 2px #03e9f4, + 0 0 5px #03e9f4, + 0 0 10px #03e9f4, + 0 0 15px #03e9f4; +} + +.contact-form .form-control{ + font-family: 'JetBrainsMonoRegular', sans-serif; + border-radius:1rem; } .contact-form form h3 { @@ -126,8 +139,8 @@ body { color: #fff; cursor: pointer; } -.btnContactSubmit -{ + +.btnContactSubmit { width: 50%; border-radius: 1rem; padding: 1.5%; diff --git a/app/static/css/footer.css b/app/static/css/footer.css index 89294daa..c22bfab5 100644 --- a/app/static/css/footer.css +++ b/app/static/css/footer.css @@ -33,7 +33,7 @@ color: #d2d0d0; background: transparent !important; font-size: 14px; - text-align: left; + text-align: center; margin: 2px; padding: 0px; } \ No newline at end of file diff --git a/app/static/css/guilds/create_guild.css b/app/static/css/guilds/create_guild.css new file mode 100644 index 00000000..653b73f9 --- /dev/null +++ b/app/static/css/guilds/create_guild.css @@ -0,0 +1,164 @@ +@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500&display=swap'); +@font-face { + font-family: 'JetBrainsMonoRegular'; + src: url('/static/fonts/ttf/JetBrainsMono-Regular.ttf') format('woff'); + font-family: 'JetBrainsMonoBold'; + src: url('/static/fonts/ttf/JetBrainsMono-Bold.ttf') format('woff'); +} + + +html { + font-family: 'JetBrainsMonoRegular', sans-serif; + background-size: cover; + background-position: right bottom; + background-color: #243b55; +} + +body { + flex-direction: column; + font-family: 'JetBrainsMonoRegular', sans-serif; + background: linear-gradient(#141e30, #243b55) !important; + background-size: cover; + background-position: repeat; + align-items: center; + justify-content: center; +} + +.alert { + margin-top: 5px; + margin-bottom: 10px; + padding: 10px; + font-family: 'JetBrainsMonoRegular', sans-serif; + font-size: 16px; +} + +.alert-success { + color: #4CAF50; +} + +.alert-error { + color: #f44336; +} + +.alert-info { + color: #2196F3; +} + + +.main-container { + min-height: 100vb !important; + margin-top: 50px; +} + +.crt_guild_box { + background: rgba(0, 0, 0, 0.4) !important; + box-shadow: 0 15px 25px rgba(0, 0, 0, .4) !important; +} + +.txt-1 { + font-family: 'JetBrainsMonoRegular', sans-serif; + font-size: 32px; + color: #03e9f4; + margin-bottom: 20px; +} + +.text_label { + color: #03e9f4; + font-size: 20px; +} + +.form-control { + display: flex; + color: #d2d0d0 !important; + flex-direction: column; + background: rgba(0, 0, 0, .5) !important; + box-shadow: 0 15px 25px rgba(0, 0, 0, .6); + border-radius: 2px; + margin-bottom: 20px; + margin-top: 10px; + margin-left: 10px; + padding: 10px; + border: 0px; +} + +/* Autofill styling */ +.form-control:-webkit-autofill, +.form-control:-webkit-autofill:hover, +.form-control:-webkit-autofill:focus, +.form-control:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 30px rgba(0, 0, 0, 0.8) inset !important; /* Adjust this color to match your input background */ + -webkit-text-fill-color: #03e9f4 !important; /* Text color */ +} + +.crt_guild_button { + font-family: 'JetBrainsMonoBold', sans-serif !important; + display: inline-block; + padding: 10px 20px; + color: #03e9f4; + background-color: rgba(0, 0, 0, .5) !important; + font-size: 16px; + text-decoration: none; + text-transform: uppercase; + overflow: hidden; + transition: .5s; + margin-top: 30px; + margin-bottom: 20px; + letter-spacing: 4px; + border-radius: 5px; + cursor: pointer; + border: 0; + width: 20%; +} + +.crt_guild_button:hover { + background: #03e9f4; + color: #fff; + box-shadow: 0 0 5px #03e9f4, + 0 0 25px #03e9f4, + 0 0 50px #03e9f4, + 0 0 100px #03e9f4; +} + + +/* Avatar Styling */ +.guild_avatar { + position: relative; + display: flex; + flex-direction: column; + border: 7px solid rgba(3, 232, 244, 0.23); + border-radius: 50%; + overflow: hidden; + font-family: 'JetBrainsMonoRegular', sans-serif; + width: 200px; + height: 200px; + margin-top: 60px; + box-sizing: border-box; + box-shadow: + 20px 20px 45px rgba(0, 0, 0, 0.5), + inset 0 5px 10px rgba(255, 255, 255, 0.2), + inset 0 -5px 15px rgba(0, 0, 0, 0.3); + background-size: cover; + background-position: center; + transition: transform 0.3s, box-shadow 0.3s; +} + +.guild_avatar:hover { + box-shadow: + 30px 30px 60px rgba(0, 0, 0, 0.8), + inset 0 5px 15px rgba(255, 255, 255, 0.3), + inset 0 -5px 20px rgba(0, 0, 0, 0.5); +} + +.ca-2 { + margin-bottom: 20px; + color: #03e9f4; +} + +.ca-3::-webkit-file-upload-button { + font-family: 'JetBrainsMonoRegular', sans-serif; + border-radius: 5px; + background: linear-gradient(#141e30, #243b55); + color: #03e9f4; + +} \ No newline at end of file diff --git a/app/static/css/guilds/guilds_list.css b/app/static/css/guilds/guilds_list.css new file mode 100644 index 00000000..65c0443f --- /dev/null +++ b/app/static/css/guilds/guilds_list.css @@ -0,0 +1,61 @@ +@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500&display=swap'); +@font-face { + font-family: 'JetBrainsMonoRegular'; + src: url('/static/fonts/ttf/JetBrainsMono-Regular.ttf') format('woff'); + font-family: 'JetBrainsMonoBold'; + src: url('/static/fonts/ttf/JetBrainsMono-Bold.ttf') format('woff'); +} + + +html { + font-family: 'JetBrainsMonoRegular', sans-serif; + background-size: cover; + background-position: right bottom; + background-color: #243b55; +} + +body { + flex-direction: column; + font-family: 'JetBrainsMonoRegular', sans-serif; + background: linear-gradient(#141e30, #243b55) !important; + background-size: cover; + background-position: repeat; + align-items: center; + justify-content: center; +} + +.guild_card { + background: rgba(0, 0, 0, .5) !important; + box-shadow: 0 15px 25px rgba(0, 0, 0, .6); + color: #03e9f4 !important; +} + +/* Avatar styling */ +.guild_avatar { + position: relative; + display: flex; + flex-direction: column; + border: 5px solid rgba(3, 232, 244, 0.23); + border-radius: 50%; + overflow: hidden; + font-family: 'JetBrainsMonoRegular', sans-serif; + width: 15%; + height: 15%; + box-sizing: border-box; + box-shadow: + 20px 20px 45px rgba(0, 0, 0, 0.5), + inset 0 5px 10px rgba(255, 255, 255, 0.2), + inset 0 -5px 15px rgba(0, 0, 0, 0.3); + background-size: cover; + background-position: center; + transition: transform 0.3s, box-shadow 0.3s; + cursor: pointer; +} + +.guild_avatar:hover { + box-shadow: + 30px 30px 60px rgba(0, 0, 0, 0.8), + inset 0 5px 15px rgba(255, 255, 255, 0.3), + inset 0 -5px 20px rgba(0, 0, 0, 0.5); +} diff --git a/app/static/css/homepage.css b/app/static/css/homepage.css index d72915eb..b7b77b97 100644 --- a/app/static/css/homepage.css +++ b/app/static/css/homepage.css @@ -19,10 +19,7 @@ body { flex-direction: column; font-family: 'JetBrainsMonoRegular', sans-serif; background: linear-gradient(#141e30, #243b55) !important; - background-size: cover; - background-position: repeat; - align-items: center; - justify-content: center; + } .alert { @@ -43,26 +40,13 @@ body { } -.main_container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - /* background: linear-gradient(#141e30, #243b55); */ - background-size: cover; - background-position: repeat; -} - .description-container { font-family: 'JetBrainsMonoRegular', sans-serif; display: flex; align-items: center; - padding: 20px; background-color: linear-gradient(#141e30, #243b55); - margin-top: 5px !important; - margin-bottom: 20px !important; - margin-left: 10px !important; } + .description-image { max-width: 300px; margin-right: 20px !important; @@ -72,7 +56,7 @@ body { } .description-text h2 { font-size: 16px; - margin-bottom: 10px; + /* margin-bottom: 10px; */ color: #03e9f4; } .description-text p { @@ -177,16 +161,23 @@ button { } .homepage_box { - background: rgba(0, 0, 0, 0.4) !important; + background: rgba(0, 0, 0, 0.5) !important; box-shadow: 0 15px 25px rgba(0, 0, 0, .4) !important; } +.homepage_box.title { + font-family: 'JetBrainsMonoRegular', sans-serif; + font-size: 24px; + color: #03e9f4; + flex: 1; +} .box { font-family: 'JetBrainsMonoRegular', sans-serif !important; - background: rgba(0, 0, 0, 0) !important; - /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); */ - /* transition: transform 0.3s ease, box-shadow 0.3s ease !important; */ + background: rgba(0, 0, 0, 0.5) !important; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); + border-radius: 10px; + transition: transform 0.3s ease, box-shadow 0.3s ease !important; } @@ -258,3 +249,32 @@ button { max-width: 95% !important; } } + + +/* Guild Section */ +.guild_button { + font-family: 'JetBrainsMonoBold', sans-serif !important; + display: inline-block; + padding: 10px 20px; + color: #03e9f4; + background-color: rgba(0, 0, 0, .5) !important; + font-size: 16px; + text-decoration: none; + text-transform: uppercase; + overflow: hidden; + transition: .5s; + margin-top: 30px; + letter-spacing: 4px; + border-radius: 5px; + cursor: pointer; + border: 0; +} + +.guild_button:hover { + background: #03e9f4; + color: #fff; + box-shadow: 0 0 5px #03e9f4, + 0 0 25px #03e9f4, + 0 0 50px #03e9f4, + 0 0 100px #03e9f4; +} \ No newline at end of file diff --git a/app/static/css/navbar.css b/app/static/css/navbar.css index f9314428..3ce5edd2 100644 --- a/app/static/css/navbar.css +++ b/app/static/css/navbar.css @@ -7,21 +7,101 @@ } .skill_forge_image { - @apply relative flex justify-center items-center w-15 h-15 mr-2 rounded-full bg-gradient-to-r from-blue-900 to-blue-600 cursor-pointer; - position: relative; - display: flex; justify-content: center; align-items: center; - width: 60px; - height: 60px; - margin-right: 10px; + width: 48px; + height: 48px; border-radius: 50%; - background: linear-gradient(#141e30, #243b55); cursor: pointer; +} +.nav_bar { + background: #141e30; /* Fully transparent background */ + /* box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4) !important; */ + margin-bottom: 10px; + align-items: center; + transition: all 0.3s ease; /* Smooth transition for hover effects */ } -.skill_forge_image img { +.nav-btn { + font-family: 'JetBrainsMonoRegular', sans-serif; + color: #03e9f4 !important; + border-radius: 5px; + margin-left: 5px; + margin-right: 5px; + transition: .5s; + justify-content: center !important; + margin-bottom: 0px !important; + background: transparent; /* Ensure background is transparent */ + border: none; /* Remove border */ + padding: 10px 20px; /* Add padding for better spacing */ +} + +.nav-btn:hover { + color: #03e9f4 !important; + text-shadow: 0 0 5px #03e9f4, + 0 0 10px #03e9f4, + 0 0 20px #03e9f4, + 0 0 30px #03e9f4; + background: transparent !important; +} + + +.icon-wrapper { + display: inline-block; +} + +/* Sign Out Icon */ +.sign-out-icon { + color: #007bff; /* Blue color for the sign-out icon */ +} + +.sign-out-icon:hover i { + text-shadow: 0 0 2px #007bff, + 0 0 10px #007bff, + 0 0 20px #007bff, + 0 0 30px #007bff !important; +} + +/* Settings Icon */ +.settings-icon { + color: #ff0000; /* Red color for the settings icon */ +} + +.settings-icon:hover i { + text-shadow: 0 0 2px #ff0000, + 0 0 10px #ff0000, + 0 0 20px #ff0000, + 0 0 30px #ff0000 !important; +} + +/* User Icon */ +.user-icon { + color: #28a745; /* Green color for the user icon */ +} + +.user-icon:hover i { + text-shadow: 0 0 2px #28a745, + 0 0 10px #28a745, + 0 0 20px #28a745, + 0 0 30px #28a745 !important; +} + +.admin-btn { + font-family: 'JetBrainsMonoRegular', sans-serif; + cursor: pointer; + border-radius: 5px; +} + +/* Optional: if you want the glow effect only on the text */ +.admin-btn:hover { + text-shadow: 0 0 2px #ff0000ba, + 0 0 20px #ff0000ba, + 0 0 20px #ff0000ba, + 0 0 20px #ff0000ba !important; +} + +/* .skill_forge_image img { @apply max-w-full max-h-full pr-2; display: flex; max-width: 100%; @@ -35,14 +115,13 @@ .navbar-nav { @apply font-jetbrains; -} +} */ -.nav-link { +/* .nav-link { @apply cursor-pointer bg-gradient-to-r from-blue-900 to-blue-600 text-blue-200 shadow-lg rounded-md mx-1 h-10 flex items-center transition duration-500; -} +} */ -.navbar-nav .nav-link { - @apply text-blue-200 !important; +/* .navbar-nav .nav-link { font-family: 'JetBrainsMonoRegular', sans-serif; background: linear-gradient(#141e30, #243b55) !important; color: #03e9f4 !important; @@ -55,9 +134,9 @@ vertical-align: middle; transition: .5s; -} +} */ -.navbar-nav .nav-link:hover { +/* .navbar-nav .nav-link:hover { @apply text-blue-900 bg-blue-200 shadow-blue-900/25; color: #141e30 !important; background: #03e9f4 !important; @@ -150,4 +229,4 @@ nav { #navbarNav .navbar-nav .left-side ul { @apply flex list-none; -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/app/static/css/table.css b/app/static/css/table.css index 1a9eef1d..d04ecca7 100644 --- a/app/static/css/table.css +++ b/app/static/css/table.css @@ -19,6 +19,16 @@ table.dataTable thead .sorting_desc_disabled:before { bottom: .5em; } + +.table_bg { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)); + background-color: transparent; + color: #d2d0d0 !important; + font-family: 'JetBrainsMonoRegular', sans-serif; + border-radius: 8px; +} + + .row.justify-content-center { box-shadow: 0 15px 25px rgba(0, 0, 0, 0) !important; box-sizing: border-box; @@ -48,6 +58,11 @@ table.dataTable thead .sorting_desc_disabled:before { padding: 0px !important; } + + + + + .col-sm-12.col-md-6 .dataTables_filter { display: flex; flex-direction: row; @@ -84,7 +99,8 @@ table.dataTable thead .sorting_desc_disabled:before { margin: 0px !important; padding: 10px !important; justify-content: center; - background: linear-gradient(#141e30, #243b55) !important; + /* background: linear-gradient(#141e30, #243b55) !important; */ + background: rgba(0, 0, 0, .5) !important; box-sizing: border-box; box-shadow: 0 15px 25px rgba(0, 0, 0, .6); border-radius: 10px !important; diff --git a/app/static/css/task_page.css b/app/static/css/task_page.css index 1cbe7d1a..4a05d441 100644 --- a/app/static/css/task_page.css +++ b/app/static/css/task_page.css @@ -28,32 +28,32 @@ body { display: flex; flex-direction: column; font-family: 'JetBrainsMonoRegular', sans-serif; - /* font-size: 20px; */ justify-content: center; align-items: center; - color:#d2d0d0; - margin-top: 100px; - margin-bottom: 0px; + color: #03e9f4; +} + +.top_label.title { + font-size: 30px; + color: #03e9f4; + margin-bottom: 2%; } .top_label.description { - font-size: 20px; - margin-top: 10px; - margin-left: 50px; - margin-right: 50px; + color: #d2d0d0; + font-size: 16px; + margin-left: 10%; + margin-right: 10%; text-align: center; } -.container { - display: flex; - flex-direction: column; - margin-top: 100px !important; +.pl_container { + margin-top: 1% !important; justify-content: center !important; align-content: center !important; - width: 90% !important; } -.row { +/* .row { color: #d2d0d0; } @@ -98,4 +98,4 @@ th { td { color: #d2d0d0 !important; -} +} */ diff --git a/app/static/css/user_profile.css b/app/static/css/user_profile.css index 1ed38157..c5d0010e 100644 --- a/app/static/css/user_profile.css +++ b/app/static/css/user_profile.css @@ -45,33 +45,102 @@ body { color: #2196F3; } +.user_profile_info { + font-family: 'JetBrainsMonoRegular', sans-serif; + color: #d2d0d0; + border-radius: 20px !important; +} -.user_info { +.user_profile_info.left_pane { + background: rgba(0, 0, 0, 0.5) !important; + box-shadow: 0 15px 25px rgba(0, 0, 0, .4) !important; +} + + +.user_profile_info.username { font-family: 'JetBrainsMonoRegular', sans-serif; - /* background-color: red; */ - display: flex; - flex-direction: row; - position: relative; - margin-top: 60px; - margin-left: 10%; - margin-right: 10%; - margin-bottom: 40px; - width: 80%; - /* height: auto; */ - box-sizing: border-box; - box-shadow: 0 25px 25px rgba(0, 0, 0, .5); - border-radius: 10px; + color: #03e9f4; + font-size: 24px; + text-align: center; + margin-top: 20px; + margin-bottom: 2px; } -.left_pane { - position: relative; - display: flex; - flex-direction: column; - margin-left: 20px; - margin-right: 20px; +.user_profile_info.name { + font-family: 'JetBrainsMonoRegular', sans-serif; + color: #d2d0d0; + font-size: 12px; + text-align: center; + margin-top: 0px; + margin-bottom: 10px; +} + +.user_profile_info.rank { + font-family: 'JetBrainsMonoRegular', sans-serif; + color: #d2d0d0; + text-align: center; + margin-top: 10px; + margin-bottom: 0px; +} + + +.user_profile_info.level { + font-family: 'JetBrainsMonoRegular', sans-serif; + color: #d2d0d0; + text-align: center; + margin-top: 2px; + margin-bottom: 0px; +} + +.user_profile_info.xp_points { + background: linear-gradient(90deg, #03858b, #03e9f4); +} + + +.user_profile_info.title { + font-family: 'JetBrainsMonoRegular', sans-serif; + color: #03e9f4; +} + +.user_profile_info.about_me_text { + font-size: 14px; + color: #d2d0d0; +} + +.user_profile_info.input_field { + font-family: 'JetBrainsMonoRegular', sans-serif; + background: linear-gradient(#141e304b, #243b5548); + color: #d2d0d0; + box-sizing: border-box; + box-shadow: 0 15px 25px rgba(0, 0, 0, .6); + border-radius: 5px; + margin-top: 5px; + margin-bottom: 5px; + height: 40px; + border: 0px; + vertical-align: middle; +} +.user_profile_info.about_me_field { + font-family: 'JetBrainsMonoRegular', sans-serif; + background: linear-gradient(#141e304b, #243b5548); + color: #d2d0d0; + box-sizing: border-box; + box-shadow: 0 15px 25px rgba(0, 0, 0, .6); + border-radius: 5px; + margin-top: 5px; margin-bottom: 20px; - align-items: center; - width: 20% + border: 0px; + text-align: justify; +} + + +.achievement_descr { + font-family: 'JetBrainsMonoRegular', sans-serif; + color: #03e9f4; + font-size: 12px; + text-align: center; + margin-top: 0px; + margin-bottom: 0px; } .user_avatar { @@ -82,9 +151,6 @@ body { border-radius: 50%; overflow: hidden; font-family: 'JetBrainsMonoRegular', sans-serif; - width: 200px; - height: 200px; - margin-top: 60px; box-sizing: border-box; box-shadow: 20px 20px 45px rgba(0, 0, 0, 0.5), @@ -97,54 +163,11 @@ body { .user_avatar:hover { box-shadow: - 30px 30px 60px rgba(0, 0, 0, 0.8), + 15px 15px 30px #03e9f4, inset 0 5px 15px rgba(255, 255, 255, 0.3), inset 0 -5px 20px rgba(0, 0, 0, 0.5); } -.user_avatar img { - width: 100%; - /* Make the image fill the circular div */ - height: auto; - /* Maintain aspect ratio */ - display: block; - /* Remove any default spacing */ -} - -.social_links { - display: flex; - flex-direction: column; - position: relative; - font-family: 'JetBrainsMonoRegular', sans-serif; - vertical-align: middle; - color: #03e9f4; - font-size: 12px; - text-decoration: none; - text-transform: uppercase; - overflow: hidden; - transition: .5s; - letter-spacing: 1px; - margin-top: 10px; - border: 0px; - align-items: center; - justify-content: center; -} - -.social_links.title { - margin-top: 10px; -} - -.social_links.icons { - display: flex; - flex-direction: row; - margin-top: 0px; - margin-bottom: 0px; - margin-left: 0px; - margin-right: 0px; - align-items: center; - justify-content: center; - gap: 8px; -} .online_status { text-align: center; @@ -177,321 +200,24 @@ body { margin-right: 0px; } -.user_level { - display: flex; - flex-direction: column; - margin-top: 20px; - align-items: center; - justify-content: center; - width: 100%; - -} -.level_container { - display: flex; - flex-direction: column; - margin-top: 20px; - justify-content: center; - align-items: center; - width: 100%; -} - -.level_info { - display: flex; - flex-direction: column; - margin-top: 10px; - align-items: center; - justify-content: center; -} - -.xp_points_container { - display: flex; - flex-direction: column; - margin-top: 10px; - align-items: center; - width: 100%; -} - -.progress_bar_container { - display: flex; - flex-direction: column; - align-items: left; - width: 100%; -} - -.progress_bar { - display: flex; - flex-direction: column; - background: linear-gradient(90deg, #ff6347, #ffa07a); - align-items: center; - border-radius: 5px; -} - - -.user_name.ch_av_btn { - position: relative; - font-family: 'JetBrainsMonoRegular', sans-serif; - display: inline-block; - vertical-align: middle; - padding: 10px 20px; - color: #03e9f4; - background-color: #141e30; - font-size: 12px; - text-decoration: none; - text-transform: uppercase; - overflow: hidden; - transition: .5s; - letter-spacing: 1px; - margin: 10px; - border: 0px; - height: 35px; - width: 75%; - align-items: center; - border-radius: 5px; - cursor: pointer; -} - -.user_name { - font-family: 'JetBrainsMonoRegular', sans-serif; - font-size: 20px; - color: #03e9f4; - text-align: center; - margin-top: 20px; - /* margin: 5px; */ - /* margin-top: auto; */ -} - - -.right_pane { - position: relative; - display: flex; - flex-direction: column; - margin-left: 20px; - margin-right: 20px; - margin-top: 20px; - margin-bottom: 5px; - align-items: center; - width: 100%; -} - -.user_details { - position: relative; - background: rgba(0, 0, 0, .5); - box-sizing: border-box; - box-shadow: 0 10px 20px rgba(0, 0, 0, .5); - border-radius: 10px; - width: 100%; - display: flex; - flex-direction: row; - margin-left: 20px; - margin-right: 20px; - margin-bottom: 10px; - align-items: left; - /* padding-top: 7px; */ -} - -.user_stats { - position: relative; - background: rgba(0, 0, 0, .5); - box-sizing: border-box; - box-shadow: 0 10px 20px rgba(0, 0, 0, .5); - border-radius: 10px; - width: auto; - display: flex; - flex-direction: column; - margin-left: 20px; - margin-right: 20px; - margin-bottom: 10px; - height: auto; - vertical-align: middle; - align-items: left; -} - -.user_stats.grid-container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjust column width as needed */ - gap: 10px; /* Adjust gap between items as needed */ - -} - -.user_stats.sub_status { - position: relative; - background: rgba(0, 0, 0, .5); - box-sizing: border-box; - box-shadow: 0 10px 20px rgba(0, 0, 0, .5); - border-radius: 10px; - width: auto; - display: flex; - flex-direction: row; - margin-left: 60px; - margin-right: 20px; - /* margin-bottom: 10px; */ - align-items: left; - /* padding-top: 7px; */ - height: auto; -} - -.center_pane_form { - display: flex; - flex-direction: column; - width: 100%; - margin-top: 20px; -} - -.center_pane { - display: flex; - flex-direction: column; - /* margin-top: 20px; */ - margin-bottom: 5px; - width: auto; -} .left_stats { color: #03e9f4; - display: flex; - flex-direction: column; - margin: 0 0 0 10px; - width: 10%; - padding: 0px; - margin-bottom: 0px; - align-items: left; - vertical-align: middle; -} - -.left_stats.level { - color: #03e9f4; - display: flex; - flex-direction: column; - margin: 0 0 0 10px; - width: 40%; + width: 100%; padding: 0px; - margin-bottom: 0px; - align-items: center; + text-align: left; vertical-align: middle; + margin: 4px; } -.left_stats.stats { - color: #03e9f4; - display: flex; - flex-direction: column; - margin: 0 0 0 10px; - width: 20%; - padding: 0px; - margin-bottom: 0px; - align-items: left; - vertical-align: middle; - -} - -.left_status.h3 { - color: #03e9f4; - display: flex; - flex-direction: column; - margin: 0 0 0 10px; - width: auto; - margin-bottom: 5px; - vertical-align: middle; - -} .right_stats { - display: flex; - flex-direction: column; color: #d2d0d0; - margin: 0 0 0 10px; width: 100%; - justify-content: left; - align-items: left; - padding: 0px; - margin-bottom: 0px; - vertical-align: middle; -} - -.right_stats.level { - color: #d2d0d0; - display: flex; - flex-direction: column; - margin: 0 0 0 10px; - width: 50%; - padding: 0px; - margin-bottom: 0px; - align-items: center; - vertical-align: middle; -} - -.right_stats.stats { - color: #d2d0d0; - display: flex; - flex-direction: column; - margin: 0 0 0 10px; - width: 50%; - padding: 0px; - margin-bottom: 0px; - align-items: left; - vertical-align: middle; -} - -.right_stats_edit { - display: flex; - flex-direction: column; - background-color: transparent; - border: 0px; - color: #d2d0d0; - margin-left: 10px; - width: 99%; - outline: none; - cursor: text; - resize: none; - height: 24px; padding: 0px; + margin: 0px; + text-align: right; vertical-align: middle; - align-items: left; -} - -.right_stats_edit:hover { - color: #d2d0d0; - text-shadow: 5px 0px 20px #03e9f4; -} - -.btn-section { - display: flex; - flex-direction: row; - margin-top: 20px; - margin-right: 20px; - justify-content: right; -} - -.submit-buton { - font-family: 'JetBrainsMonoRegular', sans-serif; - background: linear-gradient(#141e30, #243b55); - color: #03e9f4; - box-sizing: border-box; - box-shadow: 0 15px 25px rgba(0, 0, 0, .6); - border-radius: 5px; - margin-left: 5px; - margin-right: 5px; - height: 40px; - border: 0px; - vertical-align: middle; - width: 150px; -} - -.submit-buton:hover { - color: #141e30 !important; - background: #03e9f4; - border-radius: 5px; - box-shadow: 0 0 2px #03e9f4, - 0 0 5px #03e9f4, - 0 0 10px #03e9f4, - 0 0 15px #03e9f4; -} - -.change-avatar-section { - display: flex; - flex-direction: row; - justify-content: right; - align-items: center; - margin-top: 20px; - margin-right: 20px; } .ca-1 { @@ -534,13 +260,13 @@ body { box-shadow: 0 15px 25px rgba(0, 0, 0, .6); border-radius: 5px; margin-left: 5px; + padding: 5px; height: 40px; border: 0px; vertical-align: middle; width: auto; } - .ca-4:hover { color: #141e30 !important; background: #03e9f4; @@ -552,125 +278,64 @@ body { } -/* Achievments Styling */ -.achv-container { - display: flex; - flex-wrap: wrap; - justify-content: center; /* Adjust alignment as needed */ - padding: 10px; - gap: 20px; /* Adjust gap between items as needed */ -} - -.achv { - position: relative; - display: inline-block; - align-items: center; - width: 130px; - height: 130px; - font-size: 14px; - color: #fff; - background: none; - border: 10px solid; - border-radius: 100%; - /* Adjusted border-radius for square effect */ - position: relative; - transition: .3s; - cursor: pointer; -} - -.achv-descr { +.labels { + color: #d2d0d0; + /* margin-left: 20px; */ display: flex; flex-direction: row; - text-align: center; - align-items: center; - position: absolute; - padding: 5px; - top: 105%; /* Position below the achievement */ - width: 200px; - background-color: rgba(0, 0, 0, 1.7); - border-radius: 10px; - color: #03e9f4; - opacity: 0; /* Initially hidden */ - transition: opacity 0.3s ease; -} - -.achv:hover .achv-descr { - opacity: 1; /* Show on hover */ } -.achv:before { - content: ""; - position: absolute; - inset: -8px; - padding: 10px; - border-radius: 50%; - background: conic-gradient(#03e9f4, - #243b55 30deg 120deg, - #03e9f4 150deg 180deg, - #243b55 210deg 300deg, - #03e9f4 330deg); - -webkit-mask: - linear-gradient(#000 0 0) content-box, - linear-gradient(#000 0 0); - -webkit-mask-composite: xor; - mask-composite: intersect -} -.achv:before, -.achv:after { - transition: .5s, 99999s 99999s transform; +.labels.Approved { + color: #0bf403bd !important; } -.achv:hover { - box-shadow: 0 0 0 1px #666; - +.labels.Rejected { + color: #f73333f3 !important; } -.achv:hover:before, -.achv:hover:after { - transform: rotate(36000deg); - transition: .5s, 600s linear transform; +.labels.Pending { + color: #f79a04 !important; } -.achv:before { - background-color: #222; - border: 2px solid #333; +.btn-section { + display: flex; + flex-direction: row; + margin-top: 20px; + margin-right: 20px; + justify-content: right; } -.achv { - margin: 0px; - min-height: 10vh; - display: grid; - place-content: center; - grid-auto-flow: column; - background-color: #111; +.submit-buton { + font-family: 'JetBrainsMonoRegular', sans-serif; + background: linear-gradient(#141e30, #243b55); + color: #03e9f4; + box-sizing: border-box; + box-shadow: 0 15px 25px rgba(0, 0, 0, .6); + border-radius: 5px; + margin-left: 5px; + margin-right: 5px; + height: 40px; + border: 0px; + vertical-align: middle; + width: 150px; } -.achv>img { - position: absolute; - width: 100%; - height: 100%; - z-index: 0; - border-radius: 100%; +.submit-buton:hover { + color: #141e30 !important; + background: #03e9f4; + border-radius: 5px; + box-shadow: 0 0 2px #03e9f4, + 0 0 5px #03e9f4, + 0 0 10px #03e9f4, + 0 0 15px #03e9f4; } - -.labels { - color: #d2d0d0; - /* margin-left: 20px; */ +.change-avatar-section { display: flex; flex-direction: row; + justify-content: right; + align-items: center; + margin-top: 20px; + margin-right: 20px; } - - -.labels.Approved { - color: #0bf403bd !important; -} - -.labels.Rejected { - color: #f73333f3 !important; -} - -.labels.Pending { - color: #f79a04 !important; -} \ No newline at end of file diff --git a/app/static/css/user_profile_BAK.css b/app/static/css/user_profile_BAK.css new file mode 100644 index 00000000..bb9c04f5 --- /dev/null +++ b/app/static/css/user_profile_BAK.css @@ -0,0 +1,674 @@ +@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500&display=swap'); + +@font-face { + font-family: 'JetBrainsMonoRegular'; + src: url('/static/fonts/ttf/JetBrainsMono-Regular.ttf') format('woff'); + font-family: 'JetBrainsMonoBold'; + src: url('/static/fonts/ttf/JetBrainsMono-Bold.ttf') format('woff'); +} + +html { + font-family: 'JetBrainsMonoRegular', sans-serif; + background-size: cover; + background-position: right bottom; + background-color: #243b55; +} + +body { + flex-direction: column; + font-family: 'JetBrainsMonoRegular', sans-serif; + background: linear-gradient(#141e30, #243b55) !important; + background-size: cover; + background-position: repeat; + align-items: center; + justify-content: center; +} + +.alert { + margin-top: 5px; + margin-bottom: 10px; + padding: 10px; + font-family: 'JetBrainsMonoRegular', sans-serif; + font-size: 16px; +} + +.alert-success { + color: #4CAF50; +} + +.alert-error { + color: #f44336; +} + +.alert-info { + color: #2196F3; +} + + +.user_info { + font-family: 'JetBrainsMonoRegular', sans-serif; + /* background-color: red; */ + display: flex; + flex-direction: row; + position: relative; + margin-top: 60px; + margin-left: 10%; + margin-right: 10%; + margin-bottom: 40px; + width: 80%; + /* height: auto; */ + box-sizing: border-box; + box-shadow: 0 25px 25px rgba(0, 0, 0, .5); + border-radius: 10px; +} + +.left_pane { + position: relative; + display: flex; + flex-direction: column; + margin-left: 20px; + margin-right: 20px; + margin-bottom: 20px; + align-items: center; + width: 20% +} + +.user_avatar { + position: relative; + display: flex; + flex-direction: column; + border: 7px solid rgba(3, 232, 244, 0.23); + border-radius: 50%; + overflow: hidden; + font-family: 'JetBrainsMonoRegular', sans-serif; + margin-top: 60px; + box-sizing: border-box; + box-shadow: + 20px 20px 45px rgba(0, 0, 0, 0.5), + inset 0 5px 10px rgba(255, 255, 255, 0.2), + inset 0 -5px 15px rgba(0, 0, 0, 0.3); + background-size: cover; + background-position: center; + transition: transform 0.3s, box-shadow 0.3s; +} + +.user_avatar:hover { + box-shadow: + 30px 30px 60px rgba(0, 0, 0, 0.8), + inset 0 5px 15px rgba(255, 255, 255, 0.3), + inset 0 -5px 20px rgba(0, 0, 0, 0.5); +} + +.user_avatar img { + width: 100%; + /* Make the image fill the circular div */ + height: auto; + /* Maintain aspect ratio */ + display: block; + /* Remove any default spacing */ +} + +.social_links { + display: flex; + flex-direction: column; + position: relative; + font-family: 'JetBrainsMonoRegular', sans-serif; + vertical-align: middle; + color: #03e9f4; + font-size: 12px; + text-decoration: none; + text-transform: uppercase; + overflow: hidden; + transition: .5s; + letter-spacing: 1px; + margin-top: 10px; + border: 0px; + align-items: center; + justify-content: center; +} + +.social_links.title { + margin-top: 10px; +} + +.social_links.icons { + display: flex; + flex-direction: row; + margin-top: 0px; + margin-bottom: 0px; + margin-left: 0px; + margin-right: 0px; + align-items: center; + justify-content: center; + gap: 8px; +} + +.online_status { + text-align: center; + font-size: 14px; + display: flex; + flex-direction: column; + color: #35a202; + margin-top: 10px; + width: 100%; +} + +.online_status.title { + text-align: center; + display: flex; + flex-direction: column; + margin-top: 0px; + margin-bottom: 0px; + margin-left: 0px; + margin-right: 0px; +} + +.online_status.title.offline { + text-align: center; + color: #f44703; + display: flex; + flex-direction: column; + margin-top: 0px; + margin-bottom: 0px; + margin-left: 0px; + margin-right: 0px; +} + +.user_level { + display: flex; + flex-direction: column; + margin-top: 20px; + align-items: center; + justify-content: center; + width: 100%; + +} +.level_container { + display: flex; + flex-direction: column; + margin-top: 20px; + justify-content: center; + align-items: center; + width: 100%; +} + +.level_info { + display: flex; + flex-direction: column; + margin-top: 10px; + align-items: center; + justify-content: center; +} + +.xp_points_container { + display: flex; + flex-direction: column; + margin-top: 10px; + align-items: center; + width: 100%; +} + +.progress_bar_container { + display: flex; + flex-direction: column; + align-items: left; + width: 100%; +} + +.progress_bar { + display: flex; + flex-direction: column; + background: linear-gradient(90deg, #ff6347, #ffa07a); + align-items: center; + border-radius: 5px; +} + + +.user_name.ch_av_btn { + position: relative; + font-family: 'JetBrainsMonoRegular', sans-serif; + display: inline-block; + vertical-align: middle; + padding: 10px 20px; + color: #03e9f4; + background-color: #141e30; + font-size: 12px; + text-decoration: none; + text-transform: uppercase; + overflow: hidden; + transition: .5s; + letter-spacing: 1px; + margin: 10px; + border: 0px; + height: 35px; + width: 75%; + align-items: center; + border-radius: 5px; + cursor: pointer; +} + +.user_name { + font-family: 'JetBrainsMonoRegular', sans-serif; + font-size: 20px; + color: #03e9f4; + text-align: center; + margin-top: 20px; + /* margin: 5px; */ + /* margin-top: auto; */ +} + + +.right_pane { + position: relative; + display: flex; + flex-direction: column; + margin-left: 20px; + margin-right: 20px; + margin-top: 20px; + margin-bottom: 5px; + align-items: center; + width: 100%; +} + +.user_details { + position: relative; + background: rgba(0, 0, 0, .5); + box-sizing: border-box; + box-shadow: 0 10px 20px rgba(0, 0, 0, .5); + border-radius: 10px; + width: 100%; + display: flex; + flex-direction: row; + margin-left: 20px; + margin-right: 20px; + margin-bottom: 10px; + align-items: left; + /* padding-top: 7px; */ +} + +.user_stats { + position: relative; + background: rgba(0, 0, 0, .5); + box-sizing: border-box; + box-shadow: 0 10px 20px rgba(0, 0, 0, .5); + border-radius: 10px; + width: auto; + display: flex; + flex-direction: column; + margin-left: 20px; + margin-right: 20px; + margin-bottom: 10px; + height: auto; + vertical-align: middle; + align-items: left; +} + +.user_stats.grid-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjust column width as needed */ + gap: 10px; /* Adjust gap between items as needed */ + +} + +.user_stats.sub_status { + position: relative; + background: rgba(0, 0, 0, .5); + box-sizing: border-box; + box-shadow: 0 10px 20px rgba(0, 0, 0, .5); + border-radius: 10px; + width: auto; + display: flex; + flex-direction: row; + margin-left: 60px; + margin-right: 20px; + /* margin-bottom: 10px; */ + align-items: left; + /* padding-top: 7px; */ + height: auto; +} + +.center_pane_form { + display: flex; + flex-direction: column; + width: 100%; + margin-top: 20px; +} + +.center_pane { + display: flex; + flex-direction: column; + /* margin-top: 20px; */ + margin-bottom: 5px; + width: auto; +} + +.left_stats { + color: #03e9f4; + display: flex; + flex-direction: column; + margin: 0 0 0 10px; + width: 10%; + padding: 0px; + margin-bottom: 0px; + align-items: left; + vertical-align: middle; +} + +.left_stats.level { + color: #03e9f4; + display: flex; + flex-direction: column; + margin: 0 0 0 10px; + width: 40%; + padding: 0px; + margin-bottom: 0px; + align-items: center; + vertical-align: middle; +} + +.left_stats.stats { + color: #03e9f4; + display: flex; + flex-direction: column; + margin: 0 0 0 10px; + width: 20%; + padding: 0px; + margin-bottom: 0px; + align-items: left; + vertical-align: middle; + +} + +.left_status.h3 { + color: #03e9f4; + display: flex; + flex-direction: column; + margin: 0 0 0 10px; + width: auto; + margin-bottom: 5px; + vertical-align: middle; + +} + +.right_stats { + display: flex; + flex-direction: column; + color: #d2d0d0; + margin: 0 0 0 10px; + width: 100%; + justify-content: left; + align-items: left; + padding: 0px; + margin-bottom: 0px; + vertical-align: middle; +} + +.right_stats.level { + color: #d2d0d0; + display: flex; + flex-direction: column; + margin: 0 0 0 10px; + width: 50%; + padding: 0px; + margin-bottom: 0px; + align-items: center; + vertical-align: middle; +} + +.right_stats.stats { + color: #d2d0d0; + display: flex; + flex-direction: column; + margin: 0 0 0 10px; + width: 50%; + padding: 0px; + margin-bottom: 0px; + align-items: left; + vertical-align: middle; +} + +.right_stats_edit { + display: flex; + flex-direction: column; + background-color: transparent; + border: 0px; + color: #d2d0d0; + margin-left: 10px; + width: 99%; + outline: none; + cursor: text; + resize: none; + height: 24px; + padding: 0px; + vertical-align: middle; + align-items: left; +} + +.right_stats_edit:hover { + color: #d2d0d0; + text-shadow: 5px 0px 20px #03e9f4; +} + +.btn-section { + display: flex; + flex-direction: row; + margin-top: 20px; + margin-right: 20px; + justify-content: right; +} + +.submit-buton { + font-family: 'JetBrainsMonoRegular', sans-serif; + background: linear-gradient(#141e30, #243b55); + color: #03e9f4; + box-sizing: border-box; + box-shadow: 0 15px 25px rgba(0, 0, 0, .6); + border-radius: 5px; + margin-left: 5px; + margin-right: 5px; + height: 40px; + border: 0px; + vertical-align: middle; + width: 150px; +} + +.submit-buton:hover { + color: #141e30 !important; + background: #03e9f4; + border-radius: 5px; + box-shadow: 0 0 2px #03e9f4, + 0 0 5px #03e9f4, + 0 0 10px #03e9f4, + 0 0 15px #03e9f4; +} + +.change-avatar-section { + display: flex; + flex-direction: row; + justify-content: right; + align-items: center; + margin-top: 20px; + margin-right: 20px; +} + +.ca-1 { + padding: 0px; + font-family: 'JetBrainsMonoRegular', sans-serif; + color: #03e9f4; + margin-bottom: 0px; +} + +.ca-2 { + font-family: 'JetBrainsMonoRegular', sans-serif; + color: #03e9f4; + margin-left: 10px; + margin-right: 5px; + vertical-align: middle; +} + +.ca-3 { + font-family: 'JetBrainsMonoRegular', sans-serif; + color: #03e9f4 !important; + margin-left: 10px; + margin-right: 5px; + vertical-align: middle; +} + + +.ca-3::-webkit-file-upload-button { + font-family: 'JetBrainsMonoRegular', sans-serif; + border-radius: 5px; + background: linear-gradient(#141e30, #243b55); + color: #03e9f4; + +} + +.ca-4 { + font-family: 'JetBrainsMonoRegular', sans-serif; + background: linear-gradient(#141e30, #243b55); + color: #03e9f4; + box-sizing: border-box; + box-shadow: 0 15px 25px rgba(0, 0, 0, .6); + border-radius: 5px; + margin-left: 5px; + height: 40px; + border: 0px; + vertical-align: middle; + width: auto; +} + + +.ca-4:hover { + color: #141e30 !important; + background: #03e9f4; + border-radius: 5px; + box-shadow: 0 0 2px #03e9f4, + 0 0 5px #03e9f4, + 0 0 10px #03e9f4, + 0 0 15px #03e9f4; +} + + +/* Achievments Styling */ +.achv-container { + display: flex; + flex-wrap: wrap; + justify-content: center; /* Adjust alignment as needed */ + padding: 10px; + gap: 20px; /* Adjust gap between items as needed */ +} + +.achv { + position: relative; + display: inline-block; + align-items: center; + width: 130px; + height: 130px; + font-size: 14px; + color: #fff; + background: none; + border: 10px solid; + border-radius: 100%; + /* Adjusted border-radius for square effect */ + position: relative; + transition: .3s; + cursor: pointer; +} + +.achv-descr { + display: flex; + flex-direction: row; + text-align: center; + align-items: center; + position: absolute; + padding: 5px; + top: 105%; /* Position below the achievement */ + width: 200px; + background-color: rgba(0, 0, 0, 1.7); + border-radius: 10px; + color: #03e9f4; + opacity: 0; /* Initially hidden */ + transition: opacity 0.3s ease; +} + +.achv:hover .achv-descr { + opacity: 1; /* Show on hover */ +} + +.achv:before { + content: ""; + position: absolute; + inset: -8px; + padding: 10px; + border-radius: 50%; + background: conic-gradient(#03e9f4, + #243b55 30deg 120deg, + #03e9f4 150deg 180deg, + #243b55 210deg 300deg, + #03e9f4 330deg); + -webkit-mask: + linear-gradient(#000 0 0) content-box, + linear-gradient(#000 0 0); + -webkit-mask-composite: xor; + mask-composite: intersect +} + +.achv:before, +.achv:after { + transition: .5s, 99999s 99999s transform; +} + +.achv:hover { + box-shadow: 0 0 0 1px #666; + +} + +.achv:hover:before, +.achv:hover:after { + transform: rotate(36000deg); + transition: .5s, 600s linear transform; +} + +.achv:before { + background-color: #222; + border: 2px solid #333; +} + +.achv { + margin: 0px; + min-height: 10vh; + display: grid; + place-content: center; + grid-auto-flow: column; + background-color: #111; +} + +.achv>img { + position: absolute; + width: 100%; + height: 100%; + z-index: 0; + border-radius: 100%; +} + + +.labels { + color: #d2d0d0; + /* margin-left: 20px; */ + display: flex; + flex-direction: row; +} + + +.labels.Approved { + color: #0bf403bd !important; +} + +.labels.Rejected { + color: #f73333f3 !important; +} + +.labels.Pending { + color: #f79a04 !important; +} \ No newline at end of file diff --git a/app/static/css/user_submit_quest.css b/app/static/css/user_submit_quest.css index e02cba7b..0639bfb5 100644 --- a/app/static/css/user_submit_quest.css +++ b/app/static/css/user_submit_quest.css @@ -52,28 +52,27 @@ body { font-family: 'JetBrainsMonoRegular', sans-serif; display: flex; align-items: center; - padding: 20px; background-color: linear-gradient(#141e30, #243b55); - margin-top: 20px; - margin-bottom: 20px; - margin-left: 50px; } + .description-image { - max-width: 350px; - margin-right: 20px; + max-width: 200px; + margin-right: 20px !important; } .description-text { color: #d2d0d0; } .description-text h2 { - font-size: 24px; - margin-bottom: 10px; + font-size: 16px; + /* margin-bottom: 10px; */ color: #03e9f4; } .description-text p { - font-size: 18px; + font-size: 14px; line-height: 1.5; } + + .submit-quest-container { display: flex; align-items: center; diff --git a/app/static/images/default-guild-avatar.png b/app/static/images/default-guild-avatar.png new file mode 100644 index 00000000..9ebf209d Binary files /dev/null and b/app/static/images/default-guild-avatar.png differ diff --git a/app/static/images/email.jpg b/app/static/images/email.jpg new file mode 100644 index 00000000..717acd63 Binary files /dev/null and b/app/static/images/email.jpg differ diff --git a/app/static/images/github.png b/app/static/images/github.png index 9490ffc6..b42d5dc3 100644 Binary files a/app/static/images/github.png and b/app/static/images/github.png differ diff --git a/app/static/images/guild_avatar.png b/app/static/images/guild_avatar.png new file mode 100644 index 00000000..7ff0eac8 Binary files /dev/null and b/app/static/images/guild_avatar.png differ diff --git a/app/static/js/questsTable.js b/app/static/js/questsTable.js index 6409541d..74ce0976 100644 --- a/app/static/js/questsTable.js +++ b/app/static/js/questsTable.js @@ -52,4 +52,11 @@ $(function () { $(document).ready(function () { $('#mange_users_table').DataTable(); }); +}); + +// Table for displaying the guilds list +$(function () { + $(document).ready(function () { + $('#guilds_list').DataTable(); + }); }); \ No newline at end of file diff --git a/app/templates/contact.html b/app/templates/contact.html index 0aa03aa3..bc4e87e3 100644 --- a/app/templates/contact.html +++ b/app/templates/contact.html @@ -16,18 +16,19 @@ - + {% include 'navbar.html' %} -
-
-

Get in touch with us!

-

You have a question? You want to report a bug or propose a new feature or just want to share your feedback with us? + +

+
+

Get in touch with us!

+

You have a question? You want to report a bug or propose a new feature or just want to share your feedback with us? We would love to hear from you! Please fill out the form below and we will get back to you as soon as possible.

- dwarf + dwarf
@@ -43,7 +44,7 @@

Get in touch with us!

{% endwith %}
{{ form.hidden_tag() }} -

Drop Us a Message

+

Drop Us a Message

diff --git a/app/templates/edit_submited_quest.html b/app/templates/edit_submited_quest.html index d2bc3d80..83ba18b8 100644 --- a/app/templates/edit_submited_quest.html +++ b/app/templates/edit_submited_quest.html @@ -5,12 +5,14 @@ Skill Forge - Admin Panel - Edit Submited Quest - - + - + + + + diff --git a/app/templates/edit_submited_quest_as_user.html b/app/templates/edit_submited_quest_as_user.html index eeb8ea0e..71a034b0 100644 --- a/app/templates/edit_submited_quest_as_user.html +++ b/app/templates/edit_submited_quest_as_user.html @@ -5,18 +5,22 @@ Skill Forge - Admin Panel - Edit Submited Quest - - + + + - - - - - + + + + + + + + @@ -32,8 +36,6 @@ - - diff --git a/app/templates/footer.html b/app/templates/footer.html index 60d3b254..d38d21a1 100644 --- a/app/templates/footer.html +++ b/app/templates/footer.html @@ -2,12 +2,11 @@ -