small changes

This commit is contained in:
LixayTF 2023-09-20 15:09:49 +02:00
parent 1bc21ced4b
commit 4ff17da8c5
2 changed files with 123 additions and 46 deletions

View File

@ -1,38 +1,66 @@
.App { .container{
text-align: center; margin-left: 355px;
margin-right: 355px;
padding: 75px;
padding-top: 70px !important;
position: relative;
} }
.App-logo { .row {
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; display: flex;
flex-direction: column; justify-content: space-between;
align-items: center; gap: 10%;
justify-content: center; margin-bottom: 2vh;
font-size: calc(10px + 2vmin);
color: white;
} }
.App-link { .column {
color: #61dafb; flex: 1;
margin-right: 10px;
} }
@keyframes App-logo-spin { .column:last-child {
from { margin-right: 0;
transform: rotate(0deg); }
}
to { .col{
transform: rotate(360deg); height: 100% !important;
} }
input.no-margin{
margin: 0 !important;
}
input[type="text"] {
width: 100%;
height: 2vh;
padding: 10px;
margin-bottom: 10px;
border-radius: 17px;
border: none;
background-color: #F3F3F3;
color: black;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
width: 50%;
border-radius: 17px;
}
button:hover {
background-color: #0056b3;
}
textarea {
width: 100%;
height: 200px;
padding: 10px;
border-radius: 17px;
border: none;
background-color: #F3F3F3;
color: black;
} }

View File

@ -1,24 +1,73 @@
import logo from './logo.svg';
import './App.css'; import './App.css';
import { useState } from 'react';
function App() { function App() {
const [datasetQuarry, setDatasetQuarry] = useState('');
const [tableQuarry, setTableQuarry] = useState('');
const [columns, setColumns] = useState('');
const [results, setResults] = useState('');
const handleButtonClick = () => {
setResults('Tutaj możesz umieścić swoje wyniki.');
};
return ( return (
<div className="App"> <div className="container">
<header className="App-header"> <div className="row">
<img src={logo} className="App-logo" alt="logo" /> <div className="column">
<p> <input
Edit <code>src/App.js</code> and save to reload. type="text"
</p> placeholder="Dataset quarry"
<a value={datasetQuarry}
className="App-link" onChange={(e) => setDatasetQuarry(e.target.value)}
href="https://reactjs.org" />
target="_blank" <input
rel="noopener noreferrer" type="text"
> placeholder="Table quarry"
Learn React value={tableQuarry}
</a> onChange={(e) => setTableQuarry(e.target.value)}
</header> />
</div>
<div className="column">
<input
className="col"
type="text"
placeholder="Columns"
value={columns}
onChange={(e) => setColumns(e.target.value)}
/>
</div>
</div>
<div className="row">
<button type="button" onClick={handleButtonClick}>
Przycisk
</button>
</div>
<div className="row">
<textarea
placeholder="Resoults"
value={results}
onChange={(e) => setResults(e.target.value)}
></textarea>
</div>
</div> </div>
// <div className="container">
// <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>
// </div>
); );
} }