fix: mobile, lang; add: wv, font
This commit is contained in:
dbanaszak1
parent
e3211f08ed
commit
9e2dae9bff
|
|
@ -1,10 +1,12 @@
|
|||
import Detector from "./components/Detector";
|
||||
import Nav from "./components/Nav";
|
||||
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<Nav/>
|
||||
|
||||
<Detector/>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import React, { ChangeEvent, useState } from 'react';
|
|||
const Detector = () => {
|
||||
const [file, setFile] = useState<File | undefined>();
|
||||
const [preview, setPreview] = useState<string>('https://mly5gz70zztl.i.optimole.com/cb:w3s1.35324/w:auto/h:auto/q:mauto/f:best/https://www.lifewithcatman.com/wp-content/uploads/2019/03/maine-coon-cat-photography-robert-sijka-64-57ad8f2c0277c__880.jpg');
|
||||
const [results, setResults] = useState<any[]>([]); // Array to store results
|
||||
const [results, setResults] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
|
|
@ -43,6 +43,7 @@ const Detector = () => {
|
|||
}
|
||||
} else {
|
||||
console.error('Brak pliku do wysłania.');
|
||||
alert('Choose a file before sending')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Błąd:', error);
|
||||
|
|
@ -52,9 +53,10 @@ const Detector = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-center flex-wrap">
|
||||
<div className="w-full">
|
||||
<div className="w-[420px] my-6 m-auto border-[1px] border-black p-4 rounded-2xl">
|
||||
<div className="w-5/6 sm:w-[420px] my-6 m-auto border-[1px] border-black p-4 rounded-2xl flex flex-wrap justify-center items-center">
|
||||
{preview && (
|
||||
<div className="flex justify-center ">
|
||||
<img className='rounded-full border-orange-500 border-2' src={preview} alt="Podgląd" style={{ maxWidth: '100%', maxHeight: '200px' }} />
|
||||
|
|
@ -62,7 +64,7 @@ const Detector = () => {
|
|||
)}
|
||||
<input className='' type="file" onChange={handleFileChange} />
|
||||
<button
|
||||
className='px-4 p-1 mx-2 border-[1px] text-orange-500 border-orange-500 rounded-lg shadow-lg hover:scale-125 hover:text-white hover:bg-orange-500 duration-500 font-bold mt-4'
|
||||
className='px-4 p-1 lg:mx-2 border-[1px] text-orange-500 border-orange-500 rounded-lg shadow-lg hover:scale-125 hover:text-white hover:bg-orange-500 duration-500 font-bold mt-4 sm:mt-0'
|
||||
onClick={handleSubmit}
|
||||
disabled={loading}
|
||||
>
|
||||
|
|
@ -70,19 +72,17 @@ const Detector = () => {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{loading && <div className='w-full text-center text-blue-200 uppercase font-semibold'> Wysyłanie pliku...</div>}
|
||||
{loading && <div className='w-full text-center text-blue-200 uppercase font-semibold'> Sending file...</div>}
|
||||
{results.length > 0 && (
|
||||
<div>
|
||||
<div>
|
||||
{results.map((result, index) => (
|
||||
<div className='border-[1px] border-gray-500 m-4 rounded-lg p-4' key={index}>
|
||||
<h3 className='text-center font-'>Wyniki kota {index + 1}:</h3>
|
||||
<h3 className='text-center font-DM text-orange-500 font-semibold'><span>{index + 1}. </span>CAT RESULT</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<thead className='font-DM'>
|
||||
<tr>
|
||||
<th>Zdjęcie</th>
|
||||
<th>Wyniki</th>
|
||||
<th>Image:</th>
|
||||
<th>Results:</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -93,7 +93,7 @@ const Detector = () => {
|
|||
</td>
|
||||
<td>
|
||||
<p>
|
||||
<span>Result:</span><span className='text-orange-500'> {result.results[filename].isCat ? 'Cat' : 'Not a cat'}</span>
|
||||
<span>Result:</span><span className='text-orange-500 font-DM'> {result.results[filename].isCat ? 'This is a cat' : 'Not a cat'}</span>
|
||||
</p>
|
||||
<ul>
|
||||
{result.results[filename].predictions &&
|
||||
|
|
@ -114,6 +114,7 @@ const Detector = () => {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
|
||||
const Nav = () => {
|
||||
return (
|
||||
<div className='w-full h-32 px-20 shadow-2xl flex items-center justify-center'>
|
||||
<div className='w-full h-32 px-8 md:px-20 shadow-2xl flex items-center justify-center'>
|
||||
<img className="h-32 w-32 p-4" src="https://github.com/UniSzef/test/blob/main/logo.png?raw=true"></img>
|
||||
<div className="text-4xl font">Be sure that your <span className="text-orange-400">cat</span> is real!</div>
|
||||
<div className="md:text-4xl text-2xl font-DM font-bold">Be sure that your <span className="text-orange-400">cat</span> is real!</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import React from 'react'
|
||||
|
||||
const Waves = () => {
|
||||
return (
|
||||
<>
|
||||
<svg className="absolute -z-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||
<path fill="#edb593" fill-opacity="1" d="M0,288L48,250.7C96,213,192,139,288,117.3C384,96,480,128,576,149.3C672,171,768,181,864,165.3C960,149,1056,107,1152,112C1248,117,1344,171,1392,197.3L1440,224L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
|
||||
</svg>
|
||||
<svg className="absolute -z-10 translate-y-[500px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||
<path fill="#edb593" fill-opacity="1" d="M0,192L40,202.7C80,213,160,235,240,229.3C320,224,400,192,480,160C560,128,640,96,720,101.3C800,107,880,149,960,186.7C1040,224,1120,256,1200,261.3C1280,267,1360,245,1400,234.7L1440,224L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
|
||||
</svg>
|
||||
<div className="h-[400px] w-full -z-10 absolute bg-waves translate-y-[800px]"></div>
|
||||
<svg className="absolute -z-10 translate-y-[1200px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||
<path fill="#edb593" fill-opacity="1" d="M0,288L26.7,261.3C53.3,235,107,181,160,181.3C213.3,181,267,235,320,240C373.3,245,427,203,480,170.7C533.3,139,587,117,640,117.3C693.3,117,747,139,800,154.7C853.3,171,907,181,960,202.7C1013.3,224,1067,256,1120,256C1173.3,256,1227,224,1280,224C1333.3,224,1387,256,1413,272L1440,288L1440,0L1413.3,0C1386.7,0,1333,0,1280,0C1226.7,0,1173,0,1120,0C1066.7,0,1013,0,960,0C906.7,0,853,0,800,0C746.7,0,693,0,640,0C586.7,0,533,0,480,0C426.7,0,373,0,320,0C266.7,0,213,0,160,0C106.7,0,53,0,27,0L0,0Z"></path>
|
||||
</svg>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Waves
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -5,7 +5,14 @@ export default {
|
|||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
DM: ['DM Serif Display']
|
||||
},
|
||||
colors: {
|
||||
waves: '#edb593',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue