diff --git a/static/css/components.css b/static/css/components.css index 92ef078..7f395ee 100644 --- a/static/css/components.css +++ b/static/css/components.css @@ -1,3 +1,158 @@ +/* Estilo do Menu & SideBar */ + +.menu-toggle { + height: 40px; + width: 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + cursor: pointer; + gap: 5px; + background-color: #1a1d26; + border: 1px solid #2a2e38; + transition: all 0.3s; +} + +.menu-toggle:hover { + background: #e8eaed; +} + +.menu-toggle span { + width: 20px; + height: 2px; + background-color: #6b7280; + transition: 0.3s; +} + +.overlay { + position: fixed; + inset: 0; + z-index: 40; + opacity: 0; + background: #0f1219dc; + backdrop-filter: blur(4px); + transition: opacity 0.3s; + pointer-events: none; +} + +.overlay.active { + opacity: 1; + pointer-events: auto; +} + +.overlay a { + text-decoration: none !important; + color: white !important; + padding: 12px 20px; +} + +.overlay a:hover { + text-decoration: none !important; + background-color: yellow; +} + +.sidebar { + display: flex; + flex-direction: column; + position: fixed; + top: 0; + right: 0; + width: 300px; + height: 100%; + background-color: #0f1219; + backdrop-filter: blur(12px); + border-left: 1px solid #2a2e38; + padding: 2rem 1rem; + box-shadow: 2px 0 5px rgba(0,0,0,0.1); + transform: translateX(100%); + transition: transform 0.3s ease-in-out; + z-index: 1000; +} + +.sidebar.active { + transform: translateX(0); +} + +.sidebar-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem; + border-bottom: 1px solid #2a2e38; +} + +.sidebar-header-left { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.sidebar-header span { + font-weight: 500; + color: #6b7280; +} + +.close-sidebar { + width: 75px; + height: 25px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + background: transparent; + color: #6b7280; + transition: all 0.3s; + border: none; + border-radius: 8px; +} + +.close-sidebar:hover { + background: #2a2e38; + color: #e8eaed; +} + +.sidebar-menu { + flex: 1; + overflow-y: auto; + padding: 1rem; +} + +.sidebar-menu p { + font-weight: 500; + color: #6b7280; + padding: 1rem; +} + +.sidebar-menu a { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 1rem; + color: #6b7280; + border-radius: 8px; + text-decoration: none; + transition: all 0.2s; +} + +.sidebar-menu a:hover { + background: #2a2e38; + color: #e8eaed; +} + +.sidebar-menu a.active { + color: #e8eaed; +} + +.divider { + height: 1px; + background: #2a2e38; + margin: 0.5rem 1rem; +} + + +/* Estilo dos Formulários */ + .matrix-input-grid { display: grid; gap: 2px; @@ -80,7 +235,7 @@ .matrix-section h3 { font-size: 1rem; margin-bottom: 0.5rem; - color: #2c3e50; + color: #e8eaf0; font-weight: bold; } diff --git a/static/css/styles.css b/static/css/styles.css index 2e0df3d..190cc0e 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -7,65 +7,69 @@ body { font-family: Arial, sans-serif; line-height: 1.6; - color: #2c3e50; - background-color: #ecf0f1; + background-color: #0f1219;; } -header { - background-color: #2c3e50; - color: white; - padding: 1.5rem 0; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); - text-align: center; -} - -header .container { - max-width: 1200px; - margin: 0 auto; - padding: 0 2rem; +.grid-background { + position: fixed; + inset: 0; + top: 0; + left: 0; + opacity: 0.03; + pointer-events: none; + background-image: + linear-gradient(#e8eaed 1px, transparent 1px), + linear-gradient(90deg, #e8eaed 1px, transparent 1px); + background-size: 40px 40px; + width: 100%; + height: 100%; } -header h1 { - font-size: 1.8rem; - margin-bottom: 1rem; - font-weight: bold; +header { + background-color: #0f1219; + border-bottom: 1px solid #2a2d3e; + position: relative; + z-index: 10; } -nav { +.header-content { + margin: 0 auto; + max-width: 1024px; display: flex; - gap: 1rem; - flex-wrap: wrap; - justify-content: center; -} - -nav a { - color: white; - text-decoration: none; - padding: 0.5rem 1rem; - border-radius: 4px; - transition: background-color 0.2s; + justify-content: space-between; + color: #e8eaf0; + text-transform: uppercase; + background-color: #0f1219; + backdrop-filter: blur(8px); + padding: 1.5rem 1rem; } -nav a:hover { - background-color: rgba(255, 255, 255, 0.1); +header h1 { + font-size: 25px; + color: #e8eaf0; + font-weight: 500; + letter-spacing: -0.5px; } main { - max-width: 900px; - margin: 2rem auto; - padding: 0 1rem; + max-width: 1024px; + margin: 0 auto; + padding: 4rem 1rem; } h2 { - font-size: 1.6rem; + font-size: 35; + font-weight: 500; margin-bottom: 2rem; - color: #2c3e50; - font-weight: bold; + color: #e8eaf0; + text-align: center; } form { - background: white; + position: relative; + background: #1a1d26; padding: 1.5rem; + border: 1px, solid #2a2e38; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 1.5rem; @@ -75,7 +79,7 @@ label { display: block; font-weight: bold; margin-bottom: 0.4rem; - color: #2c3e50; + color: #e8eaf0; font-size: 0.9rem; } @@ -84,18 +88,18 @@ textarea, select { width: 100%; padding: 0.6rem; - border: 1px solid #bdc3c7; - border-radius: 4px; + border: 2px solid #2a2e38; + border-radius: 8px; font-size: 0.95rem; margin-bottom: 1rem; font-family: Arial, sans-serif; + transition: all 0.3s; } input[type="number"]:focus, textarea:focus, select:focus { - outline: none; - border-color: #3498db; + border-color: #e8eaf0; } button { @@ -110,68 +114,124 @@ button { button[type="submit"], .btn-primary { - background-color: #3498db; - color: white; + background-color: #0f1219; + color: #e8eaf0; + border: 1px solid #2a2d3e; + transition: all 0.3s; } button[type="submit"]:hover, .btn-primary:hover { - background-color: #2980b9; + border-color: #3498db; + color: #3498db; } button[type="button"], .btn-secondary { - background-color: white; - color: #2c3e50; - border: 2px solid #bdc3c7; + background-color: #0f1219; + color: #e8eaf0; + border: 1px solid #2a2d3e; } button[type="button"]:hover, .btn-secondary:hover { border-color: #3498db; color: #3498db; + transition: all 0.3s; } #result { - background: white; + position: relative; + background: #1a1d26; padding: 1.5rem; + border: 1px solid #2a2e38; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: none; } #result h3 { - color: #2c3e50; + color: #e8eaf0; +} + +#result p { + background: none !important; + color: #e8eaf0; } #result.show { display: block; } +/*Cartões na Página Inicial*/ + ul { + display: grid; list-style: none; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap:1rem; + position: relative; } ul li { margin: 1rem 0; + background: #1a1d26; + height: 175px; + width: 225px; + border: 1px solid #2a2e38; + transition: all 0.4s; + border-radius: 5px; } ul li a { display: block; padding: 1rem; - background: white; - color: #2c3e50; + color: #e8eaf0; text-decoration: none; - border-radius: 4px; - border: 2px solid #ecf0f1; - transition: all 0.2s; } -ul li a:hover { - border-color: #3498db; - color: #3498db; +ul li:hover { + background-color: #22262f; + border-color: #e8eaf0; } +.card-tittle { + color: #e8eaf0; + padding-left: 1rem; + margin-top: 13px; + padding-bottom: 15px; + font-size: 15px; + font-weight: 600; +} + +.card-description { + color: #e8eaf0; + padding-left: 1rem; + margin-top: -15px; + font-size: 13px; + font-weight: 400; +} + +.card-icon { + margin-left: 1rem; + margin-top: 1rem; + justify-content: center; + align-items: center; +} + +.button-go { + display: flex; + flex-direction: row; +} + +.icon-go { + width: 17px; + height: 17px; +} + + +/*Responsividade*/ + @media (max-width: 768px) { header h1 { font-size: 1.4rem; diff --git a/static/js/menu-sidebar.js b/static/js/menu-sidebar.js new file mode 100644 index 0000000..de0c830 --- /dev/null +++ b/static/js/menu-sidebar.js @@ -0,0 +1,4 @@ +function toggleMenu() { + document.getElementById('overlay').classList.toggle('active'); + document.getElementById('sidebar').classList.toggle('active'); +} \ No newline at end of file diff --git a/templates/decrypt.html b/templates/decrypt.html index 872a675..d7d1b34 100644 --- a/templates/decrypt.html +++ b/templates/decrypt.html @@ -10,6 +10,8 @@ {% include 'header.html' %} +
+

Desencriptação de Mensagens

diff --git a/templates/determinant.html b/templates/determinant.html index 9849a03..e3ea8f6 100644 --- a/templates/determinant.html +++ b/templates/determinant.html @@ -10,6 +10,8 @@ {% include 'header.html' %} +
+

Cálculo de Determinante

diff --git a/templates/encrypt.html b/templates/encrypt.html index 50b141e..a784a54 100644 --- a/templates/encrypt.html +++ b/templates/encrypt.html @@ -10,6 +10,8 @@ {% include 'header.html' %} +
+

Encriptação de Mensagens

diff --git a/templates/header.html b/templates/header.html index f4cf088..b22eb40 100644 --- a/templates/header.html +++ b/templates/header.html @@ -1,15 +1,19 @@ + + +
-

Calculadora de Matrizes

- + + {% include 'sidebar.html' %} + +
+

Calculadora de Matrizes

+ + +
+
\ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 68b7526..90f0241 100644 --- a/templates/index.html +++ b/templates/index.html @@ -10,17 +10,123 @@ {% include 'header.html' %} +
+
-

Selecione uma Operação

+

Seleciona uma Operação

diff --git a/templates/inverse.html b/templates/inverse.html index 707efb3..a950b9e 100644 --- a/templates/inverse.html +++ b/templates/inverse.html @@ -10,6 +10,8 @@ {% include 'header.html' %} +
+

Matriz Inversa

diff --git a/templates/multiply.html b/templates/multiply.html index c2f53d2..885bf33 100644 --- a/templates/multiply.html +++ b/templates/multiply.html @@ -10,6 +10,8 @@ {% include 'header.html' %} +
+

Multiplicação de Matrizes

diff --git a/templates/scalar.html b/templates/scalar.html index 32714a2..c459313 100644 --- a/templates/scalar.html +++ b/templates/scalar.html @@ -10,6 +10,8 @@ {% include 'header.html' %} +
+

Multiplicação por Escalar

diff --git a/templates/sidebar.html b/templates/sidebar.html new file mode 100644 index 0000000..6062034 --- /dev/null +++ b/templates/sidebar.html @@ -0,0 +1,96 @@ + + + + + \ No newline at end of file diff --git a/templates/sum_sub.html b/templates/sum_sub.html index 244829b..6e6288e 100644 --- a/templates/sum_sub.html +++ b/templates/sum_sub.html @@ -3,15 +3,17 @@ - Soma/Subtração - Calculadora de Matrizes + Soma & Subtração - Calculadora de Matrizes {% include 'header.html' %} +
+
-

Adição / Subtração de Matrizes

+

Soma & Subtração de Matrizes

diff --git a/templates/transpose.html b/templates/transpose.html index a5c77a7..28c61f2 100644 --- a/templates/transpose.html +++ b/templates/transpose.html @@ -10,6 +10,8 @@ {% include 'header.html' %} +
+

Matriz Transposta