From 2ea294301b6a45c3c006dd06340dc6f50ad41275 Mon Sep 17 00:00:00 2001 From: Ritika Jain Date: Wed, 10 Jul 2024 17:56:15 +0530 Subject: [PATCH] V1 testing 17:56 --- frontend/src/App.jsx | 15 +- frontend/src/maincontent.css | 209 ++++++++++++++++++---- frontend/src/maincontent.jsx | 103 ++++++----- frontend/src/notes.css | 331 ++++++++++++++++------------------- frontend/src/notes.jsx | 232 ++++++++++++------------ 5 files changed, 516 insertions(+), 374 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index db2c496..b01273b 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,17 +1,20 @@ -import React from 'react' +import React from 'react'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import Maincontent from './maincontent'; import Loginpage from './loginpage'; import Notes from './notes'; + function App() { - return ( + const userId = '668d898621c28604796ba8eb'; // Replace with actual logic to get user ID + + return ( - } /> - } /> + } /> + } /> - ) + ); } -export default App \ No newline at end of file +export default App; diff --git a/frontend/src/maincontent.css b/frontend/src/maincontent.css index 5d164d1..a736310 100644 --- a/frontend/src/maincontent.css +++ b/frontend/src/maincontent.css @@ -12,15 +12,6 @@ }*/ .app-container.theme-1 { - --textcolourmain:#2c3844; - --platformcontainer:#f0f7ff; - --background-color:#ffffff; - --border:#b8cce0; - --input:#f3fbfc ; - --textnotmain:#6ca6db; -} - -.app-container.theme-3 { --textcolourmain:#322d20; --platformcontainer:#e6d5bc; --background-color:whitesmoke; @@ -28,13 +19,13 @@ --input:#ece3d4; --textnotmain:#7f6e53; } -.app-container.theme-4 { +.app-container.theme-2 { --textcolourmain:#455a64; --platformcontainer:#B9C8BC; - --background-color:#A7A88A; - --border:#455a64; + --background-color:whitesmoke; + --border:#687f89b9; --input:#B9C8BC; - --textnotmain:#708080; + --textnotmain:#505b5b; } /* Define other light theme variables */ @@ -51,11 +42,8 @@ flex-wrap: wrap; justify-content:space-around; min-height: 100vh; - } - .app-container { - display: flex; - min-height: 100vh; - background-color:var(--background-color); + background-color: var(--background-color); + overflow: hidden; } .sidebar { @@ -74,6 +62,7 @@ .user-icon { margin-top: 5px; + fill:var(--textcolourmain); } .user-title { @@ -116,13 +105,15 @@ flex: 1; flex-wrap: wrap; padding: 20px; + overflow: hidden; } .main-header { display: flex; align-items: center; justify-content: space-between; - margin-bottom: 20px; + padding-bottom: 40px; + } .main-title { font-size: 24px; @@ -136,7 +127,10 @@ width: 400px; } - + .header-actions .user-icon + { + margin: 0; + } .search-input { height: 40px; padding: 0 10px; @@ -155,7 +149,6 @@ height: 24px; margin-right: 10px; color:var(--textcolourmain); - height:30px; } .header-icon i { @@ -165,6 +158,7 @@ .notes-grid { display: flex; gap: 20px; + overflow:hidden; } .notes-column { @@ -172,19 +166,47 @@ display: flex; flex-direction: column; gap: 20px; + overflow-y: auto; /* Enable vertical scrolling */ + max-height: 100vh; /* Limit height to viewport height */ + scrollbar-width: none; /* Hide scrollbar in Firefox */ + -ms-overflow-style: none; /* Hide scrollbar in Internet Explorer and Edge */ + } + + /* Hide scrollbar for Chrome, Safari, and Opera */ + .notes-column::-webkit-scrollbar { + display: none; } + .card { border: 1px solid var(--border); border-radius: 5px; - padding-left:18px; - background-color:var(--input); + width: auto; + height: 130px; /* Initial height */ + background-color: var(--input); + transition: height 0.3s ease; + overflow-y: auto; + scrollbar-width: none; + -ms-overflow-style: none; + + + } + .card::-webkit-scrollbar { + display: none; + } + + .card:hover { + height: auto; /* Adjust height on hover */ } .card-header { padding: 20px; - border-bottom: 1px solid var(--border); - + overflow: hidden; /* Ensures overflow content does not show outside */ + } + + .card-header:hover { + height: auto; + /* Allow header to expand on hover */ } .card-title { @@ -194,20 +216,20 @@ } .card-description { - font-size: 14px; - font-weight: bolder; font-size: 16px; - - color:var(--textnotmain); + font-weight: bolder; + color: var(--textnotmain); } .card-footer { padding: 20px; + height: 50px; /* Fixed height for the footer */ + background-color: var(--input); /* Ensure background color matches card */ } .card-footer-item { font-size: 16px; - color:var(--textnotmain); + color: var(--textnotmain); } @@ -216,6 +238,8 @@ border-radius: 5px; background-color: var(--background-color); height: 600px; + margin: 0; + overflow: hidden; } .content-header { @@ -332,7 +356,7 @@ margin-right: 30px; width: 250px; } - + .music-buttons { display: flex; @@ -406,4 +430,125 @@ .login-overlay .close-login:hover { background: var(--textnotmain); } - \ No newline at end of file + +@media (max-width: 599px) { + .app-container { + flex-direction: column; + padding: 10px; + } + + .sidebar { + width: 100%; + border-right: none; + border-bottom: 2px solid var(--border); + padding: 15px; + } + + .main-content { + padding: 10px; + } + + .notes-column { + max-height: 50vh; + } + + .header-actions { + width: 100%; + justify-content: space-between; + } +} + + +@media (min-width: 600px) and (max-width: 767px) { + .sidebar { + width: 150px; + padding: 20px; + } + + .header-actions { + width: 300px; + } + + .notes-column { + max-height: 60vh; + } + + #textarea { + width: 100%; + margin: 20px; + } + + .prompt { + width: 100%; + } +} + + +@media (min-width: 768px) and (max-width: 991px) { + .sidebar { + width: 180px; + padding: 20px; + } + + .header-actions { + width: 350px; + } + + .notes-column { + max-height: 70vh; + } + + #textarea { + width: 90%; + } + + .prompt { + width: 90%; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .sidebar { + width: 200px; + padding: 25px; + } + + .header-actions { + width: 400px; + } + + .notes-column { + max-height: 80vh; + } + + #textarea { + width: 90%; + } + + .prompt { + width: 90%; + } +} + +@media (min-width: 1200px) { + .sidebar { + width: 220px; + padding: 25px; + } + + .header-actions { + width: 450px; + } + + .notes-column { + max-height: 90vh; + } + + #textarea { + width: 90%; + } + + .prompt { + width: 90%; + } +} diff --git a/frontend/src/maincontent.jsx b/frontend/src/maincontent.jsx index 8a6f67d..968c4fb 100644 --- a/frontend/src/maincontent.jsx +++ b/frontend/src/maincontent.jsx @@ -22,8 +22,8 @@ const Maincontent = () => { Medium: "", LinkedIn: "", }); - const themes = ["theme-1", "theme-2", "theme-3", "theme-4"]; - const [currentTheme, setCurrentTheme] = useState(themes[0]); + const themes = ["theme-1", "theme-2"]; + const [currentTheme, setCurrentTheme] = useState(themes[1]); const [themeIndex, setThemeIndex] = useState(0); const platforms = ["Twitter", "Instagram", "Medium", "LinkedIn"]; const [musicPlaying, setMusicPlaying] = useState({ @@ -345,16 +345,14 @@ const Maincontent = () => {
- {platforms.map((platform) => ( -
-
-
-

{platform}

-
-

- {convertMarkdownToPlainText(adaptedResponse[platform]) || - "Here goes your content..."} -

-
-
-

2 items

-

San Francisco, CA

-
-
- ))} + {platforms.map((platform) => ( +
+
+
+

{platform}

+
+

+ {convertMarkdownToPlainText(adaptedResponse[platform]) || "Here goes your content..."} +

+ {/* Conditionally render the footer based on description content */} + {!adaptedResponse[platform] && ( // Check if description is empty or falsy +
+

Please wait...

+

Adapting content may take some time.

+
+ )}
+ ))} +
+ ); diff --git a/frontend/src/notes.css b/frontend/src/notes.css index 3e89b1c..2f58833 100644 --- a/frontend/src/notes.css +++ b/frontend/src/notes.css @@ -1,176 +1,155 @@ -.app-container.theme-1 { - --textcolourmain:#2c3844; - --platformcontainer:#f0f7ff; - --background-color:#ffffff; - --border:#b8cce0; - --input:#f3fbfc ; - --textnotmain:#6ca6db; -} - -.app-container.theme-3 { - --textcolourmain:#322d20; - --platformcontainer:#e6d5bc; - --background-color:whitesmoke; - --border:#dbc4a2; - --input:#ece3d4; - --textnotmain:#7f6e53; -} -.app-container.theme-4 { - --textcolourmain:#455a64; - --platformcontainer:#B9C8BC; - --background-color:#A7A88A; - --border:#455a64; - --input:#B9C8BC; - --textnotmain:#708080; -} - - .note-app-content - { - display: flex; - } - - - .note-container { - display: flex; - flex-direction: column; - height: 100vh; - width: 100vw; - } - - .note-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem 1.5rem; - border-bottom: 1px solid var(--border); - background-color: #fff; - } - - .note-header-title { - font-size: 1.5rem; - font-weight: bold; - } - - .note-header-actions { - display: flex; - gap: 1rem; - align-items: center; - } - - .note-search-container { - position: relative; - } - - .note-search-icon { - position: absolute; - left: 0.75rem; - top: 50%; - transform: translateY(-50%); - color: #6b7280; - } - - .note-search-input { - padding-left: 2.5rem; - padding-right: 1rem; - height: 2.5rem; - border: 1px solid #d1d5db; - border-radius: 0.375rem; - font-size: 0.875rem; - background-color: #f3f4f6; - color: #111827; - } - .new-note-button { - display: inline-flex; - align-items: center; - padding: 0.5rem 1rem; - font-size: 0.875rem; - font-weight: medium; - background-color: #3b82f6; - color: #fff; - border: none; - border-radius: 0.375rem; - cursor: pointer; - } - - .new-note-icon { - margin-right: 0.5rem; - color: #fff; - } - - .note-grid { - padding: 1.5rem; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - gap: 1.5rem; - overflow-y: auto; - } - - .note-card { - background-color: #fff; - color: #111827; - border: 1px solid #e2e8f0; - border-radius: 0.375rem; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); - transition: box-shadow 0.2s ease; - } - - .note-card:hover { - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - } - - .note-header { - padding: 1.5rem; - } - - .note-title { - font-size: 1.25rem; - font-weight: 600; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .note-body { - padding: 1.5rem; - } - - .note-content { - font-size: 0.875rem; - color: #6b7280; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; - } - - .note-actions { - display: flex; - justify-content: flex-end; - gap: 0.5rem; - padding: 1.5rem; - } - - .edit-button, .delete-button { - display: inline-flex; - align-items: center; - justify-content: center; - width: 2.5rem; - height: 2.5rem; - font-size: 0.875rem; - background: none; - border: none; - border-radius: 0.375rem; - cursor: pointer; - color: #6b7280; - } - - .edit-button:hover, .delete-button:hover { - color: #fbbf24; - background-color: #f3f4f6;} - - .edit-icon, .delete-icon { - width: 1.25rem; - height: 1.25rem; - } - \ No newline at end of file +/* styles.css */ +:root { + --background: #f8f9fa; + --foreground: #333; + --primary: #007bff; + --primary-foreground: #fff; + --input: #ced4da; + --ring: #80bdff; + --muted: #f1f3f5; + --muted-foreground: #6c757d; + --card: #fff; + --card-foreground: #495057; +} + +* { + margin: 0; + font-family: Arial, sans-serif; + background-color: var(--background); + color: var(--foreground); +} +.note-complete-container +{ + display: flex; +} +.sidebar +{ + width:1500px; +} +.note-container { + display: flex; + flex-direction: column; + height: 100vh; +} + +.note-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + border-bottom: 1px solid var(--input); +} + +.note-header-title { + font-size: 24px; + font-weight: bold; +} + +.note-search-container { + position: relative; + flex: 1; + max-width: 400px; +} + +.note-search-input { + width: 100%; + height: 40px; + padding: 8px 32px 8px 8px; + border: 1px solid var(--input); + border-radius: 4px; + background-color: var(--muted); + font-size: 14px; + color: var(--foreground); + transition: border-color 0.2s, box-shadow 0.2s; +} + +.note-search-input:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 2px var(--ring); +} + +.note-search-icon { + position: absolute; + top: 50%; + left: 8px; + transform: translateY(-50%); + color: var(--muted-foreground); +} + +.new-note-button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + font-size: 14px; + font-weight: medium; + color: var(--primary-foreground); + background-color: var(--primary); + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.2s; +} + +.new-note-button:hover { + background-color: var(--primary); +} + +.note-button-icon { + margin-right: 8px; +} + +.note-main-content { + flex: 1; + overflow-y: auto; + padding: 16px; +} + +.note-grid { + display: grid; + gap: 30px; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} + +.note-card { + background-color: var(--card); + color: var(--card-foreground); + border: 1px solid var(--input); + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + justify-content: space-between; + width: auto; + height: 300px; + overflow: hidden; +} +.note-card:hover +{ + height:auto; +} +.note-content { + padding: 16px; +} + +.note-title { + font-size: 24px; + font-weight: bold; + margin-bottom: 8px; +} + +.note-description { + font-size: 14px; + color: var(--muted-foreground); +} + +.note-footer { + padding: 16px; + border-top: 1px solid var(--input); +} + +.note-date { + font-size: 12px; + color: var(--muted-foreground); +} diff --git a/frontend/src/notes.jsx b/frontend/src/notes.jsx index 21edc74..3391cb2 100644 --- a/frontend/src/notes.jsx +++ b/frontend/src/notes.jsx @@ -1,20 +1,47 @@ -import React, { useState } from 'react'; -import { Link } from 'react-router-dom'; -import './notes.css'; +import React, { useEffect, useState } from "react"; +import axios from "axios"; +import "./notes.css"; -function Notes() { - const [showNewNote, setShowNewNote] = useState(false); +const Notes = ({ userId }) => { + const [notes, setNotes] = useState([]); + const [error, setError] = useState(null); - const handleNewNoteClick = () => { - setShowNewNote(true); - }; + useEffect(() => { + const fetchNotes = async () => { + console.log("Fetching notes for user:", userId); // Debugging statement + try { + const response = await axios.get( + `http://localhost:4000/WORA/getContent/${userId}` + ); + + console.log("API response:", response.data); // Debugging statement + + if (response.data.success) { + console.log("Notes fetched successfully:", response.data.notes); // Debugging statement + setNotes(response.data.notes); + } else { + console.error("Error fetching notes:", response.data.error); // Debugging statement + setError(response.data.error); + } + } catch (err) { + console.error("Error in API call:", err.message); // Debugging statement + setError(err.message); + } + }; + + fetchNotes(); + }, [userId]); return ( -
-