diff --git a/web/src/App.jsx b/web/src/App.jsx index ffcdd38..1386fe0 100644 --- a/web/src/App.jsx +++ b/web/src/App.jsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { useDnsImgStore } from './dnsImgStore'; function App() { - const { domain, setDomain, fetchChunks, imageBase64, chunksDone, chunkCount } = useDnsImgStore(); + const { domain, setDomain, fetchChunks, imageBase64, chunksDone, chunkCount, loading, error } = useDnsImgStore(); const [input, setInput] = React.useState(''); const handleInputChange = (e) => { @@ -16,15 +16,38 @@ function App() { return ( -
- DnsImg -
- - +
+ dnsimg +
+ +
+ {error && ( +
+ Error: {error} +
+ )}
{imageBase64 && DnsImg} - Chunks done: {chunksDone} / {chunkCount} + {loading && ( +
+
+ Chunks done: {chunksDone} / {chunkCount} +
+
+ {Array.from({length: chunkCount}).map((_, i) => ( +
+ ))} +
+
+ )} + + + +
) diff --git a/web/src/index.css b/web/src/index.css index f1d8c73..1025fd9 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -1 +1,7 @@ +@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); @import "tailwindcss"; +@theme { + --color-primary: #000000; + --color-secondary: #ffffff; + --font-rubik: "Rubik", sans-serif; +} \ No newline at end of file diff --git a/web/src/main.jsx b/web/src/main.jsx index f22445c..f82943a 100644 --- a/web/src/main.jsx +++ b/web/src/main.jsx @@ -7,7 +7,11 @@ import './index.css' import App from './App.jsx' createRoot(document.getElementById('root')).render( + + + dnsimg + , )