ix
/
website
forked from 42CTF/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rework of resources pages and a page to become member, added it in the navbar and fix global UI spacing issue.

This commit is contained in:
zero 2022-08-16 18:07:13 +02:00
parent 1ee02fc964
commit d1992e1476
14 changed files with 336 additions and 348 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/accounts/templates/accounts/profile.html
View File

@ -53,9 +53,9 @@
</li>
{% endif %}
{% if member %}
<li class="list-group-item is-member">{% trans "Status: Member" %}</li>
<li class="list-group-item">Status: <a class="{{ is_member }}" href="{% url 'resources:becomeMember' %}">{% trans "Member" %}</a></li>
{% else %}
<li class="list-group-item">{% trans "Status: Visitor" %}</li>
<li class="list-group-item">Status: {% trans " Visitor" %}</li>
{% endif %}
<li class="list-group-item">{% trans "Registered since" %} {{ user.date_joined|date:"d-m-Y" }}</li>
</ul>

31
src/resources/templates/resources/42ctf.html
View File

@ -1,31 +0,0 @@
{% block content %}
{% load i18n %}
{% get_current_language as lang %}
<div class="col-sm-12 col-md-6">
<div class="ctf-block">
<div class="ctf-head">
<center><h3>{% trans "What is 42CTF ?" %}</h3></center>
</div>
<div class="ctf-body">
<h4>{% trans "A short introduction to CTF" %}</h4>
{% trans "CTF stands for Capture The Flag. It is a cybersecurity competition, where participants have to solve challenges of various categories to gain points and progress on the scoreboard." %}
{% blocktranslate %}The challenges require participants to find sort of passwords called "flags" and to submit them on the platform.{% endblocktranslate %}
<br><br>
<h4>{% trans "Functionment of 42CTF" %}</h4>
{% trans "42CTF is what we call a permanent CTF." %}<br>
{% trans "Except from the" %} <a href="{% url 'events:events' %}">{% translate "events" %}</a>, {% trans "challenges are available on the platform without time limitations." %}
{% trans "The registration on 42CTF is open to everyone, 42 students or not." %}<br>
{% trans "Events may or may not be open. If you would like to organize an event on 42CTF, feel free to contact us." %}<br>
<br><br>
<h4>{% trans "42CTF Team" %}</h4>
{% trans "42CTF is managed by 42 students." %}<br>
{% trans "You can meet the team on" %} <a class="footer_imgs" href="https://discord.gg/DwZqPpA" target="_blank"><img src="/static/img/discord.png" width="30"></a>.<br>
{% trans "Challenges are created by various contributors, not necessarily 42 students."%}<br>
{% trans "Anyone is welcome to submit their own challenges, either on the permanent CTF or for a specific event." %}
</div>
</div>
</div>
{% endblock %}

36
src/resources/templates/resources/about.html Normal file
View File

@ -0,0 +1,36 @@
{% extends 'base.html' %}
{% block content %}
{% load i18n %}
{% get_current_language as lang %}
<div class="row">
{% load i18n %}
{% get_current_language as lang %}
<div class="col-sm-12">
<div class="ctf-block">
<div class="ctf-head">
<center><h3>{% trans "What is 42CTF ?" %}</h3></center>
</div>
<div class="ctf-body">
<h4>{% trans "A short introduction to CTF" %}</h4>
{% trans "CTF stands for Capture The Flag. It is a cybersecurity competition, where participants have to solve challenges of various categories to gain points and progress on the scoreboard." %}
{% blocktranslate %}The challenges require participants to find sort of passwords called "flags" and to submit them on the platform.{% endblocktranslate %}
<br><br>
<h4>{% trans "Functionment of 42CTF" %}</h4>
{% trans "42CTF is what we call a permanent CTF." %}<br>
{% trans "Except from the" %} <a href="{% url 'events:events' %}">{% translate "events" %}</a>, {% trans "challenges are available on the platform without time limitations." %}
{% trans "The registration on 42CTF is open to everyone, 42 students or not." %}<br>
{% trans "Events may or may not be open. If you would like to organize an event on 42CTF, feel free to contact us." %}<br>
<br><br>
<h4>{% trans "42CTF Team" %}</h4>
{% trans "42CTF is managed by 42 students." %}<br>
{% trans "You can meet the team on" %} <a class="footer_imgs" href="https://discord.gg/DwZqPpA" target="_blank"><img src="/static/img/discord.png" width="30"></a>.<br>
{% trans "Challenges are created by various contributors, not necessarily 42 students."%}<br>
{% trans "Anyone is welcome to submit their own challenges, either on the permanent CTF or for a specific event." %}
</div>
</div>
</div>
{% endblock %}
</div>

65
src/resources/templates/resources/becomeMember.html Normal file
View File

@ -0,0 +1,65 @@
{% extends 'base.html' %}
{% load static %}
{% block content %}
{% load i18n %}
{% get_current_language as lang %}
<div class="row">
<div class="col-12">
<h3>{% trans "Become a 42CTF member" %}</h3>
</div>
<div class="col-sm-6">
<div class="ctf-block text-center">
<div class="ctf-head text-center">
<h4>{% trans "Why should i become a 42CTF member ?" %}</h4>
</div>
<div class="ctf-body">
<img src="{% static "img/42ctf_logo_big_no_bg_full_white.svg" %}" width="200px" alt="42ctf logo"/>
<br><br>
{% trans "42CTF is a non-profit organization with a legal status under the french law (Association loi 1901)." %}
</div>
</div>
<div class="ctf-block text-center">
<div class="ctf-head text-center">
<h4>{% trans "I want to be a member !" %}</h4>
</div>
<div class="ctf-body">
{% trans "You're welcome ! To become a member, you need to support us by paying a fee of 15 euros for 1 year." %}
<br>
<a href="https://www.paypal.com/donate/?hosted_button_id=M6YBYZ63MQGAY" target="_blank">
<img src="/static/img/paypal.png" width="200">
</a>
<br>
{% trans "If you want to use another method, contact us !" %}
</div>
</div>
</div>
<div class="col-sm-6">
<div class="ctf-block">
<div class="ctf-head text-center">
<h4>{% trans "What i got ?" %}</h4>
</div>
- {% trans "A <span class='is-member'>different color</span> for your pseudo in the scoreboard, to let everyone know you're a member." %}<br>
- {% trans "The possibility to play past CTF, with challenges no longer available, in the form of private events with the people of your choice." %}<br>
<br>
<p class="text-center">
{% trans "More advantages may come later, and you can submit us your ideas." %}
</p>
</div>
<div class="ctf-block text-center">
<div class="ctf-head text-center">
<h4>{% trans "How do i claim it ?" %}</h4>
</div>
<div class="ctf-body">
{% trans "Once you payed 15 euros, you just need to contact us on discord or by mail !" %}
<br>
<br>
<a href="https://discord.gg/DwZqPpA">
<img width="250px" src="https://discordapp.com/api/guilds/606162827274616845/widget.png?style=banner2" style="margin-bottom:5px" alt="42ctf discord server banner">
</a>
<br>
42ctf@protonmail.com
</div>
</div>
</div>
</div>
{% endblock %}

13
src/resources/templates/resources/resources.html → src/resources/templates/resources/contribute.html
View File

@ -3,11 +3,8 @@
{% load i18n %}
{% get_current_language as lang %}
<div class="row">
{% block 42ctf %}
{% include "./42ctf.html" %}
{% endblock %}
{% block tools %}
{% include "./tools.html" %}
{% block donate %}
{% include "./donate.html" %}
{% endblock %}
{% block translate %}
{% include "./translate.html" %}
@ -15,11 +12,5 @@
{% block create_challenge %}
{% include "./create_challenge.html" %}
{% endblock %}
{% block edit %}
{% include "./edit.html" %}
{% endblock %}
{% block donate %}
{% include "./donate.html" %}
{% endblock %}
</div>
{% endblock %}

4
src/resources/templates/resources/create_challenge.html
View File

@ -9,8 +9,8 @@
<div class="ctf-body">
{% trans "If you want to create new challenges for 42CTF, send us a message on " %}<a class="footer_imgs" href="https://discord.gg/DwZqPpA" target="_blank"><img src="/static/img/discord.png" width="30"></a> !<br><br>
{% trans "If your challenge is offline, then you don't have to ask us in advance." %}<br>
{% trans "If your challenge is online (for example web or pwn), then you should give us a short description of what you want to do." %}
{% trans "We may be able to help you or to give you resources such as dockerfiles." %}
{% trans "If your challenge is online (for example web or pwn), then you should give us a short description of what you want to do." %}<br>
{% trans "We may be able to help you or to give you resources such as dockerfiles." %}<br><br>
{% trans "We plan to make those resources publicly available in a near future." %}
</div>
</div>

60
src/resources/templates/resources/donate.html
View File

@ -2,56 +2,28 @@
{% load i18n %}
{% get_current_language as lang %}
<div class="col-sm-12">
<div class="ctf-block">
<div class="ctf-block text-center">
<div class="ctf-head">
<center><h3>{% trans "Donate" %}</h3></center>
<h3>{% trans "Donate" %}</h3>
</div>
<div class="ctf-body">
<h4>{% trans "Become a 42CTF member" %}</h4>
{% trans "42CTF is a non-profit organization with a legal status under the french law (Association loi 1901)." %}<br>
{% trans "You can support us by becoming a member and paying a fee of 15 euros." %}<br>
{% trans "Membership is then granted for 1 year." %}<br><br>
{% trans "When you become a member, you gain the following advantages:" %}<br>
- {% trans "A different color for your pseudo in the scoreboard, to let everyone know you're a member." %}<br>
- {% trans "The possibility to play again past CTF, with challenges no longer available, in the form of private events with the people of your choice." %}<br>
{% trans "Ex: you played Welcome CTF 2021, and want to play it again with your friends during one weekend." %}
{% trans "Or you didn't play Welcome CTF 2021 because you were not eligible." %}
<br><br>
{% trans "More advantages may come later, and you can submit us your ideas." %}<br>
{% trans "However, we will not organize limited time CTF for members only, as this will be equivalent to organize paid events, and we want 42CTF to remain FREE for all." %}<br>
<br><br>
<center><h4>{% trans "Donate to 42CTF" %}</h4>
{% trans "You can donate to 42CTF or pay your membership with the following means:" %}<br>
<!-- <a href="https://www.patreon.com/42ctf" target="_blank" class="patreon li-patreon">
<span class="svg-box">
<svg viewBox="0 0 569 546" xmlns="http://www.w3.org/2000/svg"><g><circle cx="362.589996" cy="204.589996" data-fill="1" id="Oval" r="204.589996"></circle><rect data-fill="2" height="545.799988" id="Rectangle" width="100" x="0" y="0"></rect></g></svg>
</span>
<span class="patreon-text">
Patreon
</span>
</a> -->
<a href="https://www.paypal.com/donate/?hosted_button_id=M6YBYZ63MQGAY" target="_blank">
<img src="/static/img/paypal.png" width="200" style="margin-top: -10px;">
</a>
<!-- <a href="https://www.helloasso.com/associations/42ctf/adhesions/adhesion" target="_blank">
<img src="/static/img/hello_asso.png" width="180" style="margin-top: -10px;">
</a> -->
</center>
<br>
<img src="/static/img/paypal.png" width="200" style="margin-top:-30px;">
</a><br>
<p class="small">
{% trans "If you would like us to add another payment method or if you want to pay in cash, send us a message !" %}<br><br>
{% trans "If you're paying for your membership, don't forget to send us your first and last name, as well as your 42CTF pseudo." %}
{% trans "We will only use thoe data to keep track of our members and grant you advantages, and we will never communicate them to any third party." %}
</p>
</div>
<div class="ctf-head">
<h3>{% trans "What will we do with your money ?" %}</h3>
</div>
<div class="ctf-body">
{% blocktranslate %}Hosting a website - and especially a CTF platform - costs money: more precisely, it costs us <b>50 euros per month</b>.
<br><br>
If we had <b>40 members</b> each year, it would be enough to cover the hosting of 42CTF.
<br>
We currently have {{nb_members}} members.
<br><br>
<h4>{% trans "What will we do with your money ?" %}</h4>
{% blocktranslate %}Hosting a website - and especially a CTF platform - costs money:
more precisely, it costs us <b>50 euros per month</b>.<br>
If we had <b>40 members</b> each year, it would be enough to cover the hosting of 42CTF.<br>
We currently have {{nb_members}} members. <br>
With the additional money, we could for example offer prizes for limited-time events, but we will update this page as soon as we reach this threshold :){% endblocktranslate %}
</div>
</div>

10
src/resources/templates/resources/howToStart.html Normal file
View File

@ -0,0 +1,10 @@
{% extends 'base.html' %}
{% block content %}
{% load i18n %}
{% get_current_language as lang %}
<div class="row">
{% block tools %}
{% include "./tools.html" %}
{% endblock %}
</div>
{% endblock %}

2
src/resources/templates/resources/tools.html
View File

@ -1,7 +1,7 @@
{% block content %}
{% load i18n %}
{% get_current_language as lang %}
<div class="col-sm-12 col-md-6">
<div class="col-sm-12">
<div class="ctf-block">
<div class="ctf-head">
<center><h3>{% trans "Recommended Tools" %}</h3></center>

14
src/resources/templates/resources/translate.html
View File

@ -1,17 +1,19 @@
{% block content %}
{% load i18n %}
{% get_current_language as lang %}
<div class="col-sm-12">
<div class="col-sm-12 col-md-6">
<div class="ctf-block">
<div class="ctf-head">
<center><h3>{% trans "Translate 42CTF" %}</h3></center>
</div>
<div class="ctf-body">
{% trans "42CTF source code is publicly available on this"%} <a href="https://gitea.42ctf.org/42CTF/website">git</a>.<br>
{% trans "Translation does not require any programming skill and is a good way to contribute if you want to help us, by making the platform always more accessible." %}<br><br>
{% trans "We have a" %} <a href="https://gitea.42ctf.org/42CTF/website/wiki/Internationalization">wiki</a> {% trans "describing how to translate pages with the Django internalization module." %}<br>
{% trans "We invite you to read it to know all the details, but it merely requires you to edit text files, so you see, no programming skills required ;)" %}
{% trans "You will need to fork the git repository, make your changes, push them, and then open a pull request so that we can merge your contributions into our repository." %}<br><br>
{% trans "42CTF source code is publicly available on this"%} <a href="https://gitea.42ctf.org/42CTF/website">git</a>.
<br>
{% trans "Translation does not require any programming skill and is a good way to contribute if you want to help us, by making the platform always more accessible." %}
<br><br>
{% trans "We have a" %} <a href="https://gitea.42ctf.org/42CTF/website/wiki/Internationalization">wiki</a> {% trans "describing how to translate pages with the Django internalization module." %}
<br><br>
<!-- {% trans "You will need to fork the git repository, make your changes, push them, and then open a pull request so that we can merge your contributions into our repository." %}<br><br> -->
{% trans "Don't hesitate to reach for help on" %} <a class="footer_imgs" href="https://discord.gg/DwZqPpA" target="_blank"><img src="/static/img/discord.png" width="30"></a>
</div>
</div>

5
src/resources/urls.py
View File

@ -4,5 +4,8 @@ from . import views
app_name = "resources"
urlpatterns = [
path('', views.resources, name='resources'),
path('about', views.about, name='about'),
path('how-to-start', views.howToStart, name='howToStart'),
path('contribute', views.contribute, name='contribute'),
path('become-member', views.becomeMember, name='becomeMember'),
]

13
src/resources/views.py
View File

@ -4,6 +4,15 @@ from django.contrib.auth.models import timezone
# Create your views here.
def resources(request):
def contribute(request):
nb_members = UserProfileInfo.objects.filter(member=True, member_until__gt=timezone.now()).count()
return render(request, 'resources/resources.html', {'nb_members':nb_members})
return render(request, 'resources/contribute.html', {'nb_members':nb_members})
def about(request):
return render(request, 'resources/about.html')
def howToStart(request):
return render(request, 'resources/howToStart.html')
def becomeMember(request):
return render(request, 'resources/becomeMember.html')

111
src/statics/css/style.css
View File

@ -4,6 +4,7 @@ body {
}
.card-body {
background-color: #1d1d1d;
padding:30px;
}
a {
color: #4375aa;
@ -13,10 +14,10 @@ a:hover {
text-decoration: none;
}
.main-div {
margin-top: 40px;
margin-top: 30px;
}
.news-card {
margin-bottom: 20px;
margin-bottom: 30px;
border: none;
}
.news-card .card-header {
@ -68,6 +69,12 @@ pre {
padding-right: 15px;
padding-left: 15px;
}
.nav-distinguish{
border: 1.8px solid #333;
border-radius: 1.5px;
color: #fff;
text-transform: uppercase;
}
.flag_img {
margin-top: 10px;
width: 28px;
@ -83,15 +90,15 @@ pre {
.ctf-block {
background-color: #1d1d1d;
min-height: 235px;
padding: 15px;
margin-bottom: 20px;
min-height: 30vh;
padding: 30px;
margin-bottom: 30px;
}
.ctf-body {
margin-top: 50px;
margin-top: 30px;
}
.bloc-body {
margin-top: 25px;
margin-top: 30px;
}
.ctf-footer {
margin-top: 15px;
@ -103,8 +110,8 @@ pre {
margin-bottom: 20px;
}
.event-body {
padding: 15px;
margin-top: 50px;
padding: 30px;
margin-top: 30px;
}
.event-footer {
margin-top: 15px;
@ -271,91 +278,7 @@ footer {
visibility: visible;
padding-top: 5px;
}
.patreon {
width: 250px;
height: 59px;
background-color: #ff6363;
font-family: America, "GT America", Lato, "Helvetica Neue", Helvetica, Arial,
sans-serif;
text-rendering: optimizeLegibility;
-moz-box-align: center;
backface-visibility: hidden;
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
font-size: 0.875rem !important;
font-weight: 500;
-moz-box-pack: center;
justify-content: center;
padding: 0.46875rem 1rem;
position: relative;
pointer-events: unset;
text-align: center;
text-decoration: none;
text-transform: none;
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
user-select: none;
white-space: unset;
align-items: center;
color: #fff;
}
.li-patreon {
width: 120px;
height: 37px;
background-color: #ff6363;
font-family: America, "GT America", Lato, "Helvetica Neue", Helvetica, Arial,
sans-serif;
text-rendering: optimizeLegibility;
-moz-box-align: center;
backface-visibility: hidden;
box-sizing: border-box;
cursor: pointer;
font-size: 0.875rem !important;
font-weight: 500;
-moz-box-pack: center;
justify-content: center;
padding: 0.46875rem 1rem;
text-align: center;
text-decoration: none;
text-transform: none;
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
user-select: none;
align-items: center;
color: #fff;
margin-top: 4px;
margin-right: 13px;
}
.patreon:hover {
background-color: #ff4a4a;
color: #fff;
}
.patreon-text {
padding-left: 1em;
}
.patreon svg {
height: 1.3rem;
width: 1.3rem;
fill: #fff;
}
.patreon-content {
-moz-box-align: center;
align-items: center;
display: flex;
-moz-box-pack: center;
justify-content: center;
visibility: visible;
}
.svg-box {
align-self: center;
-moz-box-align: center;
align-items: center;
display: inline-flex;
filter: none;
vertical-align: unset;
height: unset;
width: unset;
cursor: unset;
}
.is-member {
color: #26fcef;
}

66
src/templates/base.html
View File

@ -1,4 +1,5 @@
{% load static %}
{% load is_member %}
{% load i18n %}
<!doctype html>
<html lang="en">
@ -56,34 +57,32 @@
{% endif %}
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'scoreboard:scoreboard' %}">{% translate "Scoreboard" %}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'events:events' %}">{% translate "Events" %}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'resources:resources' %}">{% translate "Resources" %}</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'resources:about' %}">About</a>
<a class="dropdown-item" href="{% url 'resources:howToStart' %}">How To Start</a>
<a class="dropdown-item" href="{% url 'resources:contribute' %}">Contribute</a>
</div>
</li>
</ul>
<ul class="navbar-nav ">
<li class="nav-item dropdown">
{% get_current_language as LANGUAGE_CODE %}
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="flag_img" src="{% static "img/"|add:LANGUAGE_CODE|add:".svg" %}" alt="flag {{ LANGUAGE_CODE }}" style="margin-top: -5px;"/>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% get_available_languages as languages %}
{% for lang_code, lang_name in languages %}
<a class="dropdown-item" href="{% url 'set_language' lang_code %}?next={{request.path|slice:"3:"}}">
<img class="flag_img" src="{% static "img/"|add:lang_code|add:".svg" %}" alt="flag {{ lang_name }}"/>
</a>
{% endfor %}
</div>
</li>
{% if request.user.is_authenticated %}
{% ismember request.user.userprofileinfo as is_member %}
{% if not is_member %}
<li class="nav-item">
<a class="nav-link nav-distinguish" href="{% url 'resources:becomeMember' %}">{% translate "Become a member" %}</a>
</li>
{% endif %}
<li class="nav-item dropdown">
<a href="{% url 'accounts:edit' %}" class="nav-link">{{ request.user.username }}</a>
</li>
@ -101,14 +100,33 @@
<a class="nav-link" href="{% url 'accounts:signup' %}">{% translate "Sign Up" %}</a>
</li>
{% endif %}
<li class="nav-item dropdown">
{% get_current_language as LANGUAGE_CODE %}
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="flag_img" src="{% static "img/"|add:LANGUAGE_CODE|add:".svg" %}" alt="flag {{ LANGUAGE_CODE }}" style="margin-top: -5px;"/>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% get_available_languages as languages %}
{% for lang_code, lang_name in languages %}
<a class="dropdown-item" href="{% url 'set_language' lang_code %}?next={{request.path|slice:"3:"}}">
<img class="flag_img" src="{% static "img/"|add:lang_code|add:".svg" %}" alt="flag {{ lang_name }}"/>
</a>
{% endfor %}
</div>
</li>
</ul>
</div>
</nav>
</header>
<div class="container main-div">
{% block content %}
{% endblock %}
</div>
<footer class="container">
<div class="row">
<div class="col-lg-4 col-12">
@ -127,16 +145,6 @@
</a>
</div>
<div class="col-lg-4 col-12 bottom-md">
<!-- <a href="https://www.patreon.com/42ctf" target="_blank" class="patreon">
<div class="patreon-content">
<span class="svg-box">
<svg viewBox="0 0 569 546" xmlns="http://www.w3.org/2000/svg"><g><circle cx="362.589996" cy="204.589996" data-fill="1" id="Oval" r="204.589996"></circle><rect data-fill="2" height="545.799988" id="Rectangle" width="100" x="0" y="0"></rect></g></svg>
</span>
<span class="patreon-text">
{% trans "Become a Patron!" %}
</span>
</div>
</a> -->
<a href="https://www.paypal.com/donate/?hosted_button_id=M6YBYZ63MQGAY" target="_blank">
<img src="/static/img/paypal.png" width="250" style="margin-top: -20px;" alt="'Donate with Paypal' banner">
</a>