asher/image_over_dns
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mostly finished web viewer

Browse Source
This commit is contained in:
Asher 2025-06-15 10:55:44 +01:00
parent 66d1f0389a
commit 171a320d48
3 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/App.jsx
View File

@ -2,7 +2,7 @@ import * as React from 'react';
import { useDnsImgStore } from './dnsImgStore'; import { useDnsImgStore } from './dnsImgStore';
function App() { 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 [input, setInput] = React.useState('');
const handleInputChange = (e) => { const handleInputChange = (e) => {
@ -16,15 +16,38 @@ function App() {
return ( return (
<div className="bg-gray-400"> <div className="bg-primary h-screen flex flex-col items-center justify-center text-secondary font-rubik">
<span className="text-2xl text-[#ffffff]">DnsImg</span> <span className="text-2xl text-[#ffffff] font-bold font-rubik">dnsimg</span>
<div className="flex flex-col items-center justify-center"> <div className="flex flex-row gap-2 items-center justify-center mb-4 mt-4">
<input type="text" placeholder="Enter a domain" value={input} onChange={handleInputChange} className="text-black" /> <input className="border-2 border-secondary rounded-md p-2" type="text" placeholder="Enter a domain" value={input} onChange={handleInputChange} />
<button onClick={handleFetch}>Fetch</button> <button className="border-2 border-secondary rounded-md p-2 bg-secondary text-primary cursor-pointer" onClick={handleFetch}>Fetch</button>
</div> </div>
{error && (
<div className="flex flex-row gap-2 items-center justify-center mb-4 mt-4">
<span className="text-md text-red-500 font-bold font-rubik">Error: {error}</span>
</div>
)}
<div className="flex flex-col items-center justify-center"> <div className="flex flex-col items-center justify-center">
{imageBase64 && <img src={`data:image/png;base64,${imageBase64}`} alt="DnsImg" />} {imageBase64 && <img src={`data:image/png;base64,${imageBase64}`} alt="DnsImg" />}
{loading && (
<div>
<div className="flex flex-col items-center justify-center">
<span>Chunks done: {chunksDone} / {chunkCount}</span> <span>Chunks done: {chunksDone} / {chunkCount}</span>
</div>
<div className="flex gap-1 mt-2">
{Array.from({length: chunkCount}).map((_, i) => (
<div
key={i}
className={`w-2 h-8 rounded ${i < chunksDone ? 'bg-green-500' : 'bg-red-500'}`}
/>
))}
</div>
</div>
)}
</div> </div>
</div> </div>
) )

6
web/src/index.css
View File

@ -1 +1,7 @@
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import "tailwindcss"; @import "tailwindcss";
@theme {
--color-primary: #000000;
--color-secondary: #ffffff;
--font-rubik: "Rubik", sans-serif;
}

4
web/src/main.jsx
View File

@ -7,7 +7,11 @@ import './index.css'
import App from './App.jsx' import App from './App.jsx'
createRoot(document.getElementById('root')).render( createRoot(document.getElementById('root')).render(
<StrictMode> <StrictMode>
<head>
<title>dnsimg</title>
</head>
<App /> <App />
</StrictMode>, </StrictMode>,
) )