remoll/polyhack_2021
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better profile page

Browse Source
This commit is contained in:
Remy Moll
2021-10-31 00:56:14 +02:00
parent 14ddbf0ce4
commit d8c7efe7e0
12 changed files with 255 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
templates/base.html
View File

@@ -16,17 +16,11 @@
<script src="static/index.js"></script>
</head>
<body>
{% include "sidebar.html" %}
<div class="container-fluid">
<h1 class="display-3">Physical doodling</h1>
<div class="row row-cols-1 row-cols-lg-2 row-cols-xl-3 row-cols-xxl-4 p-1">
<h1 class="display-3">Welcome {{ context.user }}</h1>
<div class="col">
<div class="list">
</div>
</div>
<div class="container-fluid content">
{% block content %}{% endblock %}
</div>
</body>
</html>

2
templates/event_card.html
View File

@@ -4,7 +4,7 @@
<!-- </div> -->
<div class="sep"></div>
<div class="card-body">
<h5 class="card-title">{{ context.title }}</h5>
<h5 class="card-title ">{{ context.title }}</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item"><i class="far fa-clock"></i> Total duration: {{context.duration }}</li>
<li class="list-group-item"><i class="far fa-map"></i> {{ context.location }}</li>

0
templates/event_detail.html Normal file
View File

30
templates/event_overview.html Normal file
View File

@@ -0,0 +1,30 @@
{% extends "base.html" %}
{% block content %}
<div class="row row-cols-1 row-cols-lg-2 row-cols-xl-3 row-cols-xxl-4 p-1">
<div class="col">
<!-- Background video -->
<div class="card mb-2 shadow">
<div class="video-background-holder ratio ratio-3x1">
<div class="video-background-overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="/static/background.mp4" type="video/mp4">
</video>
<div class="video-background-content container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-4">Welcome {{ context.user }}.</h1>
</div>
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">The weather today is:</h5>
</div>
</div>
<div class="list"></div>
</div>
</div>
{% endblock %}

80
templates/sidebar.html
View File

@@ -1,8 +1,82 @@
<nav class="navbar navbar-dark fixed-top bg-secondary">
<nav class="navbar navbar-dark navbar-custom fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="/static/SBB-Logo.png" alt="SBB" width="50px">
<span class="font-monospace fw-bold">Click & Hike</span>
<img src="/static/sbb.png" alt="SBB" width="30px">
<span class="font-monospace fw-bold">Click &
<span class="ml4">
<span class="letters letters-1">Hike</span>
<span class="letters letters-2">Bike</span>
<span class="letters letters-3">Culture</span>
<span class="letters letters-4">Jodel</span>
</span>
</span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script>
var ml4 = {};
ml4.opacityIn = [0,1];
ml4.scaleIn = [0.2, 1];
ml4.scaleOut = 2.5;
ml4.durationIn = 900;
ml4.durationOut = 800;
ml4.delay = 600;
anime.timeline({loop: true})
.add({
targets: '.ml4 .letters-1',
opacity: ml4.opacityIn,
scale: ml4.scaleIn,
duration: ml4.durationIn
}).add({
targets: '.ml4 .letters-1',
opacity: 0,
scale: ml4.scaleOut,
duration: ml4.durationOut,
easing: "easeInExpo",
delay: ml4.delay
}).add({
targets: '.ml4 .letters-2',
opacity: ml4.opacityIn,
scale: ml4.scaleIn,
duration: ml4.durationIn
}).add({
targets: '.ml4 .letters-2',
opacity: 0,
scale: ml4.scaleOut,
duration: ml4.durationOut,
easing: "easeInExpo",
delay: ml4.delay
}).add({
targets: '.ml4 .letters-3',
opacity: ml4.opacityIn,
scale: ml4.scaleIn,
duration: ml4.durationIn
}).add({
targets: '.ml4 .letters-3',
opacity: 0,
scale: ml4.scaleOut,
duration: ml4.durationOut,
easing: "easeInExpo",
delay: ml4.delay
}).add({
targets: '.ml4 .letters-4',
opacity: ml4.opacityIn,
scale: ml4.scaleIn,
duration: ml4.durationIn
}).add({
targets: '.ml4 .letters-4',
opacity: 0,
scale: ml4.scaleOut,
duration: ml4.durationOut,
easing: "easeInExpo",
delay: ml4.delay
}).add({
targets: '.ml4',
opacity: 0,
duration: 0,
delay: 0
});
</script>
</a>

30
templates/user_detail.html Normal file
View File

@@ -0,0 +1,30 @@
{% extends "base.html" %}
{% block content %}
<div class="card mb-4 shadow">
<div class="card-body">
<h5 class="card-title">{{ user.name }} - Profile overview</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item">id: {{user.id }}</li>
<li class="list-group-item">total trips: {{ user.number_of_trips }}</li>
<li class="list-group-item">total CO2 saved: {{user.co2_economies }}</li>
</ul>
</div>
</div>
<div class="card mb-4 shadow">
<div class="card-body">
<h5 class="card-title">Previous destinations</h5>
<iframe src="/static/{{ context.map_path }}"></iframe>
</div>
</div>
<div class="card mb-4 shadow">
<div class="card-body">
<h5 class="card-title">Travel overview</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item">id: {{user.id }}</li>
<li class="list-group-item">total trips: {{ user.trips }}</li>
<li class="list-group-item">total CO2 saved: {{user.total_co2_savings }}</li>
</ul>
</div>
</div>
{% endblock %}