Merge pull request #78 from PenseNisso/feature/pagina_inicial

Feature/pagina inicial

base_static/css/carousel.css

@@ -0,0 +1,53 @@
+.prev,
+.next {
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    width: auto;
+    margin-top: -22px;
+    padding: 16px;
+    color: #1e40af;
+    font-weight: bold;
+    font-size: 30px;
+    transition: .6s ease;
+    border-radius: 0 3px 3px 0
+}
+
+@media only screen and (max-width: 1024px) {
+    .prev, .next {
+        display: none;
+    }
+}
+
+.next {
+    right: -50px;
+    border-radius: 3px 3px 3px 3px
+}
+
+.prev {
+    left: -50px;
+    border-radius: 3px 3px 3px 3px
+}
+
+.prev:hover,
+.next:hover {
+    color: #f2f2f2;
+    background-color: rgba(34, 81, 202);
+}
+
+.dot {
+    cursor: pointer;
+    height: 15px;
+    width: 15px;
+    margin: 0 2px;
+    background-color: rgba(34, 81, 202, 0.20);
+    border-radius: 50px;
+    display: inline-block;
+    transition: background-color .6s ease;
+}
+
+.active,
+.dot:hover {
+    width: 21px;
+    background-color: rgba(34, 81, 202, 0.80);
+}

base_static/js/carousel.js

@@ -0,0 +1,60 @@
+var slideIndex = 1;
+var myTimer;
+var slideshowContainer;
+
+window.addEventListener("load", function () {
+    showSlides(slideIndex);
+    myTimer = setInterval(function () { plusSlides(1) }, 4000);
+    slideshowContainer = document.getElementsByClassName('carousel')[0];
+    slideshowContainer.addEventListener('mouseenter', pause)
+    slideshowContainer.addEventListener('mouseleave', resume)
+})
+
+// NEXT AND PREVIOUS CONTROL
+function plusSlides(n) {
+    clearInterval(myTimer);
+    if (n < 0) {
+        showSlides(slideIndex -= 1);
+    } else {
+        showSlides(slideIndex += 1);
+    }
+
+    if (n === -1) {
+        myTimer = setInterval(function () { plusSlides(n + 2) }, 4000);
+    } else {
+        myTimer = setInterval(function () { plusSlides(n + 1) }, 4000);
+    }
+}
+
+//Controls the current slide and resets interval if needed
+function currentSlide(n) {
+    clearInterval(myTimer);
+    myTimer = setInterval(function () { plusSlides(n + 1) }, 4000);
+    showSlides(slideIndex = n);
+}
+
+function showSlides(n) {
+    var i;
+    var slides = document.getElementsByClassName("carousel-item");
+    var dots = document.getElementsByClassName("dot");
+    if (n > slides.length) { slideIndex = 1 }
+    if (n < 1) { slideIndex = slides.length }
+    for (i = 0; i < dots.length; i++) {
+        dots[i].className = dots[i].className.replace(" active", "");
+    }
+    dots[slideIndex - 1].className += " active";
+    slides[slideIndex - 1].scrollIntoView({ block: 'nearest', inline: 'center' });
+    for (i = 0; i < slides.length; i++) {
+        slides[i].classList.add("blur-[2px]");
+    }
+    slides[slideIndex - 1].classList.remove("blur-[2px]");
+}
+
+pause = () => {
+    clearInterval(myTimer);
+}
+
+resume = () => {
+    clearInterval(myTimer);
+    myTimer = setInterval(function () { plusSlides(slideIndex) }, 4000);
+}

base_templates/global/about_us.html

@@ -0,0 +1,38 @@
+{% extends "./base.html" %}
+
+{% block title %}
+- Sobre Nós
+{% endblock %}
+
+{% block content %}
+<main class="w-full flex flex-col space-y-2 text-justify hyphens-auto my-6" lang="pt-br">
+    <h1 class="text-2xl font-bold mb-1">Nossa História</h1>
+
+    <p class="indent-8">
+        Nos dias atuais, é notório o aumento de casos de más práticas
+        empresariais, relacionadas tanto ao descaso com os trabalhadores como
+        também à degradação do meio ambiente. Todavia, a maior parte dessas
+        notícias não possuem uma divulgação abrangente, ou mesmo são rapidamente
+        esquecidas pelos veículos de informação, de forma que se torna vantajoso
+        para as empresas continuar agindo da mesma maneira, sabendo que não
+        haverá maiores prejuízos.
+    </p>
+
+    <p class="indent-8">
+        Nesse cenário, o Pense Nisso surge como forma de informar o usuário
+        sobre as atividades indevidas de cada empresa fornecedora de produtos e
+        serviços, a fim de norteá-lo na sua busca por um consumo mais
+        consciente, oferecendo assim um incentivo maior para essas instituições
+        perceberem a necessidade de mudar as suas ações.
+    </p>
+
+    <p class="indent-8">
+        Nosso objetivo é expor todas aquelas empresas que, de alguma forma, agem
+        de forma prejudicial à sociedade, seja por meio de más práticas
+        trabalhistas, seja por agressão ao meio ambiente. Além disso, faz-se
+        importante a divulgação daqueles que estão caminhando na direção certa,
+        mas que não têm a mesma visibilidade que marcas já consolidadas no
+        mercado.
+    </p>
+</main>
+{% endblock %}

base_templates/global/base.html

@@ -1,6 +1,7 @@
 {% load static %}
 <!DOCTYPE html>
 <html lang="pt-br" data-theme="light">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -12,43 +13,22 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
 </head>
+
 <body>
     {% include "./header.html" %}
-    <div class="max-w-2xl xl:max-w-4xl flex flex-col justify-center items-center mx-auto">
+    <div class="min-h-screen max-w-2xl xl:max-w-4xl flex flex-col items-center mx-auto">
         <ul>
-            <form action="{% url 'search:search' %}" method="get">
-                {% csrf_token %}
-                <input 
-                    type="search" 
-                    id="search" 
-                    name="search" 
-                    placeholder="Pesquisar empresas..." 
-                    class="input"
-                    required />
-                <script>
-                    var tags = [ 
-                            {% for company in companies %} 
-                                "{{ company.name }}", 
-                            {% endfor %} 
-                        ]; 
-                    $( function() {
-                        $( "#search" ).autocomplete({
-                            minLength: 2,
-                            source: function(request, response) {
-                                var results = $.ui.autocomplete.filter(tags, request.term);
-                                response(results.slice(0, 10));
-                                console.log(results);
-                            }
-                        });
-                    } ); 
-                </script> 
-                <input type="submit" value="Pesquisar">
-            </form>
+            {% include "./searchbar.html" %}
         </ul>
-        {% block content %}
-        {% endblock %}
+
+        <div class="w-full h-full flex flex-col justify-center items-center mx-auto">
+            {% block content %}
+            {% endblock %}
+        </div>
     </div>
+    {% include "./footer.html" %}
     <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
     <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
 </body>
-</html>
+
+</html>

base_templates/global/footer.html

@@ -0,0 +1,14 @@
+<footer
+    class="w-full bg-blue-700 bg-opacity-20 py-3.5 flex flex-col justify-center items-center mt-16">
+    <div class="w-full inline-flex justify-evenly items-center font-bold">
+        <div class="inline-flex flex-col justify-center items-start gap-2">
+            <p>Fale Conosco</p>
+            <p class="font-normal">[email protected]</p>
+        </div>
+        <div class="inline-flex flex-col justify-center items-end gap-2">
+            <a href="{% url 'privacy_policy' %}">Política de Privacidade</a>
+            <a href="{% url 'about_us' %}">Sobre Nós</a>
+        </div>
+    </div>
+    <p class="w-full text-sm text-center mt-2">© 2023 Pense Nisso</p>
+</footer>

base_templates/global/header.html

@@ -1,5 +1,5 @@
 <header>
-  <div class="navbar bg-base-100">
+  <div class="navbar">
   <div class="navbar-start">
   <div class="drawer">
   <input id="my-drawer" type="checkbox" class="drawer-toggle" />

base_templates/global/privacy_policy.html

@@ -0,0 +1,77 @@
+{% extends "./base.html" %}
+
+{% block title %}
+- Política de Privacidade
+{% endblock %}
+
+{% block content %}
+<main class="text-neutral-700 text-justify hyphens-auto mt-6 indent-8" lang="pt-br">
+    <h2 class="text-2xl font-bold text-center mb-3">Política de Privacidade</h2>
+    <p>
+        A sua privacidade é importante para nós. É política do Pense Nisso
+        respeitar a
+        sua privacidade em relação a qualquer informação sua que possamos coletar no site Pense
+        Nisso, e
+        outros sites que possuímos e operamos.
+    </p>
+    <p>
+        Solicitamos informações pessoais apenas quando realmente precisamos delas
+        para
+        lhe fornecer um serviço. Fazemo-lo por meios justos e legais, com o seu conhecimento e consentimento. Também
+        informamos por que estamos coletando e como será usado.
+    </p>
+    <p>
+        Apenas retemos as informações coletadas pelo tempo necessário para
+        fornecer o
+        serviço solicitado. Quando armazenamos dados, protegemos dentro de meios comercialmente aceitáveis para
+        evitar
+        perdas e roubos, bem como acesso, divulgação, cópia, uso ou modificação não autorizados.
+    </p>
+    <p>
+        Não compartilhamos informações de identificação pessoal publicamente ou
+        com
+        terceiros, exceto quando exigido por lei.
+    </p>
+    <p>
+        O nosso site pode ter links para sites externos que não são operados por
+        nós.
+        Esteja ciente de que não temos controle sobre o conteúdo e práticas desses sites e não podemos aceitar
+        responsabilidade por suas respectivas políticas de privacidade.
+    </p>
+    <p>
+        Você é livre para recusar a nossa solicitação de informações pessoais,
+        entendendo que talvez não possamos fornecer alguns dos serviços desejados.
+    </p>
+    <p>
+        O uso continuado de nosso site será considerado como aceitação de nossas
+        práticas em torno de privacidade e informações pessoais. Se você tiver alguma dúvida sobre como lidamos com
+        dados do usuário e informações pessoais, entre em contato conosco.
+    </p>
+
+    <br />
+
+    <h3 class="text-xl font-bold text-center mb-2">Compromisso do Usuário</h3>
+    <p>
+        O usuário se compromete a fazer uso adequado dos conteúdos e da informação
+        que
+        o Pense Nisso oferece no site e com caráter enunciativo, mas não limitativo:
+    </p>
+    <ul>
+        <li>A) Não se envolver em atividades que sejam ilegais ou contrárias à boa
+            fé
+            a à ordem pública;</li>
+        <li>B) Não difundir propaganda ou conteúdo de natureza racista, xenofóbica
+            ou azar, qualquer tipo de pornografia ilegal, de apologia ao terrorismo ou contra os direitos
+            humanos;</li>
+        <li>C) Não causar danos aos sistemas físicos (hardwares) e lógicos
+            (softwares)
+            do Pense Nisso, de seus fornecedores ou terceiros, para introduzir ou disseminar vírus informáticos ou
+            quaisquer outros sistemas de hardware ou software que sejam capazes de causar danos anteriormente
+            mencionados.</li>
+    </ul>
+
+    <br />
+
+    <p class="text-sm text-center text-neutral-500">Esta política é efetiva a partir de 12 de Dezembro de 2023</p>
+</main>
+{% endblock %}

base_templates/global/searchbar.html

@@ -0,0 +1,22 @@
+<form action="{% url 'search:search' %}" method="get">
+    {% csrf_token %}
+    <input type="search" id="search" name="search" placeholder="Pesquisar empresas..." class="input" required />
+    <script>
+        var tags = [
+            {% for company in companies %}
+        "{{ company.name }}",
+            {% endfor %} 
+                        ];
+        $(function () {
+            $("#search").autocomplete({
+                minLength: 2,
+                source: function (request, response) {
+                    var results = $.ui.autocomplete.filter(tags, request.term);
+                    response(results.slice(0, 10));
+                    console.log(results);
+                }
+            });
+        }); 
+    </script>
+    <input type="submit" value="Pesquisar">
+</form>

home/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class HomeConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'home'