vvsuaprof/rosa.html at main · 2bertox2/vvsuaprof · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rosa</title>

    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
            overflow: hidden;

            background: url("https://www.anpr.org.br/images/2024/10/02-10-outubro-rosa-mpf-site-anpr.jpg") center/cover no-repeat;
            position: relative;
        }

        .blur-layer {
            position: absolute;
            inset: 0;
            backdrop-filter: blur(12px);
        }

        .voltar {
            position: fixed;
            top: 20px;
            left: 20px;
            padding: 10px 22px;
            background-color: #ff5cb8;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            cursor: pointer;
            z-index: 3;
            transition: 0.3s;
        }

        .voltar:hover {
            background-color: #ff35a5;
        }

        .container {
            position: relative;
            z-index: 2;
            background: rgba(255, 255, 255, 0.20);
            padding: 40px 50px;
            border-radius: 25px;
            backdrop-filter: blur(50px);
            box-shadow: 0 0 25px rgba(255, 105, 180, 0.5);
            text-align: center;
            width: 750px;
        }

        h1 {
            color: #741f4f;
            margin-bottom: 25px;
            font-size: 30px;
        }

        .opcoes {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 10px;
        }

        .opcao {
            background-color: rgba(255, 255, 255, 0.7);
            color: #ff0080;
            padding: 14px 25px;
            font-size: 16px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: 0.2s;
            font-weight: bold;
        }

        .opcao:hover {
            background-color: white;
        }

        .modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(6px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 99;
            visibility: hidden;
            opacity: 0;
            transition: 0.3s;
        }

        .modal.active {
            visibility: visible;
            opacity: 1;
        }

        .modal-box {
            background: white;
            width: 70%;
            max-width: 650px;
            padding: 30px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 0 20px rgba(255, 105, 180, 0.5);
        }

        .modal h2 {
            color: #ff0080;
            margin-bottom: 15px;
        }

        .modal p {
            color: #444;
            font-size: 17px;
            line-height: 1.5;
        }

        .btn-fechar {
            margin-top: 20px;
            padding: 10px 25px;
            background: #ff5cb8;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
        }

        .btn-fechar:hover {
            background: #ff319c;
        }

    </style>
</head>
<body>

    <div class="blur-layer"></div>

    <button class="voltar" onclick="window.location.href='index.html'">Voltar</button>

    <div class="container">
        <h1>Página Rosa</h1>

        <div class="opcoes">
            <button class="opcao" onclick="abrir('Prevenção', 'A prevenção do câncer de mama envolve a redução de fatores de risco e a adoção de um estilo de vida saudável. Estima-se que 30% dos casos podem ser evitados com bons hábitos. As principais medidas incluem: praticar atividade física regularmente, manter o peso corporal adequado, evitar o consumo excessivo de álcool e não fumar. A amamentação também é considerada um fator protetor para as mães. Além disso, a terapia de reposição hormonal (na menopausa) deve ser feita apenas com rigoroso controle médico, pois pode aumentar os riscos se usada por tempo prolongado.')">Prevenção</button>
            <button class="opcao" onclick="abrir('Autoexame', 'O autoexame é um ato de amor próprio e autoconhecimento. Ele ajuda a mulher a conhecer seu corpo e perceber rapidamente qualquer alteração. Deve ser feito uma vez por mês, preferencialmente entre o 7º e o 10º dia após o início da menstruação (quando as mamas estão menos inchadas). Para mulheres que não menstruam, escolha uma data fixa no mês. Durante o banho ou em frente ao espelho, apalpe as mamas e axilas em movimentos circulares, buscando nódulos, caroços ou endurecimentos. Lembre-se: o autoexame não substitui a mamografia, mas é um grande aliado.')">Autoexame</button>
            <button class="opcao" onclick="abrir('Sinais de alerta', 'Fique atenta a qualquer mudança na aparência ou na sensação das mamas. Os principais sinais de alerta incluem: nódulo (caroço) fixo e geralmente indolor, alteração no formato ou tamanho da mama, pele com aspecto de casca de laranja ou avermelhada, retração (afundamento) da pele ou do mamilo, saída espontânea de líquido pelos mamilos (especialmente se for sanguinolento ou transparente como água) e pequenos nódulos nas axilas ou no pescoço. Nem todo caroço é câncer, mas qualquer alteração deve ser investigada por um médico.')">Sinais de alerta</button>
            <button class="opcao" onclick="abrir('Quando procurar ajuda médica', 'Você deve procurar um ginecologista ou mastologista sempre que notar qualquer alteração durante o autoexame. Além disso, as consultas de rotina são indispensáveis mesmo sem sintomas. A mamografia é o principal exame para o diagnóstico precoce e é recomendada anualmente para mulheres a partir dos 40 anos pela Sociedade Brasileira de Mastologia. Se você tem histórico de câncer de mama ou ovário na família (mãe, irmã), converse com seu médico para iniciar o rastreamento antes dessa idade.')">Quando procurar ajuda médica</button>
            <button class="opcao" onclick="abrir('Tecnologia na saúde', 'A tecnologia tem avançado muito a favor da saúde da mulher. A mamografia digital, por exemplo, oferece imagens mais detalhadas com menos radiação. A ultrassonografia e a ressonância magnética são usadas como exames complementares importantes. Hoje, também existem testes genéticos que avaliam a predisposição hereditária ao câncer (como as mutações nos genes BRCA1 e BRCA2). Além disso, aplicativos de celular ajudam a monitorar o ciclo menstrual e enviam lembretes para a realização dos exames de rotina, mantendo o cuidado sempre em dia.')">Tecnologia na saúde</button>
        </div>
    </div>

    <div class="modal" id="modal">
        <div class="modal-box">
            <h2 id="modalTitulo"></h2>
            <p id="modalTexto"></p>
            <button class="btn-fechar" onclick="fechar()">Voltar</button>
        </div>
    </div>

    <script>
        function abrir(titulo, texto) {
            document.getElementById("modalTitulo").innerText = titulo;
            document.getElementById("modalTexto").innerText = texto;
            document.getElementById("modal").classList.add("active");
        }

        function fechar() {
            document.getElementById("modal").classList.remove("active");
        }
    </script>

</body>
</html>