add form
This commit is contained in:
parent
403b1a556a
commit
4ed1731b38
15
tomaskrejcicom-web/.firebase/hosting.YnVpbGQ.cache
Normal file
15
tomaskrejcicom-web/.firebase/hosting.YnVpbGQ.cache
Normal file
@ -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
|
||||
5
tomaskrejcicom-web/.firebaserc
Normal file
5
tomaskrejcicom-web/.firebaserc
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"projects": {
|
||||
"default": "tomaskrejci-com-web"
|
||||
}
|
||||
}
|
||||
16
tomaskrejcicom-web/firebase.json
Normal file
16
tomaskrejcicom-web/firebase.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"hosting": {
|
||||
"public": "build",
|
||||
"ignore": [
|
||||
"firebase.json",
|
||||
"**/.*",
|
||||
"**/node_modules/**"
|
||||
],
|
||||
"rewrites": [
|
||||
{
|
||||
"source": "**",
|
||||
"destination": "/index.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
36
tomaskrejcicom-web/package-lock.json
generated
36
tomaskrejcicom-web/package-lock.json
generated
@ -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",
|
||||
"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==",
|
||||
"version": "7.21.11",
|
||||
"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
|
||||
"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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
color: #61dafb;
|
||||
body {
|
||||
align-items: center;
|
||||
background-color: #000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
.form {
|
||||
background-color: #15172b;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
height: 600px;
|
||||
padding: 20px;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -1,23 +1,16 @@
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import logo from "./logo.svg";
|
||||
import "./App.css";
|
||||
import { ContactUs } from "./ContactUs";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.js</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
<header className="App-header"></header>
|
||||
<div className="App-body">
|
||||
<div className="App-contactUs">
|
||||
<ContactUs />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
79
tomaskrejcicom-web/src/ContactUs.js
Normal file
79
tomaskrejcicom-web/src/ContactUs.js
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user