diff --git a/30-days-of-python/26_Desarrollo_web_en_Python/README.md b/30-days-of-python/26_Desarrollo_web_en_Python/README.md index e8a2a6d..ac0e9ed 100644 --- a/30-days-of-python/26_Desarrollo_web_en_Python/README.md +++ b/30-days-of-python/26_Desarrollo_web_en_Python/README.md @@ -6,4 +6,6 @@ Documento original en inglés: [Python web](https://github.com/Asabeneh/30-Days- 1. Construirás esta [aplicación](https://thirtydaysofpython-v1-final.herokuapp.com/). Solo queda la parte del analizador de texto. +[Solución](./web/) + [<< Day 25](../25_Pandas/README.md) | [Day 27 >>](../27_Python_con_MongoDB/README.md) diff --git a/30-days-of-python/26_Desarrollo_web_en_Python/web/Procfile b/30-days-of-python/26_Desarrollo_web_en_Python/web/Procfile new file mode 100644 index 0000000..e6cb5ad --- /dev/null +++ b/30-days-of-python/26_Desarrollo_web_en_Python/web/Procfile @@ -0,0 +1 @@ +web: python app.py \ No newline at end of file diff --git a/30-days-of-python/26_Desarrollo_web_en_Python/web/app.py b/30-days-of-python/26_Desarrollo_web_en_Python/web/app.py new file mode 100644 index 0000000..ceaea2e --- /dev/null +++ b/30-days-of-python/26_Desarrollo_web_en_Python/web/app.py @@ -0,0 +1,44 @@ +""" +app.py +""" + +from flask import Flask, render_template, request, redirect, url_for +import os + +app = Flask(__name__) + +app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0 + + +@app.route('/') +def home(): + techs = ['HTML', 'CSS', 'Flask', 'Python'] + name = '30 Days Of Python Programming' + return render_template('home.html', techs=techs, name=name, title='Home') + + +@app.route('/about') +def about(): + name = '30 Days Of Python Programming' + return render_template('about.html', name=name, title='About Us') + + +@app.route('/result') +def result(): + return render_template('result.html') + + +@app.route('/post', methods=['GET', 'POST']) +def post(): + name = 'Text Analyzer' + if request.method == 'GET': + return render_template('post.html', name=name, title=name) + if request.method == 'POST': + content = request.form['content'] + print(content) + return redirect(url_for('result')) + + +if __name__ == '__main__': + port = int(os.environ.get("PORT", 5000)) + app.run(debug=True, host='0.0.0.0', port=port) diff --git a/30-days-of-python/26_Desarrollo_web_en_Python/web/requirements.txt b/30-days-of-python/26_Desarrollo_web_en_Python/web/requirements.txt new file mode 100644 index 0000000..b420f13 --- /dev/null +++ b/30-days-of-python/26_Desarrollo_web_en_Python/web/requirements.txt @@ -0,0 +1,7 @@ +blinker==1.6.3 +click==8.1.7 +Flask==3.0.0 +itsdangerous==2.1.2 +Jinja2==3.1.2 +MarkupSafe==2.1.3 +Werkzeug==3.0.0 \ No newline at end of file diff --git a/30-days-of-python/26_Desarrollo_web_en_Python/web/static/css/main.css b/30-days-of-python/26_Desarrollo_web_en_Python/web/static/css/main.css new file mode 100644 index 0000000..6408e62 --- /dev/null +++ b/30-days-of-python/26_Desarrollo_web_en_Python/web/static/css/main.css @@ -0,0 +1,206 @@ +/* === GENERAL === */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* === css variables === */ +:root { + --header-bg-color: #4a7799; + --textarea-bg-color: rgb(250, 246, 246); + --body-bg-color: rgb(210, 214, 210); + --nav-link-color: #bbb; +} + +/* === body style === */ +body { + background: var(--body-bg-color); + margin: auto; + line-height: 1.75; + font-weight: 900; + word-spacing: 1.5px; + font-family: 'Lato', sans-serif; + font-weight: 300; +} + +/* === header style === */ +header { + background: var(--header-bg-color); +} + +/* === title and subtitle style === */ +h1, +h2 { + margin: 20px; + font-weight: 300; + font-family: Nunito; +} + +/* === header menu style === */ + +.menu-container { + width: 90%; + display: flex; + justify-content: space-around; + align-items: center; + color: rgb(221, 215, 215); + padding: 25px; +} + +.nav-lists { + display: flex; +} + +.nav-list { + list-style: none; + margin: 0 5px; +} + +.nav-link { + text-decoration: none; + font-size: 22px; + padding: 0 5px; + color: var(--nav-link-color); + font-weight: 400; +} + +.brand-name { + font-size: 28px; + font-weight: bolder; +} + +/* === paragraph text style === */ +p { + font-size: 22px; + font-weight: 300; +} + +/* === main style === */ +main { + width: 90%; + margin: auto; +} + +/* === container div inside main style === */ + +.container { + background: rgb(210, 214, 210); + padding: 20px; + margin: auto; +} + +.tech-lists { + margin: 10px auto; + text-align: left; + font-size: 20px; +} + +.tech { + list-style: none; +} + +/* === button style === */ +.btn { + width: 150px; + height: 50px; + background: var(--header-bg-color); + color: var(--nav-link-color); + font-size: 20px; + margin: 5px; + border: 1px solid var(--header-bg-color); + font-family: Lato; + cursor: pointer; +} + +.btn:focus { + outline: 2px solid #2a70a5; + cursor: pointer; +} + +/* === textarea style === */ +textarea { + width: 65%; + margin: auto; + padding: 15px; + outline: 2px solid rgba(207, 203, 203, 0.25); + border: none; + font-size: 18px; + font-family: Lato; + font-weight: 300; +} + +.result-header { + font-weight: 300; + margin-bottom: 10px; +} + +textarea:focus { + border: none; + outline: 2px solid rgba(74, 119, 153, 0.45); + background: var(--textarea-bg-color); + font-size: 18px; + caret-color: var(--header-bg-color); + font-family: Lato; + font-weight: 300; + +} + +table { + width: 50%; + text-align: center; + border: 1px solid #ccc; + border-collapse: collapse; +} + +tr { + background-color: #f8f8f8; + border: 1px solid #ddd; + padding: .35em; + +} + +tbody tr, +tbody td { + padding: .625em; + text-align: center; +} + +thead tr th { + background: var(--header-bg-color); + font-size: .85em; + letter-spacing: .1em; + text-transform: uppercase; + padding: 15px; + color: var(--nav-link-color); +} + +/* === responsiveness === */ +@media (max-width:600px) { + main { + width: 100%; + } + + .menu-container { + flex-direction: column; + justify-content: space-between; + } + + h1 { + font-size: 22px; + } + + .nav-lists { + flex-direction: column; + } + + textarea { + width: 100%; + } + + table { + width: 100%; + } + +} \ No newline at end of file diff --git a/30-days-of-python/26_Desarrollo_web_en_Python/web/templates/about.html b/30-days-of-python/26_Desarrollo_web_en_Python/web/templates/about.html new file mode 100644 index 0000000..4d238b7 --- /dev/null +++ b/30-days-of-python/26_Desarrollo_web_en_Python/web/templates/about.html @@ -0,0 +1,13 @@ +{% extends 'layout.html' %} {% block content %} +
+

Sobre esto

+ +

+ Poco que decir, solo que esto es una web hecha con python y flask. + Es un ejercicio que se ha extraído del repositorio + github de 30DaysOfPython. +

+
+{% endblock %} \ No newline at end of file diff --git a/30-days-of-python/26_Desarrollo_web_en_Python/web/templates/home.html b/30-days-of-python/26_Desarrollo_web_en_Python/web/templates/home.html new file mode 100644 index 0000000..6cba7e3 --- /dev/null +++ b/30-days-of-python/26_Desarrollo_web_en_Python/web/templates/home.html @@ -0,0 +1,23 @@ +{% extends 'layout.html' %} {% block content %} +
+

Welcome to {{name}}

+
+ python +
+

+ This application clean texts and analyse the number of word, characters + and + most frequent words in the text. Check it out by click text analyzer at + the + menu. You need the following technologies to build this web application: +

+ +
+ +{% endblock %} diff --git a/30-days-of-python/26_Desarrollo_web_en_Python/web/templates/layout.html b/30-days-of-python/26_Desarrollo_web_en_Python/web/templates/layout.html new file mode 100644 index 0000000..c4bd774 --- /dev/null +++ b/30-days-of-python/26_Desarrollo_web_en_Python/web/templates/layout.html @@ -0,0 +1,43 @@ + + + + + + + + {% if title %} + 30 Days of Python - {{ title}} + {% else %} + 30 Days of Python + {% endif %} + + + +
+
+
+ 30DaysOfPython +
+ +
+
+
+ {% block content %} {% endblock %} +
+ + \ No newline at end of file diff --git a/30-days-of-python/26_Desarrollo_web_en_Python/web/templates/post.html b/30-days-of-python/26_Desarrollo_web_en_Python/web/templates/post.html new file mode 100644 index 0000000..ffeb0e0 --- /dev/null +++ b/30-days-of-python/26_Desarrollo_web_en_Python/web/templates/post.html @@ -0,0 +1,15 @@ +{% extends 'layout.html' %} {% block content %} +
+

Text Analyzer

+
+
+ +
+
+ +
+
+
+ +{% endblock %} \ No newline at end of file diff --git a/30-days-of-python/26_Desarrollo_web_en_Python/web/templates/result.html b/30-days-of-python/26_Desarrollo_web_en_Python/web/templates/result.html new file mode 100644 index 0000000..e69de29