Atualizando layout do site - add pagina Sobre

joaoallmeida · Jan 23, 2024 · d335a35 · d335a35
1 parent 0cbcea7
commit d335a35
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 17 deletions.
diff --git a/app/main.py b/app/main.py
@@ -1,17 +1,10 @@
 from flask import Flask, render_template, request, redirect, flash
 from calculator import Calculator
 
-
 app = Flask(__name__)
 app.secret_key = b'_5#y2L"F4Q8z\n\xec]/'
 
-
-@app.route('/')
-def index():
-    # Redirecionando URL para o endereço /calculadora
-    return redirect('/calculadora')
-
-@app.route("/calculadora", methods=['GET','POST'])
+@app.route('/', methods=['GET','POST'])
 def calc():
     # Verifica o tipo de requisição.
     if request.method == "POST":
@@ -30,9 +23,13 @@ def calc():
         data = calc.calculator()
 
         return render_template('index.html', data=data)
-
 
     return render_template('index.html')
 
+@app.route('/sobre', methods=['GET'])
+def about():
+    return render_template('about.html')
+
+
 if __name__=="__main__":
-    app.run(host="0.0.0.0", debug=True)
+    app.run(host="0.0.0.0", debug=True)
diff --git a/app/static/img/icons8-prédio-96.png b/app/static/img/icons8-prédio-96.png
diff --git a/app/static/style.css b/app/static/style.css
@@ -29,6 +29,24 @@ body {
     border-color: #dd7835;
 }
 
+.p-conf {
+    color: #b8b8b8;
+    font-size: 18px;
+}
+
+.p-footer {
+    color: #b8b8b8;
+    font-size: 12px;
+    font-style: italic;
+}
+
+.navbar-color {
+    background-color: #eeeeee;
+}
+
+.navbar-title {
+    text-transform: initial;
+}
 
 a {
     color: #ffffff;

diff --git a/app/templates/about.html b/app/templates/about.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Calculadora | Sobre</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet">
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+        <link rel="stylesheet" type="text/css" href="../static/style.css">
+        <link rel="icon" href="https://img.icons8.com/color/48/cash.png">
+    </head>
+    <body>
+        <nav class="navbar navbar-expand navbar-color"">
+            <div class="container-fluid">
+                <a class="navbar-brand navbar-title" href="{{ url_for('calc')}}">
+                    <img src="https://img.icons8.com/color/48/cash.png" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
+                    Calculadora Fiis
+                </a>
+              <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
+                <ul class="navbar-nav">
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="{{ url_for('calc')}}">
+                            <img width="30" height="30" class="d-inline-block align-text-top" src="https://img.icons8.com/ios/50/back--v1.png"> 
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="{{ url_for('about')}}">
+                        <img width="30" height="30" class="d-inline-block align-text-top" src="https://img.icons8.com/office/30/about.png"> 
+                        </a>
+                    </li>
+                </ul>
+              </div>
+            </div>
+        </nav>
+        <div class="container-fluid mt-5 p-5 d-flex flex-wrap justify-content-center">
+            <div class="container d-block m-3 border-bottom">
+                <h3 class="text-left text-light mb-4">Sobre</h3>
+                <p class="p-conf text-left">
+                    O objetivo deste site é ajudar investidores a calcular os possíveis ganhos com fundos imobiliários, com base na quantidade de cotas ou no valor investido.
+                </p>
+            </div>
+            <div class="container d-block m-3 border-bottom">
+                <h3 class="text-left text-light mb-3">Autor</h3>
+                <p class="p-conf text-break text-left">
+                    Desenvolvido por um programador backend com um forte viés em engenharia de dados desenvolveu um site para calcular os possíveis ganhos de fundos imobiliários,
+                    no qual ficou com preguiça de pesquisar na internet e decidiu criar uma ferramenta simples e eficiente para atender às suas próprias necessidades.
+                    <br><br>
+                    Desenvolvido por <a class="link-primary" href="https://www.linkedin.com/in/joaovictorasoares/">João Soares</a>.
+                </p>
+            </div>
+            <div class="container d-block m-3">
+                <h3 class="text-left text-light mb-3">Quero Ajudar</h3>
+                <p class="p-conf text-break text-left">
+                   Quer ajudar no desenvolvimento e na melhoria do site ? ou achou algum bug ?
+                </p>
+                <div class="container p-1 d-flex flex-wrap justify-content-start">
+                    <a class="btn btn-outline-primary ms-0" href="https://github.com/joaoallmeida/calculadora-fiis" target="_blank" role="button">
+                        <img width="24" height="24" src="https://img.icons8.com/ios-glyphs/30/FFFFFF/github.png" alt="github"/>
+                        Quero Ajudar
+                    </a>
+                    <a class="btn btn-outline-secondary ms-xl-3 ms-0" href="https://github.com/joaoallmeida/calculadora-fiis/graphs/contributors" role="button">
+                        <img width="24" height="24" src="https://img.icons8.com/ios-glyphs/30/FFFFFF/github.png" alt="github"/>
+                        Desenvolvedores
+                    </a>
+                </div>
+            </div>
+            <div class="container d-block m-3 border-top">
+                <div class="mt-4">
+                    <h5 class="text-light">Créditos</h5>
+                </div>
+                <p class="p-footer mb-0"> Informações gerais fornecido por <a class="link-primary" href="https://statusinvest.com.br/">Status Invest</a></p>
+                <p class="p-footer mb-0"> Relátorios gerenciais fornecidos por <a class="link-primary" href="https://www.b3.com.br/pt_br/produtos-e-servicos/negociacao/renda-variavel/fundos-de-investimentos/fii/fiis-listados/">B3</a></p>
+                <p class="p-footer"> Icons by <a class="link-primary" href="https://icons8.com.br/">Icons8</a></p>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/app/templates/index.html b/app/templates/index.html
@@ -2,14 +2,14 @@
 <html lang="pt-br">
 
 <head>
-    <title>Calculadora FIIs</title>
+    <title>Calculadora | Rendimentos FIIs</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="../static/style.css">
-    <link rel="icon" href="../static/img/icons8-prédio-96.png">
+    <link rel="icon" href="https://img.icons8.com/color/48/cash.png">
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"></script>
@@ -20,6 +20,23 @@
     </script>
 </head>
 <body>
+    <nav class="navbar navbar-expand navbar-color" >
+        <div class="container-fluid ">
+          <a class="navbar-brand navbar-title" href="{{ url_for('calc')}}">
+            <img src="https://img.icons8.com/color/48/cash.png" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
+            Calculadora Fiis
+        </a>
+          <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="{{ url_for('about')}}">
+                   <img width="30" height="30" class="d-inline-block align-text-top" src="https://img.icons8.com/office/30/about.png"> 
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+    </nav>
     <div class="container justify-content-center align-items-center" style="margin-top: 100px;">
         <div class="m-4 text-center">
             <i><img class="rounded mx-auto d-block mb-3"  src="https://img.icons8.com/cotton/64/calculator--v2.png" /> </i>
@@ -52,12 +69,12 @@ <h1 class="text-white mb-5"> Calculadora de Rendimentos FIIs</h1>
                         </div>
                     </div>
                 </div>
-                    
+
                 <div>
                     <button class="btn btn-outline-primary m-4" type="submit">Calcular</button>
-                    <button class="btn btn-outline-secondary m-4" type="reset" onclick="window.location.href='/calculadora'">Limpar</button>
+                    <button class="btn btn-outline-secondary m-4" type="reset" onclick="window.location.href='/'">Limpar</button>
                 </div>
-                
+
             </form>
         </div>
 
@@ -69,7 +86,7 @@ <h1 class="text-white mb-5"> Calculadora de Rendimentos FIIs</h1>
             </div>
             {% endfor %}
         </div>
-        
+
         {% if data %}
         <div class="container d-block">
             <hr class="border border-1">
@@ -124,4 +141,4 @@ <h1 class="text-white mb-5"> Calculadora de Rendimentos FIIs</h1>
         {% endif %}
     </div>
 </body>
-</html>
+</html>