diff --git a/cadastro.css b/cadastro.css index d0fccab..9ffecc6 100644 --- a/cadastro.css +++ b/cadastro.css @@ -1,116 +1,103 @@ -* { - padding: 0; - margin: 0; - } - - p, - h1, - h2, - h3 { - color: black; - font-family: 'Poppins', sans-serif - } - - body { - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - } - - @media (max-width: 768px) { - body { - padding-left: 20px; - padding-right: 20px; - } - } - - @media (max-width: 480px) { - #log { - width: 100% !important; - max-width: 320px; - } - } - #topo { - width: 100%; - height: 50px; - position: fixed; - top: 0; - left: 0; - background: linear-gradient(to right, #C0392B 47%, #7A4951 73%, #114455 87%); - display: flex; - align-items: center; - justify-content: flex-start; - } - - #textotop { - padding-left: 20px; - font-size: 38px; - margin: 0; - font-family: 'Poppins', sans-serif; - font-weight: normal; - } - - #log { - width: 350px; - display: flex; - flex-direction: column; - gap: 15px; - color: white; - margin-top: 70px; /* Compensa a barra fixa do topo */ - } - .campo { - display: flex; - flex-direction: column; - gap: 10px; - } - - #emailid, #senhaid, #nomeid, #csenhaid { +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + min-height: 100vh; + font-family: 'Poppins', sans-serif; + display: flex; + align-items: center; + justify-content: center; + padding: 80px 20px 20px; + background: #f5f5f5; +} + +#topo { + width: 100%; height: 50px; + position: fixed; + top: 0; + left: 0; + background: linear-gradient(to right, #c0392b 47%, #7a4951 73%, #114455 87%); + display: flex; + align-items: center; + z-index: 10; +} + +#textotop { + padding-left: 20px; + font-size: clamp(22px, 5vw, 38px); + color: #fff; + font-weight: 500; +} + +#log { + width: 100%; + max-width: 360px; + display: flex; + flex-direction: column; + gap: 16px; +} + +.mens { + text-align: center; + color: #1f2937; +} + +.campo { + display: flex; + flex-direction: column; + gap: 8px; +} + +label { + font-weight: 700; + color: #1f2937; +} + +#emailid, +#senhaid, +#nomeid, +#csenhaid { + height: 46px; width: 100%; padding: 10px; font-size: 16px; - border: 1px solid #ccc; - border-radius: 4px; - box-sizing: border-box; - } - - label { - display: block; - margin-bottom: 5px; - font-weight: bold; - color: white; - } - - form { - display: flex; - flex-direction: column; - gap: 20px; - width: 100%; - } - - #logbtn { + border: 1px solid #c7c7c7; + border-radius: 6px; +} + +form { + display: flex; + flex-direction: column; + gap: 16px; +} + +#logbtn { align-self: center; width: 50%; padding: 12px; font-size: 18px; font-weight: bold; - background-color: #C0392B; - color: white; + background-color: #c0392b; + color: #fff; border: none; - border-radius: 4px; + border-radius: 6px; cursor: pointer; - transition: background-color 0.3s; - } - - #logbtn:hover { - background-color: #A03224; - } - .mens { - align-self: center; - } - a{ - color: black; - text-decoration: none; + transition: background-color 0.2s ease; +} - } \ No newline at end of file +#logbtn:hover { + background-color: #a03224; +} + +a { + color: #111; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} diff --git a/cadastro.html b/cadastro.html index 2966549..3107970 100644 --- a/cadastro.html +++ b/cadastro.html @@ -1,4 +1,4 @@ - + @@ -9,46 +9,54 @@ + +
+

Focus Agenda

+
+ +
+

Crie Sua Conta

- -
-

Focus Agenda

-
- +
+
+ + +
- -
-

Crie Sua Conta

+
+ + +
- +
+ + +
- -
- - -
+
+ + +
-
- - -
+ + -
- - -
+

Ja tem uma conta?

+
-
- - -
- - -

Já tem uma conta?

-
- - - - - \ No newline at end of file + + + diff --git a/calendario.css b/calendario.css index f819246..be5cbe2 100644 --- a/calendario.css +++ b/calendario.css @@ -1,385 +1,346 @@ - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - - body { - font-family: 'Poppins', sans-serif; - } - - /* ===== HEADER ===== */ - #header { - width: 100%; - height: 50px; - position: fixed; - top: 0; - left: 0; - background: linear-gradient(to right, #C0392B, #114455); - display: flex; - align-items: center; - z-index: 10; - } - - #title { - color: white; - padding-left: 20px; - font-size: 28px; - } - - /* ===== BARRA ESQUERDA ===== */ - #barraesquerda { - position: fixed; - top: 50px; - left: 0; - width: 320px; - height: calc(100vh - 50px); - background: #C0392B; - padding: 15px; - color: white; - display: flex; - flex-direction: column; - font-family: 'Inter', sans-serif; - } - - /* ===== MINI CALENDÁRIO ===== */ - #calendario { - margin-top: 10px; - } - - .calendariotop { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 10px; - } - - #mes { - font-size: 18px; - font-weight: 600; - } - - #calendarseta { - display: flex; - gap: 15px; /* espaço entre as setas */ - } - - #calendarseta button { - background: transparent; - border: none; - color: white; - font-size: 26px; /* tamanho maior */ - cursor: pointer; - padding: 5px 10px; /* aumenta área de clique */ - transition: transform 0.2s ease; - } - - #calendarseta button:hover { - transform: scale(1.2); /* efeito ao passar o mouse */ - } - .setas-grande { - display: flex; - align-items: center; - gap: 15px; - } - - .titulo-mes { - font-size: 16px; - font-weight: 500; - } - - .dia-semana { - background: #f0f0f0; - text-align: center; - font-weight: 600; - font-size: 12px; - padding: 10px 0; - border: 1px solid #ddd; - } - .antGrande, - .proxGrande { - background: transparent; - border: none; - color: #1f3b57; - font-size: 26px; - cursor: pointer; - padding: 5px 10px; - transition: transform 0.2s ease; - } - - .antGrande:hover, - .proxGrande:hover { - transform: scale(1.2); - } - - .calendariodia { - width: 100%; - border-collapse: collapse; - } - - .calendariodia th { - font-size: 11px; - opacity: 0.7; - } - - .calendariodia td { - text-align: center; - padding: 6px; - font-size: 12px; - border-radius: 50%; - position: relative; - } - - /* bolinha */ - .calendariodia td::after { - content: ""; - width: 5px; - height: 5px; - background: white; - border-radius: 50%; - position: absolute; - bottom: -2px; - left: 50%; - transform: translateX(-50%); - } - - .outromes { - opacity: 0.4; - } - - .calendariodia td.today { - background: #114455; - border-radius: 30%; - height: 0px; - width: 5px; - - } - - - - - /* ===== AGENDA ===== */ - .agenda-header { - margin-top: 15px; - border-top: 1px solid rgba(255,255,255,0.3); - border-bottom: 1px solid rgba(255,255,255,0.3); - padding: 8px 0; - font-size: 13px; - } - - .evento { - margin-top: 10px; - padding-left: 10px; - border-left: 3px solid white; - } - - .evento.azul { - border-color: #00c2ff; - } - - .evento.rosa { - border-color: #ff4fa3; - } - - .hora { - font-size: 11px; - opacity: 0.7; - } - - .titulo { - font-size: 13px; - } - - .link { - font-size: 11px; - color: #ffdede; - } - - /* ===== FERIADOS ===== */ - .feriados-header { - margin-top: 15px; - font-weight: 600; - } - - .feriado { - display: flex; - gap: 8px; - margin-top: 8px; - font-size: 13px; - } - - .dot { - width: 6px; - height: 6px; - background: #d4ff6a; - border-radius: 50%; - } - - /* ===== MAIN ===== */ - .main { - margin-left: 320px; - margin-top: 50px; - min-height: calc(100vh - 50px); - display: flex; - flex-direction: column; - background: #f5f5f5; - } - - /* ===== TOPBAR ===== */ - .topbar { - height: 70px; - background: #eaeaea; - border-bottom: 3px solid #c0392b; - - display: flex; - align-items: center; - justify-content: space-between; - - padding: 0 25px; - } - - .topbar h1 { - font-size: 24px; - color: #1f3b57; - } - - /* USER AREA */ - .user-area { - display: flex; - align-items: center; - gap: 20px; - } - - .icone { - font-size: 20px; - cursor: pointer; - } - - .perfil { - display: flex; - align-items: center; - gap: 10px; - } - - .avatar { - width: 40px; - height: 40px; - border-radius: 50%; - background: url('https://i.pravatar.cc/100') center/cover; - } - - .info { - display: flex; - flex-direction: column; - } - - .nome { - font-weight: 600; - color: #1f3b57; - } - - .cargo { - font-size: 12px; - color: #666; - } - - /* ===== SUBHEADER ===== */ - .subheader { - background: #eaeaea; - border-bottom: 3px solid #c0392b; - padding: 10px 20px; - - display: flex; - justify-content: space-between; - align-items: center; - } - - .subheader h2 { - color: #1f3b57; - } - - /* BOTÕES */ - .view-buttons button { - border: none; - padding: 5px 10px; - border-radius: 6px; - cursor: pointer; - background: transparent; - } - - .view-buttons .active { - background: #c0392b; - color: white; - } - - /* ===== MÊS ===== */ - .month-title { - padding: 10px 20px; - font-size: 16px; - } - - /* ===== CALENDÁRIO GRANDE ===== */ - .calendar-area { - display: grid; - grid-template-columns: repeat(7, 1fr); - - /* PRIMEIRA LINHA MENOR */ - grid-template-rows: 40px repeat(6, 120px); +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -/* DIAS DA SEMANA */ -.dia-semana { - background: #f0f0f0; - text-align: center; - font-weight: 600; - font-size: 13px; - padding: 10px 0; - border: 1px solid #ddd; +body { + font-family: 'Poppins', sans-serif; + background: #f5f5f5; } - .dia-box { - background: #fff; - border: 1px solid #ddd; - } +/* HEADER */ +#header { + width: 100%; + height: 50px; + position: fixed; + top: 0; + left: 0; + background: linear-gradient(to right, #c0392b, #114455); + display: flex; + align-items: center; + z-index: 10; +} - .dia-box:hover { - background: #eaeaff; - } - .icone-img { - width: 20px; - height: 20px; - cursor: pointer; - object-fit: contain; - transition: transform 0.2s ease; - } +#title { + color: #fff; + padding-left: 20px; + font-size: 28px; +} - .icone-img:hover { - transform: scale(1.15); - } - .calendar-header { +/* BARRA ESQUERDA */ +#barraesquerda { + position: fixed; + top: 50px; + left: 0; + width: 320px; + height: calc(100vh - 50px); + background: #c0392b; + padding: 15px; + color: #fff; + display: flex; + flex-direction: column; + font-family: 'Inter', sans-serif; + overflow-y: auto; +} + +#calendario { + margin-top: 10px; +} + +.calendariotop { display: flex; justify-content: space-between; align-items: center; + margin-bottom: 10px; +} +#mes { + font-size: 18px; + font-weight: 600; +} + +#calendarseta { + display: flex; + gap: 15px; +} + +#calendarseta button { + background: transparent; + border: none; + color: #fff; + font-size: 26px; + cursor: pointer; + padding: 5px 10px; + transition: transform 0.2s ease; +} + +#calendarseta button:hover { + transform: scale(1.2); +} + +.calendariodia { + width: 100%; + border-collapse: collapse; +} + +.calendariodia th { + font-size: 11px; + opacity: 0.8; +} + +.calendariodia td { + text-align: center; + padding: 6px; + font-size: 12px; + border-radius: 50%; + position: relative; +} + +.calendariodia td::after { + content: ""; + width: 5px; + height: 5px; + background: #fff; + border-radius: 50%; + position: absolute; + bottom: -2px; + left: 50%; + transform: translateX(-50%); +} + +.calendariodia td.today { + background: #114455; + color: #fff; + font-weight: 600; +} + +.outromes { + opacity: 0.45; +} + +/* AGENDA */ +.agenda-header { + margin-top: 15px; + border-top: 1px solid rgba(255, 255, 255, 0.3); + border-bottom: 1px solid rgba(255, 255, 255, 0.3); + padding: 8px 0; + font-size: 13px; +} + +.agenda-empty { + margin-top: 10px; + font-size: 13px; + opacity: 0.85; +} + +.evento { + margin-top: 10px; + padding-left: 10px; + border-left: 3px solid #fff; +} + +.evento.azul, +.calendar-event.azul { + border-color: #00c2ff; +} + +.evento.verde, +.calendar-event.verde { + border-color: #2ecc71; +} + +.evento.vermelho, +.calendar-event.vermelho { + border-color: #e74c3c; +} + +.evento.roxo, +.calendar-event.roxo { + border-color: #9b59b6; +} + +.evento.laranja, +.calendar-event.laranja { + border-color: #e67e22; +} + +.evento.amarelo, +.calendar-event.amarelo { + border-color: #f1c40f; +} + +.evento.rosa, +.calendar-event.rosa { + border-color: #ff6b81; +} + +.evento.ciano, +.calendar-event.ciano { + border-color: #1abc9c; +} + +.evento.marinho, +.calendar-event.marinho { + border-color: #2c3e50; +} + +.evento.lilas, +.calendar-event.lilas { + border-color: #a29bfe; +} + +.evento.salmao, +.calendar-event.salmao { + border-color: #fa8072; +} + +.evento.menta, +.calendar-event.menta { + border-color: #55efc4; +} + +.hora { + font-size: 11px; + opacity: 0.8; +} + +.titulo { + font-size: 13px; +} + +.link { + font-size: 11px; + color: #ffdede; +} + +/* FERIADOS */ +.feriados-header { + margin-top: 15px; + font-weight: 600; +} + +.feriado { + display: flex; + gap: 8px; + margin-top: 8px; + font-size: 13px; +} + +.dot { + width: 6px; + height: 6px; + background: #d4ff6a; + border-radius: 50%; + margin-top: 6px; + flex-shrink: 0; +} + +/* MAIN */ +.main { + margin-left: 320px; + margin-top: 50px; + min-height: calc(100vh - 50px); + display: flex; + flex-direction: column; + background: #f5f5f5; +} + +/* TOPBAR */ +.topbar { + min-height: 70px; + background: #eaeaea; + border-bottom: 3px solid #c0392b; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 25px; + gap: 12px; +} + +.topbar h1 { + font-size: 24px; + color: #1f3b57; +} + +.user-area { + display: flex; + align-items: center; + gap: 20px; +} + +.perfil { + display: flex; + align-items: center; + gap: 10px; +} + +.avatar { + width: 40px; + height: 40px; + border-radius: 50%; + background: url('https://i.pravatar.cc/100') center/cover; +} + +.info { + display: flex; + flex-direction: column; +} + +.nome { + font-weight: 600; + color: #1f3b57; +} + +.cargo { + font-size: 12px; + color: #666; +} + +.icone-img { + width: 20px; + height: 20px; + cursor: pointer; + object-fit: contain; + transition: transform 0.2s ease; +} + +.icone-img:hover { + transform: scale(1.15); +} + +/* HEADER CALENDARIO */ +.calendar-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 12px; padding: 10px 20px; background: #eee; border-bottom: 1px solid #ccc; } -/* ESQUERDA (MÊS + SETAS) */ .mes-nav { + position: relative; display: flex; align-items: center; - gap: 10px; + justify-content: center; + width: min(360px, 100%); + padding: 0 42px; } .titulo-mes { font-size: 18px; font-weight: 600; color: #1f3b57; + text-align: center; + width: 100%; } .seta { + position: absolute; + top: 50%; + transform: translateY(-50%); background: transparent; border: none; font-size: 22px; @@ -387,7 +348,14 @@ color: #c0392b; } -/* DIREITA (DIA / SEMANA / MÊS) */ +.antGrande { + left: 8px; +} + +.proxGrande { + right: 8px; +} + .view-switch { display: flex; gap: 10px; @@ -403,8 +371,217 @@ color: #1f3b57; } -/* BOTÃO ATIVO (MÊS) */ .view-switch .active { background: #c0392b; - color: white; -} \ No newline at end of file + color: #fff; +} + +/* CALENDARIO GRANDE */ +.calendar-area { + width: 100%; +} + +.calendar-area.month-view { + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-template-rows: 40px repeat(6, 120px); +} + +.dia-semana { + background: #f0f0f0; + text-align: center; + font-weight: 600; + font-size: 13px; + padding: 10px 0; + border: 1px solid #ddd; +} + +.dia-box { + background: #fff; + border: 1px solid #ddd; + padding: 8px; + color: #1f2937; +} + +.dia-box:hover { + background: #eaeaff; +} + +.dia-box.today { + background: #fff5f2; + border-color: #c0392b; + font-weight: 700; + color: #c0392b; +} + +.outro-mes { + opacity: 0.45; +} + +.calendar-area.week-view { + display: grid; + grid-template-columns: repeat(7, minmax(150px, 1fr)); + gap: 0; + overflow-x: auto; + border-top: 1px solid #ddd; +} + +.week-col { + min-height: 420px; + min-width: 150px; + border-right: 1px solid #ddd; + border-bottom: 1px solid #ddd; + background: #fff; + display: flex; + flex-direction: column; +} + +.week-col.today { + background: #fffaf8; +} + +.week-col-head { + padding: 10px; + font-size: 13px; + font-weight: 700; + color: #1f3b57; + text-align: center; + border-bottom: 1px solid #ddd; + background: #f6f6f6; +} + +.week-col-date { + display: block; + margin-top: 4px; + font-size: 11px; + font-weight: 500; + color: #6b7280; +} + +.week-events { + padding: 10px; + display: flex; + flex-direction: column; + gap: 8px; +} + +.week-empty, +.day-empty { + font-size: 13px; + color: #6b7280; +} + +.calendar-area.day-view { + display: block; + padding: 16px; +} + +.day-panel { + background: #fff; + border: 1px solid #ddd; + border-radius: 10px; + padding: 14px; +} + +.day-panel-header { + font-size: 15px; + font-weight: 700; + color: #1f3b57; + margin-bottom: 12px; +} + +.day-events { + display: flex; + flex-direction: column; + gap: 10px; +} + +.calendar-event { + border-left: 3px solid #c0392b; + background: #fafafa; + border-radius: 6px; + padding: 8px 10px; +} + +.calendar-event-hora { + font-size: 12px; + color: #6b7280; +} + +.calendar-event-titulo { + font-size: 14px; + color: #1f2937; + margin-top: 2px; +} + +/* RESPONSIVO */ +@media (max-width: 1024px) { + body { + padding-top: 50px; + } + + #barraesquerda { + position: static; + top: auto; + width: 100%; + height: auto; + max-height: none; + } + + .main { + margin-left: 0; + margin-top: 0; + min-height: auto; + } + + .calendar-area.month-view { + grid-template-rows: 40px repeat(6, 90px); + } +} + +@media (max-width: 700px) { + #title { + font-size: 22px; + } + + .topbar { + padding: 12px 16px; + flex-wrap: wrap; + } + + .topbar h1 { + font-size: 20px; + } + + .calendar-header { + flex-direction: column; + align-items: flex-start; + } + + .mes-nav { + width: 100%; + } + + .view-switch { + width: 100%; + justify-content: flex-start; + flex-wrap: wrap; + } + + .calendar-area.month-view { + grid-template-rows: 36px repeat(6, 72px); + } + + .dia-box { + padding: 6px; + font-size: 14px; + } + + .week-col { + min-height: 320px; + } + + .calendar-area.day-view { + padding: 12px; + } +} diff --git a/calendario.html b/calendario.html index 2f3f38c..f940cdd 100644 --- a/calendario.html +++ b/calendario.html @@ -1,19 +1,15 @@ - + - Focus Agenda - + - - -