fix

prefeitura-rio · Sep 12, 2024 · 4ab91dd · 4ab91dd
1 parent 90a8d46
commit 4ab91dd
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 58 deletions.
diff --git a/src/pages/civitas/components/chapters.js b/src/pages/civitas/components/chapters.js
@@ -365,7 +365,7 @@ export function Seop81(
       <styles.ChapterGenericDiv1Center ref={props.chapRef} id={props.id}>
         <styles.ContainerCard1>
           <styles.TextCard1>
-            Essa foi uma simulação. Agora veja a diversidade de casos reais em que o apoio da Civitas foi solicitado pelas forças de segurança:           </styles.TextCard1>
+            Essa foi uma simulação. Agora veja alguns casos reais em que o apoio da Civitas foi solicitado pelas forças de segurança:          </styles.TextCard1>
         </styles.ContainerCard1>
       </styles.ChapterGenericDiv1Center>
     </>
@@ -786,18 +786,22 @@ export function Fim(
     <styles.FimDiv ref={props.chapRef} id={props.id}>
       {/* <styles.IntroTitle id={"fimTitle"}>Conclusão</styles.IntroTitle> */}
       <styles.IntroText>
-        Além do cerco eletrônico, a Civitas atua em dois outros eixos:
+        O <styles.TextBlue>Cerco Eletrônico</styles.TextBlue> foi fundamental na solução desses casos. E além do cerco eletrônico, a Civitas atua em dois outros eixos:
 
         <br></br>
         <br></br>
+        <styles.TextBlue>A Rede de Vigilância Comunitária</styles.TextBlue> aproveita informações já produzidas pelos cidadãos para entender, monitorar e responder a dinâmicas criminais e incidentes de desordem de forma rápida e eficaz. Para isso, utiliza diversas fontes de dados, como linhas diretas e serviços de denúncia (<styles.TextBlue>1746 e Disque Denúncia</styles.TextBlue>), raspagem de assuntos nas redes sociais e integração com câmeras privadas para obter uma visão abrangente e dinâmica da cidade.
 
-        A Rede de Vigilância Comunitária aproveita informações já produzidas pelos cidadãos para entender, monitorar e responder a dinâmicas criminais e incidentes de desordem de forma rápida e eficaz. Para isso, utiliza diversas fontes de dados, como linhas diretas e serviços de denúncia (1746 e Disque Denúncia),  raspagem de assuntos nas redes sociais e integração com câmeras privadas para obter uma visão abrangente e dinâmica da cidade.
         <br></br>
         <br></br>
-        Outra atuação da central é a de Controle, segurança urbana e cidadania. Aqui, o objetivo é criação e execução de estratégias de prevenção ao crime e à violência que podem ser implementadas com os recursos e a infraestrutura municipais. Por exemplo, uso das câmeras e Inteligência Artificial para identificar movimentações suspeitas em túneis da cidade, evitando roubos, furtos e arrastões.
+
+        Outra atuação da central é a de <styles.TextBlue>Controle, segurança urbana e cidadania</styles.TextBlue>. Aqui, o objetivo é criação e execução de estratégias de prevenção ao crime e à violência que podem ser implementadas com os recursos e a infraestrutura municipais. Por exemplo, uso das câmeras e Inteligência Artificial para identificar movimentações suspeitas em túneis da cidade, evitando roubos, furtos e arrastões.
+        <br></br>
         <br></br>
+        Todo crime deixa um rastro. Mas com a integração <styles.TextBlue>entre vigilância, tecnologia e inteligência</styles.TextBlue>, a Civitas monitora a cidade inteira, fazendo um cinturão eletrônico e, assim, dá apoio à segurança pública do Rio.
         <br></br>
-        Todo crime deixa um rastro. Mas com a integração entre vigilância, tecnologia e inteligência, a Civitas monitora a cidade inteira, fazendo um cinturão eletrônico e, assim, dá apoio à segurança pública do Rio.
+        <br></br>
+
         <div style={{ display: "flex", flexDirection: "row", paddingTop: "160px", paddingBototm: "120px", justifyContent: "center" }}>
           <img src={civitas_icon} width={145}></img>
           <img src={rio_prefeitura} style={{ marginLeft: "20%" }} width={80}></img>

diff --git a/src/pages/civitas/components/chapters.map.js b/src/pages/civitas/components/chapters.map.js
@@ -230,10 +230,10 @@ export const Grafico = () => {
       },
       mobile: {
         center: {
-          lon: -43.41032,
+          lon: -43.39032,
           lat: -22.92106,
         },
-        zoom: 9.5,
+        zoom: 9.1,
         pitch: 0.0,
         bearing: 0.0,
         duration: 4000,
@@ -280,10 +280,10 @@ export const Grafico1 = () => {
       },
       mobile: {
         center: {
-          lon: -43.41032,
+          lon: -43.39032,
           lat: -22.92106,
         },
-        zoom: 9.5,
+        zoom: 9.1,
         pitch: 0.0,
         bearing: 0.0,
         duration: 4000,
@@ -1265,7 +1265,7 @@ export const BeforeFim = () => {
       },
       mobile: {
         center: {
-          lon: -43.44032,
+          lon: -43.45032,
           lat: -22.92106,
         },
         zoom: 9,

diff --git a/src/pages/civitas/components/chapters.style.js b/src/pages/civitas/components/chapters.style.js
@@ -194,7 +194,7 @@ export const FimDiv = tw.div`
   justify-center items-center 
   bg-black/50
   pr-[10%] pl-[10%]
-  pt-[150%]
+  pt-[180%]
   lg:pt-[45%]
   lg:pr-[1%]
   lg:pl-[1%]

diff --git a/src/pages/civitas/components/custom_multilayer_map.js b/src/pages/civitas/components/custom_multilayer_map.js
@@ -246,21 +246,23 @@ class CustomMultilayerMap extends React.Component {
     const coordinatesCasosResolvidos = [
       { latitude: "-22.8968", longitude: "-43.5103", t1: "Enfrent. às Milicias", t2: "Camp.Grande e St Cruz", from: "top", side: "left" },
       { latitude: "-23.0034", longitude: "-43.4224", t1: "Roubo a Ciclistas", t2: "Recreio", from: "top", side: "left" },
-      { latitude: "	-23.0003", longitude: "-43.3369", t1: "Sequesto", t2: "Barra", from: "bottom", side: "right" },
+      { latitude: "	-23.0003", longitude: "-43.3369", t1: "Sequestro", t2: "Barra", from: "bottom", side: "right" },
       { latitude: "	-22.9495", longitude: "	-43.3712", t1: "Hom. de Pol. Civil", t2: "CDD", from: "top", side: "left" },
       { latitude: "	-22.9034", longitude: "	-43.2834", t1: "Seq. Relâmpago", t2: "Méier", from: "top", side: "left" },
       { latitude: "	-22.9239", longitude: "	-43.2324", t1: "Roubos - 6° BPM", t2: "Tijuca", from: "bottom", side: "right" },
     ];
     const coordinatesCasosResolvidosMobile = [
-      { latitude: "-22.8368", longitude: "-43.5003", t1: "Enfrent. às Milicias", t2: "Camp.Grande e St Cruz", from: "top", side: "left" },
+      { latitude: "-22.8368", longitude: "-43.4903", t1: "Enfrent. às Milicias", t2: "Camp.Grande e St Cruz", from: "top", side: "left" },
       { latitude: "-23.0034", longitude: "-43.4224", t1: "Roubo a Ciclistas", t2: "Recreio", from: "top", side: "left" },
-      { latitude: "	-23.0003", longitude: "-43.3669", t1: "Sequesto", t2: "Barra", from: "bottom", side: "right" },
+      { latitude: "	-23.0003", longitude: "-43.3669", t1: "Sequestro", t2: "Barra", from: "bottom", side: "right" },
       { latitude: "	-22.9495", longitude: "	-43.3712", t1: "Hom. de Pol. Civil", t2: "CDD", from: "top", side: "left" },
-      { latitude: "	-22.8834", longitude: "	-43.2634", t1: "Seq. Relâmpago", t2: "Méier", from: "top", side: "left" },
     ];
     const coordinatesCasosResolvidosMobileTijuca = [
       { latitude: "	-22.9239", longitude: "	-43.2324", t1: "Roubos", t2: "Tijuca", from: "bottom", side: "right" },
     ];
+    const coordinatesCasosResolvidosMobileMeier = [
+      { latitude: "	-22.8734", longitude: "	-43.3534", t1: "Seq. Relâmpago", t2: "Méier", from: "top", side: "left" },
+    ];
     return (
       <Map
         ref={this.state.mapRef}
@@ -606,8 +608,8 @@ class CustomMultilayerMap extends React.Component {
                           fontWeight: "lighter",
                           fontSize: "14px",
                           position: 'absolute',
-                          top: `${coord.from === 'top' ? "-20px" : "130px"}`,  // Adjust as needed
-                          left: `${coord.from === 'top' ? "65px" : "186px"}`, // Adjust as needed
+                          top: `${coord.from === 'top' ? "-20px" : "130px"}`,
+                          left: `${coord.from === 'top' ? "65px" : "186px"}`,
                           // transform: 'translate(-50%, -50%)',
                           zIndex: 10
                         }}>
@@ -652,28 +654,34 @@ class CustomMultilayerMap extends React.Component {
                             )}
                           </g>
                         </svg>
-                        <h1 style={{
-                          color: "white",
-                          fontWeight: "lighter",
-                          fontSize: "13px",
-                          position: 'absolute',
-                          top: `${coord.from === 'top' ? "-18px" : "131px"}`,  // Adjust as needed
-                          left: `${coord.from === 'top' ? "5px" : "186px"}`, // Adjust as needed
-                          // transform: 'translate(-50%, -50%)',
-                          zIndex: 10
-                        }}>
+                        <h1
+
+                          style={{
+                            fontFamily: "Arial",
+                            color: "white",
+                            fontWeight: "lighter",
+                            fontSize: "14px",
+                            position: 'absolute',
+                            top: `${coord.from === 'top' ? "-18px" : "131px"}`,
+                            left: `${coord.from === 'top' ? "5px" : "186px"}`,
+                            // transform: 'translate(-50%, -50%)',
+                            zIndex: 10
+                          }}>
                           {coord.t1}
                         </h1>
-                        <h1 style={{
-                          color: "white",
-                          fontWeight: "lighter",
-                          fontSize: "11px",
-                          position: 'absolute',
-                          top: `${coord.from === 'top' ? "-1px" : "148px"}`,  // Adjust as needed
-                          left: `${coord.from === 'top' ? "5px" : "186px"}`, // Adjust as needed
-                          // transform: 'translate(-50%, -50%)',
-                          zIndex: 10
-                        }}>
+                        <h1
+
+                          style={{
+                            fontFamily: "Arial",
+                            color: "white",
+                            fontSize: "11px",
+                            fontWeight: "lighter",
+                            position: 'absolute',
+                            top: `${coord.from === 'top' ? "-1px" : "148px"}`,
+                            left: `${coord.from === 'top' ? "5px" : "186px"}`,
+                            // transform: 'translate(-50%, -50%)',
+                            zIndex: 10
+                          }}>
                           {coord.t2}
                         </h1>
                       </div>
@@ -709,7 +717,7 @@ class CustomMultilayerMap extends React.Component {
                                 {coord.side === "left" ? (
                                   <line x1="60%" y1="100%" x2="20%" y2="100%" stroke="#00BFFF" strokeWidth="2px" />
                                 ) : (
-                                  <line x1="60%" y1="100%" x2="100%" y2="100%" stroke="#00BFFF" strokeWidth="2px" />
+                                  <line x1="60%" y1="100%" x2="84%" y2="100%" stroke="#00BFFF" strokeWidth="2px" />
                                 )}
                               </>
                             )}
@@ -720,8 +728,8 @@ class CustomMultilayerMap extends React.Component {
                           fontWeight: "lighter",
                           fontSize: "13px",
                           position: 'absolute',
-                          top: `${coord.from === 'top' ? "10px" : "131px"}`,  // Adjust as needed
-                          left: `${coord.from === 'top' ? "5px" : "186px"}`, // Adjust as needed
+                          top: `${coord.from === 'top' ? "10px" : "131px"}`,
+                          left: `${coord.from === 'top' ? "5px" : "186px"}`,
                           // transform: 'translate(-50%, -50%)',
                           zIndex: 10
                         }}>
@@ -732,8 +740,8 @@ class CustomMultilayerMap extends React.Component {
                           fontWeight: "lighter",
                           fontSize: "11px",
                           position: 'absolute',
-                          top: `${coord.from === 'top' ? "30px" : "148px"}`,  // Adjust as needed
-                          left: `${coord.from === 'top' ? "5px" : "186px"}`, // Adjust as needed
+                          top: `${coord.from === 'top' ? "30px" : "148px"}`,
+                          left: `${coord.from === 'top' ? "5px" : "186px"}`,
                           // transform: 'translate(-50%, -50%)',
                           zIndex: 10
                         }}>
@@ -761,10 +769,53 @@ class CustomMultilayerMap extends React.Component {
                           fontWeight: "lighter",
                           fontSize: "13px",
                           position: 'absolute',
-                          top: `${coord.from === 'top' ? "0px" : "55px"}`,  // Adjust as needed
-                          left: `${coord.from === 'top' ? "5px" : "65px"}`, // Adjust as needed
+                          top: `${coord.from === 'top' ? "0px" : "55px"}`,
+                          left: `${coord.from === 'top' ? "5px" : "70px"}`,
+                          // transform: 'translate(-50%, -50%)',
+                          zIndex: 10
+                        }}>
+                          {coord.t1}
+                        </h1>
+                        <h1 style={{
+                          color: "white",
+                          fontWeight: "lighter",
+                          fontSize: "11px",
+                          position: 'absolute',
+                          top: `${coord.from === 'top' ? "30px" : "75px"}`,
+                          left: `${coord.from === 'top' ? "5px" : "70px"}`,
                           // transform: 'translate(-50%, -50%)',
                           zIndex: 10
+                        }}>
+                          {coord.t2}
+                        </h1>
+                      </div>
+                    </Marker>
+                  ))
+                }
+                {
+                  (chapterNumberMap === "beforeFim") && isMobile && coordinatesCasosResolvidosMobileMeier.map((coord, index) => (
+                    <Marker
+                      key={index}
+                      latitude={coord.latitude}
+                      longitude={coord.longitude}
+                    >
+                      <div style={{ position: 'relative' }}>
+                        <svg id="radar-circle">
+
+                          <circle cx="50%" cy="50%" r="8" fill="#00BFFF" stroke="#00BFFF"></circle>
+                          <circle cx="50%" cy="50%" r="14" fill="none" stroke="white" strokeWidth="2"></circle>
+                          <line x1="40%" y1="20%" x2="50%" y2="50%" stroke="#00BFFF" strokeWidth="2px" />
+                          <line x1="40%" y1="20%" x2="80%" y2="20%" stroke="#00BFFF" strokeWidth="2px" />
+                        </svg>
+                        <h1 style={{
+                          color: "white",
+                          fontWeight: "lighter",
+                          fontSize: "13px",
+                          position: 'absolute',
+                          top: "10px",
+                          left: "140px",
+                          // tranform: 'translate(-50%, -50%)',
+                          zIndex: 10
                         }}>
                           {coord.t1}
                         </h1>
@@ -773,8 +824,8 @@ class CustomMultilayerMap extends React.Component {
                           fontWeight: "lighter",
                           fontSize: "11px",
                           position: 'absolute',
-                          top: `${coord.from === 'top' ? "30px" : "75px"}`,  // Adjust as needed
-                          left: `${coord.from === 'top' ? "5px" : "70px"}`, // Adjust as needed
+                          top: "30px",
+                          left: "140px",
                           // transform: 'translate(-50%, -50%)',
                           zIndex: 10
                         }}>
@@ -849,16 +900,8 @@ class CustomMultilayerMap extends React.Component {
                       >
                         <img
                           style={{
-                            transform: `scale(${chapterNumberMap === "exemplo3" || chapterNumberMap === "exemplo6"
-                              ? cardHeight
-                              : (chapterNumberMap === "exemplo8" || chapterNumberMap === "seop3_2") && cardHeight < 2
-                                ? cardHeight * 1.1
-                                : 1
-                              })`,
-                            width: `${(chapterNumberMap === "exemplo8" || chapterNumberMap === "seop3_2") && cardHeight > 2
-                              ? "100vw"
-                              : "200px"
-                              }`,
+
+                            width: `${isMobile ? '300px' : '500px'}`,
                             zIndex: "1",
                             border: "2.5px solid black",
                             // borderRadius: "5px",

diff --git a/src/pages/civitas/story.js b/src/pages/civitas/story.js
@@ -471,7 +471,6 @@ export default function SubsidioSPPO() {
       .to("#exemplo8", { opacity: 0, duration: 28 });
 
     ScrollTrigger.create({
-      animation: tl12,
       trigger: "#exemplo8",
       onToggle: () => {
         setChapterNumberMap("exemplo8");

diff --git a/src/pages/civitas/style.css b/src/pages/civitas/style.css
@@ -20,7 +20,9 @@
   border-radius: 50%;
 }
 
-
+.beauty-font{
+  font-family: 'Digital Numbers', sans-serif !important;
+}
 .clock {
   font-family: 'Digital Numbers', sans-serif !important;
   background-color: black;