add form

tomaskrejcicom-web/.firebase/hosting.YnVpbGQ.cache

@@ -0,0 +1,15 @@
+asset-manifest.json,1689723307139,ae13d344cf676d2c29c078b98251426b23ad1a2d6194a620464dd0d251464bc9
+index.html,1689723307139,a80fa5c9ea1c1b354d1a419726bf598ceeda847a61f9ea0e889197c74bcd4795
+favicon.ico,1689723302015,c599b7a91ab3627e3538125d9f40adc2d4bf949046984262670545dc7738af06
+logo192.png,1689723302015,76c449ccb9cd117c2f2338f091b18f7050f3210e249b2228f5c81b23f34377cd
+manifest.json,1689723302015,0958a5e0c831126100c8c2d06a6bbaa665a3900f21aaff4130238a6f5a113aa1
+robots.txt,1689723302015,2544ca049f223a42bff01f72ad930a5edba75bbb7199d0f8430a02ff5aca16ec
+logo512.png,1689723302015,7779210d56c1f3741e2e487799fe3092def4fa6ac450a60532b807c3a8971205
+static/css/main.dd7cc7f2.css,1689723307143,40ed502086775fc52d54335d46e8404cbc9e3fc7f6cac687cc3d4dce58ec7d13
+static/css/main.dd7cc7f2.css.map,1689723307143,663e8011c00ddbcb55e1bc8a15b26bb43b4b7fbc1c1b78999f53a22f975a97e6
+static/js/787.5ab74ad8.chunk.js,1689723307143,3a5feb607c91bc778934c9abcd0c844a7767f473d0ca8886e34f022904d31b89
+static/js/main.61227c6a.js.LICENSE.txt,1689723307143,f9a829852c246c33a2e9cd44cc7cfb9bdc13d35a3ebeb78833bc2a0332eb65a4
+static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg,1689723307143,7d3ee40656c5a13fa0b04821777c1ba40bd028faa5c0e7475f61021d03fd35d6
+static/js/787.5ab74ad8.chunk.js.map,1689723307143,f971a0bb41a7ed442b7463fb2f37e02040ddaf7d2ead909d82baa8f2876378ee
+static/js/main.61227c6a.js,1689723307143,1f65fb33390a6dc6efc0b39f7fab8383cbd02cdcb6e7e7a9137e6e7de3055aac
+static/js/main.61227c6a.js.map,1689723307143,f79aa114fa14340b7da8361c8a4d17e68f614182e6defc7f79a369cf202a0038

tomaskrejcicom-web/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "tomaskrejci-com-web"
+  }
+}

tomaskrejcicom-web/firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "build",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

tomaskrejcicom-web/package-lock.json

@@ -8,6 +8,7 @@
       "name": "tomaskrejcicom-web",
       "version": "0.1.0",
       "dependencies": {
+        "@emailjs/browser": "^3.11.0",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -15,6 +16,9 @@
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -627,9 +631,16 @@
       }
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
+      "version": "7.21.11",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
       "engines": {
         "node": ">=6.9.0"
       },
@@ -1887,6 +1898,17 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/preset-env/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -2284,6 +2306,14 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emailjs/browser": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-3.11.0.tgz",
+      "integrity": "sha512-RkY3FKZ3fPdK++OeF46mRTFpmmQWCHUVHZH209P3NE4D5sg2Atg7S2wa3gw5062Gl4clt4Wn5SyC4WhlVZC5pA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",

tomaskrejcicom-web/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emailjs/browser": "^3.11.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -34,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }

tomaskrejcicom-web/src/App.css

@@ -1,19 +1,5 @@
 .App {
   text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
@@ -24,15 +10,132 @@
   color: white;
 }
 
-.App-link {
+body {
-  color: #61dafb;
+  align-items: center;
+  background-color: #000;
+  display: flex;
+  justify-content: center;
+  height: 100vh;
 }
 
-@keyframes App-logo-spin {
+.form {
-  from {
+  background-color: #15172b;
-    transform: rotate(0deg);
+  border-radius: 20px;
+  box-sizing: border-box;
+  height: 600px;
+  padding: 20px;
+  width: 320px;
 }
-  to {
+
-    transform: rotate(360deg);
+.title {
+  color: #eee;
+  font-family: sans-serif;
+  font-size: 36px;
+  font-weight: 600;
+  margin-top: 30px;
 }
+
+.subtitle {
+  color: #eee;
+  font-family: sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  margin-top: 10px;
+}
+
+.input-container {
+  height: 50px;
+  position: relative;
+  width: 100%;
+}
+
+.ic1 {
+  margin-top: 40px;
+}
+
+.ic2 {
+  margin-top: 30px;
+}
+
+.ic3 {
+  margin-top: 30px;
+  height: 150px;
+}
+
+.input {
+  background-color: #303245;
+  border-radius: 12px;
+  border: 0;
+  box-sizing: border-box;
+  color: #eee;
+  font-size: 18px;
+  height: 100%;
+  outline: 0;
+  padding: 4px 20px 0;
+  width: 100%;
+}
+
+.cut {
+  background-color: #15172b;
+  border-radius: 10px;
+  height: 20px;
+  left: 20px;
+  position: absolute;
+  top: -20px;
+  transform: translateY(0);
+  transition: transform 200ms;
+  width: 2.8em ;
+}
+
+.cut-long {
+  width: 3.8em;
+}
+
+.input:focus ~ .cut,
+.input:not(:placeholder-shown) ~ .cut {
+  transform: translateY(8px);
+}
+
+.placeholder {
+  color: #65657b;
+  font-family: sans-serif;
+  left: 20px;
+  line-height: 14px;
+  pointer-events: none;
+  position: absolute;
+  transform-origin: 0 50%;
+  transition: transform 200ms, color 200ms;
+  top: 20px;
+}
+
+.input:focus ~ .placeholder,
+.input:not(:placeholder-shown) ~ .placeholder {
+  transform: translateY(-30px) translateX(10px) scale(0.75);
+}
+
+.input:not(:placeholder-shown) ~ .placeholder {
+  color: #808097;
+}
+
+.input:focus ~ .placeholder {
+  color: #dc2f55;
+}
+
+.submit {
+  background-color: #08d;
+  border-radius: 12px;
+  border: 0;
+  box-sizing: border-box;
+  color: #eee;
+  cursor: pointer;
+  font-size: 18px;
+  height: 50px;
+  margin-top: 38px;
+  outline: 0;
+  text-align: center;
+  width: 100%;
+}
+
+.submit:active {
+  background-color: #06b;
 }

tomaskrejcicom-web/src/App.js

@@ -1,23 +1,16 @@
-import logo from './logo.svg';
+import logo from "./logo.svg";
-import './App.css';
+import "./App.css";
+import { ContactUs } from "./ContactUs";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
+      <header className="App-header"></header>
-        <img src={logo} className="App-logo" alt="logo" />
+      <div className="App-body">
-        <p>
+        <div className="App-contactUs">
-          Edit <code>src/App.js</code> and save to reload.
+          <ContactUs />
-        </p>
+        </div>
-        <a
+      </div>
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
     </div>
   );
 }

tomaskrejcicom-web/src/ContactUs.js

@@ -0,0 +1,79 @@
+import React, { useRef } from "react";
+import emailjs from "@emailjs/browser";
+
+export const ContactUs = () => {
+  const form = useRef();
+
+  const sendEmail = (e) => {
+    e.preventDefault();
+
+    emailjs
+      .sendForm(
+        "service_mp26lud",
+        "template_khxf7hm",
+        form.current,
+        "QDiTbytoOPVdWPR7I"
+      )
+      .then(
+        (result) => {
+          console.log(result.text);
+        },
+        (error) => {
+          console.log(error.text);
+        }
+      );
+  };
+
+  return (
+    <div className="form">
+      <div className="title">Welcome</div>
+      <div className="subtitle">Send me a message!</div>
+      <form ref={form} onSubmit={sendEmail}>
+        <div className="input-container ic1">
+          <input
+            id="firstname"
+            className="input"
+            type="text"
+            name="user_name"
+            placeholder=" "
+          />
+          <div className="cut"></div>
+          <label htmlFor="name" className="placeholder">
+            Name
+          </label>
+        </div>
+
+        <div className="input-container ic2">
+          <input
+            id="lastname"
+            className="input"
+            type="email"
+            name="user_email"
+            placeholder=" "
+          />
+          <div className="cut"></div>
+          <label htmlFor="email" className="placeholder">
+            Email
+          </label>
+        </div>
+
+        <div className="input-container ic2 ic3">
+          <textarea
+            rows="10"
+            className="input"
+            type="text"
+            name="message"
+            placeholder=" "
+          />
+          <div className="cut cut-long"></div>
+          <label htmlFor="message" className="placeholder">
+            Message
+          </label>
+        </div>
+        <button type="text" className="submit" value="Send">
+          Send
+        </button>
+      </form>
+    </div>
+  );
+};