Skip to content
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

Jump to bottom

Dark mode added Now user can switch between dark and light mode #7

Merged
merged 1 commit into from
Oct 17, 2023
Merged

Dark mode added Now user can switch between dark and light mode #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 3 additions & 2 deletions client/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style type="text/css">
#landscape{
position: fixed;
Expand Down Expand Up @@ -50,9 +51,9 @@

</script>
</head>
<body onload="doOnOrientationChange();">
<body className="dark" onload="doOnOrientationChange();">
<div id="landscape"><div>"Rotate Device to Landscape"</div></div>
<div id="root"></div>
<div id="root" className="dark"></div>
<div class="modal-container"></div>
</body>
</html>
38 changes: 20 additions & 18 deletions client/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,29 @@ import HomePage from './pages/homePage';
import TextSummarizerPage from './pages/textSummarizerPage';
import FlipkartScraperPage from './pages/flipkartScraperPage';
import VideoDownloaderPage from './pages/videoDownloaderPage';
import './index.css'

function App() {
return (
<div className="container mx-auto mt-4">
{/* Sidebar */}
<Sidebar />

{/* Content */}
<div className="mx-2"> {/* Adjust the margin-left to match your Sidebar width */}
<Route path="/">
<HomePage />
</Route>
<Route path="/text-summarizer">
<TextSummarizerPage />
</Route>
<Route path="/flipkart-scraper">
<FlipkartScraperPage />
</Route>
<Route path="/video-downloader">
<VideoDownloaderPage />
</Route>
<div className='dark:bg-gray-800 pt-4'>
<div className="container mx-auto mt-4">
{/* Sidebar */}
<Sidebar />
{/* Content */}
<div className="mx-2"> {/* Adjust the margin-left to match your Sidebar width */}
<Route path="/">
<HomePage />
</Route>
<Route path="/text-summarizer">
<TextSummarizerPage />
</Route>
<Route path="/flipkart-scraper">
<FlipkartScraperPage />
</Route>
<Route path="/video-downloader">
<VideoDownloaderPage />
</Route>
</div>
</div>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions client/src/components/Dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,13 @@ function Dropdown({ options, value, onChange }) {
return (
<div ref={divEl} className="w-48 relative">
<Panel
className="flex justify-between items-center cursor-pointer"
className="flex justify-between items-center cursor-pointer text-gray-800 dark:bg-gray-800 dark:text-gray-200"
onClick={handleClick}
>
{value?.label || 'Select...'}
<GoChevronDown className="text-lg" />
</Panel>
{isOpen && <Panel className="absolute top-full z-10">{renderedOptions}</Panel>}
{isOpen && <Panel className="absolute top-full z-10 text-gray-800 dark:bg-gray-800 dark:text-gray-200">{renderedOptions}</Panel>}
</div>
);
}
Expand Down
4 changes: 2 additions & 2 deletions client/src/components/RadioButtonGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import Panel from './Panel';
function RadioButtonGroup(props) {
return (
<div className='flex space-x-4'>
<Panel className='w-32'>
<Panel className='w-32 text-gray-800 dark:bg-gray-800 dark:text-gray-200'>
<label>
<input type="radio" value="URL" checked={props.selectedOption === 'URL'} onChange={props.handleChange} />
&emsp; URL
</label>
</Panel>
<Panel className='w-32'>
<Panel className='w-32 text-gray-800 dark:bg-gray-800 dark:text-gray-200'>
<label>
<input type="radio" value="text" checked={props.selectedOption === 'text'} onChange={props.handleChange} />
&emsp; Text
Expand Down
33 changes: 29 additions & 4 deletions client/src/components/Sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,31 @@
import Link from './Link';
import { useState, useEffect } from 'react';


function Navbar() {
const [theme, setTheme] = useState("light");

useEffect(() => {
if (theme === "dark") {
document.documentElement.classList.add("dark");
//setTheme("dark");
}
else {
document.documentElement.classList.remove("dark");
//setTheme("light");
}
}, [theme])
console.log(theme);

const handleThemeSwitch = () => {
setTheme(theme === "dark" ? "light" : "dark")
};

const links = [
{ label: 'Home', path: '/' },
{ label: 'Summarizer', path: '/text-summarizer' },
{ label: 'Flipkart Scraper', path: '/flipkart-scraper'},
{ label: 'Video Downloader', path: '/video-downloader'},
{ label: 'Flipkart Scraper', path: '/flipkart-scraper' },
{ label: 'Video Downloader', path: '/video-downloader' },
];

const renderedLinks = links.map((link) => {
Expand All @@ -22,13 +42,18 @@ function Navbar() {
});

return (
<nav className="bg-white shadow-lg p-4">
<nav className="bg-white shadow-lg p-4 text-gray-800 dark:bg-gray-800 dark:text-gray-200">
<div className="container mx-auto flex justify-between items-center">
<div className="text-[30px] font-semibold ">
<span class="magic"><span class="magic-text">WebScrapideo</span></span>
<span class="magic"><span class="magic-text">WebScrapideo</span></span>
</div>
<div className="flex space-x-4">
{renderedLinks}
<div>
<button style={{}} className='p-2 rounded-full text-gray-800 dark-bg-green-500 dark:text-gray-200' onClick={handleThemeSwitch}>
<i class="fa-solid fa-circle-half-stroke text-4xl dark:text-gray-200"></i>
</button>
</div>
</div>
</div>
</nav>
Expand Down
4 changes: 4 additions & 0 deletions client/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,3 +78,7 @@
-webkit-text-fill-color: transparent;
white-space: nowrap;
}

.main {
@apply dark:bg-black/75
}
2 changes: 1 addition & 1 deletion client/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ import { NavigationProvider } from './context/navigation';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<NavigationProvider>
<App />
<App className=" text-gray-800 dark:bg-gray-800 dark:text-gray-200" />
</NavigationProvider>
);
28 changes: 14 additions & 14 deletions client/src/pages/flipkartScraperPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,29 +315,29 @@ function FlipkartScraperPage() {
buttonText = isError ? <>Error</> : buttonText;

return (
<div className="flex flex-col space-y-8 justify-center items-center min-h-screen">
<div className="flex flex-col space-y-8 justify-center items-center min-h-screen dark:bg-gray-800">
<Hero title="Flipkart Scraper" desc="An advanced Flipkart web scraper that combines automated data extraction capabilities with user-defined data selection, allowing users to effortlessly retrieve specific information of their choice from the Flipkart website with precision and efficiency."/>

<Panel className='flex flex-col space-y-8'>
<div className='flex flex-col space-y-4'>
<Panel className='flex flex-col space-y-8 text-gray-800 dark:bg-gray-800 dark:text-gray-200'>
<div className='flex flex-col space-y-4 text-gray-800 dark:bg-gray-800 dark:text-gray-200'>
<label>Enter URL</label>
<input value={url} onChange={handleUrlChange} type="text" className="py-1 my-3 bg-gray-50 border border-gray-300"/>
<input value={url} onChange={handleUrlChange} type="text" className="py-1 my-3 bg-gray-50 border border-gray-300 dark:bg-gray-600"/>
<div className="flex justify-center">
<Button success rounded outline onClick={handleUrlSubmit} disabled={loading}>
<Button className="text-gray-800 dark:bg-gray-800 dark:text-gray-200" success rounded outline onClick={handleUrlSubmit} disabled={loading}>
{buttonText}
</Button>
</div>
</div>
<div className='flex flex-col space-y-4'>
<div className='flex flex-col space-y-4 dark:text-gray-200'>
<label>Search for products, brands and more</label>
<input value={query} onChange={handleQueryChange} type="text" className="py-1 my-3 bg-gray-50 border border-gray-300"/>
<div className="flex justify-center">
<Button success rounded outline onClick={handleQuerySubmit} disabled={loading}>
<input value={query} onChange={handleQueryChange} type="text" className="py-1 my-3 bg-gray-50 border border-gray-300 dark:bg-gray-600"/>
<div className="flex justify-center dark:bg-gray-800">
<Button className="text-gray-800 dark:bg-gray-800 dark:text-gray-200" success rounded outline onClick={handleQuerySubmit} disabled={loading}>
{buttonText}
</Button>
</div>
</div>
<Panel className='flex flex-col space-y-4'>
</div>
<Panel className='flex text-gray-800 flex-col space-y-4 dark:bg-gray-800 dark:text-gray-200'>
<label>Example URLs</label>
<ul style={{listStyleType:"disc"}} className="flex flex-col space-y-2">
<li className="flex flex-row space-x-4 items-start justify-start"><div>1. </div><Button success className="text-white active:bg-green-700" onClick={() => navigator.clipboard.writeText('https://www.flipkart.com/mobiles/pr?sid=tyy%2C4io&p%5B%5D=facets.price_range.from%3D10000&ctx=eyJjYXJkQ29udGV4dCI6eyJhdHRyaWJ1dGVzIjp7InRpdGxlIjp7Im11bHRpVmFsdWVkQXR0cmlidXRlIjp7ImtleSI6InRpdGxlIiwiaW5mZXJlbmNlVHlwZSI6IlRJVExFIiwidmFsdWVzIjpbIlNob3AgTm93Il0sInZhbHVlVHlwZSI6Ik1VTFRJX1ZBTFVFRCJ9fX19fQ%3D%3D&otracker=clp_metro_expandable_3_7.metroExpandable.METRO_EXPANDABLE_Shop%2BNow_mobile-phones-store_O1WYX08RHODP_wp4&fm=neo%2Fmerchandising&iid=M_45097844-8fd6-4d1b-b414-faca5617af95_7.O1WYX08RHODP&ppt=hp&ppn=homepage&ssid=di5cfb5mls0000001688463812500&p%5B%5D=facets.price_range.to%3D20000&p%5B%5D=facets.brand%255B%255D%3DPOCO&page=')}>Copy</Button></li>
Expand All @@ -346,7 +346,7 @@ function FlipkartScraperPage() {
</ul>
<div className="font-bold">Important: Append "&page=" at the end of URL</div>
</Panel>
<div className='flex flex-col space-y-4'>
<div className=' flex flex-col space-y-4 text-gray-800 dark:bg-gray-800 dark:text-gray-200'>
<label>Data selection</label>
<Checkbox label="Product's Name" checked={isProductNameChecked} onChange={handleProductNameSelection} />
<Checkbox label="Current Price" checked={isCurrentPriceChecked} onChange={handleCurrentPriceSelection} />
Expand All @@ -362,7 +362,7 @@ function FlipkartScraperPage() {
<Checkbox label="Image URL" checked={isImageUrlChecked} onChange={handleImageUrlSelection} />
<Checkbox label="Product URL" checked={isProductUrlChecked} onChange={handleProductUrlSelection} />
</div>
<div className='flex flex-col space-y-4'>
<div className='text-gray-800 flex flex-col space-y-4 dark:bg-gray-800 dark:text-gray-200'>
<label>Download Data</label>
<div className="flex justify-start">
<CsvDownloadButton
Expand All @@ -384,7 +384,7 @@ function FlipkartScraperPage() {
> Download in CSV</CsvDownloadButton>
</div>
</div>
<div className='flex flex-col space-y-4'>
<div className='text-gray-800 flex flex-col space-y-4 dark:bg-gray-800 dark:text-gray-200'>
<label>Preview Data</label>
<SortableTable data={data} config={config} />
</div>
Expand Down
38 changes: 19 additions & 19 deletions client/src/pages/homePage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,20 @@ const HomePage = () => {
};

return (
<div className="bg-gray-100 min-h-screen">
<div className="bg-gray-100 min-h-screen dark:bg-gray-800">
<Hero title="Data extraction from HTML made easy" desc="" />

<section className="py-20">
<div className="container mx-auto px-4">
<div className="flex flex-wrap items-center justify-center -mx-4">
<div className="flex flex-wrap items-center justify-center -mx-4 dark:bg-gray-800">
<motion.div
className="w-full md:w-1/2 lg:w-1/3 px-4 mb-8"
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: 'easeOut' }}
whileHover={{ scale: 1.05, boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)' }}
>
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="bg-white rounded-lg shadow-lg p-6 dark:bg-gray-700">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-12 w-12 text-indigo-500 mx-auto mb-4"
Expand All @@ -36,14 +36,14 @@ const HomePage = () => {
clipRule="evenodd"
/>
</svg>
<h2 className="text-xl lg:text-2xl font-semibold mb-2 text-gray-800">
<h2 className="text-xl lg:text-2xl font-semibold mb-2 text-gray-800 dark:text-gray-100">
Text Summarizer
</h2>

<p className="text-gray-600">
<p className="text-gray-600 dark:text-gray-300">
Summarize text and HTML pages with ease using our Text Summarizer feature. It leverages the power of the Sumy library, which supports various summarization methods including:
</p>
<ul className="list-disc pl-6 mt-4 text-gray-600">
<ul className="list-disc pl-6 mt-4 text-gray-600 dark:text-gray-300">
<li>LSA (Latent Semantic Analysis)</li>
<li>TextRank</li>
<li>LexRank</li>
Expand All @@ -52,7 +52,7 @@ const HomePage = () => {
<li>KL-Sum</li>
<li>Reduction</li>
</ul>
<p className="text-gray-600 mt-4">
<p className="text-gray-600 mt-4 dark:text-gray-300">
Each method offers unique approaches to extract important information and create concise summaries. With WebScrapideo, you can access these summarization methods in one place, making text summarization a breeze.
</p>
</div>
Expand All @@ -65,7 +65,7 @@ const HomePage = () => {
transition={{ duration: 0.6, ease: 'easeOut' }}
whileHover={{ scale: 1.05, boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)' }}
>
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="bg-white rounded-lg shadow-lg p-6 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-12 w-12 text-indigo-500 mx-auto mb-4"
Expand All @@ -78,21 +78,21 @@ const HomePage = () => {
clipRule="evenodd"
/>
</svg>
<h2 className="text-xl lg:text-2xl font-semibold mb-2 text-gray-800">
<h2 className="text-xl lg:text-2xl font-semibold mb-2 text-gray-800 dark:text-gray-200">
Flipkart Web Scraping
</h2>
<p className="text-gray-600">
<p className="text-gray-600 dark:text-gray-300">
Extract data from Flipkart effortlessly with our Flipkart Web Scraping feature. Powered by the BeautifulSoup library, it allows you to select the specific data you want to scrape and preview the result before downloading it in CSV format. Use cases for the scraped data from Flipkart include:
</p>
<ul className="list-disc pl-6 mt-4 text-gray-600">
<ul className="list-disc pl-6 mt-4 text-gray-600 text-gray-800 dark:text-gray-300">
<li>Market research and analysis</li>
<li>Competitor price tracking</li>
<li>Product comparison and reviews analysis</li>
<li>Inventory management</li>
<li>Data-driven decision making</li>
<li>Brand Monitoring</li>
</ul>
<p className="text-gray-600 mt-4">
<p className="text-gray-600 mt-4 dark:text-gray-300">
With WebScrapideo, you can easily scrape and leverage data from Flipkart for various business and analytical purposes, empowering you to make informed decisions.
</p>
</div>
Expand All @@ -105,7 +105,7 @@ const HomePage = () => {
transition={{ duration: 0.6, ease: 'easeOut' }}
whileHover={{ scale: 1.05, boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)' }}
>
<div className="bg-white rounded-lg shadow-lg p-6">
<div className="bg-white rounded-lg shadow-lg p-6 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-12 w-12 text-indigo-500 mx-auto mb-4"
Expand All @@ -118,14 +118,14 @@ const HomePage = () => {
clipRule="evenodd"
/>
</svg>
<h2 className="text-xl lg:text-2xl font-semibold mb-2 text-gray-800">
<h2 className="text-xl lg:text-2xl font-semibold mb-2 text-gray-800 dark:text-gray-200">
Online Video Downloader
</h2>
<p className="text-gray-600">
<p className="text-gray-600 dark:text-gray-200">
Download online videos hassle-free with our Online Video Downloader feature. Utilizing the yt-dlp library, you can retrieve download links for videos from various websites, including:
</p>
{!showAllWebsites ? (
<ul className="list-disc pl-6 mt-4 text-gray-600">
<ul className="list-disc pl-6 mt-4 text-gray-600 dark:text-gray-300">
<li>YouTube</li>
<li>Vimeo</li>
<li>Twitter</li>
Expand All @@ -136,7 +136,7 @@ const HomePage = () => {
</ul>
) : (
<>
<ul className="list-disc pl-6 mt-4 text-gray-600">
<ul className="list-disc pl-6 mt-4 text-gray-600 dark:bg-gray-700 dark:text-gray-300">
<li>FiveTV</li>
<li>PopcornTV</li>
<li>PornCom</li>
Expand All @@ -148,7 +148,7 @@ const HomePage = () => {
<li>YourUpload</li>
<li>Zoom</li>
</ul>
<p className="text-gray-600 mt-4">
<p className="text-gray-600 mt-4 dark:bg-gray-700 dark:text-gray-300">
Note: This is not an exhaustive list. WebScrapideo supports many more websites for video downloading.
</p>
</>
Expand All @@ -159,7 +159,7 @@ const HomePage = () => {
>
{showAllWebsites ? 'Read Less' : 'Read More'}
</button>
<p className="text-gray-600 mt-4">
<p className="text-gray-600 mt-4 dark:bg-gray-700 dark:text-gray-300">
WebScrapideo provides a unique service by offering an extensive range of supported websites for video downloading, setting it apart from other platforms in the market. Enjoy the freedom to download videos hassle-free.
</p>
</div>
Expand Down
Loading