Feat UI - added CSS to results page

This commit is contained in:
PragatiVerma18 2020-10-11 23:29:40 +05:30
parent 385d5b922e
commit 8b2b01a17d
2 changed files with 101 additions and 4 deletions

57
static/css/results.css Normal file
View File

@ -0,0 +1,57 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
position: relative;
overflow-x: hidden !important;
}
body {
user-select: none;
margin: 0;
padding: 0;
counter-reset: points;
background-color: #77aa77;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 2 1'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%2377aa77'/%3E%3Cstop offset='1' stop-color='%234fd'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='2' y2='2'%3E%3Cstop offset='0' stop-color='%23cf8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23cf8' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='2' height='1'/%3E%3Cg fill-opacity='0.5'%3E%3Cpolygon fill='url(%23b)' points='0 1 0 0 2 0'/%3E%3Cpolygon fill='url(%23c)' points='2 1 2 0 0 0'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
font-family: "helvetica", sans-serif !important;
}
a {
text-decoration: none;
color: inherit;
}
section {
padding-top: 150px;
}
main {
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
color: #000000;
background: #ffffff;
border-radius: 10px;
padding: 30px 40px 30px;
width: 95%;
max-width: 590px;
margin: auto;
}
.button.is-fullwidth {
display: flex;
width: 90%;
margin: auto;
margin-top: 30px;
}

View File

@ -2,13 +2,53 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/results.css') }}" />
<link rel="shortcut icon" href="https://avatars0.githubusercontent.com/u/65834464?s=200&amp;v=4"
type="image/x-icon">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
<script src="https://kit.fontawesome.com/22be60108b.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<title>MLH Quizzet</title>
</head> </head>
<body> <body>
<h1> You got {{ correct }}/{{ total }} right !</h1> <style type="text/css">
@font-face {
font-family: helvetica;
src: "{{ url_for('static', filename='fonts/helvetica.ttf')}}"
}
</style>
<nav class="navbar is-dark is-fixed-top has-text-centered" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<img src="https://avatars0.githubusercontent.com/u/65834464?s=200&amp;v=4" height="32" width="64"
style="margin: 10px">
<a class="navbar-item has-text-centered" href="{{ url_for('index') }}"><strong
class="is-size-3 has-text-centered">MLH Quizzet</strong></a>
<a class="github-fork-ribbon" href="https://github.com/PragatiVerma18/Fantastic-Falcons-1.0"
data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
<div class="navbar-burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</nav>
<section class="section-1" id="section-1">
<main>
<lottie-player src="https://assets3.lottiefiles.com/packages/lf20_0ge4xP.json" background="transparent" speed="1"
style="width: 240px; height: 240px; margin: auto !important;" loop autoplay></lottie-player>
<h1 class="has-text-centered is-size-3 has-text-weight-bold"> You got {{ correct }}/{{ total }} right!</h1>
<a class="button is-dark has-text-centered has-text-weight-bold is-rounded is-fullwidth" href="{{ url_for('index') }}"> Upload another document</a>
</main>
</section>
<div class="has-text-white has-text-centered" style="margin-top: 40px; background-color: #363636; padding: 10px;">
MIT License © Copyright 2020 Fantastic Falcons
</div>
</body> </body>
</html> </html>