diff --git a/ao3 webpages/package-lock.json b/ao3 webpages/package-lock.json index c44a0d3..2d71e9a 100644 --- a/ao3 webpages/package-lock.json +++ b/ao3 webpages/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@headlessui/react": "^2.1.2", "axios": "^1.7.4", + "lucide-react": "^0.437.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.3.0", @@ -4027,6 +4028,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.437.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.437.0.tgz", + "integrity": "sha512-RXQq6tnm1FlXDUtOwLaoXET2TOEGpQULrQlPOjGHgIVsPhicHNat9sWF33OAe2UCLMFiWF1oL+FtAg43BqVY4Q==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" + } + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", diff --git a/ao3 webpages/package.json b/ao3 webpages/package.json index 2dd47a5..4fbad91 100644 --- a/ao3 webpages/package.json +++ b/ao3 webpages/package.json @@ -12,6 +12,7 @@ "dependencies": { "@headlessui/react": "^2.1.2", "axios": "^1.7.4", + "lucide-react": "^0.437.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.3.0", diff --git a/ao3 webpages/src/App.jsx b/ao3 webpages/src/App.jsx index 4b379a4..c514c49 100644 --- a/ao3 webpages/src/App.jsx +++ b/ao3 webpages/src/App.jsx @@ -8,7 +8,7 @@ import Component from './pages/notes'; import Bookmarks from './pages/bookmarks'; import History from './pages/history'; import Protect from './utils/Protected'; - +import SettingsPage from './pages/settings'; function App() { return ( @@ -20,6 +20,7 @@ function App() { } /> } /> } /> + } /> {/* Add other routes here */} Hello World} /> diff --git a/ao3 webpages/src/pages/settings.jsx b/ao3 webpages/src/pages/settings.jsx new file mode 100644 index 0000000..4b18a5a --- /dev/null +++ b/ao3 webpages/src/pages/settings.jsx @@ -0,0 +1,217 @@ +import React, { useState } from 'react'; +import { Edit2, Heart } from 'lucide-react'; + +const SettingsPage = () => { + const [username, setUsername] = useState('rounakag'); + const [email, setEmail] = useState('rounak2860@gmail.com'); + const [appearance, setAppearance] = useState('light'); + const [isFlipping, setIsFlipping] = useState(false); + + const styles = { + body: { + backgroundColor: '#f8f8f8', + margin: 0, + padding: 0, + minHeight: '100vh', + }, + container: { + maxWidth: '1200px', + margin: '0 auto', + padding: '40px 20px', + fontFamily: 'Arial, sans-serif', + }, + header: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: '30px', + }, + title: { + fontSize: '28px', + fontWeight: 'bold', + margin: 0, + }, + madeWith: { + fontSize: '14px', + color: '#666', + whiteSpace: 'nowrap', + }, + heart: { + color: '#0066cc', + verticalAlign: 'middle', + }, + section: { + backgroundColor: '#ffffff', + borderRadius: '8px', + padding: '30px', + marginBottom: '20px', + boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)', + }, + sectionTitle: { + fontSize: '20px', + color: '#0066cc', + marginBottom: '20px', + fontWeight: 'bold', + }, + inputContainer: { + marginBottom: '20px', + position: 'relative', + maxWidth: '300px', + }, + label: { + display: 'block', + marginBottom: '8px', + color: '#666', + fontSize: '14px', + }, + input: { + width: '100%', + padding: '10px', + paddingRight: '30px', + border: '1px solid #e0e0e0', + borderRadius: '4px', + fontSize: '14px', + transition: 'all 0.3s ease', + }, + inputHover: { + transform: 'translateY(-2px)', + boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)', + }, + editIcon: { + position: 'absolute', + right: '10px', + top: '38px', + color: '#666', + cursor: 'pointer', + }, + profileContainer: { + display: 'flex', + alignItems: 'flex-start', + justifyContent: 'space-between', + }, + profileInputs: { + flex: 1, + marginRight: '40px', + }, + profilePicture: { + width: '100px', + height: '100px', + borderRadius: '50%', + backgroundColor: '#e0e0e0', + transition: 'transform 1.5s ease', + transform: isFlipping ? 'perspective(400px) rotateY(360deg)' : 'perspective(400px) rotateY(0deg)', + }, + toggleContainer: { + display: 'flex', + alignItems: 'center', + backgroundColor: '#f0f0f0', + borderRadius: '20px', + padding: '4px', + width: 'fit-content', + }, + toggleButton: { + padding: '6px 16px', + borderRadius: '16px', + border: 'none', + cursor: 'pointer', + transition: 'all 0.3s ease', + fontSize: '14px', + fontWeight: 'bold', + }, + activeToggle: { + backgroundColor: '#0066cc', + color: 'white', + }, + inactiveToggle: { + backgroundColor: 'transparent', + color: '#666', + }, + toggleButtonHover: { + transform: 'scale(1.05)', + }, + }; + + const handleProfilePictureHover = () => { + setIsFlipping(true); + setTimeout(() => setIsFlipping(false), 1500); + }; + + return ( +
+
+
+

Settings

+ + Made with by GDSC - VIT + +
+

Profile

+
+ +
+
+
+ + setUsername(e.target.value)} + style={styles.input} + onMouseEnter={(e) => Object.assign(e.target.style, styles.inputHover)} + onMouseLeave={(e) => Object.assign(e.target.style, styles.input)} + /> + +
+
+ + setEmail(e.target.value)} + style={styles.input} + onMouseEnter={(e) => Object.assign(e.target.style, styles.inputHover)} + onMouseLeave={(e) => Object.assign(e.target.style, styles.input)} + /> + +
+
+
+
+
+

Appearance

+
+ +
+ + +
+
+
+
+ ); +}; + +export default SettingsPage; \ No newline at end of file