Added new top movie project
This commit is contained in:
parent
d322f37646
commit
a9386d6d15
BIN
Visual Studio Code Projects/day-64-starting-files-top-movies/.DS_Store
vendored
Normal file
BIN
Visual Studio Code Projects/day-64-starting-files-top-movies/.DS_Store
vendored
Normal file
Binary file not shown.
@ -0,0 +1,40 @@
|
|||||||
|
from flask import Flask, render_template, redirect, url_for, request
|
||||||
|
from flask_bootstrap import Bootstrap5
|
||||||
|
from flask_sqlalchemy import SQLAlchemy
|
||||||
|
from sqlalchemy.orm import DeclarativeBase, Mapped, mapped_column
|
||||||
|
from sqlalchemy import Integer, String, Float
|
||||||
|
from flask_wtf import FlaskForm
|
||||||
|
from wtforms import StringField, SubmitField
|
||||||
|
from wtforms.validators import DataRequired
|
||||||
|
import requests
|
||||||
|
|
||||||
|
'''
|
||||||
|
Red underlines? Install the required packages first:
|
||||||
|
Open the Terminal in PyCharm (bottom left).
|
||||||
|
|
||||||
|
On Windows type:
|
||||||
|
python -m pip install -r requirements.txt
|
||||||
|
|
||||||
|
On MacOS type:
|
||||||
|
pip3 install -r requirements.txt
|
||||||
|
|
||||||
|
This will install the packages from requirements.txt for this project.
|
||||||
|
'''
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
app.config['SECRET_KEY'] = '8BYkEfBA6O6donzWlSihBXox7C0sKR6b'
|
||||||
|
Bootstrap5(app)
|
||||||
|
|
||||||
|
# CREATE DB
|
||||||
|
|
||||||
|
|
||||||
|
# CREATE TABLE
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/")
|
||||||
|
def home():
|
||||||
|
return render_template("index.html")
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
app.run(debug=True)
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
Bootstrap_Flask==2.2.0
|
||||||
|
Requests==2.31.0
|
||||||
|
WTForms==3.0.1
|
||||||
|
Flask_WTF==1.2.1
|
||||||
|
Werkzeug==3.0.0
|
||||||
|
Flask==2.3.2
|
||||||
|
flask_sqlalchemy==3.1.1
|
||||||
|
SQLAlchemy==2.0.25
|
||||||
@ -0,0 +1,214 @@
|
|||||||
|
*, *:before, *:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #333;
|
||||||
|
font-family: "Nunito Sans", sans-serif;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #ecf0f9;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
.large {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
margin: 0 auto;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
max-width: 1500px;
|
||||||
|
}
|
||||||
|
p.overview {
|
||||||
|
font-size: 12px;
|
||||||
|
height: 200px;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.heading {
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 1rem;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 1.618rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1ch;
|
||||||
|
line-height: 1;
|
||||||
|
padding-bottom: 0.5em;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.heading:after {
|
||||||
|
display: block;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 60px;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(135deg, #1a9be6, #1a57e6);
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.description {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: 1rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
width: calc(33% - 3rem);
|
||||||
|
min-width: calc(33% - 3rem);
|
||||||
|
height: 400px;
|
||||||
|
min-height: 400px;
|
||||||
|
perspective: 1000px;
|
||||||
|
margin: 1rem auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
.card {
|
||||||
|
width: calc(50% - 3rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 500px) {
|
||||||
|
.card {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.front, .back {
|
||||||
|
display: flex;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transition: ease-in-out 600ms;
|
||||||
|
}
|
||||||
|
.front {
|
||||||
|
background-size: cover;
|
||||||
|
padding: 2rem;
|
||||||
|
font-size: 1.618rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: Poppins, sans-serif;
|
||||||
|
}
|
||||||
|
.front:before {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
content: '';
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(135deg, #1a9be6, #1a57e6);
|
||||||
|
opacity: 0.25;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.card:hover .front {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
.card:nth-child(even):hover .front {
|
||||||
|
transform: rotateY(-180deg);
|
||||||
|
}
|
||||||
|
.back {
|
||||||
|
background: #fff;
|
||||||
|
transform: rotateY(-180deg);
|
||||||
|
padding: 0 2em;
|
||||||
|
}
|
||||||
|
.card:hover .back {
|
||||||
|
transform: rotateY(0deg);
|
||||||
|
}
|
||||||
|
.card:nth-child(even) .back {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
.card:nth-child(even):hover .back {
|
||||||
|
transform: rotateY(0deg);
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
transform: translateZ(40px);
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
border-radius: 100px;
|
||||||
|
font: inherit;
|
||||||
|
background: linear-gradient(135deg, #1a9be6, #1a57e6);
|
||||||
|
border: none;
|
||||||
|
position: relative;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transition: 300ms ease;
|
||||||
|
}
|
||||||
|
.button:before {
|
||||||
|
transition: 300ms ease;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
content: '';
|
||||||
|
transform: translateZ(-40px);
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
height: calc(100% - 20px);
|
||||||
|
width: calc(100% - 20px);
|
||||||
|
border-radius: 100px;
|
||||||
|
left: 10px;
|
||||||
|
top: 16px;
|
||||||
|
box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25);
|
||||||
|
background-color: rgba(26, 87, 230, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.delete-button {
|
||||||
|
background-color: rgba(230, 87, 230, 0.25);
|
||||||
|
background: linear-gradient(135deg, #e61a46, #e61a1a);
|
||||||
|
}
|
||||||
|
.button.delete-button:before {
|
||||||
|
background-color: rgba(230, 87, 230, 0.25);
|
||||||
|
box-shadow: 0 0 10px 10px rgba(230, 87, 230, 0.25);
|
||||||
|
}
|
||||||
|
.button:hover {
|
||||||
|
transform: translateZ(55px);
|
||||||
|
}
|
||||||
|
.button:hover:before {
|
||||||
|
transform: translateZ(-55px);
|
||||||
|
}
|
||||||
|
.button:active {
|
||||||
|
transform: translateZ(20px);
|
||||||
|
}
|
||||||
|
.button:active:before {
|
||||||
|
transform: translateZ(-20px);
|
||||||
|
top: 12px;
|
||||||
|
top: 12px;
|
||||||
|
}
|
||||||
|
.container.add {
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.rating {
|
||||||
|
color: #E4BB23;
|
||||||
|
}
|
||||||
|
.review {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.movie_gens {
|
||||||
|
font-size: 11.5px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.release_date {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
{% extends 'base.html' %}
|
||||||
|
|
||||||
|
{% block title %}Add Movie{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<div class="content">
|
||||||
|
<h1 class="heading">Add a Movie</h1>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{% block styles %}
|
||||||
|
<!-- Load Bootstrap-Flask CSS here -->
|
||||||
|
{{ bootstrap.load_css() }}
|
||||||
|
<!-- Link to the styles.css here to apply styling to all the child templates.-->
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,700"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css?family=Poppins:300,400,700"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
|
||||||
|
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
|
||||||
|
crossorigin="anonymous"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="{{ url_for('static', filename='css/styles.css') }}"
|
||||||
|
/>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
<title>{% block title %}{% endblock %}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
{% extends 'base.html' %} {% from 'bootstrap5/form.html' import render_form %}
|
||||||
|
{% block title %}Edit Movies{% endblock %} {% block content %}
|
||||||
|
<div class="content">
|
||||||
|
<h1 class="heading">Movie Title</h1>
|
||||||
|
<p class="description">Edit Movie Rating</p>
|
||||||
|
{{ render_form(form, novalidate=True) }}
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
{% extends 'base.html' %}
|
||||||
|
|
||||||
|
{% block title %}My Top 10 Movies{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="heading">My Top 10 Movies</h1>
|
||||||
|
<p class="description">These are my all-time favourite movies.</p>
|
||||||
|
|
||||||
|
<div class="card" >
|
||||||
|
<div class="front" style="background-image: url('https://www.shortlist.com/media/images/2019/05/the-30-coolest-alternative-movie-posters-ever-2-1556670563-K61a-column-width-inline.jpg');">
|
||||||
|
<p class="large">1</p>
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
<div>
|
||||||
|
<div class="title">Drive <span class="release_date">(2011)</span></div>
|
||||||
|
<div class="rating">
|
||||||
|
<label>7.5</label>
|
||||||
|
<i class="fas fa-star star"></i>
|
||||||
|
</div>
|
||||||
|
<p class="review">"Loved it!"</p>
|
||||||
|
<p class="overview">
|
||||||
|
A mysterious Hollywood stuntman and mechanic moonlights as a getaway driver and finds himself in trouble when he helps out his neighbor in this action drama.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a href="#" class="button">Update</a>
|
||||||
|
<a href="#" class="button delete-button">Delete</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container text-center add">
|
||||||
|
<a href="#" class="button">Add Movie</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
{% extends 'base.html' %}
|
||||||
|
|
||||||
|
{% block title %}Select Movie{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="heading">Select Movie</h1>
|
||||||
|
<p>
|
||||||
|
<a href="#"> MOVIE TITLE - MOVIE RELEASE DATE</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
Loading…
Reference in New Issue
Block a user