diff --git a/README.md b/README.md index 9977a04..429eb05 100644 --- a/README.md +++ b/README.md @@ -47,6 +47,7 @@ Datacenter Modeler is a React-based web application for designing datacenter rac - Export a PDF report with the diagram and rack inventory - Dark/light theme selector - Material UI-based interface +- Welcome dialog with an optional Cash App donation link ## Component Library @@ -170,3 +171,4 @@ Each rack/cabinet contains its own metadata and an array of installed equipment. - JSON export is the portable save format for moving diagrams between browsers or computers. - PDF and image exports are generated from the rendered workspace. - The current implementation is client-side only; no backend server or database is required. +- Donations are optional and use the Cash App link for `$MatthewPuckett`. diff --git a/src/App.tsx b/src/App.tsx index 937b939..d77016a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -42,6 +42,7 @@ import { Image, Inventory2, LightMode, + OpenInNew, PictureAsPdf, Power, Router, @@ -50,6 +51,7 @@ import { SettingsInputComponent, Storage, Terminal, + VolunteerActivism, ViewColumn, } from '@mui/icons-material'; import html2canvas from 'html2canvas'; @@ -147,6 +149,8 @@ export default function App() { const [exportAnchor, setExportAnchor] = useState(null); const [pendingContainer, setPendingContainer] = useState<'rack' | 'cabinet' | null>(null); const [pendingSize, setPendingSize] = useState(42); + const [welcomeOpen, setWelcomeOpen] = useState(true); + const [donationAmount, setDonationAmount] = useState(5); const [notice, setNotice] = useState(''); const workspaceRef = useRef(null); const fileInputRef = useRef(null); @@ -444,6 +448,11 @@ export default function App() { } }; + const openDonation = () => { + const amount = clampNumber(donationAmount, 1, 500, 5); + window.open(`https://cash.app/$MatthewPuckett/${amount}`, '_blank', 'noopener,noreferrer'); + }; + const captureWorkspace = async () => { if (!workspaceRef.current) { throw new Error('Workspace is not ready.'); @@ -683,6 +692,64 @@ export default function App() { + setWelcomeOpen(false)} maxWidth="sm" fullWidth> + + + Welcome to Datacenter Modeler + + + + + Build rack and cabinet diagrams by dragging components onto the workspace, snapping equipment into rack units, + editing metadata in the properties panel, and exporting your layout as JSON, images, or a PDF report. + + + + + + + + + Support the project + + + + This application was made by a homebrew developer. A donation is appreciated if this tool helps you, + but it is absolutely not required. + + + + {[5, 10, 20, 50].map((amount) => ( + + ))} + + setDonationAmount(clampNumber(event.target.value, 1, 500, donationAmount))} + fullWidth + /> + + + + + + + + + + setNotice('')} />