diff --git a/Visual Studio Code Projects/day-64-starting-files-top-movies/.DS_Store b/Visual Studio Code Projects/day-64-starting-files-top-movies/.DS_Store new file mode 100644 index 0000000..c6eca58 Binary files /dev/null and b/Visual Studio Code Projects/day-64-starting-files-top-movies/.DS_Store differ diff --git a/Visual Studio Code Projects/day-64-starting-files-top-movies/main.py b/Visual Studio Code Projects/day-64-starting-files-top-movies/main.py new file mode 100644 index 0000000..039c7c2 --- /dev/null +++ b/Visual Studio Code Projects/day-64-starting-files-top-movies/main.py @@ -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) diff --git a/Visual Studio Code Projects/day-64-starting-files-top-movies/requirements.txt b/Visual Studio Code Projects/day-64-starting-files-top-movies/requirements.txt new file mode 100644 index 0000000..4422a35 --- /dev/null +++ b/Visual Studio Code Projects/day-64-starting-files-top-movies/requirements.txt @@ -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 diff --git a/Visual Studio Code Projects/day-64-starting-files-top-movies/static/css/styles.css b/Visual Studio Code Projects/day-64-starting-files-top-movies/static/css/styles.css new file mode 100644 index 0000000..d6f8963 --- /dev/null +++ b/Visual Studio Code Projects/day-64-starting-files-top-movies/static/css/styles.css @@ -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; +} diff --git a/Visual Studio Code Projects/day-64-starting-files-top-movies/templates/add.html b/Visual Studio Code Projects/day-64-starting-files-top-movies/templates/add.html new file mode 100644 index 0000000..3cb0fd6 --- /dev/null +++ b/Visual Studio Code Projects/day-64-starting-files-top-movies/templates/add.html @@ -0,0 +1,9 @@ +{% extends 'base.html' %} + +{% block title %}Add Movie{% endblock %} + +{% block content %} +
+

Add a Movie

+
+{% endblock %} \ No newline at end of file diff --git a/Visual Studio Code Projects/day-64-starting-files-top-movies/templates/base.html b/Visual Studio Code Projects/day-64-starting-files-top-movies/templates/base.html new file mode 100644 index 0000000..1475f37 --- /dev/null +++ b/Visual Studio Code Projects/day-64-starting-files-top-movies/templates/base.html @@ -0,0 +1,39 @@ + + + + + + + {% block styles %} + + {{ bootstrap.load_css() }} + + + + + + {% endblock %} + + {% block title %}{% endblock %} + + + {% block content %}{% endblock %} + + diff --git a/Visual Studio Code Projects/day-64-starting-files-top-movies/templates/edit.html b/Visual Studio Code Projects/day-64-starting-files-top-movies/templates/edit.html new file mode 100644 index 0000000..d77bbdd --- /dev/null +++ b/Visual Studio Code Projects/day-64-starting-files-top-movies/templates/edit.html @@ -0,0 +1,8 @@ +{% extends 'base.html' %} {% from 'bootstrap5/form.html' import render_form %} +{% block title %}Edit Movies{% endblock %} {% block content %} +
+

Movie Title

+

Edit Movie Rating

+ {{ render_form(form, novalidate=True) }} +
+{% endblock %} diff --git a/Visual Studio Code Projects/day-64-starting-files-top-movies/templates/index.html b/Visual Studio Code Projects/day-64-starting-files-top-movies/templates/index.html new file mode 100644 index 0000000..f30f810 --- /dev/null +++ b/Visual Studio Code Projects/day-64-starting-files-top-movies/templates/index.html @@ -0,0 +1,37 @@ +{% extends 'base.html' %} + +{% block title %}My Top 10 Movies{% endblock %} + +{% block content %} +
+

My Top 10 Movies

+

These are my all-time favourite movies.

+ +
+
+

1

+
+
+
+
Drive (2011)
+
+ + +
+

"Loved it!"

+

+ 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. +

+ + Update + Delete + +
+
+
+
+
+Add Movie +
+ +{% endblock %} \ No newline at end of file diff --git a/Visual Studio Code Projects/day-64-starting-files-top-movies/templates/select.html b/Visual Studio Code Projects/day-64-starting-files-top-movies/templates/select.html new file mode 100644 index 0000000..9a8f1c5 --- /dev/null +++ b/Visual Studio Code Projects/day-64-starting-files-top-movies/templates/select.html @@ -0,0 +1,13 @@ +{% extends 'base.html' %} + +{% block title %}Select Movie{% endblock %} + +{% block content %} +
+

Select Movie

+

+ MOVIE TITLE - MOVIE RELEASE DATE +

+ +
+{% endblock %} \ No newline at end of file