diff --git a/Css-Files/bloodstyle.css b/Css-Files/bloodstyle.css index dc998bba..b12974c6 100644 --- a/Css-Files/bloodstyle.css +++ b/Css-Files/bloodstyle.css @@ -664,4 +664,60 @@ padding-top: 3rem; text-align: center; padding: 1rem 0.5rem 2rem 0.5rem; } - } \ No newline at end of file + } + /*Popup Blood list*/ + .popup { + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0,0,0,0.4); +} + +.popup-content { + background-color: #fefefe; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; + max-width: 600px; +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + cursor: pointer; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} + +.popup-content h2, .popup-content h3 { + color: #4bb6b7; + padding: 10px 0; + margin: 0; +} + +.popup-content .list { + padding-left: 20px; +} + +.popup-content .list p { + margin: 5px 0; +} + +.popup-content strong { + display: block; + margin-top: 10px; + margin-bottom: 20px; +} \ No newline at end of file diff --git a/Html-Files/blood.html b/Html-Files/blood.html index 14b86ba2..7f0a4d2e 100644 --- a/Html-Files/blood.html +++ b/Html-Files/blood.html @@ -53,7 +53,7 @@

A+

liters

- Get List + Get List
@@ -62,7 +62,7 @@

O+

liters

- Get List + Get List
@@ -71,7 +71,7 @@

B+

liters

- Get List + Get List
@@ -80,7 +80,7 @@

AB+

liters

- Get List + Get List
@@ -89,7 +89,7 @@

A-

liters

- Get List + Get List
@@ -98,7 +98,7 @@

O-

liters

- Get List + Get List
@@ -107,7 +107,7 @@

B-

liters

- Get List + Get List
@@ -116,7 +116,7 @@

AB-

liters

- Get List + Get List
@@ -207,10 +207,12 @@

RAPIDOC Newsletter


- - - - + + diff --git a/Html-Files/list.html b/Html-Files/list.html deleted file mode 100644 index 0f5026bd..00000000 --- a/Html-Files/list.html +++ /dev/null @@ -1,730 +0,0 @@ - - - - - - - - - - - - - - - - - - -Blood Bank - - - - - - -
-
- - - - -
- - -
-
-
-

A+ Blood

-
-

Donors

-
    -

    -
    -
    -

    Recipients

    -
      -

      -
      -
      - -
      -

      O+ Blood

      -
      -

      Donors

      -
        -

        -
        -
        -

        Recipients

        -
          -

          -
          -
          - -
          -

          B+ Blood

          -
          -

          Donors

          -
            -

            -
            -
            -

            Recipients

            -
              -

              -
              -
              - -
              -

              AB+ Blood

              -
              -

              Donors

              -
                -

                -
                -
                -

                Recipients

                -
                  -

                  -
                  -
                  - -
                  -

                  A- Blood

                  -
                  -

                  Donors

                  -
                    -

                    -
                    -
                    -

                    Recipients

                    -
                      -

                      -
                      -
                      - -
                      -

                      O- Blood

                      -
                      -

                      Donors

                      -
                        -

                        -
                        -
                        -

                        Recipients

                        -
                          -

                          -
                          -
                          - -
                          -

                          B- Blood

                          -
                          -

                          Donors

                          -
                            -

                            -
                            -
                            -

                            Recipients

                            -
                              -

                              -
                              -
                              - -
                              -

                              AB- Blood

                              -
                              -

                              Donors

                              -
                                -

                                -
                                -
                                -

                                Recipients

                                -
                                  -

                                  -
                                  -
                                  -
                                  - -
                                  -

                                  Top Donors to India

                                  -
                                  - -
                                  -
                                  - - - -
                                  -
                                  - - - -
                                  -
                                  - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/js/popupbloodlist.js b/js/popupbloodlist.js new file mode 100644 index 00000000..da0005cb --- /dev/null +++ b/js/popupbloodlist.js @@ -0,0 +1,135 @@ +document.addEventListener('DOMContentLoaded', function() { + const popup = document.getElementById('popup'); + const closeBtn = document.querySelector('.close'); + const popupContent = document.getElementById('popupContent'); + + // Blood type data + const bloodTypeData = { + 'A+': { + donors: [ + { name: 'John Doe', amount: 0.5 }, + { name: 'Jane Smith', amount: 0.7 } + ], + recipients: [ + { name: 'Alice Johnson', amount: 0.6 }, + { name: 'Bob Williams', amount: 0.8 } + ] + }, + 'O+': { + donors: [ + { name: 'Emily Brown', amount: 0.6 }, + { name: 'Michael Davis', amount: 0.5 } + ], + recipients: [ + { name: 'Sarah Miller', amount: 0.7 }, + { name: 'David Wilson', amount: 0.4 } + ] + }, + 'B+': { + donors: [ + { name: 'Jennifer Lee', amount: 0.4 }, + { name: 'Robert Taylor', amount: 0.8 } + ], + recipients: [ + { name: 'William Anderson', amount: 0.5 }, + { name: 'Lisa Martinez', amount: 0.6 } + ] + }, + 'AB+': { + donors: [ + { name: 'Jessica Brown', amount: 0.7 }, + { name: 'Thomas Moore', amount: 0.5 } + ], + recipients: [ + { name: 'Karen White', amount: 0.4 }, + { name: 'Daniel Clark', amount: 0.8 } + ] + }, + 'A': { + donors: [ + { name: 'Patricia Garcia', amount: 0.6 }, + { name: 'James Rodriguez', amount: 0.5 } + ], + recipients: [ + { name: 'Nancy Lewis', amount: 0.7 }, + { name: 'Christopher Lee', amount: 0.3 } + ] + }, + 'O': { + donors: [ + { name: 'Margaret Wilson', amount: 0.5 }, + { name: 'Joseph Thompson', amount: 0.6 } + ], + recipients: [ + { name: 'Barbara Martin', amount: 0.4 }, + { name: 'Richard Harris', amount: 0.7 } + ] + }, + 'B': { + donors: [ + { name: 'Elizabeth Hall', amount: 0.7 }, + { name: 'Charles Young', amount: 0.4 } + ], + recipients: [ + { name: 'Susan Allen', amount: 0.6 }, + { name: 'Kevin Scott', amount: 0.5 } + ] + }, + 'AB': { + donors: [ + { name: 'Dorothy King', amount: 0.5 }, + { name: 'Mark Baker', amount: 0.6 } + ], + recipients: [ + { name: 'Linda Green', amount: 0.4 }, + { name: 'Paul Adams', amount: 0.7 } + ] + } + }; + + // Function to generate popup content + function generatePopupContent(bloodType) { + const data = bloodTypeData[bloodType]; + let content = `

                                  ${bloodType} Blood

                                  `; + + content += `

                                  Donors

                                  `; + let totalDonation = 0; + data.donors.forEach(donor => { + content += `

                                  ${donor.name}: ${donor.amount} L

                                  `; + totalDonation += donor.amount; + }); + content += `

                                  Total Donation: ${totalDonation.toFixed(2)} L

                                  `; + + content += `

                                  Recipients

                                  `; + let totalNeeded = 0; + data.recipients.forEach(recipient => { + content += `

                                  ${recipient.name}: ${recipient.amount} L

                                  `; + totalNeeded += recipient.amount; + }); + content += `

                                  Total Needed: ${totalNeeded.toFixed(2)} L

                                  `; + + return content; + } + + // Add click event listeners to all "Get List" buttons + document.querySelectorAll('.get-list-btn').forEach(btn => { + btn.addEventListener('click', function(e) { + e.preventDefault(); + const bloodType = this.id.split('-')[1]; + popupContent.innerHTML = generatePopupContent(bloodType); + popup.style.display = 'block'; + }); + }); + + // Close popup when clicking the close button + closeBtn.addEventListener('click', function() { + popup.style.display = 'none'; + }); + + // Close popup when clicking outside the popup content + window.addEventListener('click', function(e) { + if (e.target == popup) { + popup.style.display = 'none'; + } + }); +}); \ No newline at end of file