style style baby

3 years ago · 20c7a8eb72
14 changed files with 287 additions and 96 deletions
--- a/package.json
+++ b/package.json
@ -2,6 +2,7 @@
  "name": "messaggi",
  "version": "0.1.0",
  "private": true,
+  "homepage": "https://letsswing.it/messaggi",
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
--- a/public/index.html
+++ b/public/index.html
@ -10,10 +10,7 @@
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
@ -24,7 +21,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>React App</title>
+    <title>Let's swing chat</title>
  </head>
  <body style="margin: 0">
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,50 @@
+@font-face {
+  font-family: "LineaturaLight";
+  src: url("./fonts/Lineatura-Light.woff") format("woff"),
+    url("./fonts/Lineatura-Light.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Lineatura";
+  src: url("./fonts/Lineatura.woff") format("woff"),
+    url("./fonts/Lineatura.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+#myVideo {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.fade-in {
+  transition: opacity 1s ease;
+}
+.fade-out {
+  opacity: 0;
+  transition: opacity 1s ease;
+}
+
+.okbutton {
+  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
--- a/src/ImageUpload.js
+++ b/src/ImageUpload.js
@ -2,6 +2,7 @@ import React, { useState } from "react";
 import firebase from "firebase/app";
 import "firebase/storage";
 import { Stack } from "@mui/system";
+import { Button } from "@mui/material";

 const IDLE = 0;
 const IMAGE_SET = 1;
@ -16,66 +17,88 @@ function ImageUpload({ onImageURLSet }) {

  const handleChange = (e) => {
    if (e.target.files[0]) {
-      setImage(e.target.files[0]);
-      setState(1);
-    }
-  };
+      // setState(1);
+      let image = e.target.files[0];

-  const handleUpload = () => {
-    const uploadTask = firebase
-      .storage()
-      .ref(`images/${image.name}`)
-      .put(image);
+      const uploadTask = firebase
+        .storage()
+        .ref(`images/${image.name}`)
+        .put(image);

-    setState(2);
+      setState(UPLOADING);

-    uploadTask.on(
-      "state_changed",
-      (snapshot) => {
-        const progress = Math.round(
-          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
-        );
-        setProgress(progress);
-      },
-      (error) => {
-        console.log(error);
-      },
-      () => {
-        firebase
-          .storage()
-          .ref("images")
-          .child(image.name)
-          .getDownloadURL()
-          .then((url) => {
-            setImageUrl(url);
-            setProgress(0);
-            setImage(null);
-            onImageURLSet(url);
-            setState(3);
-          });
-      }
-    );
+      uploadTask.on(
+        "state_changed",
+        (snapshot) => {
+          const progress = Math.round(
+            (snapshot.bytesTransferred / snapshot.totalBytes) * 100
+          );
+          setProgress(progress);
+        },
+        (error) => {
+          console.log(error);
+        },
+        () => {
+          firebase
+            .storage()
+            .ref("images")
+            .child(image.name)
+            .getDownloadURL()
+            .then((url) => {
+              setImageUrl(url);
+              setProgress(0);
+              setImage(null);
+              onImageURLSet(url);
+              setState(3);
+            });
+        }
+      );
+    }
  };

  let componente;
  switch (state) {
    default:
    case IDLE:
-      componente = <input type="file" onChange={handleChange} />;
+      componente = (
+        <>
+          <input
+            style={{ display: "none" }}
+            id="raised-button-file"
+            multiple
+            type="file"
+            accept="image/*"
+            capture="camera"
+            onChange={handleChange}
+          />
+          <label htmlFor="raised-button-file">
+            <Button style={{ padding: 20, width: "100%" }} component="span">
+              Aggiungi un'immagine
+            </Button>
+          </label>
+        </>
+      );
      break;
    case IMAGE_SET:
      componente = (
-        <Stack>
+        <Stack
+          spacing={2}
+          style={{ justifyContent: "center", alignItems: "center" }}
+        >
          <img style={{ width: 200 }} src={URL.createObjectURL(image)} />
-          <Stack spacing={2} direction="row">
-            <button
+          <Stack
+            spacing={4}
+            style={{ width: "100%", justifyContent: "center" }}
+            direction="row"
+          >
+            <Button
              onClick={() => {
                setState(IDLE);
              }}
            >
-              annulla
-            </button>
-            <button onClick={handleUpload}>carica</button>
+              riprova
+            </Button>
+            <Button onClick={handleUpload}>carica</Button>
          </Stack>
        </Stack>
      );
@ -83,9 +106,8 @@ function ImageUpload({ onImageURLSet }) {

    case UPLOADING:
      componente = (
-        <div>
-          <img style={{ width: 200 }} src={image.src} />
-          <progress value={progress} max="100" />
+        <div style={{ width: "100%" }}>
+          <progress style={{ width: "100%" }} value={progress} max="100" />
        </div>
      );
      break;
@ -98,7 +120,7 @@ function ImageUpload({ onImageURLSet }) {
      );
  }

-  return <Stack>{componente}</Stack>;
+  return componente;
 }

 export default ImageUpload;
--- a/src/MyForm.js
+++ b/src/MyForm.js
@ -1,8 +1,9 @@
+import logoSrc from "./logo_p.svg";
 import React, { useState } from "react";
 import firebase from "firebase/app";
 import TextField from "@mui/material/TextField";
 import { Container, Stack } from "@mui/system";
-import { Button } from "@mui/material";
+import { Button, Typography } from "@mui/material";
 import { useForm } from "react-hook-form";
 import Countdown from "./Countdown";
 import ImageUpload from "./ImageUpload";
@ -39,11 +40,26 @@ export const MyForm = () => {
    );
  }
  return (
-    <Container maxWidth="sm" style={{ marginTop: 100 }}>
+    <Container maxWidth="sm" style={{ marginTop: 20 }}>
+      <div style={{ textAlign: "center" }}>
+        <img
+          src={logoSrc}
+          style={{
+            width: 200,
+          }}
+        />
+        <Typography
+          variant="h5"
+          style={{ marginBottom: 40, fontFamily: "Lineatura" }}
+        >
+          Manda un messaggio!
+        </Typography>
+      </div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Stack spacing={2}>
-          <ImageUpload onImageURLSet={onImageURLSet} />
          <TextField
+            multiline
+            rows={4}
            {...register("testo", { required: true, maxLength: 20 })}
            id="outlined-basic"
            label="messaggio"
@ -55,8 +71,18 @@ export const MyForm = () => {
            label="da"
            variant="outlined"
          />
-          <Button type="submit" variant="contained">
-            manda
+          <ImageUpload onImageURLSet={onImageURLSet} />
+          <Button
+            className="okbutton"
+            type="submit"
+            style={{
+              padding: "30px 0px",
+              fontSize: 20,
+              fontFamily: "Lineatura",
+            }}
+            variant="contained"
+          >
+            ok
          </Button>
        </Stack>
      </form>
--- a/src/Proiezione.js
+++ b/src/Proiezione.js
@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import firebase from "firebase/app";
-import { Button, Grid } from "@mui/material";
-import { Admin } from "./Admin";
-import { MyForm } from "./MyForm";
+import { Button, Grid, Stack } from "@mui/material";
+import videoSrc from "./video.mp4";
+import logoSrc from "./logo.svg";
 import { useInterval } from "./Countdown";

 window.debug = false;
@ -16,8 +16,8 @@ export const Proiezione = () => {
    var messagesRef = firebase.database().ref("/messaggi");

    messagesRef.on("child_added", function (snapshot) {
+      console.log("child_added");
      var messaggio = snapshot.val();
-      console.log(messaggio);
      cambiaMessaggi((oldArray) => {
        const newArray = [...oldArray, messaggio].sort(
          (a, b) => b.timestamp - a.timestamp
@ -28,6 +28,7 @@ export const Proiezione = () => {
    });

    messagesRef.on("child_changed", function (snapshot) {
+      console.log("child_changed");
      const messaggio = snapshot.val();
      cambiaMessaggi((oldArray) => {
        const newArray = [...oldArray];
@ -46,15 +47,14 @@ export const Proiezione = () => {
    cambiaindiceCorrente(newIndice);
  };

-  const ContainerMessaggio = () => {
+  const ContainerMessaggio = ({ messaggiApprovati, indiceCorrente }) => {
    if (!messaggiApprovati.length) {
      return <div>nessun messaggio</div>;
    } else {
-      const messaggioCorrente = messaggiApprovati[indiceCorrente];
-
      return (
        <Messaggio
-          messaggioCorrente={messaggioCorrente}
+          messaggiApprovati={messaggiApprovati}
+          indiceCorrente={indiceCorrente}
          nextMessage={nextMessage}
        />
      );
@ -63,23 +63,20 @@ export const Proiezione = () => {

  return (
    <div>
-      <Grid
+      <VideoComponent />
+      <ContainerMessaggio
+        messaggiApprovati={messaggiApprovati}
+        indiceCorrente={indiceCorrente}
+      />
+      <img
+        src={logoSrc}
        style={{
-          width: "100%",
-          height: "100vh",
-          background: "black",
-          fontFamily: "sans-serif",
-          fontWeight: "bold",
-          color: "white",
-          display: "flex",
-          justifyContent: "space-around",
-          alignContent: "center",
-          alignItems: "center",
-          textAlign: "center",
+          width: 120,
+          position: "absolute",
+          top: 20,
+          right: 20,
        }}
-      >
-        <ContainerMessaggio />
-      </Grid>
+      />
    </div>
  );
 };
@ -97,31 +94,91 @@ const Immagine = ({ url }) => {
    ></div>
  );
 };
-const Messaggio = ({ nextMessage, messaggioCorrente }) => {
-  const [timeLeft, setTimeLeft] = useState(5);
+
+const Messaggio = ({ nextMessage, messaggiApprovati, indiceCorrente }) => {
+  const [timeLeft, setTimeLeft] = useState(6);
+  const [fadeProp, setFadeProp] = useState("in");
+  const [messaggioDaMostrare, setMessaggioDaMostrare] = useState(null);
+
+  useEffect(() => {
+    if (messaggiApprovati[indiceCorrente] != messaggioDaMostrare) {
+      setFadeProp("out");
+      setTimeout(() => {
+        setMessaggioDaMostrare(messaggiApprovati[indiceCorrente]);
+        setFadeProp("in");
+      }, 1000);
+    }
+  }, [messaggiApprovati, indiceCorrente]);

  useInterval(() => {
    if (timeLeft === 1) {
-      nextMessage();
+      setFadeProp("out");
+      setTimeout(() => {
+        nextMessage();
+      }, 2000);
    } else {
      setTimeLeft(timeLeft - 1);
    }
  }, 1000);

  return (
-    <div>
-      {messaggioCorrente.immagineURL && (
-        <Immagine url={messaggioCorrente.immagineURL} />
-      )}
-      <h1>{messaggioCorrente.testo}</h1>
-      <p>da {messaggioCorrente.autore}</p>
+    <div className={"fade-" + fadeProp}>
+      <div
+        style={{
+          position: "absolute",
+          fontFamily: "Lineatura",
+          width: "100%",
+          height: "100vh",
+          fontWeight: "bold",
+          color: "white",
+          display: "flex",
+          justifyContent: "space-around",
+          alignContent: "center",
+          alignItems: "center",
+          textAlign: "center",
+        }}
+      >
+        {messaggioDaMostrare && (
+          <div>
+            {messaggioDaMostrare.immagineURL && (
+              <Immagine url={messaggioDaMostrare.immagineURL} />
+            )}
+            <h1
+              style={{
+                textShadow:
+                  "0px 0px 10px rgba(0,0,0,100), 0px 0px 10px rgba(0,0,0,100),  0px 0px 10px rgba(0,0,0,100)",
+              }}
+            >
+              {messaggioDaMostrare.testo}
+            </h1>
+            <p
+              style={{
+                display: "inline-block",
+                background: "black",
+                padding: "0px 6px",
+                paddingBottom: "4px",
+              }}
+            >
+              da {messaggioDaMostrare.autore}
+            </p>

-      {debug && (
-        <div>
-          <Button onClick={() => nextMessage()}>next</Button>
-          {timeLeft}
-        </div>
-      )}
+            {debug && (
+              <div>
+                <Button onClick={() => nextMessage()}>next</Button>
+                {timeLeft}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
    </div>
  );
 };
+
+const VideoComponent = React.memo(() => {
+  return (
+    <video autoPlay muted loop id="myVideo">
+      <source src={videoSrc} type="video/mp4" />
+    </video>
+  );
+});
--- a/src/fonts/Lineatura-Light.ttf
+++ b/src/fonts/Lineatura-Light.ttf
--- a/src/fonts/Lineatura-Light.woff
+++ b/src/fonts/Lineatura-Light.woff
--- a/src/fonts/Lineatura.ttf
+++ b/src/fonts/Lineatura.ttf
--- a/src/fonts/Lineatura.woff
+++ b/src/fonts/Lineatura.woff
--- a/src/index.js
+++ b/src/index.js
@ -1,3 +1,4 @@
+import "./App.css";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
--- a/src/logo.svg
+++ b/src/logo.svg
@ -1 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
+<svg width="1382" height="1382" viewBox="0 0 1382 1382" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <circle cx="690.606" cy="690.606" r="690.606" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M448.498 332.773L457.698 670.746L486.61 649.887L491.679 656.913C486.61 649.887 486.61 649.887 486.61 649.887L486.611 649.886L486.615 649.883L546.295 606.827L561.656 628.118L501.976 671.175L501.974 671.176L501.972 671.178L501.971 671.178C501.971 671.179 501.971 671.179 496.86 664.095L501.971 671.178L432.804 721.08L422.253 333.488L448.498 332.773Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M742.673 294.942L736.349 221.764L710.192 224.024L716.976 302.523L507.278 364.385L514.707 389.567L719.283 329.216L743.083 604.616L769.24 602.355L744.98 321.635L980.25 252.229L972.821 227.048L742.673 294.942Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1067.97 356.735L1054.71 768.636L1028.47 767.792L1041.73 355.891L1067.97 356.735Z" fill="white"/>
+    <path d="M1060.05 823.936C1060.05 835.363 1050.79 844.626 1039.36 844.626C1027.93 844.626 1018.67 835.363 1018.67 823.936C1018.67 812.509 1027.93 803.246 1039.36 803.246C1050.79 803.246 1060.05 812.509 1060.05 823.936Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1039.36 825.544C1040.25 825.544 1040.97 824.822 1040.97 823.936C1040.97 823.05 1040.25 822.328 1039.36 822.328C1038.47 822.328 1037.75 823.05 1037.75 823.936C1037.75 824.822 1038.47 825.544 1039.36 825.544ZM1039.36 844.626C1050.79 844.626 1060.05 835.363 1060.05 823.936C1060.05 812.509 1050.79 803.246 1039.36 803.246C1027.93 803.246 1018.67 812.509 1018.67 823.936C1018.67 835.363 1027.93 844.626 1039.36 844.626Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M830.82 355.371L827.343 368.029C823.809 380.894 816.733 396.693 806.676 408.586L798.2 418.61L778.152 401.658L786.628 391.634C793.627 383.357 799.224 371.275 802.026 361.074L805.504 348.416L830.82 355.371Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M547.863 751.67L582.323 956.203L558.155 965.193L489.079 851.32L512.741 973.263L488.604 982.529L365.139 777.207L387.638 763.678L472.813 905.322L449.309 784.193L473.419 774.884L545.043 892.956L521.974 756.032L547.863 751.67Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M696.373 662.459L708.866 770.841C711.603 752.426 715.157 735.473 719.804 722.214C722.605 714.22 726.102 706.682 730.68 700.906C735.283 695.099 742.302 689.531 751.876 689.531C761.136 689.531 768.059 694.588 772.691 700.339C777.181 705.913 780.407 713.117 782.865 720.581C787.82 735.626 790.864 755.586 792.769 776.521C796.605 818.657 796.108 868.226 795.208 898.772L794.821 911.893L768.578 911.12L768.965 897.998C769.857 867.716 770.312 819.421 766.623 778.901C764.767 758.508 761.929 740.942 757.928 728.793C755.909 722.66 753.889 718.849 752.245 716.808C752.13 716.665 752.023 716.539 751.924 716.426C751.73 716.636 751.507 716.896 751.256 717.213C749.295 719.687 746.964 724.098 744.581 730.897C739.861 744.364 736.099 763.751 733.252 786.239C727.588 830.977 725.898 884.973 726.103 921.069L699.935 922.647L670.292 665.465L696.373 662.459ZM752.892 715.577C752.892 715.581 752.858 715.604 752.789 715.633C752.857 715.588 752.892 715.573 752.892 715.577ZM751.126 715.653C751.061 715.624 751.029 715.602 751.029 715.597C751.029 715.593 751.061 715.607 751.126 715.653Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M630.288 776.027L652.844 942.736L626.827 946.256L604.271 779.548L630.288 776.027Z" fill="white"/>
+    <path d="M631.56 729.491C631.56 740.917 622.296 750.181 610.868 750.181C599.44 750.181 590.176 740.917 590.176 729.491C590.176 718.064 599.44 708.801 610.868 708.801C622.296 708.801 631.56 718.064 631.56 729.491Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M610.868 731.098C611.758 731.098 612.477 730.377 612.477 729.491C612.477 728.604 611.758 727.883 610.868 727.883C609.978 727.883 609.258 728.604 609.258 729.491C609.258 730.377 609.978 731.098 610.868 731.098ZM610.868 750.181C622.296 750.181 631.56 740.917 631.56 729.491C631.56 718.064 622.296 708.801 610.868 708.801C599.44 708.801 590.176 718.064 590.176 729.491C590.176 740.917 599.44 750.181 610.868 750.181Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M948.273 659.196L947.02 646.129L920.885 648.635L922.139 661.702C922.627 666.795 923.15 672.346 923.7 678.288C922.951 677.989 922.182 677.716 921.394 677.47C911.791 674.48 902.252 676.522 894.089 680.711C885.998 684.864 878.443 691.488 871.667 699.391C858.083 715.233 845.913 738.213 837.723 764.51C829.532 790.807 826.5 816.633 828.686 837.386C829.777 847.738 832.233 857.48 836.536 865.492C840.876 873.576 847.569 880.672 857.172 883.662C866.774 886.653 876.313 884.611 884.476 880.421C892.567 876.269 900.122 869.645 906.898 861.742C917.501 849.377 927.242 832.663 934.901 813.418C938.117 857.549 940.821 901.697 941.879 936.034C887.38 951.077 824.483 968.705 754.395 989.235C698.354 1005.65 656.686 1023.17 628.501 1040.58C614.412 1049.28 603.245 1058.22 595.334 1067.36C587.464 1076.46 582.143 1086.56 581.441 1097.35C579.927 1120.61 599.251 1135.92 622.522 1144.75C646.836 1153.97 681.694 1158.96 724.979 1158.96C848.886 1158.96 912.374 1136.4 943.218 1096.97C958.649 1077.25 964.806 1054.61 967.261 1031.85C969.114 1014.68 968.915 996.429 968.725 978.903V978.899C968.667 973.634 968.611 968.435 968.611 963.35C968.611 960.959 968.597 958.479 968.569 955.914C985.152 951.356 1000.88 947.051 1015.74 942.986L1015.75 942.983C1050.55 933.459 1080.54 925.253 1105.37 918.189L1118 914.597L1110.82 889.344L1098.19 892.936C1073.82 899.868 1044.06 908.012 1009.41 917.495L1009.4 917.498L1009.39 917.501C996.259 921.095 982.422 924.882 967.908 928.868C965.041 847.61 954.102 719.975 948.273 659.196ZM761.775 1014.43C829.149 994.696 889.584 977.725 942.356 963.139L942.356 963.35C942.356 969.126 942.416 974.773 942.475 980.305V980.308C942.657 997.483 942.828 1013.56 941.158 1029.04C938.997 1049.07 933.851 1066.34 922.538 1080.8C899.894 1109.75 848.13 1132.71 724.979 1132.71C683.195 1132.71 651.927 1127.82 631.835 1120.2C610.7 1112.18 607.339 1103.67 607.64 1099.05C607.844 1095.91 609.555 1091.05 615.188 1084.54C620.781 1078.08 629.589 1070.76 642.295 1062.92C667.699 1047.23 706.896 1030.51 761.775 1014.43ZM913.586 702.537C914.761 702.903 916.756 704.072 918.898 708.062C921.08 712.124 922.901 718.263 923.769 726.498C925.498 742.921 923.163 765.097 915.775 788.817C908.387 812.536 897.717 832.116 886.967 844.653C881.577 850.94 876.591 854.959 872.489 857.064C868.46 859.132 866.153 858.961 864.979 858.596C863.805 858.23 861.809 857.061 859.667 853.071C857.486 849.009 855.664 842.87 854.796 834.635C853.067 818.212 855.402 796.036 862.79 772.316C870.178 748.597 880.848 729.016 891.598 716.48C896.989 710.193 901.974 706.174 906.076 704.069C910.105 702.001 912.412 702.171 913.586 702.537Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M285.031 627.512C278.752 635.128 272.841 649.083 272.841 673.443C272.841 729.255 304.709 786.245 339.081 841.184C342.864 847.231 346.682 853.262 350.476 859.256C363.531 879.881 376.306 900.063 386.431 918.92C399.388 943.049 409.318 967.267 409.318 989.747C409.318 1001.87 406.236 1011.96 400.614 1020C395.049 1027.96 387.632 1033 380.386 1036.17C366.635 1042.2 351.811 1042.19 346.278 1042.19L345.963 1042.19C329.615 1042.19 305.154 1032.76 285.032 1015.71C264.352 998.197 246.587 971.251 246.587 934.958V921.831H272.841V934.958C272.841 961.826 285.77 981.932 302.001 995.679C318.787 1009.9 337.452 1015.94 345.963 1015.94C351.468 1015.94 361.445 1015.81 369.845 1012.13C373.81 1010.39 376.93 1008.06 379.1 1004.95C381.213 1001.93 383.063 997.279 383.063 989.747C383.063 974.18 375.933 954.865 363.301 931.34C353.664 913.393 341.588 894.312 328.64 873.854C324.766 867.731 320.813 861.485 316.824 855.109C282.957 800.978 246.587 737.862 246.587 673.443C246.587 645.043 253.486 624.502 264.774 610.811C276.146 597.017 291.08 591.322 304.361 591.322C316.538 591.322 333.795 597.074 347.662 612.563C361.762 628.311 371.465 653.049 370.543 689.619C370.439 693.77 370.198 698.075 369.812 702.54L368.68 715.618L342.524 713.356L343.655 700.277C343.997 696.322 344.207 692.551 344.297 688.958C345.092 657.393 336.729 639.712 328.101 630.075C319.241 620.178 309.11 617.577 304.361 617.577C298.616 617.577 291.226 619.998 285.031 627.512Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M667.144 411.415C672.139 413.586 675.993 417.251 678.918 421.43C696.479 446.529 683.944 474.664 668.703 494.657C652.768 515.559 629.43 534.035 611.565 544.847L608.802 546.519C608.121 552.4 607.762 558.108 607.767 563.534C607.788 584.829 613.304 597.504 621.606 602.796C623.781 604.183 625.348 604.247 627.367 603.572C630.053 602.672 633.757 600.237 638.237 595.478C647.168 585.992 655.715 571.053 662.383 556.893L667.975 545.016L691.728 556.201L686.136 568.077C679.148 582.918 669.188 600.904 657.352 613.475C651.449 619.745 644.204 625.622 635.701 628.468C626.53 631.538 616.666 630.783 607.492 624.934C587.35 612.094 581.536 587.143 581.512 563.56C581.489 539.18 587.539 511.582 596.218 487.089C604.843 462.746 616.609 439.94 629.044 425.725C635.045 418.865 642.727 412.221 651.81 410.117C656.719 408.979 662.023 409.189 667.144 411.415ZM616.547 509.494C627.83 500.694 639.273 489.957 647.823 478.74C661.941 460.221 664.232 446.237 657.406 436.482C657.26 436.273 657.129 436.1 657.014 435.958C655.62 436.596 652.803 438.44 648.805 443.011C639.441 453.716 629.042 473.06 620.964 495.858C619.374 500.344 617.896 504.905 616.547 509.494ZM656.446 435.371C656.446 435.371 656.452 435.374 656.462 435.382C656.451 435.375 656.446 435.371 656.446 435.371Z" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M847.332 419.345C847.153 387.186 873.826 369.801 899.321 369.801C926.954 369.801 942.568 391.397 947.321 400.618L953.335 412.286L929.998 424.315L923.984 412.646C920.835 406.538 912.095 396.055 899.321 396.055C884.408 396.055 873.509 405.279 873.586 419.199C873.609 423.334 875.963 428.355 883.494 435.316C889.858 441.2 898.042 446.815 907.502 453.307C909.262 454.515 911.067 455.753 912.913 457.029C924.1 464.765 936.53 473.744 946.108 484.586C955.899 495.67 963.4 509.476 963.4 526.703C963.4 544.339 955.144 557.824 942.948 566.297C931.205 574.455 916.354 577.682 902.314 577.091C888.242 576.499 873.612 572.022 862.186 563.088C850.444 553.906 842.33 540.113 842.33 522.494V509.366H868.584V522.494C868.584 531.236 872.322 537.686 878.358 542.405C884.711 547.373 893.785 550.455 903.417 550.86C913.081 551.266 921.934 548.927 927.969 544.735C933.55 540.857 937.146 535.207 937.146 526.703C937.146 517.789 933.448 509.911 926.432 501.968C919.203 493.785 909.22 486.395 897.98 478.624C896.363 477.505 894.708 476.372 893.03 475.223C883.645 468.796 873.571 461.898 865.672 454.596C856.343 445.972 847.416 434.468 847.332 419.345Z" fill="white"/>
+</svg>
--- a/src/logo_p.svg
+++ b/src/logo_p.svg
@ -0,0 +1,19 @@
+<svg width="1382" height="1382" viewBox="0 0 1382 1382" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <circle cx="690.606" cy="690.606" r="690.606" fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M448.498 332.773L457.698 670.746L486.61 649.887L491.679 656.913C486.61 649.887 486.61 649.887 486.61 649.887L486.611 649.886L486.615 649.883L546.295 606.827L561.656 628.118L501.976 671.175L501.974 671.176L501.972 671.178L501.971 671.178C501.971 671.179 501.971 671.179 496.86 664.095L501.971 671.178L432.804 721.08L422.253 333.488L448.498 332.773Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M742.673 294.942L736.349 221.764L710.192 224.024L716.976 302.523L507.278 364.385L514.707 389.567L719.283 329.216L743.083 604.616L769.24 602.355L744.98 321.635L980.25 252.229L972.821 227.048L742.673 294.942Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1067.97 356.735L1054.71 768.636L1028.47 767.792L1041.73 355.891L1067.97 356.735Z" fill="black"/>
+    <path d="M1060.05 823.936C1060.05 835.363 1050.79 844.626 1039.36 844.626C1027.93 844.626 1018.67 835.363 1018.67 823.936C1018.67 812.509 1027.93 803.246 1039.36 803.246C1050.79 803.246 1060.05 812.509 1060.05 823.936Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1039.36 825.544C1040.25 825.544 1040.97 824.822 1040.97 823.936C1040.97 823.05 1040.25 822.328 1039.36 822.328C1038.47 822.328 1037.75 823.05 1037.75 823.936C1037.75 824.822 1038.47 825.544 1039.36 825.544ZM1039.36 844.626C1050.79 844.626 1060.05 835.363 1060.05 823.936C1060.05 812.509 1050.79 803.246 1039.36 803.246C1027.93 803.246 1018.67 812.509 1018.67 823.936C1018.67 835.363 1027.93 844.626 1039.36 844.626Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M830.82 355.371L827.343 368.029C823.809 380.894 816.733 396.693 806.676 408.586L798.2 418.61L778.152 401.658L786.628 391.634C793.627 383.357 799.224 371.275 802.026 361.074L805.504 348.416L830.82 355.371Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M547.863 751.67L582.323 956.203L558.155 965.193L489.079 851.32L512.741 973.263L488.604 982.529L365.139 777.207L387.638 763.678L472.813 905.322L449.309 784.193L473.419 774.884L545.043 892.956L521.974 756.032L547.863 751.67Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M696.373 662.459L708.866 770.841C711.603 752.426 715.157 735.473 719.804 722.214C722.605 714.22 726.102 706.682 730.68 700.906C735.283 695.099 742.302 689.531 751.876 689.531C761.136 689.531 768.059 694.588 772.691 700.339C777.181 705.913 780.407 713.117 782.865 720.581C787.82 735.626 790.864 755.586 792.769 776.521C796.605 818.657 796.108 868.226 795.208 898.772L794.821 911.893L768.578 911.12L768.965 897.998C769.857 867.716 770.312 819.421 766.623 778.901C764.767 758.508 761.929 740.942 757.928 728.793C755.909 722.66 753.889 718.849 752.245 716.808C752.13 716.665 752.023 716.539 751.924 716.426C751.73 716.636 751.507 716.896 751.256 717.213C749.295 719.687 746.964 724.098 744.581 730.897C739.861 744.364 736.099 763.751 733.252 786.239C727.588 830.977 725.898 884.973 726.103 921.069L699.935 922.647L670.292 665.465L696.373 662.459ZM752.892 715.577C752.892 715.581 752.858 715.604 752.789 715.633C752.857 715.588 752.892 715.573 752.892 715.577ZM751.126 715.653C751.061 715.624 751.029 715.602 751.029 715.597C751.029 715.593 751.061 715.607 751.126 715.653Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M630.288 776.027L652.844 942.736L626.827 946.256L604.271 779.548L630.288 776.027Z" fill="black"/>
+    <path d="M631.56 729.491C631.56 740.917 622.296 750.181 610.868 750.181C599.44 750.181 590.176 740.917 590.176 729.491C590.176 718.064 599.44 708.801 610.868 708.801C622.296 708.801 631.56 718.064 631.56 729.491Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M610.868 731.098C611.758 731.098 612.477 730.377 612.477 729.491C612.477 728.604 611.758 727.883 610.868 727.883C609.978 727.883 609.258 728.604 609.258 729.491C609.258 730.377 609.978 731.098 610.868 731.098ZM610.868 750.181C622.296 750.181 631.56 740.917 631.56 729.491C631.56 718.064 622.296 708.801 610.868 708.801C599.44 708.801 590.176 718.064 590.176 729.491C590.176 740.917 599.44 750.181 610.868 750.181Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M948.273 659.196L947.02 646.129L920.885 648.635L922.139 661.702C922.627 666.795 923.15 672.346 923.7 678.288C922.951 677.989 922.182 677.716 921.394 677.47C911.791 674.48 902.252 676.522 894.089 680.711C885.998 684.864 878.443 691.488 871.667 699.391C858.083 715.233 845.913 738.213 837.723 764.51C829.532 790.807 826.5 816.633 828.686 837.386C829.777 847.738 832.233 857.48 836.536 865.492C840.876 873.576 847.569 880.672 857.172 883.662C866.774 886.653 876.313 884.611 884.476 880.421C892.567 876.269 900.122 869.645 906.898 861.742C917.501 849.377 927.242 832.663 934.901 813.418C938.117 857.549 940.821 901.697 941.879 936.034C887.38 951.077 824.483 968.705 754.395 989.235C698.354 1005.65 656.686 1023.17 628.501 1040.58C614.412 1049.28 603.245 1058.22 595.334 1067.36C587.464 1076.46 582.143 1086.56 581.441 1097.35C579.927 1120.61 599.251 1135.92 622.522 1144.75C646.836 1153.97 681.694 1158.96 724.979 1158.96C848.886 1158.96 912.374 1136.4 943.218 1096.97C958.649 1077.25 964.806 1054.61 967.261 1031.85C969.114 1014.68 968.915 996.429 968.725 978.903V978.899C968.667 973.634 968.611 968.435 968.611 963.35C968.611 960.959 968.597 958.479 968.569 955.914C985.152 951.356 1000.88 947.051 1015.74 942.986L1015.75 942.983C1050.55 933.459 1080.54 925.253 1105.37 918.189L1118 914.597L1110.82 889.344L1098.19 892.936C1073.82 899.868 1044.06 908.012 1009.41 917.495L1009.4 917.498L1009.39 917.501C996.259 921.095 982.422 924.882 967.908 928.868C965.041 847.61 954.102 719.975 948.273 659.196ZM761.775 1014.43C829.149 994.696 889.584 977.725 942.356 963.139L942.356 963.35C942.356 969.126 942.416 974.773 942.475 980.305V980.308C942.657 997.483 942.828 1013.56 941.158 1029.04C938.997 1049.07 933.851 1066.34 922.538 1080.8C899.894 1109.75 848.13 1132.71 724.979 1132.71C683.195 1132.71 651.927 1127.82 631.835 1120.2C610.7 1112.18 607.339 1103.67 607.64 1099.05C607.844 1095.91 609.555 1091.05 615.188 1084.54C620.781 1078.08 629.589 1070.76 642.295 1062.92C667.699 1047.23 706.896 1030.51 761.775 1014.43ZM913.586 702.537C914.761 702.903 916.756 704.072 918.898 708.062C921.08 712.124 922.901 718.263 923.769 726.498C925.498 742.921 923.163 765.097 915.775 788.817C908.387 812.536 897.717 832.116 886.967 844.653C881.577 850.94 876.591 854.959 872.489 857.064C868.46 859.132 866.153 858.961 864.979 858.596C863.805 858.23 861.809 857.061 859.667 853.071C857.486 849.009 855.664 842.87 854.796 834.635C853.067 818.212 855.402 796.036 862.79 772.316C870.178 748.597 880.848 729.016 891.598 716.48C896.989 710.193 901.974 706.174 906.076 704.069C910.105 702.001 912.412 702.171 913.586 702.537Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M285.031 627.512C278.752 635.128 272.841 649.083 272.841 673.443C272.841 729.255 304.709 786.245 339.081 841.184C342.864 847.231 346.682 853.262 350.476 859.256C363.531 879.881 376.306 900.063 386.431 918.92C399.388 943.049 409.318 967.267 409.318 989.747C409.318 1001.87 406.236 1011.96 400.614 1020C395.049 1027.96 387.632 1033 380.386 1036.17C366.635 1042.2 351.811 1042.19 346.278 1042.19L345.963 1042.19C329.615 1042.19 305.154 1032.76 285.032 1015.71C264.352 998.197 246.587 971.251 246.587 934.958V921.831H272.841V934.958C272.841 961.826 285.77 981.932 302.001 995.679C318.787 1009.9 337.452 1015.94 345.963 1015.94C351.468 1015.94 361.445 1015.81 369.845 1012.13C373.81 1010.39 376.93 1008.06 379.1 1004.95C381.213 1001.93 383.063 997.279 383.063 989.747C383.063 974.18 375.933 954.865 363.301 931.34C353.664 913.393 341.588 894.312 328.64 873.854C324.766 867.731 320.813 861.485 316.824 855.109C282.957 800.978 246.587 737.862 246.587 673.443C246.587 645.043 253.486 624.502 264.774 610.811C276.146 597.017 291.08 591.322 304.361 591.322C316.538 591.322 333.795 597.074 347.662 612.563C361.762 628.311 371.465 653.049 370.543 689.619C370.439 693.77 370.198 698.075 369.812 702.54L368.68 715.618L342.524 713.356L343.655 700.277C343.997 696.322 344.207 692.551 344.297 688.958C345.092 657.393 336.729 639.712 328.101 630.075C319.241 620.178 309.11 617.577 304.361 617.577C298.616 617.577 291.226 619.998 285.031 627.512Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M667.144 411.415C672.139 413.586 675.993 417.251 678.918 421.43C696.479 446.529 683.944 474.664 668.703 494.657C652.768 515.559 629.43 534.035 611.565 544.847L608.802 546.519C608.121 552.4 607.762 558.108 607.767 563.534C607.788 584.829 613.304 597.504 621.606 602.796C623.781 604.183 625.348 604.247 627.367 603.572C630.053 602.672 633.757 600.237 638.237 595.478C647.168 585.992 655.715 571.053 662.383 556.893L667.975 545.016L691.728 556.201L686.136 568.077C679.148 582.918 669.188 600.904 657.352 613.475C651.449 619.745 644.204 625.622 635.701 628.468C626.53 631.538 616.666 630.783 607.492 624.934C587.35 612.094 581.536 587.143 581.512 563.56C581.489 539.18 587.539 511.582 596.218 487.089C604.843 462.746 616.609 439.94 629.044 425.725C635.045 418.865 642.727 412.221 651.81 410.117C656.719 408.979 662.023 409.189 667.144 411.415ZM616.547 509.494C627.83 500.694 639.273 489.957 647.823 478.74C661.941 460.221 664.232 446.237 657.406 436.482C657.26 436.273 657.129 436.1 657.014 435.958C655.62 436.596 652.803 438.44 648.805 443.011C639.441 453.716 629.042 473.06 620.964 495.858C619.374 500.344 617.896 504.905 616.547 509.494ZM656.446 435.371C656.446 435.371 656.452 435.374 656.462 435.382C656.451 435.375 656.446 435.371 656.446 435.371Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M847.332 419.345C847.153 387.186 873.826 369.801 899.321 369.801C926.954 369.801 942.568 391.397 947.321 400.618L953.335 412.286L929.998 424.315L923.984 412.646C920.835 406.538 912.095 396.055 899.321 396.055C884.408 396.055 873.509 405.279 873.586 419.199C873.609 423.334 875.963 428.355 883.494 435.316C889.858 441.2 898.042 446.815 907.502 453.307C909.262 454.515 911.067 455.753 912.913 457.029C924.1 464.765 936.53 473.744 946.108 484.586C955.899 495.67 963.4 509.476 963.4 526.703C963.4 544.339 955.144 557.824 942.948 566.297C931.205 574.455 916.354 577.682 902.314 577.091C888.242 576.499 873.612 572.022 862.186 563.088C850.444 553.906 842.33 540.113 842.33 522.494V509.366H868.584V522.494C868.584 531.236 872.322 537.686 878.358 542.405C884.711 547.373 893.785 550.455 903.417 550.86C913.081 551.266 921.934 548.927 927.969 544.735C933.55 540.857 937.146 535.207 937.146 526.703C937.146 517.789 933.448 509.911 926.432 501.968C919.203 493.785 909.22 486.395 897.98 478.624C896.363 477.505 894.708 476.372 893.03 475.223C883.645 468.796 873.571 461.898 865.672 454.596C856.343 445.972 847.416 434.468 847.332 419.345Z" fill="black"/>
+</svg>
--- a/src/video.mp4
+++ b/src/video.mp4