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

Front end changes to the people page & people forms page #51

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Front end changes to the people page & people forms page #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
148970f
Trying my best to implement changes to the front end of the Host page
Jenpj234 Jan 13, 2025
6a25d7a
Worked on frontend for people page + form page to play around with de…
Jenpj234 Jan 15, 2025
a755769
Got rid of the duplicates in the header
Jenpj234 Jan 15, 2025
da381a7
Trying to figure out how to revamp this page with ChatGPT, needs a lo…
Jenpj234 Jan 15, 2025
47640ce
Trying to get the latest version of the code
Jenpj234 Jan 16, 2025
a5e07e0
Struggling to center a button ;-;
Jenpj234 Jan 16, 2025
a4070bf
Added grid layout to People page
Jenpj234 Jan 16, 2025
5fe4787
Successfully added the nav bar & button to the People's page
Jenpj234 Jan 17, 2025
f3a24b7
Added some CSS to make people page look nicer
Jenpj234 Jan 17, 2025
a2f2bee
Added some finishing touches to the people page
Jenpj234 Jan 21, 2025
2d3520c
Rebasing while merging with my code for front end
Jenpj234 Jan 21, 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
7 changes: 4 additions & 3 deletions views/js/evently/src/AboutUs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,10 @@ function AboutUs() {
<p>Hi, I'm Sara! I'm a sophomore at CUNY Lehman College and Macaulay Honors College studying Computer Graphics and Imaging with a minor in Media Communications Studies. I hope to combine my creative and technical skills to pursue a career in product design. In my free time, I like to binge-watch shows, bake, visit new places, and spend time with family and friends.</p>
<a href="https://www.linkedin.com/in/sara-abdulla-0ba97b292">Connect with me on LinkedIn!</a>
</div>
</div>
</div>

</div>
</div>


<div className="profileContainer">
<div className="profileCard">
<div className="profileFront">
Expand Down
106 changes: 61 additions & 45 deletions views/js/evently/src/CreateHost.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,64 @@
.row {
display: flex;
justify-content: center;
flex-direction: row;

}

.column {
float: left;
width: 50%;
padding-right: 17rem;
padding-top: 2rem;
padding-left: 14rem;
}

.input-form {
display: flex;
flex-direction: column;
}

.create-host-container {
display: flex;
flex-direction: column;
}

.profile-image {
width: 10rem;
height: auto;
display: flex;
flex-direction: column;
margin: auto;
border-radius: 100%;
}

.account-layout {
display: flex;
flex-direction: column;
text-align: left;
align-self: baseline;
}

.button {
color: white;
background-color: #2A5DB7;
padding: 20px;
max-width: 800px;
margin: 0 auto;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.row {
display: flex;
justify-content: space-between;
gap: 20px;
}

.column {
flex: 1;
}

.account-layout, .input-form {
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-image {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 10px;
}

label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}

input, select {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}

.button {
display: block;
width: 100%;
padding: 10px;
margin-top: 1rem;
}
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}

.button:hover {
background-color: #45a049;
}

133 changes: 78 additions & 55 deletions views/js/evently/src/CreateHost.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,66 +30,89 @@ function CreateHost() {
}
}

return (

<div className='create-host-container'>

<div className='row'>

<form className="create-Form" onSubmit={handleSubmit}>
<div className='column'>
<div className='account-layout'>
<img src={profileImage1}
alt="Profile picture" className="profile-image" />
<br />
<label> Enter image url: </label>
<input type="text" className='image-input' value = {ProfileImage} onChange={(e) => setProfileImage(e.target.value)}/>
<br />
<label>Do you want to add any links?</label>
<br />
<label> (Optional) </label>
<input type="text" className='link-input' value = {Link} onChange={(e) => setLink(e.target.value)}/>
<br />

</div>
</div>
return (

<div className="create-host-container">
<form className="create-form" onSubmit={handleSubmit}>
<h2>Create Your Profile</h2>

{/* Profile Image Section */}
<div className="form-group">
<img
src={profileImage1}
alt="Profile picture"
className="profile-image"
/>
<label htmlFor="image-input">Enter image URL:</label>
<input
type="text"
id="image-input"
value={ProfileImage}
onChange={(e) => setProfileImage(e.target.value)}
/>
</div>

<div className='column'>
<div className='input-form'>
<h4>Are you an individual or an organization?</h4>
<select>
<option value="Individual">Individual</option>
<option value="Organization">Organization</option>
</select>
<br />
<label> Name: </label>
<input type="text" className='name-input' value = {Name} onChange={(e) => setName(e.target.value)}/>
<label> Phone Number: </label>
<input type="text" className='phone-input' value = {Phone} onChange={(e) => setPhone(e.target.value)}/>
{/* Name Input */}
<div className="form-group">
<label htmlFor="name-input">Name:</label>
<input
type="text"
id="name-input"
value={Name}
onChange={(e) => setName(e.target.value)}
/>
</div>

{/* Phone Number Input */}
<div className="form-group">
<label htmlFor="phone-input">Phone Number:</label>
<input
type="text"
id="phone-input"
value={Phone}
onChange={(e) => setPhone(e.target.value)}
/>
</div>

{/* Email Input */}
<div className="form-group">
<label htmlFor="email-input">Email:</label>
<input
type="text"
id="email-input"
value={Email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>

<h4>Do you want to make your phone number public?</h4>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br />
<label> Email: </label>
<input type="text" className='email-input' value = {Email} onChange={(e) => setEmail(e.target.value)}/>
{/* Role Selection */}
<div className="form-group">
<label htmlFor="role-select">Are you an attendee or host?</label>
<select id="role-select">
<option value="Attendee">Attendee</option>
<option value="Host">Host</option>
<option value="Both">Both</option>
</select>
</div>

<h4>Do you want to make your email public?</h4>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<button className= "button" type="submit">Create account</button>
</div>
</div>
</form>
</div>
{/* Links Section */}
<div className="form-group">
<label htmlFor="link-input">Add any links (Optional):</label>
<input
type="text"
id="link-input"
value={Link}
onChange={(e) => setLink(e.target.value)}
/>
</div>

</div>
{/* Submit Button */}
<button className="button" type="submit">Create Account</button>
</form>
</div>
);


)
}

export default CreateHost;
Loading