Skip to content

Commit

Permalink
Merge branch 'main' into main
Browse files Browse the repository at this point in the history
Signed-off-by: Anuj Verma <[email protected]>
  • Loading branch information
Anuj3553 authored Oct 12, 2024
2 parents b6c515f + 0c58de8 commit df395a7
Show file tree
Hide file tree
Showing 10 changed files with 291 additions and 137 deletions.
46 changes: 29 additions & 17 deletions client/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"otp-input-react": "^0.3.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-animated-cursor": "^2.11.2",
"react-bootstrap": "^2.10.2",
"react-dom": "^18.2.0",
"react-google-recaptcha": "^3.1.0",
Expand All @@ -46,11 +47,12 @@
"react-phone-input-2": "^2.15.1",
"react-phone-number-input": "^3.3.10",
"react-router-dom": "^6.22.3",
"react-toastify": "^10.0.5",
"react-toggle": "^4.1.3",
"react-top-loading-bar": "^2.3.1",
"socket.io": "^4.7.5",
"socket.io-client": "^4.7.5",
"sort-by": "^1.2.0",
"sort-by": "^0.0.2",
"yup": "^1.4.0"
},
"devDependencies": {
Expand Down
3 changes: 1 addition & 2 deletions client/src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useEffect, useState } from 'react';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import './App.css';
import './index.css';
Expand Down Expand Up @@ -145,4 +144,4 @@ function App() {
);
}

export default App;
export default App;
114 changes: 84 additions & 30 deletions client/src/component/Footers/Feedback.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import '../css/Feedback.css'; // Import CSS file for styling
import PropTypes from 'prop-types';
import { useState } from 'react';

Expand All @@ -7,48 +6,103 @@ function Feedback(props) {

const handleSubmit = (e) => {
e.preventDefault();
if (isSubmitting) return; // If already submitting, do nothing
setIsSubmitting(true); // Set isSubmitting to true to disable the button
if (isSubmitting) return;
setIsSubmitting(true);

const scriptURL = 'https://script.google.com/macros/s/AKfycbxJzYGZE0R6W2ZLGbJZlUoxNwWShpAYhcJY4zBM9LOycb7iiM4vncS1fbSpVnIXwKIU/exec';
const form = document.forms['submit-to-google-sheet'];

fetch(scriptURL, { method: 'POST', body: new FormData(form) })
.then(response => {
form.reset();
setIsSubmitting(false); // Re-enable the button
props.showAlert("Form Submitted Successfully", "success");
console.log('Success!', response);
setIsSubmitting(false);
props.showAlert("Feedback Submitted Successfully", "success");
})
.catch(error => {
setIsSubmitting(false); // Re-enable the button
props.showAlert("Form Submission Failed", "danger");
console.error('Error!', error.message);
setIsSubmitting(false);
props.showAlert("Feedback Submission Failed", "danger");
});
};

return (
<div className='feedback-main-box'>
<h2 className="text-center Heading-Page">Feedback</h2>
<form className="feedback-container container mt-4" name="submit-to-google-sheet" onSubmit={handleSubmit}>
<div className="mb-3">
<label htmlFor="Name" className="form-label">Name:</label>
<input type="text" id="Name" name='Name' className="form-control" placeholder='Enter your name here *' required='true' />
</div>
<div className="mb-3">
<label htmlFor="Email" className="form-label">Email:</label>
<input type="email" id="Email" name='Email' className="form-control" placeholder='Enter your email here' required='true' />
</div>
<div className="mb-3">
<label htmlFor="Rating" className="form-label">Rating &nbsp;(1-10):</label>
<input type="number" id="Rating" name='Rating' className="form-control" placeholder='Enter your rating here' min={0} max={10}/>
</div>
<div className="mb-3">
<label htmlFor="Feedback" className="form-label">Feedback:</label>
<textarea
id="Feedback" className="form-control" name='Feedback' rows="5" placeholder='Enter your feedback here' required='true' ></textarea>
</div>
<button className="btn btn-primary" type="submit" disabled={isSubmitting} style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black', outline: props.mode=== 'dark' ? '2px solid white': '2px solid black'}}>Submit</button>
<div className="max-w-10xl mx-auto p-52 bg-white shadow-lg rounded-lg"
style={{
backgroundImage: `url('https://static.vecteezy.com/system/resources/previews/007/353/647/large_2x/blue-wrinkled-paper-background-with-abstract-seamless-pattern-crumpled-paper-texture-photo.jpg')`,
backdropFilter: 'blur(10px)',
backgroundColor: 'rgba(255, 255, 255, 0.7)', // Frosted glass effect
border: '1px solid rgba(255, 255, 255, 0.18)',
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
}}
>
<h2 className="text-center text-3xl font-bold text-gray-800 mb-8">We Value Your Feedback</h2>
<form name="submit-to-google-sheet" onSubmit={handleSubmit} className="space-y-6">

{/* Name Field */}
<div>
<label htmlFor="Name" className="block text-sm font-medium text-gray-700">Name:</label>
<input type="text" id="Name" name="Name" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" placeholder="Enter your name *" required />
</div>

{/* Email Field */}
<div>
<label htmlFor="Email" className="block text-sm font-medium text-gray-700">Email:</label>
<input type="email" id="Email" name="Email" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" placeholder="Enter your email *" required />
</div>

{/* Subject or Topic */}
<div>
<label htmlFor="Subject" className="block text-sm font-medium text-gray-700">Subject or Topic:</label>
<input type="text" id="Subject" name="Subject" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" placeholder="Specify the subject (e.g., design, content)" required />
</div>

{/* Date of Visit */}
<div>
<label htmlFor="Date" className="block text-sm font-medium text-gray-700">Date of Visit:</label>
<input type="date" id="Date" name="Date" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" required />
</div>

{/* Device Used */}
<div>
<label htmlFor="Device" className="block text-sm font-medium text-gray-700">Device Used:</label>
<select id="Device" name="Device" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" required>
<option value="Desktop">Desktop</option>
<option value="Tablet">Tablet</option>
<option value="Mobile">Mobile</option>
</select>
</div>

{/* Rating System */}
<div>
<label htmlFor="Rating" className="block text-sm font-medium text-gray-700">Rating (1-10):</label>
<input type="range" id="Rating" name="Rating" min={1} max={10} className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer range-lg focus:outline-none bg-white bg-opacity-70" />
</div>

{/* Suggestions for Improvement */}
<div>
<label htmlFor="Suggestions" className="block text-sm font-medium text-gray-700">Suggestions for Improvement:</label>
<textarea id="Suggestions" name="Suggestions" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" rows="4" placeholder="Provide suggestions for improvement" required></textarea>
</div>

{/* Priority Level */}
<div>
<label htmlFor="Priority" className="block text-sm font-medium text-gray-700">Priority Level:</label>
<select id="Priority" name="Priority" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" required>
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>

{/* Feedback Text */}
<div>
<label htmlFor="Feedback" className="block text-sm font-medium text-gray-700">Feedback:</label>
<textarea id="Feedback" name="Feedback" className="mt-1 p-3 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white bg-opacity-70" rows="4" placeholder="Enter your feedback here" required></textarea>
</div>

{/* Submit Button */}
<button type="submit" disabled={isSubmitting} className="w-full py-2 px-4 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
{isSubmitting ? 'Submitting...' : 'Submit'}
</button>
</form>
</div>
);
Expand Down
18 changes: 4 additions & 14 deletions client/src/component/Home.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import './css/Home.css'
import PropTypes from 'prop-types';
import HeroImg from '../assets/images/Vector Gif/Hero.gif'
import Learn from '../assets/images/Learn.png'
import Share from '../assets/images/Share.png'
import ShareComponent from './Share';
import Grow from '../assets/images/Grow.png'
import glichBitboxGif from '../assets/images/Other Gifs/Bitbox Glitch.gif'
import CardsPage from './HomePage/Card';
Expand Down Expand Up @@ -71,19 +71,9 @@ const Home = (props) => {
</div>
</div>
</div>
<div className="container my-5">
<div className="row">
<div className="col-lg-6">
<img className="w-100 rounded-5" src={Share} />
</div>
<div className="col-lg-6">
<div className="p-5 mt-4">
<h1 className="display-4" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>Share</h1>
<p className="lead" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>🌐 Join the vibrant Bitbox Opensource Community today! Whether you&apos;re a seasoned developer or just starting out, there&apos;s a place for you to collaborate, innovate, and make a difference. Let&apos;s shape the future of digital exchange together! #BitboxCommunity #OpenSource 🚀💻 </p>
<a href="#" className="btn btn-outline-dark" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>Read More</a>
</div>
</div>
</div>
<div style={{color:'black'}}>

<ShareComponent/>
</div>
</div>
</section>
Expand Down
59 changes: 59 additions & 0 deletions client/src/component/Share.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import Share from '../assets/images/Share.png';

const ShareComponent = (props) => {
const handleShareClick = () => {
const shareLink = window.location.href;
navigator.clipboard.writeText(shareLink).then(() => {
toast.success('Link copied to clipboard!', {
position: 'top-right',
autoClose: 3000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
style: {
backgroundColor: '#fff', // White background
color: '#000', // Force black text color
fontWeight: 'bold', // Optional: Make the text bold for better visibility
},
progressStyle: {
backgroundColor: '#000', // Black progress bar
},
});
});
};

return (
<div className="container my-5">
<div className="row">
<div className="col-lg-6">
<img className="w-100 rounded-5" src={Share} alt="Share" />
</div>
<div className="col-lg-6">
<div className="p-5 mt-4">
<h1 className="display-4" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>
Share
</h1>
<p className="lead" style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}>
🌐 Join the vibrant Bitbox Opensource Community today! Whether you're a seasoned developer or just starting out, there's a place for you to collaborate,
innovate, and make a difference. Let's shape the future of digital exchange together! #BitboxCommunity #OpenSource 🚀💻
</p>
<button
onClick={handleShareClick}
className="btn btn-outline-dark"
style={{ background: props.mode === 'dark' ? 'black' : 'white', color: props.mode === 'dark' ? 'white' : 'black' }}
>
Share Now
</button>
</div>
</div>
</div>
<ToastContainer />
</div>
);
};

export default ShareComponent;
Loading

0 comments on commit df395a7

Please sign in to comment.