From d335a35236cb368bfdce0657a44b1e7a51ced07a Mon Sep 17 00:00:00 2001
From: joaoallmeida <joaoallmeida96@gmail.com>
Date: Mon, 22 Jan 2024 22:25:15 -0300
Subject: [PATCH] Atualizando layout do site - add pagina Sobre

---
 app/main.py                                  |  17 ++--
 "app/static/img/icons8-pr\303\251dio-96.png" | Bin 1325 -> 0 bytes
 app/static/style.css                         |  18 +++++
 app/templates/about.html                     |  78 +++++++++++++++++++
 app/templates/index.html                     |  31 ++++++--
 5 files changed, 127 insertions(+), 17 deletions(-)
 delete mode 100644 "app/static/img/icons8-pr\303\251dio-96.png"
 create mode 100644 app/templates/about.html

diff --git a/app/main.py b/app/main.py
index 84be065..606c5df 100644
--- 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)
\ No newline at end of file
+    app.run(host="0.0.0.0", debug=True)
diff --git "a/app/static/img/icons8-pr\303\251dio-96.png" "b/app/static/img/icons8-pr\303\251dio-96.png"
deleted file mode 100644
index 700a8418f6c8896a7d899fdb497692c4ffb9d75d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1325
zcmV+|1=9M7P)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h00009a7bBm000XU
z000XU0RWnu7ytkS-$_J4RCt{2ozHI@MHI*91O+6d0)oGQ1OEaiBsjx~Gq;L%#>Q^b
zCPhfOQL4<uaoVJDjAvq(CRNg)N);l(#7M1FC{>_HAy_K72wJEp(H=-zWe*IRC`)a}
zj@LidGdugf(pPd;V{7((=DmHht5pyJMN{-p<^_sp-aLcz&+DE`B*h5-fe|4o7PoZI
zC6ZFXXS>!tmq-c#Xchp_EC8Tc06?<<fS~{=7BNcr_l$6&Z+4Lez#s1H4~W>(H@gS}
zV6Z>vUZ>;yWroEpBjQ1IKy{g7@fXA5V(M`I6=b_;jK9h--_#v+)(`}LID*A%$X1;?
zeBmG?;-2n6v;F;GES`M{*(ip&@J=)v=km_rwA>iVG<0=PHhdiK#y=j<%Cj;4__wiG
zK(=X=<ldl!|Eo@LlnA+gym|2Z4Pav^BX165>oehPWQ)?V^UpFOe)CT5vt+JiK>7_}
zV<;mpC2}>TXyo0(i^v91%%{B*I~V8j{ywG0vsV%(V#3$)Uij|dv^=w$rMsnQ7KL5(
zh<M#AJ<7KRvc7_`HjtH9k~z6nSE`yF52_T69^r4HuxjL3;TeYc&)&%_CR&#s6TFbf
zxsM_6KUp&S914?Ia{ehw#D|pdy9TtCvTI}h6D9op;djIVWV$kkGEY;?Z)gu13B=#1
ztVSk_5<YA|pkz>1=Z8!dC49}B?9IhV`RH~^ZvPTqKf0Zg-!4p616V^QOWh{+Cc9Z4
z(;mR>9(c2yssdp6ZE%W3*_*6dIW}a#jrp1kSVty{5&nVhI?aMK<|mQqT@WMuD?5WP
zR#c0POqc4H85Rl4f}cpo(odo=srm$5rxH4|s`;ZZ3IJ#p00;qqFF*N0rrw+Rf1LWf
zGF#L(#*JDD8c!DXT=2$^7PO6VqXs~&!1`5Lnk#A><3<gD$z}kc0stTbgxw`5EL{+5
z?t7GokA{cmpFpO`rY?xJyj8(ZA=6}27sOhaV*Up*O*VBwPPx?3Mt4d8K(hdVX4%vQ
zIX+5IC#FQWl<<@`0AcBZoF)Lq;-VK2{?P^?EM1V(1i;eAmt-nF(^UpABA7M+CY$*H
z(60O1H35JU0B|7#>?}cdt}n}}q1uaj=Hz+#>-A+QL2e%aT%Ehz@S>`Y!!^JO9)Mcu
zYQ^u#fUgbBfPOpWV<XmTyj5M04v+iTi0wBX0Fdr7pw&jK)p)A_=<aA-=z{bI)P*ic
ze^A}1c0slQaNrtH0RWHzrSNw_VSgg#gayFX@831_crxE`L!@iWR+X&+;P;7=`n;T5
z)HcRx5-e*0m~2)z|3<f<yD<PL`v*{2xgwXR=6e==08nl(16K2M^4ip_oH*L~19+<e
zd_KLmzN?zw?wI`m^upExNGJBL%ycr}_80)rA%LZTyC7>b;P3U4Eb>J;dBR_Jac;06
zi{jIr?**MzkpQ5A*~ta0D4MTa0MG^izbl{BS$z)x^dJLjR&`~&rCF2T)Y%1How^{;
z*0rY-$7Xig*2n-zYwUt9pRRo{<5?Y#41gt#T~MP9n)>@%CPEqDz(p7UtcI}-g$xK#
z0ALO>z=54Gl%Un1uK^VE^zO@M9qnqtqPtgCP5r-MEQIdpl~qLzGC=eq_`$uh3Ic&Z
jAP@)y0)apv<V*hnlY(?-c$&**00000NkvXXu0mjf^*3rc

diff --git a/app/static/style.css b/app/static/style.css
index 898bdcd..7375b35 100644
--- 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
new file mode 100644
index 0000000..eb32086
--- /dev/null
+++ 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/bootstrap@5.3.2/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
index 934ed9f..5d612ae 100644
--- 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/bootstrap@5.3.2/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>
\ No newline at end of file
+</html>