flifloo/nuitdelinfo_2021
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

adding articles page

Browse source
This commit is contained in:
Kybo09 2021-12-03 00:06:04 +01:00
parent bd61d18009
commit 52d4ef668f
15 changed files with 540 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
nuitdelinfo_2021/settings.py
View file

@ -25,7 +25,7 @@ SECRET_KEY = 'django-insecure-85h5=0vw&7e)%9+^n69y!b1ti@7gij_ic3u+66eln838s=!n+l
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = ["3cab-134-214-214-199.ngrok.io", "localhost", "30b2-134-214-214-181.ngrok.io"]
ALLOWED_HOSTS = ["3cab-134-214-214-199.ngrok.io", "localhost", "3218-134-214-214-181.ngrok.io"]
# Application definition

2
nuitdelinfo_2021/views/index.py
View file

@ -3,4 +3,4 @@ from django.shortcuts import render
def index(request):
context = {}
return render(request, "index.html", context)
return render(request, "articles.html", context)

213
static/css/style.css
View file

@ -17,6 +17,8 @@ a {
h1 {
font-size: 60px;
text-align: center;
margin: 10px 0;
}
h2 {
@ -37,12 +39,41 @@ a.btn {
border: 2px solid #efefef;
font-size: 18px;
}
a.btn--blue {
color: #00E8C2;
border-color: #00E8C2;
}
p {
margin: 5px 0;
}
a, p, span {
input::-webkit-input-placeholder {
font-family: "Play", sans-serif;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
color: #efefef;
}
input::-moz-placeholder {
font-family: "Play", sans-serif;
transition-duration: 0.3s;
color: #efefef;
}
input:-ms-input-placeholder {
font-family: "Play", sans-serif;
transition-duration: 0.3s;
color: #efefef;
}
input::-ms-input-placeholder {
font-family: "Play", sans-serif;
transition-duration: 0.3s;
color: #efefef;
}
a, p, span, input, input::placeholder {
font-family: "Play", sans-serif;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
@ -54,6 +85,7 @@ a:hover {
}
.container {
padding-top: 100px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
@ -75,6 +107,16 @@ a:hover {
width: 1170px;
}
}
section {
padding-bottom: 50px;
}
.map {
width: 75%;
display: block;
margin: auto;
}
nav {
background-color: #303030;
padding: 5px 20px;
@ -86,6 +128,11 @@ nav {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: fixed;
top: 0;
z-index: 9999;
left: 0;
width: -webkit-fill-available;
}
nav .logo {
margin: 0;
@ -156,13 +203,25 @@ nav .right .search:hover {
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-card .card {
background: #333333;
-webkit-box-flex: 0;
-ms-flex: 0 1 25%;
flex: 0 1 25%;
margin-bottom: 30px;
-ms-flex: 0 1 33%;
flex: 0 1 33%;
margin-bottom: 70px;
}
.flex-card .card .inner {
margin: 0 30px;
background: #333333;
}
.flex-card .card .inner:hover img {
cursor: pointer;
-webkit-filter: grayscale(70%);
filter: grayscale(70%);
-webkit-transform: scale(1.2) !important;
transform: scale(1.2) !important;
}
.flex-card .card .img-container {
width: 100%;
@ -173,13 +232,6 @@ nav .right .search:hover {
transition: all ease-in-out 0.3s;
width: 100%;
}
.flex-card .card:hover img {
cursor: pointer;
-webkit-filter: grayscale(70%);
filter: grayscale(70%);
-webkit-transform: scale(1.2) !important;
transform: scale(1.2) !important;
}
.flex-card .card .content {
padding: 20px;
}
@ -195,4 +247,141 @@ nav .right .search:hover {
margin: auto;
margin-top: 30px;
}
#quicksearch {
position: fixed;
display: none;
padding: 30px;
padding-top: 100px;
height: 100vh;
width: -webkit-fill-available;
background: rgba(0, 0, 0, 0.9);
top: 0;
left: 0;
}
#quicksearch:target {
display: block !important;
}
#quicksearch .close {
position: absolute;
right: 20px;
top: 20px;
-webkit-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
}
#quicksearch .close i {
font-size: 70px;
color: #efefef;
}
#quicksearch .close:hover {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
#quicksearch .search-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 30px;
}
#quicksearch .search-bar input {
width: 80%;
background: transparent;
color: #efefef;
font-size: 30px;
border: none;
border-bottom: 3px solid #efefef;
padding: 15px;
}
#quicksearch .search-bar input::-webkit-input-placeholder {
color: #d3d2d2;
font-size: 30px;
}
#quicksearch .search-bar input::-moz-placeholder {
color: #d3d2d2;
font-size: 30px;
}
#quicksearch .search-bar input:-ms-input-placeholder {
color: #d3d2d2;
font-size: 30px;
}
#quicksearch .search-bar input::-ms-input-placeholder {
color: #d3d2d2;
font-size: 30px;
}
#quicksearch .search-bar input::placeholder {
color: #d3d2d2;
font-size: 30px;
}
#quicksearch .search-bar i {
font-size: 50px;
color: #efefef;
cursor: pointer;
}
#quicksearch .fast-search {
margin-top: 50px;
}
#quicksearch .fast-search h2 {
text-align: center;
font-size: 35px;
}
#quicksearch .fast-search .flex-search {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#quicksearch .fast-search .flex-search .search-col {
-webkit-box-flex: 0;
-ms-flex: 0 1 30%;
flex: 0 1 30%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#quicksearch .fast-search .flex-search .search-col:first-child, #quicksearch .fast-search .flex-search .search-col:nth-child(2) {
border-right: 2px solid #00E8C2;
}
#quicksearch .fast-search .flex-search .search-col .titre {
text-align: center;
font-size: 28px;
color: #00E8C2;
margin: 15px 0;
}
#quicksearch .fast-search .flex-search .search-col .search-card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 85%;
margin: auto;
margin-top: 20px;
background: #464646;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#quicksearch .fast-search .flex-search .search-col .search-card img {
width: 50px;
}
#quicksearch .fast-search .flex-search .search-col .search-card .name {
font-size: 20px;
margin-left: 15px;
}
/*# sourceMappingURL=style.css.map */

2
static/css/style.css.map
View file

@ -1 +1 @@
{"version":3,"sources":["../scss/base/font.scss","../scss/layouts/global.scss","../scss/base/colors.scss","style.css","../scss/base/mixins.scss","../scss/layouts/nav.scss","../scss/layouts/cards.scss"],"names":[],"mappings":"AAAQ,8EAAA;AACA,yEAAA;ACDR;EACI,yBCDS;EDET,UAAA;EACA,SAAA;AEGJ;;AFAA;EGLE,iCAAA;EHOE,cCJI;ACOR;;AFAA;EACI,qBAAA;AEGJ;;AFAA;EACI,eAAA;AEGJ;;AFAA;EACI,eAAA;AEGJ;;AFAA;EACI,eAAA;AEGJ;;AFAA;EACI,cAAA;EACA,0BAAA;EAAA,kBAAA;EACA,uBAAA;EACA,cC3BI;ED4BJ,kBAAA;EACA,yBAAA;EACA,eAAA;AEGJ;;AFAA;EACI,aAAA;AEGJ;;AFAA;EGpCE,+BAAA;EHsCE,iCAAA;UAAA,yBAAA;EACA,cCxCI;AC2CR;;AFAA;EACI,yBAAA;AEGJ;;AFAA;EACE,mBAAA;EACA,kBAAA;EACA,kBAAA;EACA,iBAAA;AEGF;;AFDA;EACE;IACE,YAAA;EEIF;AACF;AFFA;EACE;IACE,YAAA;EEIF;AACF;AFFA;EACE;IACE,aAAA;EEIF;AACF;AE1EA;EACE,yBAAA;EACA,iBAAA;EACA,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,qBAAA;MAAA,iBAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,8BAAA;AF4EF;AE3EE;EACE,SAAA;EACA,eAAA;EACA,eAAA;EDRF,iCAAA;ECUE,cHPI;EGQJ,kBAAA;AF6EJ;AE3EE;EACE,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,mBAAA;AF6EJ;AE5EI;EACE,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,mBAAA;AF8EN;AE7EM;EACE,eAAA;EACA,cHlBA;EGmBA,eAAA;AF+ER;AE3EE;EACE,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,uBAAA;MAAA,oBAAA;UAAA,sBAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,mBAAA;AF6EJ;AE5EI;EACE,WAAA;EACA,eAAA;EACA,yBAAA;EACA,iCAAA;UAAA,yBAAA;AF8EN;AE7EM;EACE,qBHlCC;ACiHT;AE5EI;EACE,cHrCE;EGsCF,eAAA;EACA,kBAAA;EACA,eAAA;EACA,iCAAA;UAAA,yBAAA;AF8EN;AE7EM;EACE,cH5CC;AC2HT;;AG9HA;EACE,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,8BAAA;MAAA,2BAAA;UAAA,6BAAA;AHiIF;AGhIE;EACE,mBJFU;EIGV,mBAAA;MAAA,iBAAA;UAAA,aAAA;EACA,mBAAA;AHkIJ;AGjII;EACE,WAAA;EACA,gBAAA;AHmIN;AGlIM;EACE,wCAAA;EAAA,gCAAA;EACA,WAAA;AHoIR;AGhIM;EACE,eAAA;EACA,8BAAA;UAAA,sBAAA;EACA,wCAAA;UAAA,gCAAA;AHkIR;AG/HI;EACE,aAAA;AHiIN;AGhIM;EACE,cJtBC;EIuBD,kBAAA;EACA,eAAA;AHkIR;AGhIM;EACE,eAAA;AHkIR;AGhIM;EACE,YAAA;EACA,gBAAA;AHkIR","file":"style.css"}
{"version":3,"sources":["../scss/base/font.scss","../scss/layouts/global.scss","../scss/base/colors.scss","style.css","../scss/base/mixins.scss","../scss/layouts/nav.scss","../scss/layouts/cards.scss","../scss/layouts/quicksearch.scss"],"names":[],"mappings":"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","file":"style.css"}

BIN
static/images/map.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 279 KiB

4
static/scss/base/colors.scss
View file

@ -1,5 +1,7 @@
$background: #414142;
$background2: #303030;
$background3: #333333;
$background4: #464646;
$accent: #00E8C2;
$light: #efefef;
$light: #efefef;
$light2: #d3d2d2;

24
static/scss/layouts/cards.scss
View file

@ -1,10 +1,21 @@
.flex-card{
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
.card{
background: $background3;
flex: 0 1 25%;
margin-bottom: 30px;
flex: 0 1 33%;
margin-bottom: 70px;
.inner{
margin: 0 30px;
background: $background3;
&:hover{
img{
cursor: pointer;
filter: grayscale(70%);
transform: scale(1.2) !important;
}
}
}
.img-container{
width: 100%;
overflow: hidden;
@ -13,13 +24,6 @@
width: 100%;
}
}
&:hover{
img{
cursor: pointer;
filter: grayscale(70%);
transform: scale(1.2) !important;
}
}
.content{
padding: 20px;
.date{

19
static/scss/layouts/global.scss
View file

@ -15,6 +15,8 @@ a{
h1{
font-size: 60px;
text-align: center;
margin: 10px 0;
}
h2{
@ -33,13 +35,17 @@ a.btn{
padding: 10px 20px;
border: 2px solid $light;
font-size: 18px;
&--blue{
color: $accent;
border-color: $accent;
}
}
p{
margin: 5px 0;
}
a, p, span{
a, p, span, input, input::placeholder{
@include font-play;
transition-duration: 0.3s;
color: $light;
@ -50,6 +56,7 @@ a:hover{
}
.container {
padding-top: 100px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
@ -69,4 +76,14 @@ a:hover{
.container {
width: 1170px;
}
}
section{
padding-bottom: 50px;
}
.map{
width: 75%;
display: block;
margin: auto;
}

5
static/scss/layouts/nav.scss
View file

@ -4,6 +4,11 @@ nav{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
position: fixed;
top: 0;
z-index: 9999;
left: 0;
width: -webkit-fill-available;
.logo{
margin: 0;
cursor: pointer;

93
static/scss/layouts/quicksearch.scss Normal file
View file

@ -0,0 +1,93 @@
#quicksearch{
position: fixed;
display: none;
padding: 30px;
padding-top: 100px;
height: 100vh;
width: -webkit-fill-available;
background: rgba(0,0,0,0.9);
top: 0;
left: 0;
&:target{
display: block !important;
}
.close{
position: absolute;
right: 20px;
top: 20px;
transition: all ease-in-out 0.3s;
i{
font-size: 70px;
color: $light;
}
&:hover{
transform: rotateZ(90deg);
}
}
.search-bar{
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
input{
width: 80%;
background: transparent;
color: $light;
font-size: 30px;
border: none;
border-bottom: 3px solid $light;
padding: 15px;
&::placeholder{
color: $light2;
font-size: 30px;
}
}
i{
font-size: 50px;
color: $light;
cursor: pointer;
}
}
.fast-search{
margin-top: 50px;
h2{
text-align: center;
font-size: 35px;
}
.flex-search{
display: flex;
justify-content: space-evenly;
align-items: center;
.search-col{
flex: 0 1 30%;
display: flex;
flex-direction: column;
justify-content: center;
&:first-child, &:nth-child(2){
border-right: 2px solid $accent;
}
.titre{
text-align: center;
font-size: 28px;
color: $accent;
margin: 15px 0;
}
.search-card{
display: flex;
width: 85%;
margin: auto;
margin-top: 20px;
background: $background4;
align-items: center;
img{
width: 50px;
}
.name{
font-size: 20px;
margin-left: 15px;
}
}
}
}
}
}

1
static/scss/style.scss
View file

@ -5,4 +5,5 @@
@import 'layouts/global.scss';
@import "layouts/nav.scss";
@import "layouts/cards.scss";
@import "layouts/quicksearch.scss";

126
templates/articles.html Normal file
View file

@ -0,0 +1,126 @@
{% extends 'base.html' %}
{% load static %}
{% block content %}
<section>
<h1>Articles</h1>
<div class="flex-card">
<div class="card">
<div class="inner">
<div class="img-container">
<img src="{% static 'images/sauvetage.png' %}">
</div>
<div class="content">
<p class="date">16/02/2020</p>
<p class="titre">Sauvetage risqué en côte d'Ivoire</p>
<a class="btn" href="">Voir l'article</a>
</div>
</div>
</div>
<div class="card">
<div class="inner">
<div class="img-container">
<img src="{% static 'images/sauvetage.png' %}">
</div>
<div class="content">
<p class="date">16/02/2020</p>
<p class="titre">Sauvetage risqué en côte d'Ivoire</p>
<a class="btn" href="">Voir l'article</a>
</div>
</div>
</div>
<div class="card">
<div class="inner">
<div class="img-container">
<img src="{% static 'images/sauvetage.png' %}">
</div>
<div class="content">
<p class="date">16/02/2020</p>
<p class="titre">Sauvetage risqué en côte d'Ivoire</p>
<a class="btn" href="">Voir l'article</a>
</div>
</div>
</div>
<div class="card">
<div class="inner">
<div class="img-container">
<img src="{% static 'images/sauvetage.png' %}">
</div>
<div class="content">
<p class="date">16/02/2020</p>
<p class="titre">Sauvetage risqué en côte d'Ivoire</p>
<a class="btn" href="">Voir l'article</a>
</div>
</div>
</div>
<div class="card">
<div class="inner">
<div class="img-container">
<img src="{% static 'images/sauvetage.png' %}">
</div>
<div class="content">
<p class="date">16/02/2020</p>
<p class="titre">Sauvetage risqué en côte d'Ivoire</p>
<a class="btn" href="">Voir l'article</a>
</div>
</div>
</div>
<div class="card">
<div class="inner">
<div class="img-container">
<img src="{% static 'images/sauvetage.png' %}">
</div>
<div class="content">
<p class="date">16/02/2020</p>
<p class="titre">Sauvetage risqué en côte d'Ivoire</p>
<a class="btn" href="">Voir l'article</a>
</div>
</div>
</div>
<div class="card">
<div class="inner">
<div class="img-container">
<img src="{% static 'images/sauvetage.png' %}">
</div>
<div class="content">
<p class="date">16/02/2020</p>
<p class="titre">Sauvetage risqué en côte d'Ivoire</p>
<a class="btn" href="">Voir l'article</a>
</div>
</div>
</div>
<div class="card">
<div class="inner">
<div class="img-container">
<img src="{% static 'images/sauvetage.png' %}">
</div>
<div class="content">
<p class="date">16/02/2020</p>
<p class="titre">Sauvetage risqué en côte d'Ivoire</p>
<a class="btn" href="">Voir l'article</a>
</div>
</div>
</div>
<div class="card">
<div class="inner">
<div class="img-container">
<img src="{% static 'images/sauvetage.png' %}">
</div>
<div class="content">
<p class="date">16/02/2020</p>
<p class="titre">Sauvetage risqué en côte d'Ivoire</p>
<a class="btn" href="">Voir l'article</a>
</div>
</div>
</div>
<a class="btn btn--blue" href="">Charger plus d'articles</a>
</div>
</section>
{% include 'quicksearch.html' %}
{% endblock %}

2
templates/base.html
View file

@ -17,7 +17,7 @@
</div>
</div>
<div class="right">
<i class="material-icons search">search</i>
<a href="#quicksearch"><i class="material-icons search">search</i></a>
<img src="{% static 'images/pesquet.jpg' %}">
</div>
</nav>

3
templates/index.html
View file

@ -1,8 +1,10 @@
{% extends 'base.html' %}
{% load static %}
{% block content %}
<h1>Les sauveteurs du Dunkerquois</h1>
<section>
<h2>Carte dynamique</h2>
<img class="map" src="{% static 'images/map.png' %}">
</section>
<section>
<h2>Articles récents</h2>
@ -39,4 +41,5 @@
</div>
</div>
</section>
{% include 'quicksearch.html' %}
{% endblock %}

82
templates/quicksearch.html
View file

@ -1,10 +1,72 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
{% load static %}
<div id="quicksearch">
<a class="close" href="#">
<i class="material-icons">close</i>
</a>
<div class="search-bar">
<input type="text" placeholder="Rechercher...">
<i class="material-icons">search</i>
</div>
<div class="fast-search">
<h2>Résultats rapide</h2>
<div class="flex-search">
<div class="search-col">
<p class="titre">Personnes</p>
<div class="search-card">
<img src="{% static 'images/pesquet.jpg' %}">
<p class="name">Thomas Pesquet</p>
</div>
<div class="search-card">
<img src="{% static 'images/pesquet.jpg' %}">
<p class="name">Thomas Pesquet</p>
</div>
<div class="search-card">
<img src="{% static 'images/pesquet.jpg' %}">
<p class="name">Thomas Pesquet</p>
</div>
<div class="search-card">
<img src="{% static 'images/pesquet.jpg' %}">
<p class="name">Thomas Pesquet</p>
</div>
</div>
<div class="search-col">
<p class="titre">Articles</p>
<div class="search-card">
<img src="{% static 'images/sauvetage.png' %}">
<p class="name">Sauvetage risqué en côte d'Ivoire</p>
</div>
<div class="search-card">
<img src="{% static 'images/sauvetage.png' %}">
<p class="name">Sauvetage risqué en côte d'Ivoire</p>
</div>
<div class="search-card">
<img src="{% static 'images/sauvetage.png' %}">
<p class="name">Sauvetage risqué en côte d'Ivoire</p>
</div>
<div class="search-card">
<img src="{% static 'images/sauvetage.png' %}">
<p class="name">Sauvetage risqué en côte d'Ivoire</p>
</div>
</div>
<div class="search-col">
<p class="titre">Bateaux</p>
<div class="search-card">
<img src="{% static 'images/bateau.jpg' %}">
<p class="name">SNS 147</p>
</div>
<div class="search-card">
<img src="{% static 'images/bateau.jpg' %}">
<p class="name">SNS 147</p>
</div>
<div class="search-card">
<img src="{% static 'images/bateau.jpg' %}">
<p class="name">SNS 147</p>
</div>
<div class="search-card">
<img src="{% static 'images/bateau.jpg' %}">
<p class="name">SNS 147</p>
</div>
</div>
</div>
</div>
</div>