Skip to content

Commit

Permalink
Profile pic system added
Browse files Browse the repository at this point in the history 
You can now change your profile picture from the profile
  • Loading branch information
@Acrylami
Acrylami committed Oct 11, 2020
1 parent 0e723bb commit 0f30ae4
Show file tree
Hide file tree
Showing 10 changed files with 147 additions and 59 deletions.
Binary file modified cyber/__pycache__/models.cpython-38.pyc
View file
Binary file not shown.
Binary file modified cyber/__pycache__/routes.cpython-38.pyc
View file
Binary file not shown.
1 change: 1 addition & 0 deletions cyber/models.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ class User(UserMixin, db.Model):
email = db.Column(db.String(60), unique=True, nullable=False)
password_hash = db.Column(db.String(128), nullable=False)
points = db.Column(db.Integer, nullable=False)
profile_pic = db.Column(db.String(40), nullable=False)
#password = db.Column(db.String(60), nullable=False)

def __repr__(self):
Expand Down
14 changes: 11 additions & 3 deletions cyber/routes.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,9 +133,17 @@ def story_redirect(story, chapter):
file_name = "/stories/" + story + "/" + story + "-chapter-" + str(chapter) + ".html"
title = "Chapter " + str(chapter)
return render_template(file_name, title=title)



#
@app.route("/profile/<string:pic>")
def set_profile(pic):
#file_name = pic + ".png"
#if user is logged in
if (current_user.is_authenticated):
#could add validation for filename
current_user.profile_pic = pic
db.session.commit()
return render_template('profile.html', title='Your Profile')
#
@app.route("/training/<string:training_name>/", methods=['GET'])
def training_redirect(training_name):
session['url'] = url_for('training_redirect', training_name=training_name)
Expand Down
18 changes: 17 additions & 1 deletion cyber/static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,22 @@ box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212
margin: auto;
}

.fixed-plugin img {
width: 50px !important;
height: 50px !important;
}

.fixed-plugin .dropdown-menu > li > a.img-holder {
background-color: #313131 !important;
}


#profile-icon {
width: 25px;
border-radius: 50%;
margin-right: 5px;
}

.training_card a {
color: #9c27b0 !important;
}
Expand Down Expand Up @@ -454,4 +470,4 @@ box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212
background-color: #55b776;
}

/* progress end */
/* progress end */
Binary file added cyber/static/img/profile-pics/alien.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
101 changes: 52 additions & 49 deletions cyber/templates/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,49 +169,51 @@
<ul class="navbar-nav">
{% if current_user.is_authenticated %}

<!--
<li>
<h4 class-title mt-0> Current user: {{ current_user.username}} </h4>
</li>
-->
<li>
You are logged in as: &nbsp;&nbsp;&nbsp;
</li>
<li>
{% if current_user.points < 100 %}
<td class="">
<span class="noob">{{current_user.username}}</span>
</td>
{% elif current_user.points < 300 %}
<td class="">
<span class="cyberist">{{current_user.username}}</span>
</td>
{% elif current_user.points < 600 %}
<td class="">
<span class="apprentice-hacker">{{current_user.username}}</span>
</td>
{% elif current_user.points < 1000 %}
<td class="">
<span class="slick-coder">{{current_user.username}}</span>
</td>
{% elif current_user.points < 1300 %}
<td class="">
<span class="keen-bean">{{current_user.username}}</span>
</td>
{% elif current_user.points < 1600 %}
<td class="">
<span class="pro-hacker">{{current_user.username}}</span>
</td>
{% elif current_user.points >= 1600 %}
<td class="">
<span class="l337">{{current_user.username}}</span>
</td>
{% else %}
<td class="">
<span class="rank">Error Rank</span>
</td>
{% endif %}
</li>
<a href="{{ url_for('profile') }}">
<li>
<img id="profile-icon" class="img" src="../static/img/profile-pics/{{current_user.profile_pic}}.png" />
</li>
</a>
<a href="{{ url_for('profile') }}">
<li>
{% if current_user.points < 100 %}
<td class="">
<span class="noob">{{current_user.username}}</span>
</td>
{% elif current_user.points < 300 %}
<td class="">
<span class="cyberist">{{current_user.username}}</span>
</td>
{% elif current_user.points < 600 %}
<td class="">
<span class="apprentice-hacker">{{current_user.username}}</span>
</td>
{% elif current_user.points < 1000 %}
<td class="">
<span class="slick-coder">{{current_user.username}}</span>
</td>
{% elif current_user.points < 1300 %}
<td class="">
<span class="keen-bean">{{current_user.username}}</span>
</td>
{% elif current_user.points < 1600 %}
<td class="">
<span class="pro-hacker">{{current_user.username}}</span>
</td>
{% elif current_user.points >= 1600 %}
<td class="">
<span class="l337">{{current_user.username}}</span>
</td>
{% else %}
<td class="">
<span class="rank">Error Rank</span>
</td>
{% endif %}
</li>
</a>
<li>
<a href="{{ url_for('logout') }}"><button type="button" class="login btn btn-primary">
<div class="opaque">Logout</div>
Expand Down Expand Up @@ -343,37 +345,38 @@ <h4 class-title mt-0> Current user: {{ current_user.username}} </h4>

$(this).parent('li').siblings().removeClass('active');
$(this).parent('li').addClass('active');

/*
var new_image = $(this).find("img").attr('src');
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
$sidebar_img_container.fadeOut('fast', function() {
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$sidebar_img_container.fadeIn('fast');
//$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
//$sidebar_img_container.fadeIn('fast');
});
}
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$full_page_background.fadeOut('fast', function() {
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
$full_page_background.fadeIn('fast');
//$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
//$full_page_background.fadeIn('fast');
});
}
if ($('.switch-sidebar-image input:checked').length == 0) {
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
//don't change
//$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
//$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
}
if ($sidebar_responsive.length != 0) {
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
}
//$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
} */
});

$('.switch-sidebar-image input').change(function() {
Expand Down
1 change: 0 additions & 1 deletion cyber/templates/macros.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,6 @@ <h4>{{ points }} points</h4>
<!-- END TRAINING HEADER -->



<!-- Ranks -->
{% macro display_rank(user) %}
{{ caller() }}
Expand Down
67 changes: 64 additions & 3 deletions cyber/templates/profile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,7 @@ <h4>TRAINING</h4>
<div class="col-md-4">
<div class="card card-profile">
<div class="card-avatar">
<a href="#pablo">
<img class="img" src="../static/img/default-avatar.png" />
</a>
<img class="img" src="../static/img/profile-pics/{{current_user.profile_pic}}.png" />
</div>
<div class="card-body">
<h4 class="card-title">{{ current_user.username }}</h4>
Expand All @@ -93,7 +91,70 @@ <h6 class="card-category">Score: {{ current_user.points}}</h6>
</div>


<div class="fixed-plugin">
<div class="dropdown show-dropdown">
<a href="#" data-toggle="dropdown">
<i class="fa fa-cog fa-2x"> </i>
</a>
<ul class="dropdown-menu">
<li class="header-title">Choose profile picture</li>
<li class="active">
<a class="img-holder switch-trigger" href="{{ url_for('set_profile', pic='alien') }}">
<img src="{{ url_for('static', filename='img/profile-pics/alien.png') }}" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="{{ url_for('set_profile', pic='techno-boy') }}">
<img src="{{ url_for('static', filename='img/profile-pics/techno-boy.png') }}" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="{{ url_for('set_profile', pic='techno-girl') }}">
<img src="{{ url_for('static', filename='img/profile-pics/techno-girl.png') }}" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="{{ url_for('set_profile', pic='robbie') }}">
<img src="{{ url_for('static', filename='img/profile-pics/robbie.png') }}" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="{{ url_for('set_profile', pic='mindmap') }}">
<img src="{{ url_for('static', filename='img/profile-pics/mindmap.png') }}" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="{{ url_for('set_profile', pic='handy') }}">
<img src="{{ url_for('static', filename='img/profile-pics/handy.png') }}" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="{{ url_for('set_profile', pic='googly') }}">
<img src="{{ url_for('static', filename='img/profile-pics/googly.png') }}" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="{{ url_for('set_profile', pic='claudia') }}">
<img src="{{ url_for('static', filename='img/profile-pics/claudia.png') }}" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="{{ url_for('set_profile', pic='caterpillar') }}">
<img src="{{ url_for('static', filename='img/profile-pics/caterpillar.png') }}" alt="">
</a>
</li>
<li>
<a class="img-holder switch-trigger" href="{{ url_for('set_profile', pic='brain') }}">
<img src="{{ url_for('static', filename='img/profile-pics/brain.png') }}" alt="">
</a>
</li>
<li class="button-container">
<button type="submit" class="btn btn-primary btn-block">Back</button>
</li>

</ul>
</div>
</div>



Expand Down
4 changes: 2 additions & 2 deletions cyber/templates/scoreboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ <h4 class="card-title ">Scoreboard</h4>
{{ loop.index }}
</td>
<td class="white">
<img src="../static/img/default-avatar.png" width="50px" height="50px"> {{ user.username }}
<img src="../static/img/profile-pics/{{user.profile_pic}}.png" width="50px" height="50px"> {{ user.username }}
</td>

<!-- Ranks -->
Expand All @@ -65,7 +65,7 @@ <h4 class="card-title ">Scoreboard</h4>
{{ loop.index }}
</td>
<td>
<img src="../static/img/default-avatar.png" width="50px" height="50px"> {{ user.username }}
<img src="../static/img/profile-pics/{{user.profile_pic}}.png" width="50px" height="50px"> {{ user.username }}
</td>

<!-- Ranks -->
Expand Down

0 comments on commit 0f30ae4

Please sign in to comment.