diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..fa35c2833 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md new file mode 100644 index 000000000..1d8d41c12 --- /dev/null +++ b/README.md @@ -0,0 +1,13 @@ +# Charity Fundraiser Website + +Created for ISM6225 Assignment 1 +A static website using HTML, CSS, JS, and Chart.js to support fundraising causes. + +## Pages: +- `index.html`: Home +- `aboutus.html`: About the Developer +- `managefunds.html`: Mock CRUD Form +- `analytics.html`: Chart Visualization + +GitHub Repo: [https://github.com/AkhilKrishnaSripada/Assignment_LookAndFeel/tree/assignment] +Hosted at: [http://myweb.usf.edu/~akhilkrishnasripada/index.html] diff --git a/aboutus.html b/aboutus.html new file mode 100644 index 000000000..dd83bba72 --- /dev/null +++ b/aboutus.html @@ -0,0 +1,39 @@ + + + + + + About Us + + + +
+
+

Charity Fundraiser

+ +
+
+ +
+
+

About the Developer

+

Hi! I am Akhil, a web development student passionate about using technology for social good. This website was created as part of ISM6225 to demonstrate user interface design, responsiveness, and interactivity using HTML, CSS, JavaScript, and Chart.js.

+

I used GitHub to manage source control and Cyberduck to deploy the site to USF web server.

+

GitHub Repo: View Code

+
+
+ + + + diff --git a/analytics.html b/analytics.html new file mode 100644 index 000000000..19e412815 --- /dev/null +++ b/analytics.html @@ -0,0 +1,60 @@ + + + + + + Donation Analytics + + + + +
+
+

Charity Fundraiser

+ +
+
+ +
+
+

Donation Analytics

+ +
+
+ + + + + + diff --git a/css/style.css b/css/style.css new file mode 100644 index 000000000..1f3d1c169 --- /dev/null +++ b/css/style.css @@ -0,0 +1,107 @@ +/* style.css - modern, responsive styling */ + +body { + margin: 0; + font-family: 'Inter', sans-serif; + background-color: #f4f4f4; + color: #333; +} + +header { + background-color: #2d6a4f; + color: white; + padding: 1rem 0; +} + +header .container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 2rem; +} + +nav ul { + list-style: none; + display: flex; + gap: 1.5rem; + padding: 0; + margin: 0; +} + +nav ul li a { + color: white; + text-decoration: none; + font-weight: 600; + transition: color 0.3s; +} + +nav ul li a:hover { + color: #ffd166; +} + +.hero { + background: url('../images/charity_banner.jpg') center/cover no-repeat; + color: white; + padding: 6rem 2rem; + text-align: center; + background-color: #1d3557; +} + +.hero .cta-button { + display: inline-block; + margin-top: 1.5rem; + background-color: #ffd166; + color: #1d3557; + padding: 0.75rem 1.5rem; + text-decoration: none; + font-weight: 600; + border-radius: 5px; + transition: background-color 0.3s; +} + +.hero .cta-button:hover { + background-color: #f4a261; +} + +.highlights, .impact { + padding: 3rem 2rem; + background-color: #ffffff; +} + +.highlights .container, .impact .container { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +.highlight h3 { + color: #2d6a4f; +} + +footer { + background-color: #333; + color: white; + text-align: center; + padding: 1rem; +} + +.container { + max-width: 1200px; + margin: auto; +} + +/* Responsive */ +@media (max-width: 768px) { + header .container { + flex-direction: column; + text-align: center; + } + + nav ul { + flex-direction: column; + gap: 1rem; + margin-top: 1rem; + } +} diff --git a/index.html b/index.html index fbae197cd..233c35d60 100644 --- a/index.html +++ b/index.html @@ -1 +1,63 @@ - \ No newline at end of file + + + + + + Charity Fundraiser + + + + +
+
+

Charity Fundraiser

+ +
+
+ +
+
+

Give Hope. Give Joy. Give Life.

+

Your support helps us reach children, families, and communities in need through health, education, and crisis relief.

+ Donate Now +
+
+ +
+
+
+

Education Support

+

Help fund education for underprivileged children and youth.

+
+
+

Medical Assistance

+

Provide life-saving treatments and medical supplies to those in need.

+
+
+

Hunger Relief

+

Support daily meals and nutrition kits for low-income families.

+
+
+
+ +
+
+

Our Impact

+

Thanks to donors like you, we have raised over $500,000 to support 10,000+ lives across 15 regions in the past year alone.

+
+
+ + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 000000000..b8e3fe9bd --- /dev/null +++ b/js/script.js @@ -0,0 +1,18 @@ +document.getElementById('donationForm').addEventListener('submit', function (e) { + e.preventDefault(); + + const name = document.getElementById('donorName').value; + const amount = document.getElementById('amount').value; + + const entry = document.createElement('li'); + entry.textContent = `${name} donated $${amount}`; + entry.style.cursor = 'pointer'; + + // Delete on click + entry.addEventListener('click', function () { + this.remove(); + }); + + document.getElementById('donationList').appendChild(entry); + this.reset(); +}); diff --git a/managefunds.html b/managefunds.html new file mode 100644 index 000000000..b7124d366 --- /dev/null +++ b/managefunds.html @@ -0,0 +1,98 @@ + + + + + + Manage Donations + + + +
+
+

Charity Fundraiser

+ +
+
+ +
+
+

Manage Donations (CRUD)

+
+ + + +
+ + + + + + + + + +
DonorAmountActions
+
+
+ + + + + +