Skip to content

feat: Add Tern of Use page #178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
palchhinparihar merged 4 commits into from
Oct 28, 2025
Merged

feat: Add Tern of Use page #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
61348e0
feat: Add Tern of Use page
adityadomle Oct 28, 2025
5b085fb
some ui changes on term of use page
adityadomle Oct 28, 2025
74286a3
feat: added Privacy policy page
adityadomle Oct 28, 2025
08ea904
Merge branch 'main' into main
palchhinparihar Oct 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 69 additions & 100 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { HashRouter as Router, Routes, Route } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { importFile, exportFile } from "./utils";
import { allThemes } from "./data/themes";

import { useUndoRedo } from "./hooks/useUndoRedo";

// Components
Expand All @@ -14,6 +13,8 @@ import About from "./components/About";
import Welcome from "./components/Welcome";
import Footer from "./components/Footer";
import BackToTopButton from "./components/BackToTopButton";
import TermsOfUse from "./components/TermsOfUse";
import PrivacyPolicy from "./components/PrivacyPolicy";

function App() {
const { t } = useTranslation();
Expand All @@ -34,7 +35,7 @@ function App() {
redo,
canUndo,
canRedo,
reset: resetHistory
reset: resetHistory,
} = useUndoRedo("", 50);

const handleFileImport = (file) => {
Expand All @@ -50,7 +51,6 @@ function App() {
);
};

// Export handler
const handleExport = () => {
exportFile(text, "exported_text.txt");
showAlert(t("alerts.textExported"), "success");
Expand All @@ -61,33 +61,10 @@ function App() {
const theme = currentTheme.category === "light" ? "light" : "dark";

const showAlert = (message, type) => {
setAlert({
msg: message,
type: type,
});
setTimeout(() => {
setAlert(null);
}, 1500);
setAlert({ msg: message, type });
setTimeout(() => setAlert(null), 1500);
};

// const toggleTheme = () => {
// if (theme === "light") {
// // Switch to dark mode
// setTheme("dark");
// setColorTheme("linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)");
// } else {
// setTheme("light");
// setColorTheme("linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%)");
// }
// };

// const addColorTheme = (colorName, bgColor) => {
// if (theme === "dark") {
// setColorTheme(bgColor);
// showAlert(`${colorName} theme applied!`, "success");
// } else {
// showAlert("Enable Dark Mode to use color themes.", "warning");
// }
const handleThemeSelect = (themeId, gradient) => {
setCurrentThemeId(themeId);
setColorTheme(gradient);
Expand All @@ -100,82 +77,74 @@ function App() {
};

useEffect(() => {
const timer = setTimeout(() => {
setShowWelcome(false);
}, 2500);
const timer = setTimeout(() => setShowWelcome(false), 2500);
return () => clearTimeout(timer);
}, []);

return (
<Router>
{showWelcome ? (
<div
style={{
background: colorTheme,
}}
>
<Welcome theme={theme} />
</div>
) : (
// WRAP EVERYTHING IN A FLEX CONTAINER
<div
// key={currentThemeId}. to do not reset animations on theme change
className="min-h-screen flex flex-col"
style={{
background: colorTheme,
transition: "background 0.15s ease-in-out",
}}
>
<Navbar
title="WordWizard"
theme={theme}
currentThemeId={currentThemeId}
onThemeSelect={handleThemeSelect}
text={text}
onFileImport={handleFileImport}
onExport={handleExport}
/>

<Alert alert={alert} theme={theme} />

{/* ADD flex-1 TO MAIN CONTENT */}
<main className="flex-1">
<Routes>
<Route
path="/"
element={
<TextForm
heading="Enter Your Text to Analyse"
showAlert={showAlert}
theme={theme}
colorTheme={colorTheme}
text={text}
setText={addToHistory}
onFileImport={handleFileImport}
onExport={handleExport}
undo={undo}
redo={redo}
canUndo={canUndo}
canRedo={canRedo}
resetHistory={resetHistory}
/>
}
/>
<Route
path="/about"
element={<About showAlert={showAlert} theme={theme} />}
/>
</Routes>
</main>

{/* ADD FOOTER HERE */}
<Footer theme={theme} />

{/* Floating Back to Top Button */}
<BackToTopButton theme={theme} />
</div>
)}
</Router>
<Router>
{showWelcome ? (
<div style={{ background: colorTheme }}>
<Welcome theme={theme} />
</div>
) : (
<div
className="min-h-screen flex flex-col"
style={{
background: colorTheme,
transition: "background 0.15s ease-in-out",
}}
>
<Navbar
title="WordWizard"
theme={theme}
currentThemeId={currentThemeId}
onThemeSelect={handleThemeSelect}
text={text}
onFileImport={handleFileImport}
onExport={handleExport}
/>

<Alert alert={alert} theme={theme} />

{/* MAIN CONTENT */}
<main className="flex-1">
<Routes>
<Route
path="/"
element={
<TextForm
heading="Enter Your Text to Analyse"
showAlert={showAlert}
theme={theme}
colorTheme={colorTheme}
text={text}
setText={addToHistory}
onFileImport={handleFileImport}
onExport={handleExport}
undo={undo}
redo={redo}
canUndo={canUndo}
canRedo={canRedo}
resetHistory={resetHistory}
/>
}
/>
<Route
path="/about"
element={<About showAlert={showAlert} theme={theme} />}
/>
<Route path="/terms" element={<TermsOfUse />} />
{/* ✅ Added Privacy Policy Route inside Routes */}
<Route path="/privacy-policy" element={<PrivacyPolicy theme={theme} />} />
</Routes>
</main>

<Footer theme={theme} />
<BackToTopButton theme={theme} />
</div>
)}
</Router>
);
}

Expand Down
22 changes: 22 additions & 0 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,28 @@ const Footer = ({ theme }) => {
{t("footer.about")}
</a>
</li>
{/* ✅ Added Terms of Use link */}
<li>
<a
href="#/terms"
className={`transition-colors hover:underline ${
isDark ? "hover:text-blue-400" : "hover:text-blue-600"
}`}
>
Terms of Use

Copilot AI Oct 28, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The 'Terms of Use' link is hardcoded and not internationalized. Consider using the translation function t('footer.termsOfUse') to maintain consistency with other footer links and support multiple languages.

Suggested change
Terms of Use
{t("footer.termsOfUse")}

Copilot uses AI. Check for mistakes.
</a>
</li>
{/* ✅ Added Privacy Policy link */}
<li>
<a
href="#/privacy-policy"
className={`transition-colors hover:underline ${
isDark ? "hover:text-blue-400" : "hover:text-blue-600"
}`}
>
Privacy Policy
</a>
</li>
</ul>
</div>

Expand Down
Loading