{"type": "body", "content": "", "style": "font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #181818; color: white", "bbox": [0, 0, 1280, 720], "children": [{"type": "div", "content": "", "style": "position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999", "bbox": [0, 0, 1280, 720], "children": [{"type": "div", "content": "", "style": "background-color: #181818; border-radius: 10px; border: 1px solid #fff000; padding: 20px; width: 80%; max-width: 600px; max-height: 90vh; overflow-y: auto; overflow-x: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1)", "bbox": [319, 15, 642, 690], "children": [{"type": "h2", "content": "Join The Fun @ Wall Walkers Bouldering", "style": "margin: 0 0 20px 0; font-size: 24px; color: white", "bbox": [340, 36, 600, 28], "children": []}, {"type": "h4", "content": "Initial Purchase of a 24 hour Punch Card includes a one time 24 hour\n        access fee of $20.00, charged in person on pickup.", "style": null, "bbox": [340, 85, 600, 36], "children": []}, {"type": "select", "content": "", "style": "width: 100%; margin-bottom: 20px; padding: 10px; font-size: 18px; border-radius: 5px", "bbox": [340, 142, 600, 44], "children": [{"type": "option", "content": "Adult", "style": null, "bbox": [0, 0, 0, 0], "children": []}, {"type": "option", "content": "Student", "style": null, "bbox": [0, 0, 0, 0], "children": []}, {"type": "option", "content": "Youth", "style": null, "bbox": [0, 0, 0, 0], "children": []}, {"type": "option", "content": "Service Person", "style": null, "bbox": [0, 0, 0, 0], "children": []}]}, {"type": "div", "content": "", "style": "display: flex; justify-content: center; align-items: center; margin: 20px 0; ", "bbox": [340, 226, 600, 34], "children": [{"type": "span", "content": "No Shoes", "style": "margin: 0 20px; color: white; font-size: 16px", "bbox": [530, 234, 70, 18], "children": []}, {"type": "label", "content": "", "style": "position: relative; display: inline-block; width: 60px; height: 34px", "bbox": [621, 226, 60, 34], "children": [{"type": "input", "content": "", "style": "", "bbox": [621, 226, 177, 21], "children": []}, {"type": "div", "content": "", "style": "position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #646464; transition: 0.4s; border-radius: 34px", "bbox": [621, 226, 60, 34], "children": []}]}, {"type": "span", "content": "Shoes", "style": "font-weight: bold; color: #fff000; margin: 0 20px; color: white; font-size: 16px", "bbox": [701, 234, 48, 18], "children": []}]}, {"type": "div", "content": "", "style": "display: flex; justify-content: space-between; flex-wrap: wrap; height: auto; margin-bottom: 20px; ", "bbox": [340, 280, 600, 75], "children": [{"type": "button", "content": "5 Punches", "style": "background-color: #181818; border: 2px solid #fff000; color: white; flex-grow: 1; margin-right: 3%; margin-bottom: 5%; font-size: 18px; cursor: pointer; border-radius: 5px; padding: 10px 20px; text-align: center; box-sizing: border-box; ", "bbox": [340, 280, 175, 45], "children": []}, {"type": "button", "content": "10 Punches", "style": "background-color: #181818; border: 2px solid #fff000; color: white; flex-grow: 1; margin-right: 3%; margin-bottom: 5%; font-size: 18px; cursor: pointer; border-radius: 5px; padding: 10px 20px; text-align: center; box-sizing: border-box; ; background-color: #fff000; color: black", "bbox": [533, 280, 185, 45], "children": []}, {"type": "button", "content": "20 Punches", "style": "background-color: #181818; border: 2px solid #fff000; color: white; flex-grow: 1; margin-right: 3%; margin-bottom: 5%; font-size: 18px; cursor: pointer; border-radius: 5px; padding: 10px 20px; text-align: center; box-sizing: border-box; ", "bbox": [736, 280, 185, 45], "children": []}]}, {"type": "table", "content": "", "style": "width: 100%; border-collapse: collapse; margin-top: 20px", "bbox": [340, 375, 600, 210], "children": [{"type": "thead", "content": "", "style": null, "bbox": [340, 375, 600, 34], "children": [{"type": "tr", "content": "", "style": null, "bbox": [340, 375, 600, 34], "children": [{"type": "th", "content": "", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd; background-color: #4c93af; color: white", "bbox": [340, 375, 323, 34], "children": []}, {"type": "th", "content": "Pass", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd; background-color: #4c93af; color: white", "bbox": [663, 375, 125, 34], "children": []}, {"type": "th", "content": "Shoes", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd; background-color: #4c93af; color: white", "bbox": [788, 375, 151, 34], "children": []}]}]}, {"type": "tbody", "content": "", "style": null, "bbox": [340, 410, 600, 175], "children": [{"type": "tr", "content": "", "style": null, "bbox": [340, 410, 600, 35], "children": [{"type": "td", "content": "Normal Price", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd", "bbox": [340, 410, 323, 35], "children": []}, {"type": "td", "content": "", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd", "bbox": [663, 410, 125, 35], "children": []}, {"type": "td", "content": "", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd", "bbox": [788, 410, 151, 35], "children": []}]}, {"type": "tr", "content": "", "style": null, "bbox": [340, 445, 600, 35], "children": [{"type": "td", "content": "Percent Savings", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd", "bbox": [340, 445, 323, 35], "children": []}, {"type": "td", "content": "", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd", "bbox": [663, 445, 125, 35], "children": []}, {"type": "td", "content": "", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd", "bbox": [788, 445, 151, 35], "children": []}]}, {"type": "tr", "content": "", "style": null, "bbox": [340, 480, 600, 35], "children": [{"type": "td", "content": "Discounted Price", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd", "bbox": [340, 480, 323, 35], "children": []}, {"type": "td", "content": "", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd", "bbox": [663, 480, 125, 35], "children": []}, {"type": "td", "content": "", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd", "bbox": [788, 480, 151, 35], "children": []}]}, {"type": "tr", "content": "", "style": "color: #fff000; font-weight: bolder", "bbox": [340, 515, 600, 35], "children": [{"type": "td", "content": "Your Savings", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd", "bbox": [340, 515, 323, 35], "children": []}, {"type": "td", "content": "", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd", "bbox": [663, 515, 125, 35], "children": []}]}, {"type": "tr", "content": "", "style": null, "bbox": [340, 550, 600, 35], "children": [{"type": "td", "content": "Your Total", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd", "bbox": [340, 550, 323, 35], "children": []}, {"type": "td", "content": "", "style": "text-align: center; padding: 8px; border-bottom: 1px solid #ddd", "bbox": [663, 550, 125, 35], "children": []}]}]}]}, {"type": "p", "content": "By purchasing this Punch Card you agree to the terms and conditions\n        listed below.", "style": null, "bbox": [340, 619, 600, 18], "children": []}, {"type": "div", "content": "", "style": "display: flex; justify-content: space-between", "bbox": [340, 653, 600, 41], "children": [{"type": "a", "content": "No", "style": "padding: 10px 20px; font-size: 18px; cursor: pointer; border: none; border-radius: 5px; background-color: #f44336; color: white", "bbox": [340, 653, 63, 41], "children": []}, {"type": "a", "content": "Yes", "style": "padding: 10px 20px; font-size: 18px; cursor: pointer; border: none; border-radius: 5px; background-color: #fff000; color: black; transition: box-shadow 0.3s ease-in-out", "bbox": [870, 653, 69, 41], "children": []}]}, {"type": "ol", "content": "", "style": null, "bbox": [340, 710, 600, 180], "children": [{"type": "li", "content": "Punch Cards are non-refundable and non-transferable.", "style": null, "bbox": [380, 710, 560, 18], "children": []}, {"type": "li", "content": "Punches expire 1 year from date of purchase.", "style": null, "bbox": [380, 728, 560, 18], "children": []}, {"type": "li", "content": "Initial Purchase of a 24 hour Punch Card includes a one time 24 hour\n          access fee of $20.00, charged in person on pickup.", "style": null, "bbox": [380, 746, 560, 36], "children": []}, {"type": "li", "content": "Initial Cards must be picked up during staffed hours, a member of\n          our staff will run you through the site induction.", "style": null, "bbox": [380, 782, 560, 36], "children": []}, {"type": "li", "content": "24 Hour access is only available to those who have completed the\n          site induction.", "style": null, "bbox": [380, 818, 560, 36], "children": []}, {"type": "li", "content": "24 Hour access is only available to people aged 16 years and over.\n          Under 16's must be accompanied by an adult at all times.", "style": null, "bbox": [380, 854, 560, 36], "children": []}]}]}]}]}
<!DOCTYPE html>

<html><head></head><body><div class="popup-overlay" id="popupOverlayPunchCard"><div class="popup"><h2>Join The Fun @ Wall Walkers Bouldering</h2><h4>
        Initial Purchase of a 24 hour Punch Card includes a one time 24 hour
        access fee of $20.00, charged in person on pickup.
      </h4><select id="userType"><option>Adult</option><option>Student</option><option>Youth</option><option>Service Person</option></select><div class="slider-container"><span id="noShoesLabel">No Shoes</span><label><input id="shoesSwitch"/><div class="slider"></div></label><span id="shoesLabel" style="font-weight: bold; color: #fff000">Shoes</span></div><div class="buttonsPunch"><button class="option-btn" id="btn5">5 Punches</button><button class="option-btn selected" id="btn10">
          10 Punches
        </button><button class="option-btn" id="btn20">
          20 Punches
        </button></div><table><thead><tr><th></th><th>Pass</th><th>Shoes</th></tr></thead><tbody><tr><td>Normal Price</td><td id="pass-normal-price"></td><td id="shoes-normal-price"></td></tr><tr><td>Percent Savings</td><td id="pass-percent-savings"></td><td id="shoes-percent-savings"></td></tr><tr><td>Discounted Price</td><td id="pass-discounted-price"></td><td id="shoes-discounted-price"></td></tr><tr class="highlightRow"><td>Your Savings</td><td id="savings"></td></tr><tr><td>Your Total</td><td id="total"></td></tr></tbody></table><br/><p class="popup-content">
        By purchasing this Punch Card you agree to the terms and conditions
        listed below.
      </p><div class="buttons"><a class="no-PunchCard-btn" id="noPunchCardBtn">No</a><a class="yes-PunchCard-btn" id="yesPunchCardBtn">Yes</a></div><div id="fallbackDiv"></div><ol><li>Punch Cards are non-refundable and non-transferable.</li><li>Punches expire 1 year from date of purchase.</li><li>
          Initial Purchase of a 24 hour Punch Card includes a one time 24 hour
          access fee of $20.00, charged in person on pickup.
        </li><li>
          Initial Cards must be picked up during staffed hours, a member of
          our staff will run you through the site induction.
        </li><li>
          24 Hour access is only available to those who have completed the
          site induction.
        </li><li>
          24 Hour access is only available to people aged 16 years and over.
          Under 16's must be accompanied by an adult at all times.
        </li></ol></div></div><style>body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #181818;
    color: white
    }
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999
    }
.popup {
    background-color: #181818;
    border-radius: 10px;
    border: 1px solid #fff000;
    padding: 20px;
    width: 80%;
    max-width: 600px;
    max-height: 90vh;
    /* max-height set to 90% of the viewport height */
    overflow-y: auto;
    /* Enable vertical scrolling */
    overflow-x: hidden;
    /* Hide horizontal scroll */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1)
    }
h2 {
    margin: 0 0 20px 0;
    font-size: 24px;
    color: white
    }
.buttons {
    display: flex;
    justify-content: space-between
    }
a {
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    border: none;
    border-radius: 5px
    }
.yes-PunchCard-btn {
    background-color: #fff000;
    color: black;
    /* box-shadow: 0 0 10px #fff000, 0 0 20px #fff000, 0 0 30px #fff000, 0 0 40px #fff000; */
    transition: box-shadow 0.3s ease-in-out
    }
.no-PunchCard-btn {
    background-color: #f44336;
    color: white
    }
select {
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
    font-size: 18px;
    border-radius: 5px
    }
.slider-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    /* some space before and after the slider */
    }
.slider-container span {
    margin: 0 20px;
    /* Increase spacing */
    color: white;
    font-size: 16px
    }
.slider-container label {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px
    }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #646464;
    transition: 0.4s;
    border-radius: 34px
    }
.buttonsPunch {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* Add this line to make the buttons wrap to the next line */
    height: auto;
    /* Adjust this as needed */
    margin-bottom: 20px;
    /* some space after the buttons */
    }
.option-btn {
    background-color: #181818;
    border: 2px solid #fff000;
    color: white;
    flex-grow: 1;
    margin-right: 3%;
    /* Changed from fixed pixel value to percentage */
    margin-bottom: 5%;
    /* Added a bottom margin for vertical spacing */
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    padding: 10px 20px;
    text-align: center;
    box-sizing: border-box;
    /* This ensures padding and border are included in width */
    }
.option-btn.selected {
    background-color: #fff000;
    color: black
    }
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px
    }
th, td {
    text-align: center;
    padding: 8px;
    border-bottom: 1px solid #ddd
    }
th {
    background-color: #4c93af;
    color: white
    }
tr.highlightRow {
    color: #fff000;
    font-weight: bolder
    }
#fallbackDiv {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold
    }</style></body></html>