瀏覽代碼

Flag Page

cynthiarivera15 2 年之前
父節點
當前提交
528cb37cb1
共有 5 個文件被更改,包括 285 次插入34 次删除
  1. 9
    5
      src/pages/Flag.css
  2. 246
    2
      src/pages/Flag.tsx
  3. 5
    5
      src/pages/Home.css
  4. 5
    5
      src/pages/Info.css
  5. 20
    17
      src/pages/Info.tsx

+ 9
- 5
src/pages/Flag.css 查看文件

@@ -1,12 +1,16 @@
1 1
 ion-title.title-large {
2 2
     color: #ffffff;
3 3
     font-size: 30px;
4
-  }
4
+}
5 5
   
6
-  ion-title {
6
+ion-title {
7 7
     --color: #ffffff;
8
-  }
8
+}
9 9
   
10
-  ion-toolbar {
10
+ion-toolbar {
11 11
     --background: #8f00ff;
12
-  }
12
+}
13
+
14
+ion-button {
15
+    --color: #8f00ff;
16
+}

+ 246
- 2
src/pages/Flag.tsx 查看文件

@@ -1,8 +1,12 @@
1
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
1
+import { IonCardHeader, IonCardTitle } from '@ionic/core/components';
2
+import React, { useState } from 'react';
3
+import { IonButton, IonButtons, IonCard, IonCol, IonContent, IonGrid, IonHeader, IonModal, IonPage, IonRow, IonText, IonTitle, IonToolbar } from '@ionic/react';
2 4
 import ExploreContainer from '../components/ExploreContainer';
3 5
 import './Flag.css';
4 6
 
5 7
 const Flag: React.FC = () => {
8
+  const [isOpen, setIsOpen] = useState(false);
9
+
6 10
   return (
7 11
     <IonPage>
8 12
       <IonHeader>
@@ -16,7 +20,247 @@ const Flag: React.FC = () => {
16 20
             <IonTitle size="large">Flag</IonTitle>
17 21
           </IonToolbar>
18 22
         </IonHeader>
19
-        <ExploreContainer name="Flag page" />
23
+
24
+        <IonTitle class="ion-text-center" color="light">Pendiente a...</IonTitle>
25
+        <IonGrid>
26
+          <IonRow>
27
+            <IonCol>
28
+                <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
29
+                  Amenazas
30
+                </IonButton>
31
+                <IonModal isOpen={isOpen}>
32
+                  <IonHeader>
33
+                    <IonToolbar>
34
+                      <IonTitle>Amenazas</IonTitle>
35
+                      <IonButtons slot="end">
36
+                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
37
+                      </IonButtons>
38
+                   </IonToolbar>
39
+                  </IonHeader>
40
+                  <IonContent className="ion-padding">
41
+                    <IonCard color="light">
42
+                      <p>Asustarla con amenazas de hacerle mal.</p>
43
+                    </IonCard>
44
+                    <IonCard color="light">
45
+                      <p>Amenazarla con dejarla, con el suicidio o con denunciarla falsamente a la autoridad.</p>
46
+                    </IonCard>
47
+                    <IonCard color="light">
48
+                      <p>Obligarla a retirar los cargos presentados contra él.</p>
49
+                    </IonCard>
50
+                    <IonCard color="light">
51
+                      <p>Obligarla a cometer actos ilegales.</p>
52
+                    </IonCard>
53
+                  </IonContent>
54
+                </IonModal>
55
+            </IonCol>
56
+            <IonCol>
57
+                <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
58
+                  Intimidación
59
+                </IonButton>
60
+                <IonModal isOpen={isOpen}>
61
+                  <IonHeader>
62
+                    <IonToolbar>
63
+                      <IonTitle>Intimidación</IonTitle>
64
+                      <IonButtons slot="end">
65
+                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
66
+                      </IonButtons>
67
+                   </IonToolbar>
68
+                  </IonHeader>
69
+                  <IonContent className="ion-padding">
70
+                    <IonCard color="light">
71
+                      <p>Provocándole miedo a través de sus miradas, acciones y gestos.</p>
72
+                    </IonCard>
73
+                    <IonCard color="light">
74
+                      <p>Destrozar objetos.</p>
75
+                    </IonCard>
76
+                    <IonCard color="light">
77
+                      <p>Intimidarla rompiéndole sus cosas, maltratando a los animales domésticos, mostrándole armas.</p>
78
+                    </IonCard>
79
+                  </IonContent>
80
+                </IonModal>
81
+            </IonCol>
82
+          </IonRow>
83
+          <IonRow>
84
+            <IonCol>
85
+              <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
86
+                 Abuso Emocional
87
+                </IonButton>
88
+                <IonModal isOpen={isOpen}>
89
+                  <IonHeader>
90
+                    <IonToolbar>
91
+                      <IonTitle>Abuso Emocional</IonTitle>
92
+                      <IonButtons slot="end">
93
+                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
94
+                      </IonButtons>
95
+                   </IonToolbar>
96
+                  </IonHeader>
97
+                  <IonContent className="ion-padding">
98
+                    <IonCard color="light">
99
+                      <p>Hacerla sentir inferior.</p>
100
+                    </IonCard>
101
+                    <IonCard color="light">
102
+                      <p>Hacerla sentir mal.</p>
103
+                    </IonCard>
104
+                    <IonCard color="light">
105
+                      <p>Insultarle con nombres ofensivos.</p>
106
+                    </IonCard>
107
+                    <IonCard color="light">
108
+                      <p>Hacerla pensar que está loca.</p>
109
+                    </IonCard>
110
+                    <IonCard color="light">
111
+                      <p>Confundirla a propósito.</p>
112
+                    </IonCard>
113
+                    <IonCard color="light">
114
+                      <p>Humillarla.</p>
115
+                    </IonCard>
116
+                    <IonCard color="light">
117
+                      <p>Hacerla sentir culpable.</p>
118
+                    </IonCard>
119
+                  </IonContent>
120
+                </IonModal>
121
+            </IonCol>
122
+            <IonCol>
123
+              <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
124
+                 Aislamiento
125
+                </IonButton>
126
+                <IonModal isOpen={isOpen}>
127
+                  <IonHeader>
128
+                    <IonToolbar>
129
+                      <IonTitle>Aislamiento</IonTitle>
130
+                      <IonButtons slot="end">
131
+                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
132
+                      </IonButtons>
133
+                   </IonToolbar>
134
+                  </IonHeader>
135
+                  <IonContent className="ion-padding">
136
+                    <IonCard color="light">
137
+                      <p>Controlar lo que hace, a quién puede ver, con quién puede hablar, lo que puede leer y dónde va.</p>
138
+                    </IonCard>
139
+                    <IonCard color="light">
140
+                      <p>Limitarle su vida social utilizando los celos para justificar sus actos</p>
141
+                    </IonCard>
142
+                  </IonContent>
143
+                </IonModal>
144
+            </IonCol>
145
+          </IonRow>
146
+          <IonRow>
147
+            <IonCol>
148
+            <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
149
+                 Desvalorizar, Negar, Culpar
150
+                </IonButton>
151
+                <IonModal isOpen={isOpen}>
152
+                  <IonHeader>
153
+                    <IonToolbar>
154
+                      <IonTitle>Desvalorizar, Negar, Culpar</IonTitle>
155
+                      <IonButtons slot="end">
156
+                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
157
+                      </IonButtons>
158
+                   </IonToolbar>
159
+                  </IonHeader>
160
+                  <IonContent className="ion-padding">
161
+                    <IonCard color="light">
162
+                      <p>No tomar seriamente preocupación que ella tiene sobre el abuso.</p>
163
+                    </IonCard>
164
+                    <IonCard color="light">
165
+                      <p>Negar que uso hacerla sentir responsable de la conducta abusiva.</p>
166
+                    </IonCard>
167
+                    <IonCard color="light">
168
+                      <p>Decirle que ella lo provocó.</p>
169
+                    </IonCard>
170
+                  </IonContent>
171
+                </IonModal>
172
+            </IonCol>
173
+            <IonCol>
174
+              <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
175
+                 Manipulación de los Niño(a)s
176
+                </IonButton>
177
+                <IonModal isOpen={isOpen}>
178
+                  <IonHeader>
179
+                    <IonToolbar>
180
+                      <IonTitle>Manipulación de los Niño(a)s</IonTitle>
181
+                      <IonButtons slot="end">
182
+                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
183
+                      </IonButtons>
184
+                   </IonToolbar>
185
+                  </IonHeader>
186
+                  <IonContent className="ion-padding">
187
+                    <IonCard color="light">
188
+                      <p>Hacerla sentir culpable por el comportamiento de los niño(a) como intermediarios y mantener así el control.</p>
189
+                    </IonCard>
190
+                    <IonCard color="light">
191
+                      <p>Usar las visitas con los niño(a)s para molestarla o amenazarla.</p>
192
+                    </IonCard>
193
+                    <IonCard color="light">
194
+                      <p>Amenazarla con quitarle los niño(a)s.</p>
195
+                    </IonCard>
196
+                  </IonContent>
197
+                </IonModal>
198
+            </IonCol>
199
+          </IonRow>
200
+          <IonRow>
201
+            <IonCol>
202
+            <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
203
+                 Abuso Económico
204
+                </IonButton>
205
+                <IonModal isOpen={isOpen}>
206
+                  <IonHeader>
207
+                    <IonToolbar>
208
+                      <IonTitle>Abuso Económico</IonTitle>
209
+                      <IonButtons slot="end">
210
+                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
211
+                      </IonButtons>
212
+                   </IonToolbar>
213
+                  </IonHeader>
214
+                  <IonContent className="ion-padding">
215
+                    <IonCard color="light">
216
+                      <p>No dejarla trabajar o impedirle que mantenga su empleo.</p>
217
+                    </IonCard>
218
+                    <IonCard color="light">
219
+                      <p>Obligarala a que le pida dinero.</p>
220
+                    </IonCard>
221
+                    <IonCard color="light">
222
+                      <p>Darle una mensualidad.</p>
223
+                    </IonCard>
224
+                    <IonCard color="light">
225
+                      <p>Quitarle el dinero.</p>
226
+                    </IonCard>
227
+                    <IonCard color="light">
228
+                      <p>No informarle acerca de los ingresos familiares o no permitirle disponer de los ingresos.</p>
229
+                    </IonCard>
230
+                  </IonContent>
231
+                </IonModal>
232
+            </IonCol>
233
+            <IonCol>
234
+              <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
235
+                 Privilegio Masculino
236
+                </IonButton>
237
+                <IonModal isOpen={isOpen}>
238
+                  <IonHeader>
239
+                    <IonToolbar>
240
+                      <IonTitle>Privilegio Masculino</IonTitle>
241
+                      <IonButtons slot="end">
242
+                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
243
+                      </IonButtons>
244
+                   </IonToolbar>
245
+                  </IonHeader>
246
+                  <IonContent className="ion-padding">
247
+                    <IonCard color="light">
248
+                      <p>Tratarla como una sirvienta.</p>
249
+                    </IonCard>
250
+                    <IonCard color="light">
251
+                      <p>No dejarla tomar decisiones importantes.</p>
252
+                    </IonCard>
253
+                    <IonCard color="light">
254
+                      <p>Actuar como el rey de la casa.</p>
255
+                    </IonCard>
256
+                    <IonCard color="light">
257
+                      <p>Definir las partes del hombre y de la mujer.</p>
258
+                    </IonCard>
259
+                  </IonContent>
260
+                </IonModal>
261
+            </IonCol>
262
+          </IonRow>
263
+        </IonGrid>
20 264
       </IonContent>
21 265
     </IonPage>
22 266
   );

+ 5
- 5
src/pages/Home.css 查看文件

@@ -1,12 +1,12 @@
1 1
 ion-title.title-large {
2 2
     color: #ffffff;
3 3
     font-size: 30px;
4
-  }
4
+}
5 5
   
6
-  ion-title {
6
+ion-title {
7 7
     --color: #ffffff;
8
-  }
8
+}
9 9
   
10
-  ion-toolbar {
10
+ion-toolbar {
11 11
     --background: #8f00ff;
12
-  }
12
+}

+ 5
- 5
src/pages/Info.css 查看文件

@@ -1,12 +1,12 @@
1 1
 ion-title.title-large {
2 2
     color: #ffffff;
3 3
     font-size: 30px;
4
-  }
4
+}
5 5
   
6
-  ion-title {
6
+ion-title {
7 7
     --color: #ffffff;
8
-  }
8
+}
9 9
   
10
-  ion-toolbar {
10
+ion-toolbar {
11 11
     --background: #8f00ff;
12
-  }
12
+}

+ 20
- 17
src/pages/Info.tsx 查看文件

@@ -17,23 +17,26 @@ const Info: React.FC = () => {
17 17
           </IonToolbar>
18 18
         </IonHeader>
19 19
         <IonCard color="light">
20
-        <IonText color="primary">
21
-          <h2>Contáctanos</h2>
22
-        </IonText>
23
-        <p>Teléfonos: <a href="tel:(787)876-3440">(787)876-3440</a> / <a href="tel:(787)256-7568">(787)256-7568</a></p>
24
-        <p>Email: <a href="mailto:info@tallersaludpr.org">info@tallersaludpr.org</a></p>
25
-        <IonText color="primary">
26
-          <h2>Visión</h2>
27
-        </IonText>
28
-        <p>Una sociedad inclusiva con comunidades organizadas y libres de opresión que ejercen su derecho a la salud integral y a una vida digna, e impulsan su desarrollo colectivo y sostenible</p>
29
-        <IonText color="primary">
30
-          <h2>Misión</h2>
31
-        </IonText>
32
-        <p>Elevar el liderato de las mujeres para así co-crear bienestar, salud integral y oportunidades de desarrllo individual y colectivo.</p>
33
-        <IonText color="primary">
34
-          <h2>Valores</h2>
35
-        </IonText>
36
-        <p>En Taller Salud vivimos estos valores en el diseño de nuestro trabajo y en nuestro quehacer cotidiano, bajo la convicción firme de que son esenciales para el desarrllo social de Puerto Rico y para rearfirmar una nueva noción de lo que es bienestar</p>
20
+          <IonText color="primary">
21
+            <h2>Contáctanos</h2>
22
+          </IonText>
23
+          <p>Teléfonos: <a href="tel:(787)876-3440">(787)876-3440</a> / <a href="tel:(787)256-7568">(787)256-7568</a></p>
24
+          <p>Email: <a href="mailto:info@tallersaludpr.org">info@tallersaludpr.org</a></p>
25
+         <IonText color="primary">
26
+            <h2>Visión</h2>
27
+         </IonText>
28
+          <p>Una sociedad inclusiva con comunidades organizadas y libres de opresión que ejercen su derecho a la salud integral y a una vida digna, e impulsan su desarrollo colectivo y sostenible</p>
29
+          <IonText color="primary">
30
+           <h2>Misión</h2>
31
+          </IonText>
32
+          <p>Elevar el liderato de las mujeres para así co-crear bienestar, salud integral y oportunidades de desarrllo individual y colectivo.</p>
33
+          <IonText color="primary">
34
+            <h2>Valores</h2>
35
+          </IonText>
36
+          <p>En Taller Salud vivimos estos valores en el diseño de nuestro trabajo y en nuestro quehacer cotidiano, bajo la convicción firme de que son esenciales para el desarrllo social de Puerto Rico y para rearfirmar una nueva noción de lo que es bienestar</p>
37
+          <IonText class="ion-text-right">
38
+            <p>Más información en: <a href="https://www.tallersalud.com">Taller Salud</a></p>
39
+          </IonText>
37 40
         </IonCard>
38 41
       </IonContent>
39 42
     </IonPage>