fix: mobile, lang; add: wv, font

This commit is contained in:
dbanaszak1 2024-01-21 23:49:36 +01:00
parent e3211f08ed
commit 9e2dae9bff
6 changed files with 47 additions and 15 deletions

View File

@ -1,10 +1,12 @@
import Detector from "./components/Detector";
import Nav from "./components/Nav";
export default function App() {
return (
<>
<Nav/>
<Detector/>
</>
)

View File

@ -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>
{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>
</>
);
};

View File

@ -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>
)
}

View File

@ -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

View File

@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

View File

@ -5,7 +5,14 @@ export default {
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
extend: {
fontFamily: {
DM: ['DM Serif Display']
},
colors: {
waves: '#edb593',
},
},
},
plugins: [],
}