From a4fc32f795ff28f4d123314069f7905979e56649 Mon Sep 17 00:00:00 2001
From: Charles Tang <75450612+charlestang06@users.noreply.github.com>
Date: Wed, 4 Dec 2024 02:49:36 -0500
Subject: [PATCH] revert to previous commit

---
 .history/necysc_app/forms_20241203231401.py   |   60 -
 .history/necysc_app/forms_20241203235450.py   |   72 -
 .history/necysc_app/forms_20241203235454.py   |   72 -
 .history/necysc_app/forms_20241203235720.py   |   72 -
 .history/necysc_app/forms_20241204002348.py   |  165 -
 .history/necysc_app/forms_20241204002616.py   |  157 -
 .history/necysc_app/forms_20241204004808.py   |   61 -
 .history/necysc_app/models_20241204003103.py  |  263 --
 .history/necysc_app/models_20241204003124.py  |  263 --
 .../applicant_home_20241203231401.css         |   95 -
 .../applicant_home_20241204012117.css         |  106 -
 .../applicant_home_20241204012131.css         |  112 -
 .../applicant_home_20241204012628.css         |   96 -
 .../necysc_app/login_20241203231402.css       |  109 -
 .../necysc_app/login_20241203232337.css       |  109 -
 .../necysc_app/style_20241203231402.css       |   50 -
 .../necysc_app/style_20241203233530.css       |   77 -
 .../necysc_app/style_20241203233534.css       |   51 -
 .../necysc_app/style_20241203233539.css       |  102 -
 .../necysc_app/style_20241203233837.css       |   51 -
 .../necysc_app/style_20241203233951.css       |   91 -
 .../necysc_app/style_20241203234934.css       |   91 -
 .../necysc_app/style_20241203234937.css       |   91 -
 .../necysc_app/style_20241203234941.css       |   91 -
 .../necysc_app/style_20241203234942.css       |   91 -
 .../necysc_app/style_20241203234950.css       |   91 -
 .../necysc_app/style_20241203234955.css       |   91 -
 .../necysc_app/style_20241203235002.css       |   92 -
 .../necysc_app/style_20241203235005.css       |   93 -
 .../necysc_app/style_20241203235008.css       |   92 -
 .../necysc_app/style_20241203235010.css       |   92 -
 .../necysc_app/style_20241203235013.css       |   92 -
 .../necysc_app/style_20241203235016.css       |   52 -
 .../necysc_app/style_20241203235137.css       |   92 -
 .../necysc_app/style_20241204001451.css       |   97 -
 .../necysc_app/style_20241204010601.css       |  109 -
 .../necysc_app/style_20241204010604.css       |  109 -
 .../necysc_app/style_20241204010607.css       |  109 -
 .../necysc_app/style_20241204010608.css       |  109 -
 .../necysc_app/style_20241204010614.css       |  109 -
 .../necysc_app/style_20241204010617.css       |  109 -
 .../necysc_app/style_20241204010618.css       |  109 -
 .../necysc_app/style_20241204010620.css       |  108 -
 .../necysc_app/style_20241204010622.css       |  109 -
 .../necysc_app/style_20241204010624.css       |  109 -
 .../necysc_app/style_20241204011112.css       |  107 -
 .../necysc_app/style_20241204011128.css       |  107 -
 .../necysc_app/style_20241204011130.css       |  107 -
 .../necysc_app/style_20241204011131.css       |  107 -
 .../necysc_app/style_20241204011133.css       |  107 -
 .../necysc_app/style_20241204011427.css       |  107 -
 .../necysc_app/style_20241204011430.css       |  107 -
 .../necysc_app/style_20241204011433.css       |  107 -
 .../necysc_app/style_20241204011435.css       |  107 -
 .../necysc_app/style_20241204011437.css       |  106 -
 .../necysc_app/style_20241204012612.css       |  107 -
 .../necysc_app/style_20241204012614.css       |  106 -
 .../necysc_app/style_20241204013448.css       |  110 -
 .../necysc_app/style_20241204015102.css       |  119 -
 .../necysc_app/style_20241204015105.css       |  119 -
 .../necysc_app/style_20241204015108.css       |  119 -
 .../necysc_app/style_20241204015127.css       |  119 -
 .../necysc_app/style_20241204015134.css       |  118 -
 .../applicant/index_20241203231402.html       |   50 -
 .../applicant/index_20241204013114.html       |   51 -
 .../applicant/index_20241204013140.html       |   83 -
 .../applicant/index_20241204013144.html       |   83 -
 .../applicant/index_20241204013146.html       |   83 -
 .../applicant/index_20241204013149.html       |   83 -
 .../applicant/index_20241204013151.html       |   83 -
 .../applicant/index_20241204013154.html       |   83 -
 .../applicant/index_20241204013156.html       |   83 -
 .../applicant/index_20241204013341.html       |   99 -
 .../applicant/index_20241204013349.html       |  100 -
 .../applicant/index_20241204013501.html       |  100 -
 .../applicant/index_20241204013613.html       |  100 -
 .../applicant/index_20241204013627.html       |  100 -
 .../applicant/index_20241204013631.html       |   92 -
 .../applicant/index_20241204013632.html       |   92 -
 .../applicant/index_20241204013640.html       |  100 -
 .../applicant/index_20241204013655.html       |  100 -
 .../applicant/index_20241204013656.html       |  100 -
 .../applicant/index_20241204013658.html       |  100 -
 .../applicant/index_20241204013701.html       |  100 -
 .../applicant/index_20241204013702.html       |  100 -
 .../applicant/index_20241204013704.html       |  100 -
 .../applicant/index_20241204013707.html       |  100 -
 .../applicant/index_20241204013824.html       |  100 -
 .../applicant/index_20241204013826.html       |  112 -
 .../applicant/index_20241204013901.html       |  112 -
 .../applicant/index_20241204013903.html       |  112 -
 .../applicant/index_20241204013909.html       |  112 -
 .../applicant/index_20241204013926.html       |  101 -
 .../applicant/index_20241204013928.html       |  101 -
 .../applicant/index_20241204014101.html       |  112 -
 .../applicant/index_20241204014105.html       |  100 -
 .../applicant/index_20241204015253.html       |  100 -
 .../applicant/index_20241204015258.html       |  100 -
 .../applicant/index_20241204015302.html       |  100 -
 .../applicant/index_20241204015410.html       |  139 -
 .../applicant/index_20241204015420.html       |  139 -
 .../applicant/index_20241204015426.html       |  139 -
 .../applicant/index_20241204015438.html       |  139 -
 .../applicant/index_20241204015445.html       |  139 -
 .../applicant/index_20241204015449.html       |  122 -
 .../applicant/index_20241204015452.html       |  121 -
 .../applicant/index_20241204015457.html       |  139 -
 .../applicant/index_20241204015501.html       |  138 -
 .../applicant/index_20241204015509.html       |  134 -
 .../applicant/index_20241204015511.html       |  134 -
 .../applicant/index_20241204015518.html       |  133 -
 .../applicant/index_20241204015520.html       |  133 -
 .../applicant/index_20241204015522.html       |  133 -
 .../applicant/index_20241204015524.html       |  133 -
 .../applicant/index_20241204015526.html       |  133 -
 .../applicant/index_20241204015527.html       |  133 -
 .../applicant/index_20241204015533.html       |  127 -
 .../applicant/index_20241204015621.html       |  131 -
 .../applicant/index_20241204015727.html       |  131 -
 .../applicant/index_20241204015857.html       |  187 --
 .../applicant/index_20241204015902.html       |  187 --
 .../applicant/index_20241204015904.html       |  131 -
 .../applicant/index_20241204015918.html       |  140 -
 .../applicant/index_20241204015931.html       |  140 -
 .../applicant/index_20241204015940.html       |  140 -
 .../applicant/index_20241204015943.html       |  142 -
 .../applicant/index_20241204015955.html       |  143 -
 .../applicant/index_20241204020006.html       |  143 -
 .../applicant/index_20241204020008.html       |  143 -
 .../applicant/index_20241204020013.html       |  143 -
 .../applicant/index_20241204020014.html       |  143 -
 .../applicant/index_20241204020026.html       |  143 -
 .../applicant/index_20241204020032.html       |  143 -
 .../applicant/index_20241204020039.html       |  143 -
 .../applicant/index_20241204020044.html       |  143 -
 .../applicant/index_20241204020100.html       |  143 -
 .../applicant/index_20241204020106.html       |  143 -
 .../applicant/index_20241204020119.html       |  144 -
 .../applicant/index_20241204020204.html       |  153 -
 .../applicant/index_20241204020215.html       |  152 -
 .../applicant/index_20241204020223.html       |  152 -
 .../applicant/index_20241204020230.html       |  152 -
 .../applicant/index_20241204020236.html       |  152 -
 .../applicant/index_20241204020247.html       |  152 -
 .../applicant/index_20241204020253.html       |  152 -
 .../applicant/index_20241204020254.html       |  152 -
 .../applicant/index_20241204020301.html       |  152 -
 .../applicant/index_20241204020312.html       |  152 -
 .../applicant/index_20241204020314.html       |  152 -
 .../applicant/index_20241204020317.html       |  152 -
 .../applicant/index_20241204020318.html       |  152 -
 .../applicant/index_20241204020320.html       |  152 -
 .../applicant/index_20241204020322.html       |  152 -
 .../applicant/index_20241204020323.html       |  152 -
 .../applicant/index_20241204020325.html       |  152 -
 .../applicant/index_20241204020327.html       |  152 -
 .../applicant/index_20241204020329.html       |  152 -
 .../applicant/index_20241204020330.html       |  152 -
 .../applicant/index_20241204020331.html       |  152 -
 .../applicant/index_20241204020333.html       |  152 -
 .../applicant/index_20241204020334.html       |  152 -
 .../applicant/index_20241204020336.html       |  152 -
 .../applicant/index_20241204020338.html       |  152 -
 .../applicant/index_20241204020347.html       |  152 -
 .../applicant/index_20241204020349.html       |  152 -
 .../applicant/login_20241203231402.html       |   54 -
 .../applicant/login_20241204010644.html       |   54 -
 .../applicant/login_20241204010705.html       |   54 -
 .../applicant/login_20241204010707.html       |   54 -
 .../applicant/login_20241204010709.html       |   54 -
 .../applicant/login_20241204010710.html       |   54 -
 .../applicant/login_20241204010713.html       |   54 -
 .../applicant/login_20241204010720.html       |   54 -
 .../applicant/login_20241204010723.html       |   54 -
 .../applicant/login_20241204010852.html       |   54 -
 .../applicant/login_20241204010854.html       |   54 -
 .../applicant/login_20241204010858.html       |   54 -
 .../applicant/login_20241204011022.html       |   54 -
 .../applicant/login_20241204011047.html       |   54 -
 .../applicant/login_20241204011200.html       |   54 -
 .../applicant/login_20241204011201.html       |   54 -
 .../applicant/login_20241204011202.html       |   54 -
 .../applicant/login_20241204011204.html       |   54 -
 .../applicant/login_20241204011210.html       |   54 -
 .../applicant/login_20241204011212.html       |   54 -
 .../applicant/login_20241204011226.html       |   54 -
 .../applicant/login_20241204011228.html       |   54 -
 .../new_application_20241203231402.html       | 1384 --------
 .../new_application_20241204001431.html       | 1384 --------
 .../new_application_20241204003447.html       | 1385 --------
 .../new_application_20241204003452.html       | 1386 --------
 .../new_application_20241204003605.html       | 1386 --------
 .../new_application_20241204003610.html       | 1385 --------
 .../new_application_20241204003740.html       | 1386 --------
 .../new_application_20241204003743.html       | 1387 --------
 .../new_application_20241204003745.html       | 1388 --------
 .../new_application_20241204003746.html       | 1389 --------
 .../new_application_20241204003749.html       | 1390 --------
 .../new_application_20241204003751.html       | 1391 --------
 .../new_application_20241204003836.html       | 1390 --------
 .../new_application_20241204003838.html       | 1389 --------
 .../new_application_20241204003915.html       | 1390 --------
 .../new_application_20241204003917.html       | 1390 --------
 .../new_application_20241204003921.html       | 1391 --------
 .../new_application_20241204004052.html       | 1392 --------
 .../new_application_20241204004152.html       | 1393 --------
 .../new_application_20241204004200.html       | 1394 --------
 .../new_application_20241204004211.html       | 1395 --------
 .../new_application_20241204004317.html       | 1395 --------
 .../new_application_20241204004328.html       | 1395 --------
 .../new_application_20241204004413.html       | 1395 --------
 .../new_application_20241204004504.html       | 1394 --------
 .../new_application_20241204004521.html       | 1395 --------
 .../new_application_20241204004524.html       | 1396 --------
 .../new_application_20241204004550.html       | 1396 --------
 .../new_application_20241204004552.html       | 1395 --------
 .../new_application_20241204004622.html       | 1396 --------
 .../new_application_20241204004631.html       | 1397 ---------
 .../new_application_20241204005523.html       | 2794 -----------------
 .../new_application_20241204005525.html       | 2794 -----------------
 .../new_application_20241204005529.html       | 1397 ---------
 .../new_application_20241204005538.html       | 1397 ---------
 .../new_application_20241204005626.html       | 1397 ---------
 .../new_application_20241204005651.html       | 1397 ---------
 .../new_application_20241204005656.html       | 1397 ---------
 .../new_application_20241204005658.html       | 1397 ---------
 .../new_application_20241204005700.html       | 1397 ---------
 .../new_application_20241204005711.html       | 1397 ---------
 .../new_application_20241204005719.html       | 1397 ---------
 .../new_application_20241204005720.html       | 1397 ---------
 .../new_application_20241204005723.html       | 1398 ---------
 .../new_application_20241204005734.html       | 1398 ---------
 .../new_application_20241204005758.html       | 1398 ---------
 .../new_application_20241204005801.html       | 1398 ---------
 .../new_application_20241204005808.html       | 1398 ---------
 .../new_application_20241204005908.html       | 1398 ---------
 .../new_application_20241204005912.html       | 1398 ---------
 .../new_application_20241204005915.html       | 1398 ---------
 .../new_application_20241204005921.html       | 1398 ---------
 .../applicant/register_20241203231402.html    |   64 -
 .../applicant/register_20241204012211.html    |   64 -
 .../applicant/register_20241204012219.html    |   64 -
 .../applicant/register_20241204012222.html    |   64 -
 .../necysc_app/footer_20241203231402.html     |   38 -
 .../necysc_app/footer_20241204014030.html     |   38 -
 .../necysc_app/footer_20241204014037.html     |   38 -
 .../necysc_app/footer_20241204014110.html     |   46 -
 .../necysc_app/footer_20241204014112.html     |   38 -
 .../necysc_app/footer_20241204014115.html     |   46 -
 .../necysc_app/footer_20241204014119.html     |   38 -
 .../necysc_app/footer_20241204014121.html     |   46 -
 .../necysc_app/footer_20241204014122.html     |   38 -
 .../necysc_app/footer_20241204014142.html     |   38 -
 .../necysc_app/footer_20241204014150.html     |   38 -
 .../necysc_app/footer_20241204014259.html     |   38 -
 .../necysc_app/footer_20241204014313.html     |   38 -
 .../necysc_app/footer_20241204014319.html     |   38 -
 .../necysc_app/footer_20241204014323.html     |   38 -
 .../necysc_app/footer_20241204014354.html     |   38 -
 .../necysc_app/footer_20241204014358.html     |   38 -
 .../necysc_app/footer_20241204014406.html     |   38 -
 .../necysc_app/footer_20241204014409.html     |   38 -
 .../necysc_app/footer_20241204014413.html     |   38 -
 .../necysc_app/footer_20241204014433.html     |   38 -
 .../necysc_app/footer_20241204014435.html     |   38 -
 .../necysc_app/footer_20241204014437.html     |   38 -
 .../necysc_app/footer_20241204014443.html     |   38 -
 .../necysc_app/footer_20241204014445.html     |   38 -
 .../necysc_app/footer_20241204014458.html     |   38 -
 .../necysc_app/footer_20241204014523.html     |   38 -
 .../necysc_app/footer_20241204014535.html     |   38 -
 .../necysc_app/footer_20241204014538.html     |   38 -
 .../necysc_app/footer_20241204014551.html     |   38 -
 .../necysc_app/footer_20241204014558.html     |   38 -
 .../necysc_app/footer_20241204014600.html     |   38 -
 .../necysc_app/footer_20241204014601.html     |   38 -
 .../necysc_app/footer_20241204014604.html     |   38 -
 .../necysc_app/footer_20241204014606.html     |   38 -
 .../necysc_app/footer_20241204014608.html     |   38 -
 .../necysc_app/footer_20241204014623.html     |   38 -
 .../necysc_app/footer_20241204014626.html     |   38 -
 .../necysc_app/footer_20241204014640.html     |   38 -
 .../necysc_app/footer_20241204014641.html     |   38 -
 .../necysc_app/footer_20241204014652.html     |   38 -
 .../necysc_app/footer_20241204014654.html     |   38 -
 .../necysc_app/footer_20241204014721.html     |   38 -
 .../necysc_app/footer_20241204014723.html     |   38 -
 .../necysc_app/footer_20241204014726.html     |   38 -
 .../necysc_app/footer_20241204014729.html     |   38 -
 .../necysc_app/footer_20241204014924.html     |   38 -
 .../necysc_app/footer_20241204014929.html     |   38 -
 .../necysc_app/footer_20241204015208.html     |   38 -
 .../necysc_app/footer_20241204015239.html     |   38 -
 .../necysc_app/navbar_20241203231402.html     |  196 --
 .../necysc_app/navbar_20241203233353.html     |  196 --
 .../necysc_app/navbar_20241203233354.html     |  250 --
 .../necysc_app/navbar_20241203233405.html     |  252 --
 .../necysc_app/navbar_20241203233912.html     |  282 --
 .../necysc_app/navbar_20241203234105.html     |  282 --
 .../necysc_app/navbar_20241203234814.html     |  282 --
 .../necysc_app/navbar_20241203234823.html     |  282 --
 .../necysc_app/navbar_20241203234827.html     |  283 --
 .../necysc_app/navbar_20241203234833.html     |  283 --
 .../necysc_app/navbar_20241203234837.html     |  283 --
 .../necysc_app/navbar_20241203235143.html     |  282 --
 .../necysc_app/navbar_20241204004948.html     |  281 --
 .../necysc_app/navbar_20241204004950.html     |  280 --
 .../necysc_app/navbar_20241204004953.html     |  279 --
 .../necysc_app/navbar_20241204004955.html     |  282 --
 .../necysc_app/navbar_20241204004956.html     |  282 --
 .../necysc_app/navbar_20241204010013.html     |  205 --
 .../necysc_app/navbar_20241204010016.html     |  204 --
 .../necysc_app/navbar_20241204010018.html     |  203 --
 .../necysc_app/navbar_20241204010020.html     |  204 --
 .../necysc_app/navbar_20241204010022.html     |  204 --
 necysc_app/forms.py                           |    3 +-
 necysc_app/migrations/0001_initial.py         |  204 --
 necysc_app/migrations/__init__.py             |    0
 necysc_app/models.py                          |    2 +-
 .../static/necysc_app/applicant_home.css      |    3 +-
 necysc_app/static/necysc_app/login.css        |    2 +-
 necysc_app/static/necysc_app/style.css        |   70 +-
 .../templates/necysc_app/applicant/index.html |  118 +-
 .../templates/necysc_app/applicant/login.html |    6 +-
 .../necysc_app/applicant/new_application.html |   40 +-
 necysc_app/templates/necysc_app/footer.html   |   24 +-
 necysc_app/templates/necysc_app/navbar.html   |  128 +-
 327 files changed, 101 insertions(+), 104246 deletions(-)
 delete mode 100644 .history/necysc_app/forms_20241203231401.py
 delete mode 100644 .history/necysc_app/forms_20241203235450.py
 delete mode 100644 .history/necysc_app/forms_20241203235454.py
 delete mode 100644 .history/necysc_app/forms_20241203235720.py
 delete mode 100644 .history/necysc_app/forms_20241204002348.py
 delete mode 100644 .history/necysc_app/forms_20241204002616.py
 delete mode 100644 .history/necysc_app/forms_20241204004808.py
 delete mode 100644 .history/necysc_app/models_20241204003103.py
 delete mode 100644 .history/necysc_app/models_20241204003124.py
 delete mode 100644 .history/necysc_app/static/necysc_app/applicant_home_20241203231401.css
 delete mode 100644 .history/necysc_app/static/necysc_app/applicant_home_20241204012117.css
 delete mode 100644 .history/necysc_app/static/necysc_app/applicant_home_20241204012131.css
 delete mode 100644 .history/necysc_app/static/necysc_app/applicant_home_20241204012628.css
 delete mode 100644 .history/necysc_app/static/necysc_app/login_20241203231402.css
 delete mode 100644 .history/necysc_app/static/necysc_app/login_20241203232337.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203231402.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203233530.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203233534.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203233539.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203233837.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203233951.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203234934.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203234937.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203234941.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203234942.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203234950.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203234955.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203235002.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203235005.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203235008.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203235010.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203235013.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203235016.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241203235137.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204001451.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204010601.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204010604.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204010607.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204010608.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204010614.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204010617.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204010618.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204010620.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204010622.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204010624.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204011112.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204011128.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204011130.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204011131.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204011133.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204011427.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204011430.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204011433.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204011435.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204011437.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204012612.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204012614.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204013448.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204015102.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204015105.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204015108.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204015127.css
 delete mode 100644 .history/necysc_app/static/necysc_app/style_20241204015134.css
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241203231402.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013114.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013140.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013144.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013146.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013149.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013151.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013154.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013156.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013341.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013349.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013501.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013613.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013627.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013631.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013632.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013640.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013655.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013656.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013658.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013701.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013702.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013704.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013707.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013824.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013826.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013901.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013903.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013909.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013926.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204013928.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204014101.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204014105.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015253.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015258.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015302.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015410.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015420.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015426.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015438.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015445.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015449.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015452.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015457.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015501.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015509.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015511.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015518.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015520.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015522.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015524.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015526.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015527.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015533.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015621.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015727.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015857.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015902.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015904.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015918.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015931.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015940.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015943.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204015955.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020006.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020008.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020013.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020014.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020026.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020032.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020039.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020044.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020100.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020106.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020119.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020204.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020215.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020223.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020230.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020236.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020247.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020253.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020254.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020301.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020312.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020314.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020317.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020318.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020320.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020322.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020323.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020325.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020327.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020329.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020330.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020331.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020333.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020334.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020336.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020338.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020347.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/index_20241204020349.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241203231402.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204010644.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204010705.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204010707.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204010709.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204010710.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204010713.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204010720.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204010723.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204010852.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204010854.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204010858.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204011022.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204011047.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204011200.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204011201.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204011202.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204011204.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204011210.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204011212.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204011226.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/login_20241204011228.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241203231402.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204001431.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204003447.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204003452.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204003605.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204003610.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204003740.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204003743.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204003745.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204003746.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204003749.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204003751.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204003836.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204003838.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204003915.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204003917.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204003921.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204004052.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204004152.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204004200.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204004211.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204004317.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204004328.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204004413.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204004504.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204004521.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204004524.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204004550.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204004552.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204004622.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204004631.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005523.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005525.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005529.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005538.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005626.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005651.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005656.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005658.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005700.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005711.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005719.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005720.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005723.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005734.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005758.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005801.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005808.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005908.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005912.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005915.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/new_application_20241204005921.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/register_20241203231402.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/register_20241204012211.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/register_20241204012219.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/applicant/register_20241204012222.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241203231402.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014030.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014037.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014110.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014112.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014115.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014119.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014121.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014122.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014142.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014150.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014259.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014313.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014319.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014323.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014354.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014358.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014406.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014409.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014413.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014433.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014435.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014437.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014443.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014445.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014458.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014523.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014535.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014538.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014551.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014558.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014600.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014601.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014604.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014606.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014608.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014623.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014626.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014640.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014641.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014652.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014654.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014721.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014723.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014726.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014729.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014924.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204014929.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204015208.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/footer_20241204015239.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241203231402.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241203233353.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241203233354.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241203233405.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241203233912.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241203234105.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241203234814.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241203234823.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241203234827.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241203234833.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241203234837.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241203235143.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241204004948.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241204004950.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241204004953.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241204004955.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241204004956.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241204010013.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241204010016.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241204010018.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241204010020.html
 delete mode 100644 .history/necysc_app/templates/necysc_app/navbar_20241204010022.html
 delete mode 100644 necysc_app/migrations/__init__.py

diff --git a/.history/necysc_app/forms_20241203231401.py b/.history/necysc_app/forms_20241203231401.py
deleted file mode 100644
index 204fc7e5..00000000
--- a/.history/necysc_app/forms_20241203231401.py
+++ /dev/null
@@ -1,60 +0,0 @@
-from django.forms import ModelForm
-from django.contrib.auth.forms import UserCreationForm, AuthenticationForm
-from django import forms
-from django.contrib.auth.models import User
-from .models import Applicant
-
-class CreateUserForm(UserCreationForm):
-    class Meta:
-        model = User
-        fields = ['username', 'email', 'password1', 'password2']
-
-class CreateAuthenticationForm(AuthenticationForm):    
-    class Meta:
-        model = User
-        fields = ['username', 'password']
-
-class ApplicationForm(forms.ModelForm):
-    class Meta:
-        model = Applicant
-        fields = [# camper info
-                  'applicant_fname', 'applicant_lname', 'applicant_chinese_name', 'applicant_email',
-                  'applicant_bday', 'applicant_sex', 'applicant_grade', 'applicant_shirt_size', 
-                  'program', 
-                  'street_address', 'city', 'state', 'zip_code',
-
-                  # parent/guardian/emergency contact info
-                  'parent1_fname', 'parent1_lname', 'parent1_relationship', 'parent1_phone', 'parent1_email', 'parent1_for_POD',
-                  'parent2_fname', 'parent2_lname', 'parent2_relationship', 'parent2_phone', 'parent2_email', 'parent2_for_POD',
-                  'additional_emergency_contact_fname', 'additional_emergency_contact_lname', 'additional_emergency_contact_relationship', 'additional_emergency_contact_phone',
-
-                  # POD preference
-                  'interest_in_POD_lead',
-
-                  # roommate requests
-                  'preferred_roommate',
-
-                  # medical info
-                  'insurance_provider', 'subscriber_name', 'primary_physician_name', 'primary_physician_phone',
-                  'grant_hospital_permission', 'grant_medical_treatment_permission', 'grant_first_aid_permission', 'grant_meds_permission', 'grant_bug_spray_permission', 'grant_skin_treatment_permission',
-                  'allergies', 'allergies_description', 'initial_for_allergy_treatment', 'epi_pen_prescribed',
-                  'social_emotional_concerns',
-                  'wear_glasses', 'wear_contacts', 'wear_hearing_aids',
-                  'medication', 'medication_description', 
-                  'opt_out_activities', 'medical_comments',
-                  'signature',
-
-                  # pickup info
-                  'allowed_pickup_persons', 'available_for_carpool', 
-
-                  # payment info
-                  'payment_camp', 'payment_pod', 'payment_donation', 'payment_total', 'financial_aid_requested',
-                  
-                  # additional info
-                  'listing_on_weekbook', 'camper_contact_email', 
-                  'interest_in_committee', 'interest_in_wkbook_ads',
-                  'referrals', 'heard_from',
-                
-                  # important docs
-                  'camp_rule_agreement', 'liability_agreement',
-                  ]
\ No newline at end of file
diff --git a/.history/necysc_app/forms_20241203235450.py b/.history/necysc_app/forms_20241203235450.py
deleted file mode 100644
index 0c53c6c0..00000000
--- a/.history/necysc_app/forms_20241203235450.py
+++ /dev/null
@@ -1,72 +0,0 @@
-from django.forms import ModelForm
-from django.contrib.auth.forms import UserCreationForm, AuthenticationForm
-from django import forms
-from django.contrib.auth.models import User
-from .models import Applicant
-
-class CreateUserForm(UserCreationForm):
-    class Meta:
-        model = User
-        fields = ['username', 'email', 'password1', 'password2']
-
-class CreateAuthenticationForm(AuthenticationForm):    
-    class Meta:
-        model = User
-        fields = ['username', 'password']
-
-class ApplicationForm(forms.ModelForm):
-    class Meta:
-        model = Applicant
-        fields = [# camper info
-                  'applicant_fname', 'applicant_lname', 'applicant_chinese_name', 'applicant_email',
-                  'applicant_bday', 'applicant_sex', 'applicant_grade', 'applicant_shirt_size', 
-                  'program', 
-                  'street_address', 'city', 'state', 'zip_code',
-
-                  # parent/guardian/emergency contact info
-                  'parent1_fname', 'parent1_lname', 'parent1_relationship', 'parent1_phone', 'parent1_email', 'parent1_for_POD',
-                  'parent2_fname', 'parent2_lname', 'parent2_relationship', 'parent2_phone', 'parent2_email', 'parent2_for_POD',
-                  'additional_emergency_contact_fname', 'additional_emergency_contact_lname', 'additional_emergency_contact_relationship', 'additional_emergency_contact_phone',
-
-                  # POD preference
-                  'interest_in_POD_lead',
-
-                  # roommate requests
-                  'preferred_roommate',
-
-                  # medical info
-                  'insurance_provider', 'subscriber_name', 'primary_physician_name', 'primary_physician_phone',
-                  'grant_hospital_permission', 'grant_medical_treatment_permission', 'grant_first_aid_permission', 'grant_meds_permission', 'grant_bug_spray_permission', 'grant_skin_treatment_permission',
-                  'allergies', 'allergies_description', 'initial_for_allergy_treatment', 'epi_pen_prescribed',
-                  'social_emotional_concerns',
-                  'wear_glasses', 'wear_contacts', 'wear_hearing_aids',
-                  'medication', 'medication_description', 
-                  'opt_out_activities', 'medical_comments',
-                  'signature',
-
-                  # pickup info
-                  'allowed_pickup_persons', 'available_for_carpool', 
-
-                  # payment info
-                  'payment_camp', 'payment_pod', 'payment_donation', 'payment_total', 'financial_aid_requested',
-                  
-                  # additional info
-                  'listing_on_weekbook', 'camper_contact_email', 
-                  'interest_in_committee', 'interest_in_wkbook_ads',
-                  'referrals', 'heard_from',
-                
-                  # important docs
-                  'camp_rule_agreement', 'liability_agreement',
-                  ]
-        applicant_chinese_name = forms.CharField(required=False, label="Chinese Name (Optional)")
-    parent2_phone = forms.CharField(required=False, label="Parent 2 Phone (Optional)")
-    allergies = forms.CharField(
-        required=False,
-        label="Allergies (Optional)",
-        widget=forms.Textarea(attrs={"rows": 3}),
-    )
-    signature = forms.CharField(
-        required=True,
-        label="Signature",
-        help_text="Your signature is required to complete this form.",
-    )
\ No newline at end of file
diff --git a/.history/necysc_app/forms_20241203235454.py b/.history/necysc_app/forms_20241203235454.py
deleted file mode 100644
index 0246944d..00000000
--- a/.history/necysc_app/forms_20241203235454.py
+++ /dev/null
@@ -1,72 +0,0 @@
-from django.forms import ModelForm
-from django.contrib.auth.forms import UserCreationForm, AuthenticationForm
-from django import forms
-from django.contrib.auth.models import User
-from .models import Applicant
-
-class CreateUserForm(UserCreationForm):
-    class Meta:
-        model = User
-        fields = ['username', 'email', 'password1', 'password2']
-
-class CreateAuthenticationForm(AuthenticationForm):    
-    class Meta:
-        model = User
-        fields = ['username', 'password']
-
-class ApplicationForm(forms.ModelForm):
-    class Meta:
-        model = Applicant
-        fields = [# camper info
-                  'applicant_fname', 'applicant_lname', 'applicant_chinese_name', 'applicant_email',
-                  'applicant_bday', 'applicant_sex', 'applicant_grade', 'applicant_shirt_size', 
-                  'program', 
-                  'street_address', 'city', 'state', 'zip_code',
-
-                  # parent/guardian/emergency contact info
-                  'parent1_fname', 'parent1_lname', 'parent1_relationship', 'parent1_phone', 'parent1_email', 'parent1_for_POD',
-                  'parent2_fname', 'parent2_lname', 'parent2_relationship', 'parent2_phone', 'parent2_email', 'parent2_for_POD',
-                  'additional_emergency_contact_fname', 'additional_emergency_contact_lname', 'additional_emergency_contact_relationship', 'additional_emergency_contact_phone',
-
-                  # POD preference
-                  'interest_in_POD_lead',
-
-                  # roommate requests
-                  'preferred_roommate',
-
-                  # medical info
-                  'insurance_provider', 'subscriber_name', 'primary_physician_name', 'primary_physician_phone',
-                  'grant_hospital_permission', 'grant_medical_treatment_permission', 'grant_first_aid_permission', 'grant_meds_permission', 'grant_bug_spray_permission', 'grant_skin_treatment_permission',
-                  'allergies', 'allergies_description', 'initial_for_allergy_treatment', 'epi_pen_prescribed',
-                  'social_emotional_concerns',
-                  'wear_glasses', 'wear_contacts', 'wear_hearing_aids',
-                  'medication', 'medication_description', 
-                  'opt_out_activities', 'medical_comments',
-                  'signature',
-
-                  # pickup info
-                  'allowed_pickup_persons', 'available_for_carpool', 
-
-                  # payment info
-                  'payment_camp', 'payment_pod', 'payment_donation', 'payment_total', 'financial_aid_requested',
-                  
-                  # additional info
-                  'listing_on_weekbook', 'camper_contact_email', 
-                  'interest_in_committee', 'interest_in_wkbook_ads',
-                  'referrals', 'heard_from',
-                
-                  # important docs
-                  'camp_rule_agreement', 'liability_agreement',
-                  ]
-    applicant_chinese_name = forms.CharField(required=False, label="Chinese Name (Optional)")
-    parent2_phone = forms.CharField(required=False, label="Parent 2 Phone (Optional)")
-    allergies = forms.CharField(
-        required=False,
-        label="Allergies (Optional)",
-        widget=forms.Textarea(attrs={"rows": 3}),
-    )
-    signature = forms.CharField(
-        required=True,
-        label="Signature",
-        help_text="Your signature is required to complete this form.",
-    )
\ No newline at end of file
diff --git a/.history/necysc_app/forms_20241203235720.py b/.history/necysc_app/forms_20241203235720.py
deleted file mode 100644
index cb375de2..00000000
--- a/.history/necysc_app/forms_20241203235720.py
+++ /dev/null
@@ -1,72 +0,0 @@
-from django.forms import ModelForm
-from django.contrib.auth.forms import UserCreationForm, AuthenticationForm
-from django import forms
-from django.contrib.auth.models import User
-from .models import Applicant
-
-class CreateUserForm(UserCreationForm):
-    class Meta:
-        model = User
-        fields = ['username', 'email', 'password1', 'password2']
-
-class CreateAuthenticationForm(AuthenticationForm):    
-    class Meta:
-        model = User
-        fields = ['username', 'password']
-
-class ApplicationForm(forms.ModelForm):
-    class Meta:
-        model = Applicant
-        fields = [# camper info
-                  'applicant_fname', 'applicant_lname', 'applicant_chinese_name', 'applicant_email',
-                  'applicant_bday', 'applicant_sex', 'applicant_grade', 'applicant_shirt_size', 
-                  'program', 
-                  'street_address', 'city', 'state', 'zip_code',
-
-                  # parent/guardian/emergency contact info
-                  'parent1_fname', 'parent1_lname', 'parent1_relationship', 'parent1_phone', 'parent1_email', 'parent1_for_POD',
-                  'parent2_fname', 'parent2_lname', 'parent2_relationship', 'parent2_phone', 'parent2_email', 'parent2_for_POD',
-                  'additional_emergency_contact_fname', 'additional_emergency_contact_lname', 'additional_emergency_contact_relationship', 'additional_emergency_contact_phone',
-
-                  # POD preference
-                  'interest_in_POD_lead',
-
-                  # roommate requests
-                  'preferred_roommate',
-
-                  # medical info
-                  'insurance_provider', 'subscriber_name', 'primary_physician_name', 'primary_physician_phone',
-                  'grant_hospital_permission', 'grant_medical_treatment_permission', 'grant_first_aid_permission', 'grant_meds_permission', 'grant_bug_spray_permission', 'grant_skin_treatment_permission',
-                  'allergies', 'allergies_description', 'initial_for_allergy_treatment', 'epi_pen_prescribed',
-                  'social_emotional_concerns',
-                  'wear_glasses', 'wear_contacts', 'wear_hearing_aids',
-                  'medication', 'medication_description', 
-                  'opt_out_activities', 'medical_comments',
-                  'signature',
-
-                  # pickup info
-                  'allowed_pickup_persons', 'available_for_carpool', 
-
-                  # payment info
-                  'payment_camp', 'payment_pod', 'payment_donation', 'payment_total', 'financial_aid_requested',
-                  
-                  # additional info
-                  'listing_on_weekbook', 'camper_contact_email', 
-                  'interest_in_committee', 'interest_in_wkbook_ads',
-                  'referrals', 'heard_from',
-                
-                  # important docs
-                  'camp_rule_agreement', 'liability_agreement',
-                  ]
-        applicant_chinese_name = forms.CharField(required=False, label="Chinese Name (Optional)")
-        parent2_phone = forms.CharField(required=False, label="Parent 2 Phone (Optional)")
-        allergies = forms.CharField(
-            required=False,
-            label="Allergies (Optional)",
-            widget=forms.Textarea(attrs={"rows": 3}),
-        )
-        signature = forms.CharField(
-            required=True,
-            label="Signature",
-            help_text="Your signature is required to complete this form.",
-        )
\ No newline at end of file
diff --git a/.history/necysc_app/forms_20241204002348.py b/.history/necysc_app/forms_20241204002348.py
deleted file mode 100644
index 9303abbe..00000000
--- a/.history/necysc_app/forms_20241204002348.py
+++ /dev/null
@@ -1,165 +0,0 @@
-from django.forms import ModelForm
-from django.contrib.auth.forms import UserCreationForm, AuthenticationForm
-from django import forms
-from django.contrib.auth.models import User
-from .models import Applicant
-
-class CreateUserForm(UserCreationForm):
-    class Meta:
-        model = User
-        fields = ['username', 'email', 'password1', 'password2']
-
-class CreateAuthenticationForm(AuthenticationForm):    
-    class Meta:
-        model = User
-        fields = ['username', 'password']
-
-class ApplicationForm(forms.ModelForm):
-    class Meta:
-        model = Applicant
-        fields = [# camper info
-                  'applicant_fname', 'applicant_lname', 'applicant_chinese_name', 'applicant_email',
-                  'applicant_bday', 'applicant_sex', 'applicant_grade', 'applicant_shirt_size', 
-                  'program', 
-                  'street_address', 'city', 'state', 'zip_code',
-
-                  # parent/guardian/emergency contact info
-                  'parent1_fname', 'parent1_lname', 'parent1_relationship', 'parent1_phone', 'parent1_email', 'parent1_for_POD',
-                  'parent2_fname', 'parent2_lname', 'parent2_relationship', 'parent2_phone', 'parent2_email', 'parent2_for_POD',
-                  'additional_emergency_contact_fname', 'additional_emergency_contact_lname', 'additional_emergency_contact_relationship', 'additional_emergency_contact_phone',
-
-                  # POD preference
-                  'interest_in_POD_lead',
-
-                  # roommate requests
-                  'preferred_roommate',
-
-                  # medical info
-                  'insurance_provider', 'subscriber_name', 'primary_physician_name', 'primary_physician_phone',
-                  'grant_hospital_permission', 'grant_medical_treatment_permission', 'grant_first_aid_permission', 'grant_meds_permission', 'grant_bug_spray_permission', 'grant_skin_treatment_permission',
-                  'allergies', 'allergies_description', 'initial_for_allergy_treatment', 'epi_pen_prescribed',
-                  'social_emotional_concerns',
-                  'wear_glasses', 'wear_contacts', 'wear_hearing_aids',
-                  'medication', 'medication_description', 
-                  'opt_out_activities', 'medical_comments',
-                  'signature',
-
-                  # pickup info
-                  'allowed_pickup_persons', 'available_for_carpool', 
-
-                  # payment info
-                  'payment_camp', 'payment_pod', 'payment_donation', 'payment_total', 'financial_aid_requested',
-                  
-                  # additional info
-                  'listing_on_weekbook', 'camper_contact_email', 
-                  'interest_in_committee', 'interest_in_wkbook_ads',
-                  'referrals', 'heard_from',
-                
-                  # important docs
-                  'camp_rule_agreement', 'liability_agreement',
-                  ]
-        # Optional fields
-    applicant_chinese_name = forms.CharField(
-        required=False,
-        label="Chinese Name (Optional)"
-    )
-    parent2_fname = forms.CharField(
-        required=False,
-        label="Parent 2 First Name (Optional)"
-    )
-    parent2_lname = forms.CharField(
-        required=False,
-        label="Parent 2 Last Name (Optional)"
-    )
-    parent2_relationship = forms.CharField(
-        required=False,
-        label="Parent 2 Relationship (Optional)"
-    )
-    parent2_phone = forms.CharField(
-        required=False,
-        label="Parent 2 Phone (Optional)"
-    )
-    parent2_email = forms.EmailField(
-        required=False,
-        label="Parent 2 Email (Optional)"
-    )
-    allergies = forms.CharField(
-        required=False,
-        label="Allergies (Optional)",
-        widget=forms.Textarea(attrs={"rows": 3}),
-    )
-    preferred_roommate = forms.CharField(
-        required=False,
-        label="Preferred Roommate (Optional)"
-    )
-    social_emotional_concerns = forms.CharField(
-        required=False,
-        label="Social/Emotional Concerns (Optional)"
-    )
-    wear_glasses = forms.BooleanField(
-        required=False,
-        label="Wears Glasses (Optional)"
-    )
-    wear_contacts = forms.BooleanField(
-        required=False,
-        label="Wears Contacts (Optional)"
-    )
-    wear_hearing_aids = forms.BooleanField(
-        required=False,
-        label="Wears Hearing Aids (Optional)"
-    )
-    medication = forms.BooleanField(
-        required=False,
-        label="Takes Medication (Optional)"
-    )
-    medication_description = forms.CharField(
-        required=False,
-        label="Medication Description (Optional)"
-    )
-    opt_out_activities = forms.CharField(
-        required=False,
-        label="Opt-Out Activities (Optional)"
-    )
-    available_for_carpool = forms.BooleanField(
-        required=False,
-        label="Available for Carpool (Optional)"
-    )
-    payment_pod = forms.DecimalField(
-        required=False,
-        label="POD Waiver Fee (Optional)"
-    )
-    payment_donation = forms.DecimalField(
-        required=False,
-        label="Voluntary Donation (Optional)"
-    )
-    listing_on_weekbook = forms.BooleanField(
-        required=False,
-        label="Listing on Weekbook (Optional)"
-    )
-    camper_contact_email = forms.EmailField(
-        required=False,
-        label="Camper Contact Email (Optional)"
-    )
-    interest_in_committee = forms.BooleanField(
-        required=False,
-        label="Interest in Committee (Optional)"
-    )
-    interest_in_wkbook_ads = forms.BooleanField(
-        required=False,
-        label="Interest in Weekbook Ads (Optional)"
-    )
-    referrals = forms.CharField(
-        required=False,
-        label="Referrals (Optional)"
-    )
-    heard_from = forms.CharField(
-        required=False,
-        label="How Did You Hear About Us? (Optional)"
-    )
-
-    # Required fields (all others not explicitly listed as optional are required)
-    signature = forms.CharField(
-        required=True,
-        label="Signature",
-        help_text="Your signature is required to complete this form.",
-    )
\ No newline at end of file
diff --git a/.history/necysc_app/forms_20241204002616.py b/.history/necysc_app/forms_20241204002616.py
deleted file mode 100644
index 14200aa5..00000000
--- a/.history/necysc_app/forms_20241204002616.py
+++ /dev/null
@@ -1,157 +0,0 @@
-from django.forms import ModelForm
-from django.contrib.auth.forms import UserCreationForm, AuthenticationForm
-from django import forms
-from django.contrib.auth.models import User
-from .models import Applicant
-
-class CreateUserForm(UserCreationForm):
-    class Meta:
-        model = User
-        fields = ['username', 'email', 'password1', 'password2']
-
-class CreateAuthenticationForm(AuthenticationForm):    
-    class Meta:
-        model = User
-        fields = ['username', 'password']
-
-class ApplicationForm(forms.ModelForm):
-    class Meta:
-        model = Applicant
-        fields = [# camper info
-                  'applicant_fname', 'applicant_lname', 'applicant_chinese_name', 'applicant_email',
-                  'applicant_bday', 'applicant_sex', 'applicant_grade', 'applicant_shirt_size', 
-                  'program', 
-                  'street_address', 'city', 'state', 'zip_code',
-
-                  # parent/guardian/emergency contact info
-                  'parent1_fname', 'parent1_lname', 'parent1_relationship', 'parent1_phone', 'parent1_email', 'parent1_for_POD',
-                  'parent2_fname', 'parent2_lname', 'parent2_relationship', 'parent2_phone', 'parent2_email', 'parent2_for_POD',
-                  'additional_emergency_contact_fname', 'additional_emergency_contact_lname', 'additional_emergency_contact_relationship', 'additional_emergency_contact_phone',
-
-                  # POD preference
-                  'interest_in_POD_lead',
-
-                  # roommate requests
-                  'preferred_roommate',
-
-                  # medical info
-                  'insurance_provider', 'subscriber_name', 'primary_physician_name', 'primary_physician_phone',
-                  'grant_hospital_permission', 'grant_medical_treatment_permission', 'grant_first_aid_permission', 'grant_meds_permission', 'grant_bug_spray_permission', 'grant_skin_treatment_permission',
-                  'allergies', 'allergies_description', 'initial_for_allergy_treatment', 'epi_pen_prescribed',
-                  'social_emotional_concerns',
-                  'wear_glasses', 'wear_contacts', 'wear_hearing_aids',
-                  'medication', 'medication_description', 
-                  'opt_out_activities', 'medical_comments',
-                  'signature',
-
-                  # pickup info
-                  'allowed_pickup_persons', 'available_for_carpool', 
-
-                  # payment info
-                  'payment_camp', 'payment_pod', 'payment_donation', 'payment_total', 'financial_aid_requested',
-                  
-                  # additional info
-                  'listing_on_weekbook', 'camper_contact_email', 
-                  'interest_in_committee', 'interest_in_wkbook_ads',
-                  'referrals', 'heard_from',
-                
-                  # important docs
-                  'camp_rule_agreement', 'liability_agreement',
-                  ]
-        # Optional fields
-    applicant_chinese_name = forms.CharField(
-        required=False,
-        label="Chinese Name (Optional)"
-    )
-    parent2_fname = forms.CharField(
-        required=False,
-        label="Parent 2 First Name (Optional)"
-    )
-    parent2_lname = forms.CharField(
-        required=False,
-        label="Parent 2 Last Name (Optional)"
-    )
-    parent2_relationship = forms.CharField(
-        required=False,
-        label="Parent 2 Relationship (Optional)"
-    )
-    parent2_phone = forms.CharField(
-        required=False,
-        label="Parent 2 Phone (Optional)"
-    )
-    parent2_email = forms.EmailField(
-        required=False,
-        label="Parent 2 Email (Optional)"
-    )
-    allergies = forms.CharField(
-        required=False,
-        label="Allergies (Optional)",
-        widget=forms.Textarea(attrs={"rows": 3}),
-    )
-    preferred_roommate = forms.CharField(
-        required=False,
-        label="Preferred Roommate (Optional)"
-    )
-    social_emotional_concerns = forms.CharField(
-        required=False,
-        label="Social/Emotional Concerns (Optional)"
-    )
-    wear_glasses = forms.BooleanField(
-        required=False,
-        label="Wears Glasses (Optional)"
-    )
-    wear_contacts = forms.BooleanField(
-        required=False,
-        label="Wears Contacts (Optional)"
-    )
-    wear_hearing_aids = forms.BooleanField(
-        required=False,
-        label="Wears Hearing Aids (Optional)"
-    )
-    opt_out_activities = forms.CharField(
-        required=False,
-        label="Opt-Out Activities (Optional)"
-    )
-    available_for_carpool = forms.BooleanField(
-        required=False,
-        label="Available for Carpool (Optional)"
-    )
-    payment_pod = forms.DecimalField(
-        required=False,
-        label="POD Waiver Fee (Optional)"
-    )
-    payment_donation = forms.DecimalField(
-        required=False,
-        label="Voluntary Donation (Optional)"
-    )
-    listing_on_weekbook = forms.BooleanField(
-        required=False,
-        label="Listing on Weekbook (Optional)"
-    )
-    camper_contact_email = forms.EmailField(
-        required=False,
-        label="Camper Contact Email (Optional)"
-    )
-    interest_in_committee = forms.BooleanField(
-        required=False,
-        label="Interest in Committee (Optional)"
-    )
-    interest_in_wkbook_ads = forms.BooleanField(
-        required=False,
-        label="Interest in Weekbook Ads (Optional)"
-    )
-    referrals = forms.CharField(
-        required=False,
-        label="Referrals (Optional)"
-    )
-    heard_from = forms.CharField(
-        required=False,
-        label="How Did You Hear About Us? (Optional)"
-    )
-
-    # Required fields (all others not explicitly listed as optional are required)
-    signature = forms.CharField(
-        required=True,
-        label="Signature",
-        help_text="Your signature is required to complete this form.",
-    )
\ No newline at end of file
diff --git a/.history/necysc_app/forms_20241204004808.py b/.history/necysc_app/forms_20241204004808.py
deleted file mode 100644
index 7f330656..00000000
--- a/.history/necysc_app/forms_20241204004808.py
+++ /dev/null
@@ -1,61 +0,0 @@
-from django.forms import ModelForm
-from django.contrib.auth.forms import UserCreationForm, AuthenticationForm
-from django import forms
-from django.contrib.auth.models import User
-from .models import Applicant
-
-class CreateUserForm(UserCreationForm):
-    class Meta:
-        model = User
-        fields = ['username', 'email', 'password1', 'password2']
-
-class CreateAuthenticationForm(AuthenticationForm):    
-    class Meta:
-        model = User
-        fields = ['username', 'password']
-
-class ApplicationForm(forms.ModelForm):
-    class Meta:
-        model = Applicant
-        fields = [# camper info
-                  'applicant_fname', 'applicant_lname', 'applicant_chinese_name', 'applicant_email',
-                  'applicant_bday', 'applicant_sex', 'applicant_grade', 'applicant_shirt_size', 
-                  'program', 
-                  'street_address', 'city', 'state', 'zip_code',
-
-                  # parent/guardian/emergency contact info
-                  'parent1_fname', 'parent1_lname', 'parent1_relationship', 'parent1_phone', 'parent1_email', 'parent1_for_POD',
-                  'parent2_fname', 'parent2_lname', 'parent2_relationship', 'parent2_phone', 'parent2_email', 'parent2_for_POD',
-                  'additional_emergency_contact_fname', 'additional_emergency_contact_lname', 'additional_emergency_contact_relationship', 'additional_emergency_contact_phone',
-
-                  # POD preference
-                  'interest_in_POD_lead',
-
-                  # roommate requests
-                  'preferred_roommate',
-
-                  # medical info
-                  'insurance_provider', 'subscriber_name', 'primary_physician_name', 'primary_physician_phone',
-                  'grant_hospital_permission', 'grant_medical_treatment_permission', 'grant_first_aid_permission', 'grant_meds_permission', 'grant_bug_spray_permission', 'grant_skin_treatment_permission',
-                  'allergies', 'allergies_description', 'initial_for_allergy_treatment', 'epi_pen_prescribed',
-                  'social_emotional_concerns',
-                  'wear_glasses', 'wear_contacts', 'wear_hearing_aids',
-                  'medication', 'medication_description', 
-                  'opt_out_activities', 'medical_comments',
-                  'signature',
-
-                  # pickup info
-                  'allowed_pickup_persons', 'available_for_carpool', 
-
-                  # payment info
-                  'payment_camp', 'payment_pod', 'payment_donation', 'payment_total', 'financial_aid_requested',
-                  
-                  # additional info
-                  'listing_on_weekbook', 'camper_contact_email', 
-                  'interest_in_committee', 'interest_in_wkbook_ads',
-                  'referrals', 'heard_from',
-                
-                  # important docs
-                  'camp_rule_agreement', 'liability_agreement',
-                  ]
-      
\ No newline at end of file
diff --git a/.history/necysc_app/models_20241204003103.py b/.history/necysc_app/models_20241204003103.py
deleted file mode 100644
index 7f447e75..00000000
--- a/.history/necysc_app/models_20241204003103.py
+++ /dev/null
@@ -1,263 +0,0 @@
-from django import forms
-from django.db import models
-from django.contrib.auth.models import User
-import datetime
-from django.core.validators import MinValueValidator
-from solo.models import SingletonModel
-
-
-
-class Applicant(models.Model):
-    # choices for application status
-    APP_STATUS_CHOICES = {
-        "A": "Accepted",
-        "D": "Denied",
-        "P": "Pending",
-        "I": "Incomplete",
-    }
-    # choices for health record status
-    HEALTH_RECORD_STATUS_CHOICES = {
-        "NC": "Not checked",
-        "FU": "Needs follow up",
-        "A": "Approved",
-    }
-    # choices for parent relationship
-    PARENT_RELATIONSHIP_CHOICES = {
-        "F": "Father",
-        "M": "Mother",
-        "G": "Guardian",
-    }
-    # choices for applicant sex
-    SEX_CHOICES = {
-        "M": "Male",
-        "F": "Female",
-        "O": "Other",
-    }
-    SHIRT_SIZE_CHOICES = {
-        "YS": "Youth S",
-        "YM": "Youth M",
-        "YL": "Youth L",
-        "AS": "Adult S",
-        "AM": "Adult M",
-        "AL": "Adult L",
-        "AX": "Adult XL",
-    }
-    
-    # choices for program data
-    PROGRAM_CHOICES={
-        "D": "Day",
-        "ON": "Overnight",
-        "CIT": "CIT",
-        "C": "Counselor",
-        "OPS": "OPS",
-        "EA": "EA",
-    }
-
-    # choices for forms
-    HEALTH_FORM_RECEIVED_CHOICES={
-        "NS": "Not Submitted",
-        "P": "Pending",
-        "A": "Approved",
-    }
-    
-    user = models.ForeignKey(User, on_delete=models.CASCADE, blank=True, null=True)
-
-    # status data
-    created_at = models.DateTimeField(auto_now_add=True)
-    last_updated_at = models.DateTimeField(auto_now=True)
-    app_year = models.IntegerField(default=datetime.datetime.now().year)
-    app_status = models.CharField(
-        max_length=1,
-        choices=APP_STATUS_CHOICES,
-         default= "I"
-    )
-    # this should be hidden from the user
-    health_record_status = models.CharField(
-        max_length=2,
-        choices=HEALTH_RECORD_STATUS_CHOICES,
-        default="NC",
-    )
-
-    # personal data
-    applicant_fname = models.CharField(max_length=200, verbose_name="First Name")
-    applicant_lname = models.CharField(max_length=200, verbose_name="Last Name")
-    applicant_chinese_name = models.CharField(max_length=200, blank=True, null=True, verbose_name="Chinese Name") # optional
-    applicant_email = models.EmailField(verbose_name="Email",blank=False)
-
-    parent1_fname = models.CharField(max_length=200, verbose_name="Primary Contact First Name")
-    parent1_lname = models.CharField(max_length=200, verbose_name="Primary Contact Last Name")
-    parent1_relationship = models.CharField(
-        max_length=1,
-        choices=PARENT_RELATIONSHIP_CHOICES,
-        verbose_name="Primary Contact Relationship"
-    )
-    parent1_phone = models.CharField(max_length=15, verbose_name="Primary Contact Phone")
-    parent1_email = models.EmailField(verbose_name="Primary Contact Email")
-    parent1_for_POD = models.BooleanField(verbose_name="Primary Contact as POD")
-
-    parent2_fname = models.CharField(max_length=200, blank=True, null=True, verbose_name="Secondary Contact First Name") # optional
-    parent2_lname = models.CharField(max_length=200, blank=True, null=True, verbose_name="Secondary Contact Last Name") # optional
-    parent2_relationship = models.CharField(
-        max_length=1,
-        choices=PARENT_RELATIONSHIP_CHOICES,
-        blank=True, null=True, verbose_name="Secondary Contact Relationship") # optional
-    parent2_phone = models.CharField(max_length=15, blank=True, null=True, verbose_name="Secondary Contact Phone") # optional
-    parent2_email = models.EmailField(blank=True, null=True, verbose_name="Secondary Contact Email") # optional
-    parent2_for_POD = models.BooleanField(blank=True, null=True, verbose_name="Secondary Contact as POD") # optional
-
-    interest_in_POD_lead = models.BooleanField(verbose_name="Interest in POD Lead")
-
-    additional_emergency_contact_fname = models.CharField(max_length=200, blank=True, null=True, verbose_name="Emergency Contact First Name") # optional
-    additional_emergency_contact_lname = models.CharField(max_length=200, blank=True, null=True, verbose_name="Emergency Contact Last Name") # optional
-    additional_emergency_contact_relationship = models.CharField(max_length=200, blank=True, null=True, verbose_name="Emergency Contact Relationship") # optional
-    additional_emergency_contact_phone = models.CharField(max_length=15, blank=True, null=True, verbose_name="Emergency Contact Phone") # optional
-
-    street_address = models.CharField(max_length=200, verbose_name="Street")
-    city = models.CharField(max_length=200, verbose_name="City")
-    state = models.CharField(max_length=200, verbose_name="State")
-    zip_code = models.CharField(max_length=200, verbose_name="Zip Code")
-
-    applicant_bday = models.DateField(verbose_name="Birthday")
-    applicant_sex = models.CharField(
-        max_length=1,
-        choices=SEX_CHOICES,
-        verbose_name="Gender")
-    applicant_grade = models.IntegerField(validators=[MinValueValidator(0)], verbose_name="School Grade")
-    applicant_shirt_size = models.CharField(
-        max_length=2,
-        choices=SHIRT_SIZE_CHOICES,
-        verbose_name="T-Shirt Size")
-
-    # program data
-    program = models.CharField(
-        max_length=3,
-        choices=PROGRAM_CHOICES,
-        default="ON",
-        verbose_name="Program"
-    )
-    payment_received = models.BooleanField(default=False)
-    payment_total = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    payment_camp = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    payment_donation = models.DecimalField(max_digits=10, decimal_places=2, blank=True, null=True, default=0)
-    payment_pod = models.DecimalField(max_digits=10, decimal_places=2, blank=True, null=True, default=0)
-
-    # other
-    allowed_pickup_persons = models.CharField(max_length=500, blank=True, null=True)
-    financial_aid_requested = models.BooleanField(default=False)
-    listing_on_weekbook = models.BooleanField(default=False)
-    camper_contact_email = models.EmailField(blank=True, null=True)
-    interest_in_committee = models.BooleanField(default=False)
-    interest_in_wkbook_ads = models.BooleanField(default=False)
-    available_for_carpool = models.BooleanField(default=False)
-    referrals = models.CharField(max_length=200, blank=True, null=True)
-    heard_from = models.CharField(max_length=200, blank=True, null=True)
-    preferred_roommate = models.CharField(max_length=200, blank=True, null=True)
-
-    # forms
-    health_form_a_received = models.BooleanField(default=False)
-    health_form_b_received = models.BooleanField(default=False)
-    medication_slip_received = models.BooleanField(default=False)
-    parent1_cori_status = models.CharField(max_length=10, blank=True, null=True)
-    parent1_sori_status = models.CharField(max_length=10, blank=True, null=True)
-    parent1_id_status = models.CharField(max_length=10, blank=True, null=True)
-    parent2_cori_status = models.CharField(max_length=10, blank=True, null=True)
-    parent2_sori_status = models.CharField(max_length=10, blank=True, null=True)
-    parent2_id_status = models.CharField(max_length=10, blank=True, null=True)
-    camper_cori_status = models.CharField(max_length=10, blank=True, null=True)
-    camper_sori_status = models.CharField(max_length=10, blank=True, null=True)
-    camper_id_status = models.CharField(max_length=10, blank=True, null=True)
-    camp_rule_agreement = models.BooleanField(default=False)
-    liability_agreement = models.BooleanField(default=False)
-    
-    # medical data
-    insurance_provider = models.CharField(max_length=200, blank=True, null=True, verbose_name="Health Insurance Provider")
-    subscriber_name = models.CharField(max_length=200, blank=True, null=True, verbose_name="Insurance Subscriber Name")
-    primary_physician_name = models.CharField(max_length=200, blank=True, null=True, verbose_name="Physician Name")
-    primary_physician_phone = models.CharField(max_length=15, blank=True, null=True, verbose_name="Physician Phone")
-
-    # grant permission to questions - if left false contact guardian(s)
-    grant_hospital_permission = models.BooleanField(default=False)
-    grant_medical_treatment_permission = models.BooleanField(default=False)
-    grant_first_aid_permission = models.BooleanField(default=False)
-    grant_meds_permission = models.BooleanField(default=False)
-    grant_bug_spray_permission = models.BooleanField(default=False)
-    grant_skin_treatment_permission = models.BooleanField(default=False)
-
-    allergies = models.BooleanField(default=False)
-    allergies_description = models.CharField(max_length=200, blank=True, null=True)
-    initial_for_allergy_treatment = models.CharField(max_length=200, blank=True, null=True)
-    epi_pen_prescribed = models.BooleanField(default=False)
-    
-    social_emotional_concerns = models.CharField(max_length=200, blank=True, null=True)
-    
-    wear_glasses = models.BooleanField(default=False)
-    wear_contacts = models.BooleanField(default=False)
-    wear_hearing_aids = models.BooleanField(default=False)
-
-    medication = models.BooleanField(default=False)
-    medication_description = models.CharField(max_length=200, blank=True, null=True)
-
-    opt_out_activities = models.CharField(max_length=200, blank=True, null=True)
-    
-    # hidden in form
-    medical_comments = models.CharField(max_length=200, blank=True, null=True)
-
-    signature = models.CharField(max_length=200, blank=True, null=True)
-
-
-    # registration
-    
-    # TODO: hidden in form
-    group_id = models.CharField(max_length=200, blank=True, null=True, default="0")
-    room_id = models.CharField(max_length=200, blank=True, null=True)
-    internal_comments = models.CharField(max_length=200, blank=True, null=True)
-
-class ApplicantHealth(Applicant):
-    class Meta:
-        proxy = True
-        app_label = Applicant._meta.app_label
-        verbose_name = "Applicant Health Info"
-class CampDirectory(Applicant):
-    class Meta:
-        proxy = True
-        app_label = Applicant._meta.app_label
-        verbose_name = "Camp Directory"
-class POD(Applicant):
-    class Meta:
-        proxy = True
-        app_label = Applicant._meta.app_label
-        verbose_name = "Parent On Duty" 
-class CarpoolApplicant(Applicant):
-    class Meta:
-        proxy = True
-        app_label = Applicant._meta.app_label
-        verbose_name = "Carpool Directory"
-class CamperReferral(Applicant):
-    class Meta:
-        proxy = True
-        app_label = Applicant._meta.app_label
-        verbose_name = "Camper Referral"
-class RoomateRequest(Applicant):
-    class Meta:
-        proxy = True
-        app_label = Applicant._meta.app_label
-        verbose_name = "Roomate Request"
-
-class GlobalData(SingletonModel):
-    day_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    ON_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    EA_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    CIT_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    # refers to both counselor and ra cost
-    RA_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    OPs_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    POD_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-
-    def __str__(self):
-        return "Global Data Settings"
-    
-    class Meta:
-        verbose_name = "Global Data"
-        verbose_name_plural = "Global Data"
-
-
diff --git a/.history/necysc_app/models_20241204003124.py b/.history/necysc_app/models_20241204003124.py
deleted file mode 100644
index d17c182c..00000000
--- a/.history/necysc_app/models_20241204003124.py
+++ /dev/null
@@ -1,263 +0,0 @@
-from django import forms
-from django.db import models
-from django.contrib.auth.models import User
-import datetime
-from django.core.validators import MinValueValidator
-from solo.models import SingletonModel
-
-
-
-class Applicant(models.Model):
-    # choices for application status
-    APP_STATUS_CHOICES = {
-        "A": "Accepted",
-        "D": "Denied",
-        "P": "Pending",
-        "I": "Incomplete",
-    }
-    # choices for health record status
-    HEALTH_RECORD_STATUS_CHOICES = {
-        "NC": "Not checked",
-        "FU": "Needs follow up",
-        "A": "Approved",
-    }
-    # choices for parent relationship
-    PARENT_RELATIONSHIP_CHOICES = {
-        "F": "Father",
-        "M": "Mother",
-        "G": "Guardian",
-    }
-    # choices for applicant sex
-    SEX_CHOICES = {
-        "M": "Male",
-        "F": "Female",
-        "O": "Other",
-    }
-    SHIRT_SIZE_CHOICES = {
-        "YS": "Youth S",
-        "YM": "Youth M",
-        "YL": "Youth L",
-        "AS": "Adult S",
-        "AM": "Adult M",
-        "AL": "Adult L",
-        "AX": "Adult XL",
-    }
-    
-    # choices for program data
-    PROGRAM_CHOICES={
-        "D": "Day",
-        "ON": "Overnight",
-        "CIT": "CIT",
-        "C": "Counselor",
-        "OPS": "OPS",
-        "EA": "EA",
-    }
-
-    # choices for forms
-    HEALTH_FORM_RECEIVED_CHOICES={
-        "NS": "Not Submitted",
-        "P": "Pending",
-        "A": "Approved",
-    }
-    
-    user = models.ForeignKey(User, on_delete=models.CASCADE, blank=True, null=True)
-
-    # status data
-    created_at = models.DateTimeField(auto_now_add=True)
-    last_updated_at = models.DateTimeField(auto_now=True)
-    app_year = models.IntegerField(default=datetime.datetime.now().year)
-    app_status = models.CharField(
-        max_length=1,
-        choices=APP_STATUS_CHOICES,
-         default= "I"
-    )
-    # this should be hidden from the user
-    health_record_status = models.CharField(
-        max_length=2,
-        choices=HEALTH_RECORD_STATUS_CHOICES,
-        default="NC",
-    )
-
-    # personal data
-    applicant_fname = models.CharField(max_length=200, verbose_name="First Name")
-    applicant_lname = models.CharField(max_length=200, verbose_name="Last Name")
-    applicant_chinese_name = models.CharField(max_length=200, blank=True, null=True, verbose_name="Chinese Name") # optional
-    applicant_email = models.EmailField(verbose_name="Email", blank=False)
-
-    parent1_fname = models.CharField(max_length=200, verbose_name="Primary Contact First Name")
-    parent1_lname = models.CharField(max_length=200, verbose_name="Primary Contact Last Name")
-    parent1_relationship = models.CharField(
-        max_length=1,
-        choices=PARENT_RELATIONSHIP_CHOICES,
-        verbose_name="Primary Contact Relationship"
-    )
-    parent1_phone = models.CharField(max_length=15, verbose_name="Primary Contact Phone")
-    parent1_email = models.EmailField(verbose_name="Primary Contact Email")
-    parent1_for_POD = models.BooleanField(verbose_name="Primary Contact as POD")
-
-    parent2_fname = models.CharField(max_length=200, blank=True, null=True, verbose_name="Secondary Contact First Name") # optional
-    parent2_lname = models.CharField(max_length=200, blank=True, null=True, verbose_name="Secondary Contact Last Name") # optional
-    parent2_relationship = models.CharField(
-        max_length=1,
-        choices=PARENT_RELATIONSHIP_CHOICES,
-        blank=True, null=True, verbose_name="Secondary Contact Relationship") # optional
-    parent2_phone = models.CharField(max_length=15, blank=True, null=True, verbose_name="Secondary Contact Phone") # optional
-    parent2_email = models.EmailField(blank=True, null=True, verbose_name="Secondary Contact Email") # optional
-    parent2_for_POD = models.BooleanField(blank=True, null=True, verbose_name="Secondary Contact as POD") # optional
-
-    interest_in_POD_lead = models.BooleanField(verbose_name="Interest in POD Lead")
-
-    additional_emergency_contact_fname = models.CharField(max_length=200, blank=True, null=True, verbose_name="Emergency Contact First Name") # optional
-    additional_emergency_contact_lname = models.CharField(max_length=200, blank=True, null=True, verbose_name="Emergency Contact Last Name") # optional
-    additional_emergency_contact_relationship = models.CharField(max_length=200, blank=True, null=True, verbose_name="Emergency Contact Relationship") # optional
-    additional_emergency_contact_phone = models.CharField(max_length=15, blank=True, null=True, verbose_name="Emergency Contact Phone") # optional
-
-    street_address = models.CharField(max_length=200, verbose_name="Street")
-    city = models.CharField(max_length=200, verbose_name="City")
-    state = models.CharField(max_length=200, verbose_name="State")
-    zip_code = models.CharField(max_length=200, verbose_name="Zip Code")
-
-    applicant_bday = models.DateField(verbose_name="Birthday")
-    applicant_sex = models.CharField(
-        max_length=1,
-        choices=SEX_CHOICES,
-        verbose_name="Gender")
-    applicant_grade = models.IntegerField(validators=[MinValueValidator(0)], verbose_name="School Grade")
-    applicant_shirt_size = models.CharField(
-        max_length=2,
-        choices=SHIRT_SIZE_CHOICES,
-        verbose_name="T-Shirt Size")
-
-    # program data
-    program = models.CharField(
-        max_length=3,
-        choices=PROGRAM_CHOICES,
-        default="ON",
-        verbose_name="Program"
-    )
-    payment_received = models.BooleanField(default=False)
-    payment_total = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    payment_camp = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    payment_donation = models.DecimalField(max_digits=10, decimal_places=2, blank=True, null=True, default=0)
-    payment_pod = models.DecimalField(max_digits=10, decimal_places=2, blank=True, null=True, default=0)
-
-    # other
-    allowed_pickup_persons = models.CharField(max_length=500, blank=True, null=True)
-    financial_aid_requested = models.BooleanField(default=False)
-    listing_on_weekbook = models.BooleanField(default=False)
-    camper_contact_email = models.EmailField(blank=True, null=True)
-    interest_in_committee = models.BooleanField(default=False)
-    interest_in_wkbook_ads = models.BooleanField(default=False)
-    available_for_carpool = models.BooleanField(default=False)
-    referrals = models.CharField(max_length=200, blank=True, null=True)
-    heard_from = models.CharField(max_length=200, blank=True, null=True)
-    preferred_roommate = models.CharField(max_length=200, blank=True, null=True)
-
-    # forms
-    health_form_a_received = models.BooleanField(default=False)
-    health_form_b_received = models.BooleanField(default=False)
-    medication_slip_received = models.BooleanField(default=False)
-    parent1_cori_status = models.CharField(max_length=10, blank=True, null=True)
-    parent1_sori_status = models.CharField(max_length=10, blank=True, null=True)
-    parent1_id_status = models.CharField(max_length=10, blank=True, null=True)
-    parent2_cori_status = models.CharField(max_length=10, blank=True, null=True)
-    parent2_sori_status = models.CharField(max_length=10, blank=True, null=True)
-    parent2_id_status = models.CharField(max_length=10, blank=True, null=True)
-    camper_cori_status = models.CharField(max_length=10, blank=True, null=True)
-    camper_sori_status = models.CharField(max_length=10, blank=True, null=True)
-    camper_id_status = models.CharField(max_length=10, blank=True, null=True)
-    camp_rule_agreement = models.BooleanField(default=False)
-    liability_agreement = models.BooleanField(default=False)
-    
-    # medical data
-    insurance_provider = models.CharField(max_length=200, blank=True, null=True, verbose_name="Health Insurance Provider")
-    subscriber_name = models.CharField(max_length=200, blank=True, null=True, verbose_name="Insurance Subscriber Name")
-    primary_physician_name = models.CharField(max_length=200, blank=True, null=True, verbose_name="Physician Name")
-    primary_physician_phone = models.CharField(max_length=15, blank=True, null=True, verbose_name="Physician Phone")
-
-    # grant permission to questions - if left false contact guardian(s)
-    grant_hospital_permission = models.BooleanField(default=False)
-    grant_medical_treatment_permission = models.BooleanField(default=False)
-    grant_first_aid_permission = models.BooleanField(default=False)
-    grant_meds_permission = models.BooleanField(default=False)
-    grant_bug_spray_permission = models.BooleanField(default=False)
-    grant_skin_treatment_permission = models.BooleanField(default=False)
-
-    allergies = models.BooleanField(default=False)
-    allergies_description = models.CharField(max_length=200, blank=True, null=True)
-    initial_for_allergy_treatment = models.CharField(max_length=200, blank=True, null=True)
-    epi_pen_prescribed = models.BooleanField(default=False)
-    
-    social_emotional_concerns = models.CharField(max_length=200, blank=True, null=True)
-    
-    wear_glasses = models.BooleanField(default=False)
-    wear_contacts = models.BooleanField(default=False)
-    wear_hearing_aids = models.BooleanField(default=False)
-
-    medication = models.BooleanField(default=False)
-    medication_description = models.CharField(max_length=200, blank=True, null=True)
-
-    opt_out_activities = models.CharField(max_length=200, blank=True, null=True)
-    
-    # hidden in form
-    medical_comments = models.CharField(max_length=200, blank=True, null=True)
-
-    signature = models.CharField(max_length=200, blank=True, null=True)
-
-
-    # registration
-    
-    # TODO: hidden in form
-    group_id = models.CharField(max_length=200, blank=True, null=True, default="0")
-    room_id = models.CharField(max_length=200, blank=True, null=True)
-    internal_comments = models.CharField(max_length=200, blank=True, null=True)
-
-class ApplicantHealth(Applicant):
-    class Meta:
-        proxy = True
-        app_label = Applicant._meta.app_label
-        verbose_name = "Applicant Health Info"
-class CampDirectory(Applicant):
-    class Meta:
-        proxy = True
-        app_label = Applicant._meta.app_label
-        verbose_name = "Camp Directory"
-class POD(Applicant):
-    class Meta:
-        proxy = True
-        app_label = Applicant._meta.app_label
-        verbose_name = "Parent On Duty" 
-class CarpoolApplicant(Applicant):
-    class Meta:
-        proxy = True
-        app_label = Applicant._meta.app_label
-        verbose_name = "Carpool Directory"
-class CamperReferral(Applicant):
-    class Meta:
-        proxy = True
-        app_label = Applicant._meta.app_label
-        verbose_name = "Camper Referral"
-class RoomateRequest(Applicant):
-    class Meta:
-        proxy = True
-        app_label = Applicant._meta.app_label
-        verbose_name = "Roomate Request"
-
-class GlobalData(SingletonModel):
-    day_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    ON_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    EA_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    CIT_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    # refers to both counselor and ra cost
-    RA_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    OPs_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-    POD_camp_cost = models.DecimalField(max_digits=10, decimal_places=2, default=0)
-
-    def __str__(self):
-        return "Global Data Settings"
-    
-    class Meta:
-        verbose_name = "Global Data"
-        verbose_name_plural = "Global Data"
-
-
diff --git a/.history/necysc_app/static/necysc_app/applicant_home_20241203231401.css b/.history/necysc_app/static/necysc_app/applicant_home_20241203231401.css
deleted file mode 100644
index 4ee2ea39..00000000
--- a/.history/necysc_app/static/necysc_app/applicant_home_20241203231401.css
+++ /dev/null
@@ -1,95 +0,0 @@
-.application-card-link {
-  text-decoration: none; /* Remove underline */
-  color: inherit; /* Inherit text color */
-}
-
-.application-card-link:hover {
-  text-decoration: none; /* Remove underline */
-  color: inherit; /* Inherit text color */
-}
-
-.application-card {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  padding: 15px;
-  width: 300px;
-  height: 180px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  background-color: #fff;
-  position: relative;
-  transition: transform 0.2s;
-}
-
-.application-card:hover {
-  transform: scale(1.02);
-  box-shadow: inset;
-}
-
-.application-card h2 {
-  font-size: 1.5em;
-  margin: 0 0 10px 0;
-}
-
-.application-card h3 {
-  font-size: 1.2em;
-  color: #555;
-}
-
-.application-card p {
-  margin: 5px 0;
-}
-
-
-.status {
-  border-radius: 5px;
-  color: #fff;
-  font-weight: bold;
-  z-index: 1;
-}
-
-.status.a {
-  background-color: rgba(0, 128, 0, 0.2);
-  color: green;
-}
-
-.status.d {
-  background-color: rgba(255, 0, 0, 0.2);
-  color: red;
-}
-
-.status.p {
-  background-color: rgba(255, 165, 0, 0.2);
-  color: orange;
-}
-
-.status.i {
-  background-color: rgba(0, 0, 255, 0.2);
-  color: blue;
-}
-
-.glow {
-  transition: box-shadow 0.3s ease-in-out;
-}
-
-.glow:hover {
-  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-
-.btn-logout {
-    display: inline-block;
-    padding: 8px 15px;
-    background-color: #ff4444;
-    color: #fff;
-    text-decoration: none;
-    border-radius: 5px;
-    font-weight: bold;
-    transition: background-color 0.3s ease;
-    cursor: pointer;
-    margin: 10px 0;
-}
-
-.btn-logout:hover {
-    background-color: #cc0000;
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/applicant_home_20241204012117.css b/.history/necysc_app/static/necysc_app/applicant_home_20241204012117.css
deleted file mode 100644
index fdbaf363..00000000
--- a/.history/necysc_app/static/necysc_app/applicant_home_20241204012117.css
+++ /dev/null
@@ -1,106 +0,0 @@
-.application-card-link {
-  text-decoration: none; /* Remove underline */
-  color: inherit; /* Inherit text color */
-}
-
-.application-card-link:hover {
-  text-decoration: none; /* Remove underline */
-  color: inherit; /* Inherit text color */
-}
-
-.application-card {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  padding: 15px;
-  width: 300px;
-  height: 180px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  background-color: #fff;
-  position: relative;
-  transition: transform 0.2s;
-}
-
-.application-card:hover {
-  transform: scale(1.02);
-  box-shadow: inset;
-}
-
-.application-card h2 {
-  font-size: 1.5em;
-  margin: 0 0 10px 0;
-}
-
-.application-card h3 {
-  font-size: 1.2em;
-  color: #555;
-}
-
-.application-card p {
-  margin: 5px 0;
-}
-
-
-.status {
-  border-radius: 5px;
-  color: #fff;
-  font-weight: bold;
-  z-index: 1;
-}
-
-.status.a {
-  background-color: rgba(0, 128, 0, 0.2);
-  color: green;
-}
-
-.status.d {
-  background-color: rgba(255, 0, 0, 0.2);
-  color: red;
-}
-
-.status.p {
-  background-color: rgba(255, 165, 0, 0.2);
-  color: orange;
-}
-
-.status.i {
-  background-color: rgba(0, 0, 255, 0.2);
-  color: blue;
-}
-
-.glow {
-  transition: box-shadow 0.3s ease-in-out;
-}
-
-.glow:hover {
-  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-
-.btn-logout {
-    display: inline-block;
-    padding: 8px 15px;
-    background-color: #ff4444;
-    color: #fff;
-    text-decoration: none;
-    border-radius: 5px;
-    font-weight: bold;
-    transition: background-color 0.3s ease;
-    cursor: pointer;
-    margin: 10px 0;
-}
-
-.btn-logout:hover {
-    background-color: #cc0000;
-}
-
-.page-background {
-  width: 100%;
-  height: 100vh; /* 覆盖整个视窗 */
-  background-image: url('/path/to/your/image.jpg'); /* 替换为你的图片路径 */
-  background-size: cover; /* 背景图覆盖整个容器 */
-  background-position: center; /* 背景图居中显示 */
-  filter: blur(5px); /* 添加虚化效果 */
-  position: absolute; /* 背景图置于最底层 */
-  z-index: -1; /* 确保内容位于背景图之上 */
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/applicant_home_20241204012131.css b/.history/necysc_app/static/necysc_app/applicant_home_20241204012131.css
deleted file mode 100644
index 86760934..00000000
--- a/.history/necysc_app/static/necysc_app/applicant_home_20241204012131.css
+++ /dev/null
@@ -1,112 +0,0 @@
-.application-card-link {
-  text-decoration: none; /* Remove underline */
-  color: inherit; /* Inherit text color */
-}
-
-.application-card-link:hover {
-  text-decoration: none; /* Remove underline */
-  color: inherit; /* Inherit text color */
-}
-
-.application-card {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  padding: 15px;
-  width: 300px;
-  height: 180px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  background-color: #fff;
-  position: relative;
-  transition: transform 0.2s;
-}
-
-.application-card:hover {
-  transform: scale(1.02);
-  box-shadow: inset;
-}
-
-.application-card h2 {
-  font-size: 1.5em;
-  margin: 0 0 10px 0;
-}
-
-.application-card h3 {
-  font-size: 1.2em;
-  color: #555;
-}
-
-.application-card p {
-  margin: 5px 0;
-}
-
-
-.status {
-  border-radius: 5px;
-  color: #fff;
-  font-weight: bold;
-  z-index: 1;
-}
-
-.status.a {
-  background-color: rgba(0, 128, 0, 0.2);
-  color: green;
-}
-
-.status.d {
-  background-color: rgba(255, 0, 0, 0.2);
-  color: red;
-}
-
-.status.p {
-  background-color: rgba(255, 165, 0, 0.2);
-  color: orange;
-}
-
-.status.i {
-  background-color: rgba(0, 0, 255, 0.2);
-  color: blue;
-}
-
-.glow {
-  transition: box-shadow 0.3s ease-in-out;
-}
-
-.glow:hover {
-  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-
-.btn-logout {
-    display: inline-block;
-    padding: 8px 15px;
-    background-color: #ff4444;
-    color: #fff;
-    text-decoration: none;
-    border-radius: 5px;
-    font-weight: bold;
-    transition: background-color 0.3s ease;
-    cursor: pointer;
-    margin: 10px 0;
-}
-
-.btn-logout:hover {
-    background-color: #cc0000;
-}
-
-.page-background {
-  width: 100%;
-  height: 100vh; /* 覆盖整个视窗 */
-  background-image: url('/path/to/your/image.jpg'); /* 替换为你的图片路径 */
-  background-size: cover; /* 背景图覆盖整个容器 */
-  background-position: center; /* 背景图居中显示 */
-  filter: blur(5px); /* 添加虚化效果 */
-  position: absolute; /* 背景图置于最底层 */
-  z-index: -1; /* 确保内容位于背景图之上 */
-}
-
-.page-content {
-  position: relative;
-  z-index: 1; /* 确保内容在背景图之上 */
-  color: white; /* 设置内容颜色以便在背景图上清晰显示 */
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/applicant_home_20241204012628.css b/.history/necysc_app/static/necysc_app/applicant_home_20241204012628.css
deleted file mode 100644
index c6d86a3f..00000000
--- a/.history/necysc_app/static/necysc_app/applicant_home_20241204012628.css
+++ /dev/null
@@ -1,96 +0,0 @@
-.application-card-link {
-  text-decoration: none; /* Remove underline */
-  color: inherit; /* Inherit text color */
-}
-
-.application-card-link:hover {
-  text-decoration: none; /* Remove underline */
-  color: inherit; /* Inherit text color */
-}
-
-.application-card {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  padding: 15px;
-  width: 300px;
-  height: 180px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  background-color: #fff;
-  position: relative;
-  transition: transform 0.2s;
-}
-
-.application-card:hover {
-  transform: scale(1.02);
-  box-shadow: inset;
-}
-
-.application-card h2 {
-  font-size: 1.5em;
-  margin: 0 0 10px 0;
-}
-
-.application-card h3 {
-  font-size: 1.2em;
-  color: #555;
-}
-
-.application-card p {
-  margin: 5px 0;
-}
-
-
-.status {
-  border-radius: 5px;
-  color: #fff;
-  font-weight: bold;
-  z-index: 1;
-}
-
-.status.a {
-  background-color: rgba(0, 128, 0, 0.2);
-  color: green;
-}
-
-.status.d {
-  background-color: rgba(255, 0, 0, 0.2);
-  color: red;
-}
-
-.status.p {
-  background-color: rgba(255, 165, 0, 0.2);
-  color: orange;
-}
-
-.status.i {
-  background-color: rgba(0, 0, 255, 0.2);
-  color: blue;
-}
-
-.glow {
-  transition: box-shadow 0.3s ease-in-out;
-}
-
-.glow:hover {
-  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-
-.btn-logout {
-    display: inline-block;
-    padding: 8px 15px;
-    background-color: #ff4444;
-    color: #fff;
-    text-decoration: none;
-    border-radius: 5px;
-    font-weight: bold;
-    transition: background-color 0.3s ease;
-    cursor: pointer;
-    margin: 10px 0;
-}
-
-.btn-logout:hover {
-    background-color: #cc0000;
-}
-
diff --git a/.history/necysc_app/static/necysc_app/login_20241203231402.css b/.history/necysc_app/static/necysc_app/login_20241203231402.css
deleted file mode 100644
index ebeef5fb..00000000
--- a/.history/necysc_app/static/necysc_app/login_20241203231402.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.login_page {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-  width: 100%;
-  height: 90vh;
-}
-
-.login_form {
-  width: 50%;
-  height: 100%;
-  padding: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 30px;
-}
-
-.login_form_body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 35px;
-  flex-direction: column;
-  width: 100%;
-}
-
-.login_form_body #id_email,
-.login_form_body #id_password {
-  width: 300px;
-  padding: 10px;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-}
-
-/* .login_form_body input[type="submit"] {
-    background-color: #2E6D9E;
-    color: white;
-    border: none;
-    padding: 10px;
-    cursor: pointer;
-    width: 50%;
-    border-radius: 50px;
-}
-
-.login_form_body input[type="submit"]:hover {
-    transition: 0.3s;
-    background-color: #4E2498;
-} */
-
-.register_form {
-  width: 50%;
-  height: 100%;
-  padding: 60px;
-  padding-left: 150px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  background-image: url("./images/king.png");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  flex-direction: column;
-  gap: 50px;
-  text-align: center;
-  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
-}
-
-.register_form h1 {
-  font-size: 35px;
-}
-
-.register_form p {
-  font-size: 15px;
-}
-
-/* .register_form a {
-  border: 1px solid white;
-  padding: 10px 20px;
-  color: white;
-  background-color: transparent;
-  text-decoration: none;
-  width: 350px;
-  font-size: 15px;
-  border-radius: 50px;
-  transition: background-color 0.3s ease;
-}
-
-.register_form a:hover {
-  color: white;
-  background-color: rgba(255, 255, 255, 0.3);
-}
-
-.register_form::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.35);
-  z-index: -1;
-  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
-} */
diff --git a/.history/necysc_app/static/necysc_app/login_20241203232337.css b/.history/necysc_app/static/necysc_app/login_20241203232337.css
deleted file mode 100644
index 78f1901c..00000000
--- a/.history/necysc_app/static/necysc_app/login_20241203232337.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.login_page {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  width: 100%;
-  height: 90vh;
-}
-
-.login_form {
-  width: 50%;
-  height: 100%;
-  padding: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 30px;
-}
-
-.login_form_body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 35px;
-  flex-direction: column;
-  width: 100%;
-}
-
-.login_form_body #id_email,
-.login_form_body #id_password {
-  width: 300px;
-  padding: 10px;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-}
-
-/* .login_form_body input[type="submit"] {
-    background-color: #2E6D9E;
-    color: white;
-    border: none;
-    padding: 10px;
-    cursor: pointer;
-    width: 50%;
-    border-radius: 50px;
-}
-
-.login_form_body input[type="submit"]:hover {
-    transition: 0.3s;
-    background-color: #4E2498;
-} */
-
-.register_form {
-  width: 50%;
-  height: 100%;
-  padding: 60px;
-  padding-left: 150px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  background-image: url("./images/king.png");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  flex-direction: column;
-  gap: 50px;
-  text-align: center;
-  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
-}
-
-.register_form h1 {
-  font-size: 35px;
-}
-
-.register_form p {
-  font-size: 15px;
-}
-
-/* .register_form a {
-  border: 1px solid white;
-  padding: 10px 20px;
-  color: white;
-  background-color: transparent;
-  text-decoration: none;
-  width: 350px;
-  font-size: 15px;
-  border-radius: 50px;
-  transition: background-color 0.3s ease;
-}
-
-.register_form a:hover {
-  color: white;
-  background-color: rgba(255, 255, 255, 0.3);
-}
-
-.register_form::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.35);
-  z-index: -1;
-  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
-} */
diff --git a/.history/necysc_app/static/necysc_app/style_20241203231402.css b/.history/necysc_app/static/necysc_app/style_20241203231402.css
deleted file mode 100644
index c373752e..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203231402.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241203233530.css b/.history/necysc_app/static/necysc_app/style_20241203233530.css
deleted file mode 100644
index 115fd01f..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203233530.css
+++ /dev/null
@@ -1,77 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-/* 汉堡菜单默认隐藏 */
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 默认导航链接样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 小屏幕样式 */
-@media (max-width: 768px) {
-  .nav-links {
-    display: none; /* 默认隐藏导航链接 */
-    flex-direction: column;
-    background-color: white;
-    position: absolute;
-    top: 60px;
-    right: 0;
-    width: 100%;
-    padding: 20px;
-    z-index: 100
diff --git a/.history/necysc_app/static/necysc_app/style_20241203233534.css b/.history/necysc_app/static/necysc_app/style_20241203233534.css
deleted file mode 100644
index 7d26e538..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203233534.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
diff --git a/.history/necysc_app/static/necysc_app/style_20241203233539.css b/.history/necysc_app/static/necysc_app/style_20241203233539.css
deleted file mode 100644
index 55761e47..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203233539.css
+++ /dev/null
@@ -1,102 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-/* 汉堡菜单默认隐藏 */
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 默认导航链接样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 小屏幕样式 */
-@media (max-width: 768px) {
-  .nav-links {
-    display: none; /* 默认隐藏导航链接 */
-    flex-direction: column;
-    background-color: white;
-    position: absolute;
-    top: 60px;
-    right: 0;
-    width: 100%;
-    padding: 20px;
-    z-index: 1000;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-  }
-
-  .nav-links.show {
-    display: flex; /* 点击汉堡菜单后显示 */
-  }
-
-  .hamburger {
-    display: block; /* 小屏幕显示汉堡菜单图标 */
-  }
-}
-
-/* 导航链接的基本样式 */
-.nav-links a {
-  color: #4e598c;
-  text-decoration: none;
-  padding: 10px 20px;
-  transition: all 0.3s ease;
-  border-radius: 10px;
-}
-
-.nav-links a:hover {
-  background-color: #f9c784;
-  color: white;
-}
diff --git a/.history/necysc_app/static/necysc_app/style_20241203233837.css b/.history/necysc_app/static/necysc_app/style_20241203233837.css
deleted file mode 100644
index 7d26e538..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203233837.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
diff --git a/.history/necysc_app/static/necysc_app/style_20241203233951.css b/.history/necysc_app/static/necysc_app/style_20241203233951.css
deleted file mode 100644
index f5b4c23b..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203233951.css
+++ /dev/null
@@ -1,91 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
diff --git a/.history/necysc_app/static/necysc_app/style_20241203234934.css b/.history/necysc_app/static/necysc_app/style_20241203234934.css
deleted file mode 100644
index 88bb40d2..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203234934.css
+++ /dev/null
@@ -1,91 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-汉堡菜单默认隐藏
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
diff --git a/.history/necysc_app/static/necysc_app/style_20241203234937.css b/.history/necysc_app/static/necysc_app/style_20241203234937.css
deleted file mode 100644
index 3389647e..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203234937.css
+++ /dev/null
@@ -1,91 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-/* 汉堡菜单默认隐藏
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-} */
diff --git a/.history/necysc_app/static/necysc_app/style_20241203234941.css b/.history/necysc_app/static/necysc_app/style_20241203234941.css
deleted file mode 100644
index 88bb40d2..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203234941.css
+++ /dev/null
@@ -1,91 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-汉堡菜单默认隐藏
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
diff --git a/.history/necysc_app/static/necysc_app/style_20241203234942.css b/.history/necysc_app/static/necysc_app/style_20241203234942.css
deleted file mode 100644
index f5b4c23b..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203234942.css
+++ /dev/null
@@ -1,91 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
diff --git a/.history/necysc_app/static/necysc_app/style_20241203234950.css b/.history/necysc_app/static/necysc_app/style_20241203234950.css
deleted file mode 100644
index 88bb40d2..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203234950.css
+++ /dev/null
@@ -1,91 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-汉堡菜单默认隐藏
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
diff --git a/.history/necysc_app/static/necysc_app/style_20241203234955.css b/.history/necysc_app/static/necysc_app/style_20241203234955.css
deleted file mode 100644
index f5b4c23b..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203234955.css
+++ /dev/null
@@ -1,91 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
diff --git a/.history/necysc_app/static/necysc_app/style_20241203235002.css b/.history/necysc_app/static/necysc_app/style_20241203235002.css
deleted file mode 100644
index 8a104985..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203235002.css
+++ /dev/null
@@ -1,92 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-/*
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
diff --git a/.history/necysc_app/static/necysc_app/style_20241203235005.css b/.history/necysc_app/static/necysc_app/style_20241203235005.css
deleted file mode 100644
index 830951b5..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203235005.css
+++ /dev/null
@@ -1,93 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-/*
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
-*/
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241203235008.css b/.history/necysc_app/static/necysc_app/style_20241203235008.css
deleted file mode 100644
index 57b11021..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203235008.css
+++ /dev/null
@@ -1,92 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-/*
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}*/
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241203235010.css b/.history/necysc_app/static/necysc_app/style_20241203235010.css
deleted file mode 100644
index be1eba23..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203235010.css
+++ /dev/null
@@ -1,92 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-/*
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241203235013.css b/.history/necysc_app/static/necysc_app/style_20241203235013.css
deleted file mode 100644
index 889ade7f..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203235013.css
+++ /dev/null
@@ -1,92 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241203235016.css b/.history/necysc_app/static/necysc_app/style_20241203235016.css
deleted file mode 100644
index 2cad39a6..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203235016.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
diff --git a/.history/necysc_app/static/necysc_app/style_20241203235137.css b/.history/necysc_app/static/necysc_app/style_20241203235137.css
deleted file mode 100644
index 889ade7f..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241203235137.css
+++ /dev/null
@@ -1,92 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204001451.css b/.history/necysc_app/static/necysc_app/style_20241204001451.css
deleted file mode 100644
index 224769cc..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204001451.css
+++ /dev/null
@@ -1,97 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204010601.css b/.history/necysc_app/static/necysc_app/style_20241204010601.css
deleted file mode 100644
index 3d7e8496..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204010601.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.custom-h2 {
-  font-family: 'Arial', sans-serif; /* 可以选择更艺术的字体 */
-  font-weight: 900; /* 设置字体为超粗 */
-  color: #000; /* 纯黑色 */
-}
-
-.custom-p {
-  font-family: 'Arial', sans-serif; /* 同样应用到段落 */
-  font-weight: bold; /* 粗体 */
-  color: #000; /* 纯黑色 */
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204010604.css b/.history/necysc_app/static/necysc_app/style_20241204010604.css
deleted file mode 100644
index 86d2df11..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204010604.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.custom-h2 {
-  font-family: 'Arial', sans-serif; /* 可以选择更艺术的字体 */
-  font-weight: 900; /* 设置字体为超粗 */
-  color: #000; /* 纯黑色 */
-}
-
-.custom-p {
-  font-family: 'Arial', sans-serif; /* 同样应用到段落 */
-  font-weight: bold; /* 粗体 */
-  color: #000; 
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204010607.css b/.history/necysc_app/static/necysc_app/style_20241204010607.css
deleted file mode 100644
index baa96a0e..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204010607.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.custom-h2 {
-  font-family: 'Arial', sans-serif; /* 可以选择更艺术的字体 */
-  font-weight: 900; /* 设置字体为超粗 */
-  color: #000; /* 纯黑色 */
-}
-
-.custom-p {
-  font-family: 'Arial', sans-serif; /* 同样应用到段落 */
-  font-weight: bold;
-  color: #000; 
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204010608.css b/.history/necysc_app/static/necysc_app/style_20241204010608.css
deleted file mode 100644
index f37b98a7..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204010608.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.custom-h2 {
-  font-family: 'Arial', sans-serif; /* 可以选择更艺术的字体 */
-  font-weight: 900; /* 设置字体为超粗 */
-  color: #000; /* 纯黑色 */
-}
-
-.custom-p {
-  font-family: 'Arial', sans-serif; 
-  font-weight: bold;
-  color: #000; 
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204010614.css b/.history/necysc_app/static/necysc_app/style_20241204010614.css
deleted file mode 100644
index 71cca46c..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204010614.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.custom-h2 {
-  font-family: 'Arial', sans-serif; /* 可以选择更艺术的字体 */
-  font-weight: 900; /* 设置字体为超粗 */
-  color: #000; 
-}
-
-.custom-p {
-  font-family: 'Arial', sans-serif; 
-  font-weight: bold;
-  color: #000; 
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204010617.css b/.history/necysc_app/static/necysc_app/style_20241204010617.css
deleted file mode 100644
index 14f70678..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204010617.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.custom-h2 {
-  font-family: 'Arial', sans-serif; /* 可以选择更艺术的字体 */
-  font-weight: 900; 
-  color: #000; 
-}
-
-.custom-p {
-  font-family: 'Arial', sans-serif; 
-  font-weight: bold;
-  color: #000; 
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204010618.css b/.history/necysc_app/static/necysc_app/style_20241204010618.css
deleted file mode 100644
index 04b74d11..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204010618.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.custom-h2 {
-  font-family: 'Arial', sans-serif;
-  font-weight: 900; 
-  color: #000; 
-}
-
-.custom-p {
-  font-family: 'Arial', sans-serif; 
-  font-weight: bold;
-  color: #000; 
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204010620.css b/.history/necysc_app/static/necysc_app/style_20241204010620.css
deleted file mode 100644
index 77a362ba..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204010620.css
+++ /dev/null
@@ -1,108 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; 
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.custom-h2 {
-  font-family: 'Arial', sans-serif;
-  font-weight: 900; 
-  color: #000; 
-}
-
-.custom-p {
-  font-family: 'Arial', sans-serif; 
-  font-weight: bold;
-  color: #000; 
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204010622.css b/.history/necysc_app/static/necysc_app/style_20241204010622.css
deleted file mode 100644
index 04b74d11..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204010622.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; /* 显示汉堡菜单图标 */
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.custom-h2 {
-  font-family: 'Arial', sans-serif;
-  font-weight: 900; 
-  color: #000; 
-}
-
-.custom-p {
-  font-family: 'Arial', sans-serif; 
-  font-weight: bold;
-  color: #000; 
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204010624.css b/.history/necysc_app/static/necysc_app/style_20241204010624.css
deleted file mode 100644
index 6c86231c..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204010624.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.custom-h2 {
-  font-family: 'Arial', sans-serif;
-  font-weight: 900; 
-  color: #000; 
-}
-
-.custom-p {
-  font-family: 'Arial', sans-serif; 
-  font-weight: bold;
-  color: #000; 
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204011112.css b/.history/necysc_app/static/necysc_app/style_20241204011112.css
deleted file mode 100644
index dcc74c5b..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204011112.css
+++ /dev/null
@@ -1,107 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; /* 设置文字颜色为白色 */
-  text-decoration: none; /* 可选，去除下划线 */
-  transition: color 0.3s ease; /* 可选，添加平滑效果 */
-}
-
-.white-link:hover {
-  color: #cccccc; /* 可选，悬停时显示浅灰色 */
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204011128.css b/.history/necysc_app/static/necysc_app/style_20241204011128.css
deleted file mode 100644
index dcd5fcfe..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204011128.css
+++ /dev/null
@@ -1,107 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; /* 设置文字颜色为白色 */
-  text-decoration: none; /* 可选，去除下划线 */
-  transition: color 0.3s ease; /* 可选，添加平滑效果 */
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204011130.css b/.history/necysc_app/static/necysc_app/style_20241204011130.css
deleted file mode 100644
index b99d014f..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204011130.css
+++ /dev/null
@@ -1,107 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; /* 设置文字颜色为白色 */
-  text-decoration: none; /* 可选，去除下划线 */
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204011131.css b/.history/necysc_app/static/necysc_app/style_20241204011131.css
deleted file mode 100644
index cdecb032..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204011131.css
+++ /dev/null
@@ -1,107 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; /* 可选，去除下划线 */
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204011133.css b/.history/necysc_app/static/necysc_app/style_20241204011133.css
deleted file mode 100644
index 0cdf4747..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204011133.css
+++ /dev/null
@@ -1,107 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex; /* 点击汉堡菜单显示导航栏 */
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; 
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204011427.css b/.history/necysc_app/static/necysc_app/style_20241204011427.css
deleted file mode 100644
index 0bc14938..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204011427.css
+++ /dev/null
@@ -1,107 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none; /* 默认隐藏导航栏 */
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex;
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; 
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204011430.css b/.history/necysc_app/static/necysc_app/style_20241204011430.css
deleted file mode 100644
index 010745be..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204011430.css
+++ /dev/null
@@ -1,107 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-/* 导航栏默认样式 */
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none;
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex;
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; 
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204011433.css b/.history/necysc_app/static/necysc_app/style_20241204011433.css
deleted file mode 100644
index 974f33eb..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204011433.css
+++ /dev/null
@@ -1,107 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .nav-links {
-      display: none;
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex;
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; 
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204011435.css b/.history/necysc_app/static/necysc_app/style_20241204011435.css
deleted file mode 100644
index 1b2b93a3..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204011435.css
+++ /dev/null
@@ -1,107 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-
-@media (max-width: 768px) {
-  .nav-links {
-      display: none;
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex;
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; 
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204011437.css b/.history/necysc_app/static/necysc_app/style_20241204011437.css
deleted file mode 100644
index ba23ecef..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204011437.css
+++ /dev/null
@@ -1,106 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-
-@media (max-width: 768px) {
-  .nav-links {
-      display: none;
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex;
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; 
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204012612.css b/.history/necysc_app/static/necysc_app/style_20241204012612.css
deleted file mode 100644
index 1b2b93a3..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204012612.css
+++ /dev/null
@@ -1,107 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-/* 汉堡菜单默认隐藏 */
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-
-@media (max-width: 768px) {
-  .nav-links {
-      display: none;
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex;
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; 
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204012614.css b/.history/necysc_app/static/necysc_app/style_20241204012614.css
deleted file mode 100644
index ba23ecef..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204012614.css
+++ /dev/null
@@ -1,106 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-
-@media (max-width: 768px) {
-  .nav-links {
-      display: none;
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex;
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; 
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204013448.css b/.history/necysc_app/static/necysc_app/style_20241204013448.css
deleted file mode 100644
index f8519aeb..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204013448.css
+++ /dev/null
@@ -1,110 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-
-@media (max-width: 768px) {
-  .nav-links {
-      display: none;
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex;
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; 
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
-
-.welcome-title {
-  color: white;
-}
\ No newline at end of file
diff --git a/.history/necysc_app/static/necysc_app/style_20241204015102.css b/.history/necysc_app/static/necysc_app/style_20241204015102.css
deleted file mode 100644
index 92e46549..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204015102.css
+++ /dev/null
@@ -1,119 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-
-@media (max-width: 768px) {
-  .nav-links {
-      display: none;
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex;
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; 
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
-
-.welcome-title {
-  color: white;
-}
-
-footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background-color: #000; /* 背景颜色可以调整 */
-  z-index: 10; /* 确保footer显示在页面上层 */
-}
diff --git a/.history/necysc_app/static/necysc_app/style_20241204015105.css b/.history/necysc_app/static/necysc_app/style_20241204015105.css
deleted file mode 100644
index c5c81418..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204015105.css
+++ /dev/null
@@ -1,119 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-
-@media (max-width: 768px) {
-  .nav-links {
-      display: none;
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex;
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; 
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
-
-.welcome-title {
-  color: white;
-}
-
-footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background-color: #000; 
-  z-index: 10; /* 确保footer显示在页面上层 */
-}
diff --git a/.history/necysc_app/static/necysc_app/style_20241204015108.css b/.history/necysc_app/static/necysc_app/style_20241204015108.css
deleted file mode 100644
index c2e71b07..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204015108.css
+++ /dev/null
@@ -1,119 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-
-@media (max-width: 768px) {
-  .nav-links {
-      display: none;
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex;
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; 
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
-
-.welcome-title {
-  color: white;
-}
-
-footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background-color: #000; 
-  z-index: 10; 
-}
diff --git a/.history/necysc_app/static/necysc_app/style_20241204015127.css b/.history/necysc_app/static/necysc_app/style_20241204015127.css
deleted file mode 100644
index a523e63c..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204015127.css
+++ /dev/null
@@ -1,119 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-
-@media (max-width: 768px) {
-  .nav-links {
-      display: none;
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex;
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; 
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
-
-.welcome-title {
-  color: white;
-}
-
-footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-
-  z-index: 10; 
-}
diff --git a/.history/necysc_app/static/necysc_app/style_20241204015134.css b/.history/necysc_app/static/necysc_app/style_20241204015134.css
deleted file mode 100644
index f5d3a20e..00000000
--- a/.history/necysc_app/static/necysc_app/style_20241204015134.css
+++ /dev/null
@@ -1,118 +0,0 @@
-.hero-section {
-  position: relative;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  color: white;
-  height: 60vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.hero-section .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1;
-}
-
-.hero-section .position-relative {
-  z-index: 2;
-}
-
-.btn-purple {
-  background-color: #4e598c;
-  color: #f9c784;
-  transition: all 0.3s ease;
-  padding: 10px 20px;
-  border-radius: 20px;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  outline: none;
-  border: none;
-}
-
-.btn-purple:hover {
-  background-color: #f9c784;
-  color: #ffffff;
-}
-
-
-.accordion-item .accordion-button:not(.collapsed) {
-  background-color: #4e598c; /* Darker purple when open */
-  color: #ffffff; /* White text for contrast */
-}
-
-
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-
-@media (max-width: 768px) {
-  .nav-links {
-      display: none;
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex;
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; 
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
-
-.welcome-title {
-  color: white;
-}
-
-footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 10; 
-}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241203231402.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241203231402.html
deleted file mode 100644
index 774c5a3d..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241203231402.html
+++ /dev/null
@@ -1,50 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-<h1>Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013114.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013114.html
deleted file mode 100644
index 1d330b45..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013114.html
+++ /dev/null
@@ -1,51 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<h1>Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013140.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013140.html
deleted file mode 100644
index b9643c0c..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013140.html
+++ /dev/null
@@ -1,83 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-        filter: blur(5px); /* 让背景图片虚化 */
-        position: fixed; /* 背景图片固定，不随页面滚动 */
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        z-index: -1; /* 让背景图片在最底层 */
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; /* 确保内容在背景之上 */
-        background-color: rgba(255, 255, 255, 0.8); /* 内容背景半透明以更好显示文字 */
-        padding: 20px;
-        border-radius: 10px;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-
-<h1>Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013144.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013144.html
deleted file mode 100644
index a928bda0..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013144.html
+++ /dev/null
@@ -1,83 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-        filter: blur(5px); /* 让背景图片虚化 */
-        position: fixed; /* 背景图片固定，不随页面滚动 */
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        z-index: -1; /* 让背景图片在最底层 */
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.8); /* 内容背景半透明以更好显示文字 */
-        padding: 20px;
-        border-radius: 10px;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-
-<h1>Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013146.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013146.html
deleted file mode 100644
index b9bf3f40..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013146.html
+++ /dev/null
@@ -1,83 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-        filter: blur(5px); /* 让背景图片虚化 */
-        position: fixed; /* 背景图片固定，不随页面滚动 */
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        z-index: -1; /* 让背景图片在最底层 */
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.8); /* 内容背景半透明以更好显示文字 */
-        padding: 20px;
-        border-radius: 10px;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15);
-    }
-    </style>
-
-<h1>Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013149.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013149.html
deleted file mode 100644
index 65bb3a02..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013149.html
+++ /dev/null
@@ -1,83 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-        filter: blur(5px); /* 让背景图片虚化 */
-        position: fixed; /* 背景图片固定，不随页面滚动 */
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        z-index: -1; /* 让背景图片在最底层 */
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.8); 
-        padding: 20px;
-        border-radius: 10px;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15);
-    }
-    </style>
-
-<h1>Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013151.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013151.html
deleted file mode 100644
index 87971c04..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013151.html
+++ /dev/null
@@ -1,83 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-        filter: blur(5px); /* 让背景图片虚化 */
-        position: fixed; /* 背景图片固定，不随页面滚动 */
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        z-index: -1; 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.8); 
-        padding: 20px;
-        border-radius: 10px;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15);
-    }
-    </style>
-
-<h1>Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013154.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013154.html
deleted file mode 100644
index 72e175e3..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013154.html
+++ /dev/null
@@ -1,83 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-        filter: blur(5px); /* 让背景图片虚化 */
-        position: fixed; 
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        z-index: -1; 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.8); 
-        padding: 20px;
-        border-radius: 10px;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15);
-    }
-    </style>
-
-<h1>Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013156.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013156.html
deleted file mode 100644
index c2d79663..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013156.html
+++ /dev/null
@@ -1,83 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-        filter: blur(5px); 
-        position: fixed; 
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        z-index: -1; 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.8); 
-        padding: 20px;
-        border-radius: 10px;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15);
-    }
-    </style>
-
-<h1>Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013341.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013341.html
deleted file mode 100644
index 6e172b64..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013341.html
+++ /dev/null
@@ -1,99 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; /* 确保背景图片在最底层 */
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); /* 虚化背景图片 */
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; /* 确保内容在背景图片上层 */
-        background-color: rgba(255, 255, 255, 0.9); /* 可选：让内容区域背景半透明 */
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative; /* 确保文字和按钮内容在清晰的层 */
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-
-<h1>Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013349.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013349.html
deleted file mode 100644
index c27458aa..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013349.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; /* 确保背景图片在最底层 */
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); /* 虚化背景图片 */
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; /* 确保内容在背景图片上层 */
-        background-color: rgba(255, 255, 255, 0.9); /* 可选：让内容区域背景半透明 */
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative; /* 确保文字和按钮内容在清晰的层 */
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-    <div class="background"></div>
-
-<h1>Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013501.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013501.html
deleted file mode 100644
index b0a00d53..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013501.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; /* 确保背景图片在最底层 */
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); /* 虚化背景图片 */
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; /* 确保内容在背景图片上层 */
-        background-color: rgba(255, 255, 255, 0.9); /* 可选：让内容区域背景半透明 */
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative; /* 确保文字和按钮内容在清晰的层 */
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013613.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013613.html
deleted file mode 100644
index 31eb7cee..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013613.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; /* 确保背景图片在最底层 */
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); /* 虚化背景图片 */
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; /* 确保内容在背景图片上层 */
-        background-color: rgba(255, 255, 255, 0.9); /* 可选：让内容区域背景半透明 */
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative; /* 确保文字和按钮内容在清晰的层 */
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-{% comment %} .glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-} {% endcomment %}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013627.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013627.html
deleted file mode 100644
index b0a00d53..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013627.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; /* 确保背景图片在最底层 */
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); /* 虚化背景图片 */
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; /* 确保内容在背景图片上层 */
-        background-color: rgba(255, 255, 255, 0.9); /* 可选：让内容区域背景半透明 */
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative; /* 确保文字和按钮内容在清晰的层 */
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013631.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013631.html
deleted file mode 100644
index 0af7fa3c..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013631.html
+++ /dev/null
@@ -1,92 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; /* 确保背景图片在最底层 */
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); /* 虚化背景图片 */
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; /* 确保内容在背景图片上层 */
-        background-color: rgba(255, 255, 255, 0.9); /* 可选：让内容区域背景半透明 */
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative; /* 确保文字和按钮内容在清晰的层 */
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-、
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013632.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013632.html
deleted file mode 100644
index 035267a2..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013632.html
+++ /dev/null
@@ -1,92 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; /* 确保背景图片在最底层 */
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); /* 虚化背景图片 */
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; /* 确保内容在背景图片上层 */
-        background-color: rgba(255, 255, 255, 0.9); /* 可选：让内容区域背景半透明 */
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative; /* 确保文字和按钮内容在清晰的层 */
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013640.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013640.html
deleted file mode 100644
index b0a00d53..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013640.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; /* 确保背景图片在最底层 */
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); /* 虚化背景图片 */
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; /* 确保内容在背景图片上层 */
-        background-color: rgba(255, 255, 255, 0.9); /* 可选：让内容区域背景半透明 */
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative; /* 确保文字和按钮内容在清晰的层 */
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013655.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013655.html
deleted file mode 100644
index d9ebe523..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013655.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); /* 虚化背景图片 */
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; /* 确保内容在背景图片上层 */
-        background-color: rgba(255, 255, 255, 0.9); /* 可选：让内容区域背景半透明 */
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative; /* 确保文字和按钮内容在清晰的层 */
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013656.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013656.html
deleted file mode 100644
index 1217bf84..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013656.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; /* 确保内容在背景图片上层 */
-        background-color: rgba(255, 255, 255, 0.9); /* 可选：让内容区域背景半透明 */
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative; /* 确保文字和按钮内容在清晰的层 */
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013658.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013658.html
deleted file mode 100644
index f0ad96dc..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013658.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); /* 可选：让内容区域背景半透明 */
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative; /* 确保文字和按钮内容在清晰的层 */
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013701.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013701.html
deleted file mode 100644
index d0730b88..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013701.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 】
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative; /* 确保文字和按钮内容在清晰的层 */
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013702.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013702.html
deleted file mode 100644
index 9848170c..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013702.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative; /* 确保文字和按钮内容在清晰的层 */
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013704.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013704.html
deleted file mode 100644
index 906c635c..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013704.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整卡片 hover 的发光效果 */
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013707.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013707.html
deleted file mode 100644
index 271f0f20..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013707.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013824.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013824.html
deleted file mode 100644
index 0585e4ec..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013824.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013826.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013826.html
deleted file mode 100644
index 54d4a1c4..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013826.html
+++ /dev/null
@@ -1,112 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-<!-- Connect With Us Section -->
-<div class="footer-section">
-    <h2>Connect With Us!</h2>
-    <p>General Inquiries: <a href="mailto:registration@necysc.org">registration@necysc.org</a></p>
-    <p>Director: <a href="mailto:director@necysc.org">director@necysc.org</a></p>
-    <p>Assistant Director: <a href="mailto:assistantdirector@necysc.org">assistantdirector@necysc.org</a></p>
-    <div>
-        <a href="https://www.instagram.com/" target="_blank">Instagram</a>
-        <a href="https://www.facebook.com/" target="_blank">Facebook</a>
-    </div>
-    <p>&copy; 2024 Copyright. necysc.org</p>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013901.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013901.html
deleted file mode 100644
index 63833c3f..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013901.html
+++ /dev/null
@@ -1,112 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-<!-- Connect With Us Section -->
-<div class="footer-section">
-    <h2>class="welcome-title"Connect With Us!</h2>
-    <p>General Inquiries: <a href="mailto:registration@necysc.org">registration@necysc.org</a></p>
-    <p>Director: <a href="mailto:director@necysc.org">director@necysc.org</a></p>
-    <p>Assistant Director: <a href="mailto:assistantdirector@necysc.org">assistantdirector@necysc.org</a></p>
-    <div>
-        <a href="https://www.instagram.com/" target="_blank">Instagram</a>
-        <a href="https://www.facebook.com/" target="_blank">Facebook</a>
-    </div>
-    <p>&copy; 2024 Copyright. necysc.org</p>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013903.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013903.html
deleted file mode 100644
index 2758b028..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013903.html
+++ /dev/null
@@ -1,112 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-<!-- Connect With Us Section -->
-<div class="footer-section">
-    <h2class="welcome-title">Connect With Us!</h2>
-    <p>General Inquiries: <a href="mailto:registration@necysc.org">registration@necysc.org</a></p>
-    <p>Director: <a href="mailto:director@necysc.org">director@necysc.org</a></p>
-    <p>Assistant Director: <a href="mailto:assistantdirector@necysc.org">assistantdirector@necysc.org</a></p>
-    <div>
-        <a href="https://www.instagram.com/" target="_blank">Instagram</a>
-        <a href="https://www.facebook.com/" target="_blank">Facebook</a>
-    </div>
-    <p>&copy; 2024 Copyright. necysc.org</p>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013909.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013909.html
deleted file mode 100644
index 27f22e8e..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013909.html
+++ /dev/null
@@ -1,112 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-<!-- Connect With Us Section -->
-<div class="footer-section">
-    <h2 class="welcome-title">Connect With Us!</h2>
-    <p>General Inquiries: <a href="mailto:registration@necysc.org">registration@necysc.org</a></p>
-    <p>Director: <a href="mailto:director@necysc.org">director@necysc.org</a></p>
-    <p>Assistant Director: <a href="mailto:assistantdirector@necysc.org">assistantdirector@necysc.org</a></p>
-    <div>
-        <a href="https://www.instagram.com/" target="_blank">Instagram</a>
-        <a href="https://www.facebook.com/" target="_blank">Facebook</a>
-    </div>
-    <p>&copy; 2024 Copyright. necysc.org</p>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013926.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013926.html
deleted file mode 100644
index 1c50bb2e..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013926.html
+++ /dev/null
@@ -1,101 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-<!-- Connect With Us Section -->
-
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013928.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204013928.html
deleted file mode 100644
index b64f4914..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204013928.html
+++ /dev/null
@@ -1,101 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-
-
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204014101.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204014101.html
deleted file mode 100644
index 27f22e8e..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204014101.html
+++ /dev/null
@@ -1,112 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-<!-- Connect With Us Section -->
-<div class="footer-section">
-    <h2 class="welcome-title">Connect With Us!</h2>
-    <p>General Inquiries: <a href="mailto:registration@necysc.org">registration@necysc.org</a></p>
-    <p>Director: <a href="mailto:director@necysc.org">director@necysc.org</a></p>
-    <p>Assistant Director: <a href="mailto:assistantdirector@necysc.org">assistantdirector@necysc.org</a></p>
-    <div>
-        <a href="https://www.instagram.com/" target="_blank">Instagram</a>
-        <a href="https://www.facebook.com/" target="_blank">Facebook</a>
-    </div>
-    <p>&copy; 2024 Copyright. necysc.org</p>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204014105.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204014105.html
deleted file mode 100644
index 0585e4ec..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204014105.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-<div class="container mt-4 pt-4">
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015253.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015253.html
deleted file mode 100644
index 41b4fe11..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015253.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015258.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015258.html
deleted file mode 100644
index f6f24600..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015258.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<a class="white" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015302.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015302.html
deleted file mode 100644
index 41b4fe11..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015302.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<a class="btn-purple" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-    }
-    
-.glow:hover {
-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
-}
-</style>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015410.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015410.html
deleted file mode 100644
index 94f4eecc..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015410.html
+++ /dev/null
@@ -1,139 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-/* 居中容器 */
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    width: auto; /* 取消固定宽度 */
-    font-size: 18px; /* 增加字体大小 */
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大按钮效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 1.2 倍 */
-}
-
-/* glow 效果 */
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整光晕效果 */
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015420.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015420.html
deleted file mode 100644
index 2a7730d2..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015420.html
+++ /dev/null
@@ -1,139 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-/* 居中容器 */
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    width: auto; /* 取消固定宽度 */
-    font-size: 18px; /* 增加字体大小 */
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大按钮效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 1.2 倍 */
-}
-
-/* glow 效果 */
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整光晕效果 */
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015426.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015426.html
deleted file mode 100644
index 94f4eecc..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015426.html
+++ /dev/null
@@ -1,139 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-/* 居中容器 */
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    width: auto; /* 取消固定宽度 */
-    font-size: 18px; /* 增加字体大小 */
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大按钮效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 1.2 倍 */
-}
-
-/* glow 效果 */
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整光晕效果 */
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015438.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015438.html
deleted file mode 100644
index 3ad0848d..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015438.html
+++ /dev/null
@@ -1,139 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    width: auto; /* 取消固定宽度 */
-    font-size: 18px; /* 增加字体大小 */
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大按钮效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 1.2 倍 */
-}
-
-/* glow 效果 */
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整光晕效果 */
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015445.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015445.html
deleted file mode 100644
index 62a5a254..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015445.html
+++ /dev/null
@@ -1,139 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    width: auto; /* 取消固定宽度 */
-    font-size: 18px; /* 增加字体大小 */
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大按钮效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 1.2 倍 */
-}
-
-/* glow 效果 */
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整光晕效果 */
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015449.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015449.html
deleted file mode 100644
index cfaa9f50..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015449.html
+++ /dev/null
@@ -1,122 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-
-/* 放大按钮效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 1.2 倍 */
-}
-
-/* glow 效果 */
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整光晕效果 */
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015452.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015452.html
deleted file mode 100644
index 4e4466bf..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015452.html
+++ /dev/null
@@ -1,121 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 1.2 倍 */
-}
-
-/* glow 效果 */
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整光晕效果 */
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015457.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015457.html
deleted file mode 100644
index 62a5a254..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015457.html
+++ /dev/null
@@ -1,139 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    width: auto; /* 取消固定宽度 */
-    font-size: 18px; /* 增加字体大小 */
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大按钮效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 1.2 倍 */
-}
-
-/* glow 效果 */
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整光晕效果 */
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015501.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015501.html
deleted file mode 100644
index 2dafa8a4..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015501.html
+++ /dev/null
@@ -1,138 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    width: auto; /* 取消固定宽度 */
-    font-size: 18px; /* 增加字体大小 */
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 1.2 倍 */
-}
-
-/* glow 效果 */
-.glow {
-    transition: box-shadow 0.3s ease-in-out;
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整光晕效果 */
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015509.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015509.html
deleted file mode 100644
index cf5923f1..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015509.html
+++ /dev/null
@@ -1,134 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    width: auto; /* 取消固定宽度 */
-    font-size: 18px; /* 增加字体大小 */
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 1.2 倍 */
-}
-
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整光晕效果 */
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015511.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015511.html
deleted file mode 100644
index 1c3119bb..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015511.html
+++ /dev/null
@@ -1,134 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    width: auto; /* 取消固定宽度 */
-    font-size: 18px; /* 增加字体大小 */
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); 
-}
-
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整光晕效果 */
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015518.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015518.html
deleted file mode 100644
index 6cf81b6e..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015518.html
+++ /dev/null
@@ -1,133 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    width: auto; /* 取消固定宽度 */
-    font-size: 18px; /* 增加字体大小 */
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); 
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* 调整光晕效果 */
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015520.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015520.html
deleted file mode 100644
index 6d6df3fc..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015520.html
+++ /dev/null
@@ -1,133 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    width: auto; /* 取消固定宽度 */
-    font-size: 18px; /* 增加字体大小 */
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); 
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15);
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015522.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015522.html
deleted file mode 100644
index 17601d8d..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015522.html
+++ /dev/null
@@ -1,133 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    width: auto; /* 取消固定宽度 */
-    font-size: 18px; /* 增加字体大小 */
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-.enlarged-btn {
-    transform: scale(1); 
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); 
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15);
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015524.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015524.html
deleted file mode 100644
index 204f2a8b..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015524.html
+++ /dev/null
@@ -1,133 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    width: auto; /* 取消固定宽度 */
-    font-size: 18px; 
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-.enlarged-btn {
-    transform: scale(1); 
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); 
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15);
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015526.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015526.html
deleted file mode 100644
index eb096806..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015526.html
+++ /dev/null
@@ -1,133 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    width: auto; 
-    font-size: 18px; 
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-.enlarged-btn {
-    transform: scale(1); 
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); 
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15);
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015527.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015527.html
deleted file mode 100644
index 109692a2..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015527.html
+++ /dev/null
@@ -1,133 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-
-.container.text-center {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-}
-
-
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; 
-    cursor: pointer;
-    width: auto; 
-    font-size: 18px; 
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-.enlarged-btn {
-    transform: scale(1); 
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); 
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15);
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015533.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015533.html
deleted file mode 100644
index 47b2b334..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015533.html
+++ /dev/null
@@ -1,127 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="container mt-4 pt-4 text-center">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-
-
-
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; 
-    cursor: pointer;
-    width: auto; 
-    font-size: 18px; 
-    border-radius: 50px;
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-.enlarged-btn {
-    transform: scale(1); 
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); 
-}
-
-.glow:hover {
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15);
-}
-</style>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015621.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015621.html
deleted file mode 100644
index edc4f947..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015621.html
+++ /dev/null
@@ -1,131 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-/* 居中按钮容器 */
-.button-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh; /* 让按钮垂直居中 */
-}
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015727.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015727.html
deleted file mode 100644
index ba1d4cdd..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015727.html
+++ /dev/null
@@ -1,131 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 添加顶部间距让按钮稍微下移 */
-    }
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015857.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015857.html
deleted file mode 100644
index 8a5a98b7..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015857.html
+++ /dev/null
@@ -1,187 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-        <h1 class="welcome-title">Welcome!</h1>
-        <a class="btn-purple enlarged-btn" 
-            href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-    </div>
-    
-    <style>
-    /* 容器样式，控制整体布局 */
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-    /* 标题样式 */
-    .welcome-title {
-        font-size: 3rem; /* 增大字体 */
-        text-align: center; /* 居中对齐 */
-        color: #4e598c; /* 标题颜色 */
-        margin-bottom: 20px; /* 与按钮之间的间距 */
-        font-weight: bold; /* 加粗标题 */
-        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
-    }
-    
-    /* 按钮样式 */
-    .btn-purple {
-        background-color: #4e598c;
-        color: #f9c784;
-        transition: all 0.3s ease;
-        border: none;
-        padding: 15px 30px; /* 按钮内边距 */
-        cursor: pointer;
-        font-size: 18px; /* 按钮字体大小 */
-        border-radius: 50px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加按钮阴影 */
-    }
-    
-    /* 鼠标悬停时颜色变化 */
-    .btn-purple:hover {
-        background-color: #f9c784;
-        color: #ffffff;
-    }
-    
-    /* 鼠标悬停时放大 */
-    .enlarged-btn {
-        transform: scale(1); /* 默认比例 */
-        transition: transform 0.3s ease;
-    }
-    
-    .enlarged-btn:hover {
-        transform: scale(1.2); /* 鼠标悬停时放大 */
-    }
-    </style>
-    
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 添加顶部间距让按钮稍微下移 */
-    }
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015902.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015902.html
deleted file mode 100644
index 755e922f..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015902.html
+++ /dev/null
@@ -1,187 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-    <h1 class="welcome-title">Welcome!</h1>
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-/* 容器样式，控制整体布局 */
-.content-container {
-    display: flex;
-    flex-direction: column; /* 元素垂直排列 */
-    justify-content: center; /* 垂直居中 */
-    align-items: center; /* 水平居中 */
-    height: 33vh; /* 占页面高度的三分之一 */
-    margin-top: 5vh; /* 页面顶部留空 */
-}
-
-/* 标题样式 */
-.welcome-title {
-    font-size: 3rem; /* 增大字体 */
-    text-align: center; /* 居中对齐 */
-    color: #4e598c; /* 标题颜色 */
-    margin-bottom: 20px; /* 与按钮之间的间距 */
-    font-weight: bold; /* 加粗标题 */
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
-}
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 按钮内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 按钮字体大小 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加按钮阴影 */
-}
-
-/* 鼠标悬停时颜色变化 */
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 鼠标悬停时放大 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 添加顶部间距让按钮稍微下移 */
-    }
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015904.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015904.html
deleted file mode 100644
index ba1d4cdd..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015904.html
+++ /dev/null
@@ -1,131 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 添加顶部间距让按钮稍微下移 */
-    }
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015918.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015918.html
deleted file mode 100644
index 7f25612e..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015918.html
+++ /dev/null
@@ -1,140 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 添加顶部间距让按钮稍微下移 */
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015931.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015931.html
deleted file mode 100644
index 16076382..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015931.html
+++ /dev/null
@@ -1,140 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="content-container">
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 添加顶部间距让按钮稍微下移 */
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015940.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015940.html
deleted file mode 100644
index 7f25612e..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015940.html
+++ /dev/null
@@ -1,140 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 添加顶部间距让按钮稍微下移 */
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015943.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015943.html
deleted file mode 100644
index 8acee283..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015943.html
+++ /dev/null
@@ -1,142 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h1 class="welcome-title">Welcome!</h1>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 添加顶部间距让按钮稍微下移 */
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015955.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204015955.html
deleted file mode 100644
index 1b743478..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204015955.html
+++ /dev/null
@@ -1,143 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h1 class="welcome-title">Welcome!</h1>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 添加顶部间距让按钮稍微下移 */
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020006.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020006.html
deleted file mode 100644
index a78b8aee..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020006.html
+++ /dev/null
@@ -1,143 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h4 class="welcome-title">Welcome!</h1>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 添加顶部间距让按钮稍微下移 */
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020008.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020008.html
deleted file mode 100644
index 94eeb95e..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020008.html
+++ /dev/null
@@ -1,143 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h4 class="welcome-title">Welcome!</h4>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 添加顶部间距让按钮稍微下移 */
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020013.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020013.html
deleted file mode 100644
index a44e59af..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020013.html
+++ /dev/null
@@ -1,143 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h4>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 添加顶部间距让按钮稍微下移 */
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020014.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020014.html
deleted file mode 100644
index 6b6ef609..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020014.html
+++ /dev/null
@@ -1,143 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 添加顶部间距让按钮稍微下移 */
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020026.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020026.html
deleted file mode 100644
index 1296f9ea..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020026.html
+++ /dev/null
@@ -1,143 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 22vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 添加顶部间距让按钮稍微下移 */
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020032.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020032.html
deleted file mode 100644
index a8087fa2..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020032.html
+++ /dev/null
@@ -1,143 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 22vh; /* 占页面高度的三分之一 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020039.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020039.html
deleted file mode 100644
index 4d7584f9..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020039.html
+++ /dev/null
@@ -1,143 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 11vh; /* 占页面高度的三分之一 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020044.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020044.html
deleted file mode 100644
index 3d7a6c4a..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020044.html
+++ /dev/null
@@ -1,143 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 1vh; /* 占页面高度的三分之一 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020100.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020100.html
deleted file mode 100644
index bab55ad0..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020100.html
+++ /dev/null
@@ -1,143 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 1vh; /* 占页面高度的三分之一 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 1vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020106.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020106.html
deleted file mode 100644
index 74faf768..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020106.html
+++ /dev/null
@@ -1,143 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 22vh; /* 占页面高度的三分之一 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 1vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020119.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020119.html
deleted file mode 100644
index 378d63dd..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020119.html
+++ /dev/null
@@ -1,144 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 22vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 1vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020204.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020204.html
deleted file mode 100644
index bb3d4fe9..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020204.html
+++ /dev/null
@@ -1,153 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 22vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 1vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.welcome-title {
-    font-size: 4rem; /* 将字体调大 */
-    text-align: center; /* 居中对齐 */
-    color: #4e598c; /* 标题颜色 */
-    margin-bottom: 20px; /* 与按钮之间的间距 */
-    font-weight: bold; /* 加粗标题 */
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020215.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020215.html
deleted file mode 100644
index b1232f26..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020215.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 22vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 1vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.welcome-title {
-    font-size: 4rem; /* 将字体调大 */
-    text-align: center; /* 居中对齐 */
-    margin-bottom: 20px; /* 与按钮之间的间距 */
-    font-weight: bold; /* 加粗标题 */
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020223.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020223.html
deleted file mode 100644
index ef819eea..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020223.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 22vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 10vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.welcome-title {
-    font-size: 4rem; /* 将字体调大 */
-    text-align: center; /* 居中对齐 */
-    margin-bottom: 20px; /* 与按钮之间的间距 */
-    font-weight: bold; /* 加粗标题 */
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020230.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020230.html
deleted file mode 100644
index 87feb4e9..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020230.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 22vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 12vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.welcome-title {
-    font-size: 4rem; /* 将字体调大 */
-    text-align: center; /* 居中对齐 */
-    margin-bottom: 20px; /* 与按钮之间的间距 */
-    font-weight: bold; /* 加粗标题 */
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020236.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020236.html
deleted file mode 100644
index 7e0651ec..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020236.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 27vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 12vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.welcome-title {
-    font-size: 4rem; /* 将字体调大 */
-    text-align: center; /* 居中对齐 */
-    margin-bottom: 20px; /* 与按钮之间的间距 */
-    font-weight: bold; /* 加粗标题 */
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020247.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020247.html
deleted file mode 100644
index 6c502c07..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020247.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 12vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.welcome-title {
-    font-size: 4rem; /* 将字体调大 */
-    text-align: center; /* 居中对齐 */
-    margin-bottom: 20px; /* 与按钮之间的间距 */
-    font-weight: bold; /* 加粗标题 */
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020253.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020253.html
deleted file mode 100644
index e6f0a518..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020253.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 1vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.welcome-title {
-    font-size: 4rem; /* 将字体调大 */
-    text-align: center; /* 居中对齐 */
-    margin-bottom: 20px; /* 与按钮之间的间距 */
-    font-weight: bold; /* 加粗标题 */
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020254.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020254.html
deleted file mode 100644
index ead82db4..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020254.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 13vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.welcome-title {
-    font-size: 4rem; /* 将字体调大 */
-    text-align: center; /* 居中对齐 */
-    margin-bottom: 20px; /* 与按钮之间的间距 */
-    font-weight: bold; /* 加粗标题 */
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020301.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020301.html
deleted file mode 100644
index d58f505e..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020301.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 13vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.welcome-title {
-    font-size: 5rem; /* 将字体调大 */
-    text-align: center; /* 居中对齐 */
-    margin-bottom: 20px; /* 与按钮之间的间距 */
-    font-weight: bold; /* 加粗标题 */
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020312.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020312.html
deleted file mode 100644
index cb25bfd3..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020312.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 13vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; /* 居中对齐 */
-    margin-bottom: 20px; /* 与按钮之间的间距 */
-    font-weight: bold; /* 加粗标题 */
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020314.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020314.html
deleted file mode 100644
index b27c90aa..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020314.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 13vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; /* 与按钮之间的间距 */
-    font-weight: bold; /* 加粗标题 */
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020317.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020317.html
deleted file mode 100644
index 89b1260e..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020317.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 13vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold; /* 加粗标题 */
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020318.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020318.html
deleted file mode 100644
index 3e93c58b..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020318.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 13vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020320.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020320.html
deleted file mode 100644
index c542f664..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020320.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 13vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 添加轻微阴影效果 */
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020322.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020322.html
deleted file mode 100644
index 1265bb5f..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020322.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 13vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; /* 增大字体 */
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020323.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020323.html
deleted file mode 100644
index 33958785..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020323.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 13vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; /* 增加按钮的内边距 */
-    cursor: pointer;
-    font-size: 18px; 
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020325.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020325.html
deleted file mode 100644
index adf27565..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020325.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 13vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; 
-    cursor: pointer;
-    font-size: 18px; 
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020327.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020327.html
deleted file mode 100644
index 30ca82ca..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020327.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 13vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; 
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; 
-    cursor: pointer;
-    font-size: 18px; 
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020329.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020329.html
deleted file mode 100644
index 12ae5456..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020329.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center; /* 水平居中 */
-        height: 13vh; 
-        margin-top: 5vh; 
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; 
-    cursor: pointer;
-    font-size: 18px; 
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020330.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020330.html
deleted file mode 100644
index bfeee66d..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020330.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; /* 垂直居中 */
-        align-items: center;
-        height: 13vh; 
-        margin-top: 5vh; 
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; 
-    cursor: pointer;
-    font-size: 18px; 
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020331.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020331.html
deleted file mode 100644
index 7bf97148..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020331.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; /* 元素垂直排列 */
-        justify-content: center; 
-        align-items: center;
-        height: 13vh; 
-        margin-top: 5vh; 
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; 
-    cursor: pointer;
-    font-size: 18px; 
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020333.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020333.html
deleted file mode 100644
index a11825cc..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020333.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh; /* 页面顶部留空 */
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; 
-        justify-content: center; 
-        align-items: center;
-        height: 13vh; 
-        margin-top: 5vh; 
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; 
-    cursor: pointer;
-    font-size: 18px; 
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020334.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020334.html
deleted file mode 100644
index 98ab7534..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020334.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; /* 占页面高度的三分之一 */
-        margin-top: 5vh;
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; 
-        justify-content: center; 
-        align-items: center;
-        height: 13vh; 
-        margin-top: 5vh; 
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; 
-    cursor: pointer;
-    font-size: 18px; 
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020336.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020336.html
deleted file mode 100644
index c7b5ca6f..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020336.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; /* 对齐到顶部 */
-        height: 33vh; 
-        margin-top: 5vh;
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; 
-        justify-content: center; 
-        align-items: center;
-        height: 13vh; 
-        margin-top: 5vh; 
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; 
-    cursor: pointer;
-    font-size: 18px; 
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020338.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020338.html
deleted file mode 100644
index 628b822a..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020338.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; 
-        height: 33vh; 
-        margin-top: 5vh;
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; 
-        justify-content: center; 
-        align-items: center;
-        height: 13vh; 
-        margin-top: 5vh; 
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; 
-    cursor: pointer;
-    font-size: 18px; 
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1); /* 默认比例 */
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020347.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020347.html
deleted file mode 100644
index 2f9ad7bb..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020347.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; 
-        height: 33vh; 
-        margin-top: 5vh;
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; 
-        justify-content: center; 
-        align-items: center;
-        height: 13vh; 
-        margin-top: 5vh; 
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; 
-    cursor: pointer;
-    font-size: 18px; 
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1);
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); /* 鼠标悬停时放大 */
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020349.html b/.history/necysc_app/templates/necysc_app/applicant/index_20241204020349.html
deleted file mode 100644
index 62daf531..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/index_20241204020349.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "necysc_app/base.html" %}
-{% load static %}
-{% block title %} Applicant Portal {% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
-{% if applications %}
-    <div class="container mb-4">
-        {% for application in applications %}
-        <div class="card col-4 glow">
-            <a href="{% url 'necysc_app:application_detail' application.id %}" class="application-card-link">
-                <div class="card-body">
-                    <h5 class="card-title"><span>{{ application.applicant_fname }} 
-                        {{ application.applicant_lname }}</span>                                                 
-                        {% if application.app_status == 'A' %}
-                        <span class="badge bg-success float-end">Accepted </span>
-                        {% elif application.app_status == 'P' %}
-                        <span class="badge bg-secondary float-end">Pending</span>
-                        {% else %}
-                        <span class="badge bg-danger float-end">Rejected</span>
-                        {% endif %}
-                                        
-                    </h5>
-                    <!-- horizontal line-->
-                    <hr>
-                    <p class="card-text fw-light">Year: {{application.app_year}}</p>
-                    <p class="card-text m-0 fw-light">Health Status: {{application.health_record_status}}</p>
-                </div>
-                    
-            </a>
-        </div>
-        {% endfor %}
-    </div>
-{% endif %}
-
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
-        href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
-</div>
-
-<style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; 
-        height: 33vh; 
-        margin-top: 5vh;
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; 
-        justify-content: center; 
-        align-items: center;
-        height: 13vh; 
-        margin-top: 5vh; 
-    }
-    
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; 
-    cursor: pointer;
-    font-size: 18px; 
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1);
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); 
-}
-</style>
-
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241203231402.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241203231402.html
deleted file mode 100644
index 17d4440f..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241203231402.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h2>Don't Have an Account?</h2>
-        <p>Sign up for the summer!</p>
-        <a class="" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010644.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204010644.html
deleted file mode 100644
index 4df2f6f1..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010644.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h2 class="custom-h2">Don't Have an Account?</h2>
-        <p class="custom-p">Sign up for the summer!</p>
-        <a class="" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010705.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204010705.html
deleted file mode 100644
index 17d4440f..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010705.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h2>Don't Have an Account?</h2>
-        <p>Sign up for the summer!</p>
-        <a class="" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010707.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204010707.html
deleted file mode 100644
index 1e5b4d45..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010707.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h2Don't Have an Account?</h2>
-        <p>Sign up for the summer!</p>
-        <a class="" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010709.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204010709.html
deleted file mode 100644
index 17d4440f..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010709.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h2>Don't Have an Account?</h2>
-        <p>Sign up for the summer!</p>
-        <a class="" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010710.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204010710.html
deleted file mode 100644
index adf1bf42..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010710.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h1>Don't Have an Account?</h2>
-        <p>Sign up for the summer!</p>
-        <a class="" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010713.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204010713.html
deleted file mode 100644
index b71c35a4..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010713.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h1>Don't Have an Account?</h1>
-        <p>Sign up for the summer!</p>
-        <a class="" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010720.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204010720.html
deleted file mode 100644
index be965fb0..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010720.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h1>Don't Have an Account?</h1>
-        <h2>Sign up for the summer!</p>
-        <a class="" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010723.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204010723.html
deleted file mode 100644
index 9c305e55..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010723.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h1>Don't Have an Account?</h1>
-        <h2>Sign up for the summer!</h2>
-        <a class="" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010852.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204010852.html
deleted file mode 100644
index 1d10aa5b..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010852.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h1>Don't Have an Account?</h1>
-        <h2>Sign up for the summer!</h2>
-        <a class="" href="{% url 'necysc_app:register' %}tyle="color: blue;"">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010854.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204010854.html
deleted file mode 100644
index 05fdd415..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010854.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h1>Don't Have an Account?</h1>
-        <h2>Sign up for the summer!</h2>
-        <a class="" href="{% url 'necysc_app:register' %}style="color: blue;"">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010858.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204010858.html
deleted file mode 100644
index a12f00d4..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204010858.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h1>Don't Have an Account?</h1>
-        <h2>Sign up for the summer!</h2>
-        <a class="" href="{% url 'necysc_app:register' %}style="color: white;"">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011022.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204011022.html
deleted file mode 100644
index 00ed49c5..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011022.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h1>Don't Have an Account?</h1>
-        <h2>Sign up for the summer!</h2>
-        <a class="white-link" href="{% url 'necysc_app:register' %}style="color: white;"">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011047.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204011047.html
deleted file mode 100644
index 31a5cb60..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011047.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h1>Don't Have an Account?</h1>
-        <h2>Sign up for the summer!</h2>
-        <a class="white-link" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011200.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204011200.html
deleted file mode 100644
index fab59f66..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011200.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h0.>Don't Have an Account?</h1>
-        <h2>Sign up for the summer!</h2>
-        <a class="white-link" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011201.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204011201.html
deleted file mode 100644
index d3182b1f..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011201.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h>Don't Have an Account?</h1>
-        <h2>Sign up for the summer!</h2>
-        <a class="white-link" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011202.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204011202.html
deleted file mode 100644
index cbbf0f4f..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011202.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h0>Don't Have an Account?</h1>
-        <h2>Sign up for the summer!</h2>
-        <a class="white-link" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011204.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204011204.html
deleted file mode 100644
index b80e3f96..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011204.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h0>Don't Have an Account?</h0>
-        <h2>Sign up for the summer!</h2>
-        <a class="white-link" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011210.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204011210.html
deleted file mode 100644
index 8c0e9c85..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011210.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h4>Don't Have an Account?</h0>
-        <h2>Sign up for the summer!</h2>
-        <a class="white-link" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011212.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204011212.html
deleted file mode 100644
index caab81e6..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011212.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h4>Don't Have an Account?</h4>
-        <h2>Sign up for the summer!</h2>
-        <a class="white-link" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011226.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204011226.html
deleted file mode 100644
index f23e114c..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011226.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h4>Don't Have an Account?</h4>
-        <h4>Sign up for the summer!</h2>
-        <a class="white-link" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011228.html b/.history/necysc_app/templates/necysc_app/applicant/login_20241204011228.html
deleted file mode 100644
index a768db6d..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/login_20241204011228.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "necysc_app/base.html" %} {% load static %} {% block title %} Login /
-Register {% endblock %} {% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/login.css' %}" />
-
-<div class="login_page">
-    <!-- Login Form -->
-    <div class="login_form">
-        <h1>Welcome Back!</h1>
-        <form method="POST" action="" class="login_form_body">
-            {% csrf_token %}
-
-            <!--name="username" because django authentication by default refers to username-->
-            <div>
-                <label for="id_email">Email</label>
-                <input type="email" name="username" id="id_email" required>
-            </div>
-            <div>
-                <label for="id_password">Password</label>
-                <input type="password" name="password" id="id_password" required>
-            </div>
-            <input style="background-color: #4e598c; color: #f9c784; transition: all 0.3s ease; padding: 10px 20px;
-                            border-radius: 20px;
-                            display: inline-block;
-                            text-align: center;" 
-                    class="fw-bold" type="submit" value="Login" name="Login User">
-        </form>
-        
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password.</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-    </div>
-
-    <!-- Register Form -->
-    <div class="register_form">
-        <h4>Don't Have an Account?</h4>
-        <h4>Sign up for the summer!</h4>
-        <a class="white-link" href="{% url 'necysc_app:register' %}">Sign Up</a>
-    </div>
-    <script>
-        var form_fields = document.getElementsByTagName('input')
-        form_fields[1].placeholder = 'Email...';
-        form_fields[2].placeholder = 'Enter password...';
-        for (var field in form_fields) {
-            form_fields[field].className += ' form-control'
-        }
-    </script>
-</div>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241203231402.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241203231402.html
deleted file mode 100644
index 696ab5d8..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241203231402.html
+++ /dev/null
@@ -1,1384 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name</label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204001431.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204001431.html
deleted file mode 100644
index d4ada394..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204001431.html
+++ /dev/null
@@ -1,1384 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003447.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003447.html
deleted file mode 100644
index 8f6b9b65..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003447.html
+++ /dev/null
@@ -1,1385 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003452.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003452.html
deleted file mode 100644
index 778d13db..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003452.html
+++ /dev/null
@@ -1,1386 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003605.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003605.html
deleted file mode 100644
index 3919bd5f..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003605.html
+++ /dev/null
@@ -1,1386 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-						required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003610.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003610.html
deleted file mode 100644
index 8f6b9b65..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003610.html
+++ /dev/null
@@ -1,1385 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003740.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003740.html
deleted file mode 100644
index 1db4a0dc..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003740.html
+++ /dev/null
@@ -1,1386 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003743.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003743.html
deleted file mode 100644
index e55a0b13..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003743.html
+++ /dev/null
@@ -1,1387 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003745.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003745.html
deleted file mode 100644
index fa563a01..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003745.html
+++ /dev/null
@@ -1,1388 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003746.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003746.html
deleted file mode 100644
index ec1b1e3a..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003746.html
+++ /dev/null
@@ -1,1389 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003749.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003749.html
deleted file mode 100644
index 9f4e96d7..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003749.html
+++ /dev/null
@@ -1,1390 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-					required
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003751.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003751.html
deleted file mode 100644
index 1bcb9df2..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003751.html
+++ /dev/null
@@ -1,1391 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-					required
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-					required
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003836.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003836.html
deleted file mode 100644
index 9f4e96d7..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003836.html
+++ /dev/null
@@ -1,1390 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-					required
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003838.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003838.html
deleted file mode 100644
index ec1b1e3a..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003838.html
+++ /dev/null
@@ -1,1389 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003915.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003915.html
deleted file mode 100644
index 3ad60e64..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003915.html
+++ /dev/null
@@ -1,1390 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003917.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003917.html
deleted file mode 100644
index eb64a15d..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003917.html
+++ /dev/null
@@ -1,1390 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003921.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003921.html
deleted file mode 100644
index d7f11d03..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204003921.html
+++ /dev/null
@@ -1,1391 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004052.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004052.html
deleted file mode 100644
index 088b8f62..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004052.html
+++ /dev/null
@@ -1,1392 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004152.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004152.html
deleted file mode 100644
index 507fc2da..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004152.html
+++ /dev/null
@@ -1,1393 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004200.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004200.html
deleted file mode 100644
index 1b7b217d..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004200.html
+++ /dev/null
@@ -1,1394 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-					required
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004211.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004211.html
deleted file mode 100644
index 87646b61..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004211.html
+++ /dev/null
@@ -1,1395 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-					required
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004317.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004317.html
deleted file mode 100644
index 34531de5..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004317.html
+++ /dev/null
@@ -1,1395 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-					
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004328.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004328.html
deleted file mode 100644
index 87646b61..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004328.html
+++ /dev/null
@@ -1,1395 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-					required
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004413.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004413.html
deleted file mode 100644
index af4a7c12..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004413.html
+++ /dev/null
@@ -1,1395 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004504.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004504.html
deleted file mode 100644
index a96c73c2..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004504.html
+++ /dev/null
@@ -1,1394 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004521.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004521.html
deleted file mode 100644
index 25e87493..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004521.html
+++ /dev/null
@@ -1,1395 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004524.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004524.html
deleted file mode 100644
index 2aef420d..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004524.html
+++ /dev/null
@@ -1,1396 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-					required
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004550.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004550.html
deleted file mode 100644
index d41b3d0e..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004550.html
+++ /dev/null
@@ -1,1396 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004552.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004552.html
deleted file mode 100644
index c7ba41c2..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004552.html
+++ /dev/null
@@ -1,1395 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004622.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004622.html
deleted file mode 100644
index 098a84a1..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004622.html
+++ /dev/null
@@ -1,1396 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004631.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004631.html
deleted file mode 100644
index 53de8717..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204004631.html
+++ /dev/null
@@ -1,1397 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005523.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005523.html
deleted file mode 100644
index 8a4203d7..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005523.html
+++ /dev/null
@@ -1,2794 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address{% extends "necysc_app/base.html" %}
-					<!-- prevent line break on autoformat -->
-					{% block title %} New Application {% endblock %} {% block content %}
-					<!--Application Border Box-->
-					
-					<div class="border p-5 rounded shadow-lg">
-						<h1>Start a New Application</h1>
-					
-						<!--this overrides the default browser validation, we need to update the validation manually-->
-						<form
-							class="needs-validation"
-							novalidate
-							action="{% url 'necysc_app:submit_application' %}"
-							method="post"
-						>
-							{% csrf_token %}
-					
-							<h3>Camper Information</h3>
-							<!--name inputs-->
-							<div class="row">
-								<div class="mb-3 col-md-4">
-									<label for="firstnamet" class="form-label"
-										>English First Name</label
-									>
-									<input
-										type="text"
-										class="form-control"
-										id="firstname"
-										name="applicant_fname"
-										placeholder="First Name"
-										required
-									/>
-								</div>
-								<div class="mb-3 col-md-4">
-									<label for="lastnamet" class="form-label"
-										>English Last Name</label
-									>
-									<input
-										type="text"
-										class="form-control"
-										id="lastname"
-										name="applicant_lname"
-										placeholder="Last Name"
-										required
-									/>
-								</div>
-								<div class="mb-3 col-md-4">
-									<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-									<input
-										type="text"
-										class="form-control"
-										id="chineseName"
-										name="applicant_chinese_name"
-										placeholder="Chinese Name"
-									/>
-									<div class="form-text">Use Chinese characters please.</div>
-								</div>
-							</div>
-					
-							<div class="row">
-								<div class="mb-3 col-md-6">
-									<label for="applicantemail" class="form-label"
-										>Email Address</label
-									>
-									<input
-										type="email"
-										class="form-control"
-										id="applicantemail"
-										name="applicant_email"
-										placeholder="ex. johnsmith@gmail.com"
-									/>
-								</div>
-								<div class="mb-3 col-md-6">
-									<label for="applicantbirthdate" class="form-label"
-										>Birth Date</label
-									>
-									<input
-										type="date"
-										class="form-control"
-										id="applicantbirthdate"
-										name="applicant_bday"
-										data-date-format="yyyy/mm/dd"
-										required
-									/>
-								</div>
-							</div>
-					
-							<!--radio buttons for gender-->
-							<label class="form-label">Gender</label>
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="applicant_sex"
-									id="male"
-									value="M"
-									required
-								/>
-								<label class="form-check-label" for="male"> Male </label>
-							</div>
-							<div class="form-check mb-3">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="applicant_sex"
-									id="female"
-									value="F"
-									required
-								/>
-								<label class="form-check-label" for="female"> Female </label>
-							</div>
-					
-							<div class="mb-3 col-md-4">
-								<label for="applicantgrade" class="form-label">School Grade</label>
-								<input
-									type="number"
-									class="form-control"
-									id="applicantgrade"
-									name="applicant_grade"
-									placeholder="ex. 5"
-									step="1"
-									required
-								/>
-								<div class="form-text">Number only, in 2025 Fall semester</div>
-							</div>
-					
-							<!--Need to change the application model field to accept more than 2 letters?-->
-							<!--Camper T-Shirt Size-->
-							<label class="form-label">Camper T-Shirt Size</label>
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="applicant_shirt_size"
-									id="youthsmall"
-									value="YS"
-									required
-								/>
-								<label class="form-check-label" for="youthsmall">
-									Youth Small
-								</label>
-							</div>
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="applicant_shirt_size"
-									id="youthmedium"
-									value="YM"
-									required
-								/>
-								<label class="form-check-label" for="youthmedium">
-									Youth Medium
-								</label>
-							</div>
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="applicant_shirt_size"
-									id="youthlarge"
-									value="YL"
-									required
-								/>
-								<label class="form-check-label" for="youthlarge">
-									Youth Large
-								</label>
-							</div>
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="applicant_shirt_size"
-									id="adultsmall"
-									value="AS"
-									required
-								/>
-								<label class="form-check-label" for="adultsmall">
-									Adult Small
-								</label>
-							</div>
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="applicant_shirt_size"
-									id="adultmedium"
-									value="AM"
-									required
-								/>
-								<label class="form-check-label" for="adultmedium">
-									Adult Medium
-								</label>
-							</div>
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="applicant_shirt_size"
-									id="adultlarge"
-									value="AL"
-									required
-								/>
-								<label class="form-check-label" for="adultlarge">
-									Adult Large
-								</label>
-							</div>
-							<div class="form-check mb-3">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="applicant_shirt_size"
-									id="adultextralarge"
-									value="AX"
-									required
-								/>
-								<label class="form-check-label" for="adultextralarge">
-									Adult Extra Large
-								</label>
-							</div>
-					
-							<!--Program options-->
-							<label class="form-label">Program</label>
-							<div id="program">
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="radio"
-										name="program"
-										id="day"
-										value="D"
-										required
-									/>
-									<label class="form-check-label" for="day"> Day </label>
-								</div>
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="radio"
-										name="program"
-										id="overnight"
-										value="ON"
-										required
-									/>
-									<label class="form-check-label" for="overnight"> Overnight </label>
-								</div>
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="radio"
-										name="program"
-										id="cit"
-										value="CIT"
-										required
-									/>
-									<label class="form-check-label" for="cit"> CIT </label>
-								</div>
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="radio"
-										name="program"
-										id="counselor"
-										value="C"
-										required
-									/>
-									<label class="form-check-label" for="counselor"> Counselor </label>
-								</div>
-								<div class="form-check mb-3">
-									<input
-										class="form-check-input"
-										type="radio"
-										name="program"
-										id="ea"
-										value="EA"
-										required
-									/>
-									<label class="form-check-label" for="ea"> EA </label>
-								</div>
-					
-							<div class="row">
-								<div class="mb-3 col-md-6">
-									<label for="streetaddress" class="form-label"
-										>Street Address</label
-									>
-									<input
-										type="text"
-										class="form-control"
-										id="streetaddress"
-										name="street_address"
-										placeholder="Street Address"
-										required
-									/>
-								</div>
-								<div class="mb-3 col-md-6">
-									<label for="city" class="form-label">City</label>
-									<input
-										type="text"
-										class="form-control"
-										id="city"
-										name="city"
-										placeholder="City/Town"
-										required
-									/>
-								</div>
-							</div>
-						</div>
-					
-							<div class="row">
-								<div class="mb-3 col-md-6">
-									<label for="state" class="form-label">State</label>
-									<input
-										type="text"
-										class="form-control"
-										id="state"
-										name="state"
-										placeholder="ex. MA"
-										required
-									/>
-								</div>
-								<div class="mb-3 col-md-6">
-									<label for="zipcode" class="form-label">Zip Code</label>
-									<input
-										type="text"
-										class="form-control"
-										id="zipcode"
-										name="zip_code"
-										placeholder="ex. 01719"
-										required
-									/>
-								</div>
-							</div>
-					
-							<!--parent/guardian/emergency contact info-->
-							<h3>Parent/Guardian/Emergency Contact Information</h3>
-							<div class="form-text mb-3">
-								NOTE: Please enter as much contact information as possible in case
-								we need to contact you for application or during the camp week. The
-								parent's first and last name must match the legal name on government
-								issued ID
-							</div>
-					
-							<div class="row">
-								<div class="mb-3 col-md-6">
-									<label for="parent1fname" class="form-label"
-										>Main Contact First Name</label
-									>
-									<input
-										type="text"
-										class="form-control"
-										id="parent1fname"
-										name="parent1_fname"
-										placeholder="First Name"
-										required
-									/>
-								</div>
-								<div class="mb-3 col-md-6">
-									<label for="parent1lname" class="form-label"
-										>Main Contact Last Name</label
-									>
-									<input
-										type="text"
-										class="form-control"
-										id="parent1lname"
-										name="parent1_lname"
-										placeholder="Last Name"
-										required
-									/>
-								</div>
-							</div>
-							<div class="row">
-								<div class="mb-3 col-md-6">
-									<label for="parent1phone" class="form-label"
-										>Main Contact Phone Number</label
-									>
-									<input
-										type="tel"
-										class="form-control"
-										id="parent1phone"
-										name="parent1_phone"
-										placeholder="ex. 123-456-7890"
-										required
-									/>
-								</div>
-								<div class="mb-3 col-md-6">
-									<label for="parent1email" class="form-label"
-										>Main Contact Email</label
-									>
-									<input
-										type="email"
-										class="form-control"
-										id="parent1email"
-										name="parent1_email"
-										placeholder="ex. johnsmith@gmail.com"
-										required
-									/>
-								</div>
-							</div>
-					
-							<!--Parent relationship choices-->
-							<label class="form-label">Main Contact Relationship</label>
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="parent1_relationship"
-									id="parent1father"
-									value="F"
-									required
-								/>
-								<label class="form-check-label" for="parent1father"> Father </label>
-							</div>
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="parent1_relationship"
-									id="parent1mother"
-									value="M"
-									required
-								/>
-								<label class="form-check-label" for="parent1mother"> Mother </label>
-							</div>
-							<div class="form-check mb-3">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="parent1_relationship"
-									id="parent1guardian"
-									value="G"
-									required
-								/>
-								<label class="form-check-label" for="parent1guardian">
-									Guardian
-								</label>
-							</div>
-					
-							<!--Secondary Contact-->
-							<div class="row">
-								<div class="mb-3 col-md-6">
-									<label for="parent2fname" class="form-label"
-										>Secondary Contact First Name</label
-									>
-									<input
-										type="text"
-										class="form-control"
-										id="parent2fname"
-										name="parent2_fname"
-										placeholder="First Name"
-									/>
-								</div>
-								<div class="mb-3 col-md-6">
-									<label for="parent2lname" class="form-label"
-										>Secondary Contact Last Name</label
-									>
-									<input
-										type="text"
-										class="form-control"
-										id="parent2lname"
-										name="parent2_lname"
-										placeholder="Last Name"
-									/>
-								</div>
-							</div>
-							<div class="row">
-								<div class="mb-3 col-md-6">
-									<label for="parent2phone" class="form-label"
-										>Secondary Contact Phone Number</label
-									>
-									<input
-										type="tel"
-										class="form-control"
-										id="parent2phone"
-										name="parent2_phone"
-										placeholder="ex. 123-456-7890"
-									/>
-								</div>
-								<div class="mb-3 col-md-6">
-									<label for="parent2email" class="form-label"
-										>Secondary Contact Email</label
-									>
-									<input
-										type="email"
-										class="form-control"
-										id="parent2email"
-										name="parent2_email"
-										placeholder="ex. janesmith@gmail.com"
-									/>
-								</div>
-							</div>
-					
-							<label class="form-label">Secondary Contact Relationship</label>
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="parent2_relationship"
-									id="parent2father"
-									value="F"
-								/>
-								<label class="form-check-label" for="parent2father"> Father </label>
-							</div>
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="parent2_relationship"
-									id="parent2mother"
-									value="M"
-								/>
-								<label class="form-check-label" for="parent2mother"> Mother </label>
-							</div>
-							<div class="form-check mb-3">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="parent2_relationship"
-									id="parent2guardian"
-									value="G"
-								/>
-								<label class="form-check-label" for="parent2guardian">
-									Guardian
-								</label>
-							</div>
-					
-							<!--Emergency Contact Info-->
-							<div class="row">
-								<div class="mb-3 col-md-6">
-									<label for="emergencyfname" class="form-label"
-										>Emergency Contact First Name</label
-									>
-									<input
-										type="text"
-										class="form-control"
-										id="emergencyfname"
-										name="additional_emergency_contact_fname"
-										placeholder="First Name"
-										required
-									/>
-								</div>
-								<div class="mb-3 col-md-6">
-									<label for="emergencylname" class="form-label"
-										>Emergency Contact Last Name</label
-									>
-									<input
-										type="text"
-										class="form-control"
-										id="emergencylname"
-										name="additional_emergency_contact_lname"
-										placeholder="Last Name"
-										required
-									/>
-								</div>
-							</div>
-					
-							<div class="row">
-								<div class="mb-3 col-md-6">
-									<label class="form-label" for="emergencyrelationship">
-										Emergency Contact Relationship
-									</label>
-									<input
-										class="form-control"
-										type="text"
-										name="additional_emergency_contact_relationship"
-										id="emergencyrelationship"
-										placeholder="ex. Grandmother"
-									/>
-								</div>
-					
-								<div class="mb-3 col-md-6">
-									<label for="emergencyphone" class="form-label"
-										>Emergency Contact Phone Number</label
-									>
-									<input
-										type="tel"
-										class="form-control"
-										id="emergencyphone"
-										name="additional_emergency_contact_phone"
-										placeholder="ex. 123-456-7890"
-										required
-									/>
-								</div>
-							</div>
-					
-							<!--POD Preference--set to false by default-->
-							<h3>Parent On Duty (POD) Preference</h3>
-							<div class="form-text mb-3">
-								NOTE: One shift required for each child enrolled in Overnight and
-								ExplorAsian program. If you cannot serve POD, please select Paid
-								Waiver. For all other program we encourage parents to help out.
-							</div>
-							<label class="form-label">POD Preference</label>
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="checkbox"
-									name="parent1_for_POD"
-									value="false"
-									id="parent1POD"
-								/>
-								<label class="form-check-label" for="parent1POD">
-									Parent #1 as POD
-								</label>
-							</div>
-							<div class="form-check mb-3">
-								<input
-									class="form-check-input"
-									type="checkbox"
-									name="parent2_for_POD"
-									value="false"
-									id="parent2POD"
-								/>
-								<label class="form-check-label" for="parent2POD">
-									Parent #2 as POD
-								</label>
-							</div>
-							<div class="form-check mb-3">
-								<input
-									class="form-check-input"
-									type="checkbox"
-									name="interest_in_POD_lead"
-									value="false"
-									id="PODlead"
-								/>
-								<label class="form-check-label" for="PODlead">
-									I am willing to be a POD lead.
-								</label>
-							</div>
-					
-							<h3>Roomate Request</h3>
-							<div class="mb-3 col-md-4">
-								<label for="roomaterequest" class="form-label">Roomate Name</label>
-								<input
-									type="text"
-									class="form-control"
-									id="roommaterequest"
-									name="preferred_roommate"
-									placeholder="ex. Michael Li"
-								/>
-							</div>
-							<div class="form-text mb-3">
-								If no roommate name is indicated, a roommate of the same gender and
-								age category will be assigned. Roommate request will only be
-								considered if both campers request each other. Ask your friend to
-								put your name as their roommate request. Group request for Overnight
-								Campers will NOT be accepted.
-							</div>
-					
-							<h3>Medical Information</h3>
-							<div class="mb-3">
-								<div class="form-text mb-3">
-									For camper's immunization requirements, please refer to
-									<a
-										href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-										>regulations</a
-									>
-									from Mass Department of Public Health.
-								</div>
-								<div class="row">
-									<div class="mb-3 col-md-6">
-										<label for="insuranceprovider" class="form-label"
-											>Health Insurance Provider</label
-										>
-										<input
-											type="text"
-											class="form-control"
-											id="insuranceprovider"
-											name="insurance_provider"
-											placeholder="Insurance Provider"
-											required
-										/>
-									</div>
-									<div class="mb-3 col-md-6">
-										<label for="insurancesubscriber" class="form-label"
-											>Insurance Subscriber's Name</label
-										>
-										<input
-											type="text"
-											class="form-control"
-											id="insurancesubscriber"
-											name="subscriber_name"
-											placeholder="Subscriber's Name"
-											required
-										/>
-									</div>
-								</div>
-								<div class="row">
-									<div class="mb-3 col-md-6">
-										<label for="doctorname" class="form-label"
-											>Primary Physician's Name</label
-										>
-										<input
-											type="text"
-											class="form-control"
-											id="doctorname"
-											name="primary_physician_name"
-											placeholder="Doctor's Name"
-											required
-										/>
-									</div>
-									<div class="mb-3 col-md-6">
-										<label for="doctorphone" class="form-label"
-											>Primary Physician's Phone</label
-										>
-										<input
-											type="text"
-											class="form-control"
-											id="doctorphone"
-											name="primary_physician_phone"
-											placeholder="Doctor's Phone"
-											required
-										/>
-									</div>
-								</div>
-					
-								<label class="form-label"
-									>I grant NECYSC permission to: (check box to grant
-									consent)</label
-								>
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="grant_hospital_permission"
-										value="false"
-										id="hospitalpermission"
-									/>
-									<label class="form-check-label" for="hospitalpermission">
-										Accompany my child to the nearest hospital in case of an
-										Emergency
-									</label>
-								</div>
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="grant_medical_treatment_permission"
-										value="false"
-										id="medicaltreatmentpermission"
-									/>
-									<label
-										class="form-check-label"
-										for="medicaltreatmentpermission"
-									>
-										Secure medical treatment for my child if I cannot be reached
-									</label>
-								</div>
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="grant_first_aid_permission"
-										value="false"
-										id="firstaidpermission"
-									/>
-									<label class="form-check-label" for="firstaidpermission">
-										Administer first aid in case of an injury
-									</label>
-								</div>
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="grant_meds_permission"
-										value="false"
-										id="medspermission"
-									/>
-									<label class="form-check-label" for="medspermission">
-										Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-										the camp nurse if needed
-									</label>
-								</div>
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="grant_bug_spray_permission"
-										value="false"
-										id="bugspraypermission"
-									/>
-									<label class="form-check-label" for="bugspraypermission">
-										Apply insect repellant (bug spray) if needed
-									</label>
-								</div>
-								<div class="form-check mb-3">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="grant_skin_treatment_permission"
-										value="false"
-										id="skintreatmentpermission"
-									/>
-									<label class="form-check-label" for="skintreatmentpermission">
-										Apply Calamine lotion/Bacitracin/Sunscreen if needed
-									</label>
-								</div>
-								<div class="form-text mb-3">
-									NOTE: If consent is not granted for any of the above, please
-									email us at
-									<a href="mailto: registration@necysc.org"
-										>registration@necysc.org</a
-									>
-								</div>
-					
-								<div class="row">
-									<div class="col-md-6">
-										<label class="form-label">
-											Does your child have any allergies?</label
-										>
-										<div class="form-check">
-											<input
-												class="form-check-input"
-												type="radio"
-												name="allergies"
-												id="allergiesyes"
-												value="false"
-												required
-											/>
-											<label class="form-check-label" for="allergiesyes">
-												Yes
-											</label>
-										</div>
-										<div class="form-check mb-3">
-											<input
-												class="form-check-input"
-												type="radio"
-												name="allergies"
-												id="allergiesno"
-												value="false"
-									
-											/>
-											<label class="form-check-label" for="allergiesno">
-												No
-											</label>
-										</div>
-									</div>
-					
-									<div class="mb-3 col-md-6">
-										<label for="allergieslist" class="form-label"
-											>If yes, to what? Please describe reaction and
-											treatment.</label
-										>
-										<input
-											type="text"
-											class="form-control"
-											id="allergieslist"
-											name="allergies_description"
-											placeholder="List allergies"
-										/>
-									</div>
-								</div>
-					
-								<div class="mb-3">
-									<label for="initialforallergytreatment" class="form-label"
-										>Initial to grant permission to treat allergic
-										reactions</label
-									>
-									<div class="col-md-4">
-										<input
-											type="text"
-											class="form-control"
-											id="initialforallergytreatment"
-											name="initial_for_allergy_treatment"
-											placeholder="Initials"
-										/>
-									</div>
-								</div>
-					
-								<label class="form-label"
-									>Does your Physician's Health Form list an Epi-Pen as medication
-									prescribed?</label
-								>
-								<div class="form-text mb-3">
-									If yes, do you understand that you MUST bring two Epi-Pens so
-									that your child can attend camp? You must also fill out the
-									NECYSC Medication Permission Slip for the Epi-Pens and submit
-									along with other application forms.
-								</div>
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="radio"
-										name="epi_pen_prescribed"
-										id="epipenyes"
-										value="false"
-										required
-									/>
-									<label class="form-check-label" for="epipenyes"> Yes </label>
-								</div>
-								<div class="form-check mb-3">
-									<input
-										class="form-check-input"
-										type="radio"
-										name="epi_pen_prescribed"
-										id="epipenno"
-										value="false"
-									/>
-									<label class="form-check-label" for="epipenno"> No </label>
-								</div>
-					
-								<div class="mb-3">
-									<label for="socialemotionalconcerns" class="form-label"
-										>Does your child have any social/emotional concerns we
-										should be aware of? If yes, please elaborate.</label
-									>
-									<div class="col-md-4">
-										<input
-											type="text"
-											class="form-control"
-											id="socialemotionalconcerns"
-											name="social_emotional_concerns"
-											placeholder="Yes/no, please describe"
-											required
-										/>
-									</div>
-								</div>
-					
-								<label class="form-label"
-									>Does your child wear any of the following:</label
-								>
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="wear_glasses"
-										value="false"
-										id="wearsglasses"
-									/>
-									<label class="form-check-label" for="wearsglasses">
-										Glasses
-									</label>
-								</div>
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="wear_contacts"
-										value="false"
-										id="wearscontacts"
-									/>
-									<label class="form-check-label" for="wearscontacts">
-										Contact lenses
-									</label>
-								</div>
-								<div class="form-check mb-3">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="wear_hearing_aids"
-										value="false"
-										id="wearshearingaids"
-									/>
-									<label class="form-check-label" for="wearshearingaids">
-										Hearing Aids
-									</label>
-								</div>
-					
-								<div class="row">
-									<div class="col-md-6">
-										<label class="form-label"
-											>Is your child taking any medication?</label
-										>
-										<div class="form-check">
-											<input
-												class="form-check-input"
-												type="radio"
-												name="medication"
-												id="medicationyes"
-												value="false"
-												required
-											/>
-											<label class="form-check-label" for="medicationyes">
-												Yes
-											</label>
-										</div>
-										<div class="form-check mb-3">
-											<input
-												class="form-check-input"
-												type="radio"
-												name="medication"
-												id="medicationno"
-												value="false"
-											/>
-											<label class="form-check-label" for="medicationno">
-												No
-											</label>
-										</div>
-									</div>
-					
-									<div class="mb-3 col-md-6">
-										<label for="medicationdescription" class="form-label"
-											>If yes, will the camp need to administer the medication
-											to your child during camp? Please explain
-											dose/frequency/other note; If no, please explain why
-											medication is not needed at camp</label
-										>
-										<input
-											type="text"
-											class="form-control"
-											id="medicationdescription"
-											name="medication_description"
-											placeholder="Yes/no, please describe"
-										/>
-									</div>
-								</div>
-					
-								<div class="mb-3 col-md-6">
-									<label for="optoutactivity" class="form-label"
-										>Are there any activities your child should not take part
-										in? If yes, please elaborate.</label
-									>
-									<input
-										type="text"
-										class="form-control"
-										id="optoutactivity"
-										name="opt_out_activities"
-										placeholder="Yes/no, please describe"
-										required
-									/>
-								</div>
-					
-								<div class="text mb-3">
-									In case of medical emergency: I understand every effort will be
-									made to contact parents/guardians of campers. IN THE EVENT THAT
-									I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-									FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-									SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-									MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-									OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-								</div>
-					
-								<div class="mb-3">
-									<label for="signature" class="form-label"
-										>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-									>
-									<div class="col-md-4">
-										<input
-											type="text"
-											class="form-control"
-											id="signature"
-											name="signature"
-											placeholder="Signature"
-											required
-										/>
-									</div>
-								</div>
-							</div>
-					
-							<h3>All Persons authorized For Child Pickup</h3>
-							<div class="mb-3">
-								<div class="form-text mb-3">
-									NOTE: Please list names for all persons including parents that
-									are authorized to pick up your child(ren). We will only release
-									your child(ren) to the authorized persons listed.
-								</div>
-					
-								<div class="mb-3 col-md-4">
-									<label for="pickuppersons" class="form-label"
-										>Names of authorized persons</label
-									>
-									<input
-										type="text"
-										class="form-control"
-										id="pickuppersons"
-										name="allowed_pickup_persons"
-									/>
-								</div>
-							</div>
-					
-							<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-							<div class="mb-3">
-								<div class="form-text mb-3">
-									Supplements for the Counselor/CIT/RA application are required
-									and can be found on the <a>website</a>
-									<!-- TODO: add website link -->
-								</div>
-								<div class="form-text mb-3">
-									Please follow the instruction to complete it and email it by
-									application deadline when applicable.
-								</div>
-							</div>
-					
-							<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-							<div class="mb-3">
-								<!-- TODO: update camp fees -->
-								<div class="form-text mb-3">
-									NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-									$900 for Day Camp and $1100 for CIT.
-								</div>
-					
-								<!-- TODO: make '$' inline/part of the input box? -->
-								<div class="mb-3 col-md-4">
-									<label for="campfee" class="form-label">Camp Fee: ($)</label>
-									<input
-										type="text"
-										class="form-control"
-										id="campfee"
-										name="payment_camp"
-									/>
-								</div>
-								<div class="mb-3 col-md-4">
-									<label for="podfee" class="form-label"
-										>Parent On Duty (POD) Waiver Fee: ($)</label
-									>
-									<input
-										type="text"
-										class="form-control"
-										id="podfee"
-										name="payment_pod"
-									/>
-								</div>
-					
-								<div class="mb-3">
-									<label for="donation" class="form-label"
-										>Voluntary Donation (tax deductible receipt will be mailed
-										after camp): ($)</label
-									>
-									<div class="col-md-4">
-										<input
-											type="text"
-											class="form-control"
-											id="donation"
-											name="payment_donation"
-										/>
-									</div>
-								</div>
-					
-								<div class="mb-3 col-md-4">
-									<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-									<input
-										type="text"
-										class="form-control"
-										id="paymenttotal"
-										name="payment_total"
-										readonly="true"
-									/>
-								</div>
-					
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="financial_aid_requested"
-										value="false"
-										id="fincialaid"
-									/>
-									<label class="form-check-label" for="fincialaid">
-										I am also applying for financial aid. I will submit 50% of
-										my payment to hold my application. Please download and
-										submit the financial aid application form for consideration.
-										Use original amount for the Camp Fee field and 50% amount
-										for the TOTAL field.
-									</label>
-								</div>
-							</div>
-					
-							<h3>Additional Information</h3>
-							<div class="mb-3">
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="interest_in_wkbook_ads"
-										value="false"
-										id="weekbookads"
-									/>
-									<label class="form-check-label" for="weekbookads">
-										Check if you want us to contact you to place ads in Camp
-										Book
-									</label>
-								</div>
-					
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="listing_on_weekbook"
-										value="false"
-										id="listonweekbook"
-									/>
-									<label class="form-check-label" for="listonweekbook">
-										Check if you don't want to publish name/address/phone in
-										camp week-book
-									</label>
-								</div>
-					
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="available_for_carpool"
-										value="false"
-										id="carpoollist"
-									/>
-									<label class="form-check-label" for="carpoollist">
-										Check if you want to publish name/city/phone in day camp car
-										pool list
-									</label>
-								</div>
-					
-								<div class="form-check mb-3">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="interest_in_committee"
-										value="false"
-										id="committeeinterest"
-									/>
-									<label class="form-check-label" for="committeeinterest">
-										Check if you want to be added in next year camp Committee
-										candidate list
-									</label>
-								</div>
-					
-								<div class="mb-3 col-md-4">
-									<label for="heardfrom" class="form-label"
-										>Where did you hear about us?</label
-									>
-									<input
-										type="text"
-										class="form-control"
-										id="heardfrom"
-										name="heard_from"
-									/>
-								</div>
-								<div class="mb-3 col-md-4">
-									<label for="referrals" class="form-label"
-										>Were you referred by anyone?</label
-									>
-									<input
-										type="text"
-										class="form-control"
-										id="referrals"
-										name="referrals"
-									/>
-								</div>
-							</div>
-					
-							<h3>Important Documents</h3>
-							<div class="mb-3">
-								<div class="form-text">
-									Please access and read our documents on camp rules form via the
-									hyperlinks below and acknowledge consent by checking the boxes
-									below.
-								</div>
-					
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="camp_rule_agreement"
-										value="false"
-										id="campruleagrement"
-										required
-									/>
-									<label class="form-check-label" for="campruleagrement">
-										<a
-											href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-											>*Click here to accept the Camp Rule Agreement</a
-										>
-									</label>
-								</div>
-					
-								<div class="form-check">
-									<input
-										class="form-check-input"
-										type="checkbox"
-										name="liability_agreement"
-										value="false"
-										id="liabilityagreement"
-										required
-									/>
-									<label class="form-check-label" for="liabilityagreement">
-										<a
-											href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-											>*Click here to accept the Liability and Photo
-											Agreement</a
-										>
-									</label>
-								</div>
-							</div>
-					
-							<div class="mb-3">
-								<div class="text">
-									By clicking the Submit button below I certify that I have read
-									and understand
-									<a
-										href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-										>NECYSC Camp Information</a
-									>
-									and the information provided on this application form is
-									accurate to the best of my knowledge.
-								</div>
-							</div>
-							<div class="mb-3">
-								<div class="text">
-									NOTE: After you submit this application, please make sure you
-									see a confirmation page. Write down your confirmation number. In
-									order to complete the registration process, you must print and
-									fill out the required forms on the
-									<a href="http://www.necysc.org/v2/admission.php"
-										>Download Forms page</a
-									>
-									and mail them along with your check to "NECYSC, P.O.BOX 615,
-									Weston, MA 02493" as soon as possible. Please make sure to write
-									your camper's name and confirmation number on the check. The
-									application priority is based on the latest postmark date of
-									receipt of the check and
-									<a href="http://www.necysc.org/v2/admission.php"
-										>ALL required information</a
-									>. Contact
-									<a href="mailto: registration@necysc.org"
-										>registration@necysc.org</a
-									>
-									if you have trouble to complete online application.
-								</div>
-							</div>
-					
-							<!--old form: {{ form.as_p }}-->
-					
-							<button type="submit" class="btn-purple fw-bold">Submit</button>
-					
-							{% if form.errors %}
-							<div>
-								<div class="alert alert-danger alert-dismissible fade show" role="alert">
-									<strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-									<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-								  </div>
-							</div>
-							{% endif %}
-					
-							<script>
-								//change value depending on whether the checkbox is checked or not
-								document
-									.getElementById("parent1POD")
-									.addEventListener("change", function () {
-										this.value = this.checked ? true : false;
-									});
-								document
-									.getElementById("parent2POD")
-									.addEventListener("change", function () {
-										this.value = this.checked ? true : false;
-									});
-					
-								//custom check validation on form submission
-								document
-									.querySelector("form")
-									.addEventListener("submit", function (event) {
-										if (!this.checkValidity()) {
-											event.preventDefault();
-											event.stopPropagation();
-										}
-										this.classList.add("was-validated");
-									});
-					
-								// access to global data values
-								const globaldata = {
-									day_camp_cost: "{{ globaldata.day_camp_cost }}",
-									ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-									CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-									RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-									EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-								   };
-					
-								// updates the total cost field to the corresponding cost of the program chosen
-								document
-									.querySelectorAll('input[name="program"]')
-									.forEach((radio) => {
-										radio.addEventListener("change", (event) => {
-											changeCost(event.target.value)
-										} )
-									});
-					
-								function changeCost(program) {
-									switch(program) {
-										case "D":
-											document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-											break;
-										case "ON":
-											document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-											break;
-										case "CIT":
-											document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-											break;
-										case "C":
-											document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-											break;
-										case "EA":
-											document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-											break;
-										default:
-									}
-								}
-							</script>
-						</form>
-					</div>
-					{% endblock %}
-					</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005525.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005525.html
deleted file mode 100644
index 0b6f5894..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005525.html
+++ /dev/null
@@ -1,2794 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
-</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005529.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005529.html
deleted file mode 100644
index 53de8717..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005529.html
+++ /dev/null
@@ -1,1397 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005538.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005538.html
deleted file mode 100644
index e694b75c..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005538.html
+++ /dev/null
@@ -1,1397 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005626.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005626.html
deleted file mode 100644
index dc573d7e..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005626.html
+++ /dev/null
@@ -1,1397 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005651.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005651.html
deleted file mode 100644
index 077defe5..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005651.html
+++ /dev/null
@@ -1,1397 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005656.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005656.html
deleted file mode 100644
index 8ccd3b3a..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005656.html
+++ /dev/null
@@ -1,1397 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005658.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005658.html
deleted file mode 100644
index 9d6e8ba6..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005658.html
+++ /dev/null
@@ -1,1397 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005700.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005700.html
deleted file mode 100644
index ee0fa4af..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005700.html
+++ /dev/null
@@ -1,1397 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship<span class="optional">(Optional)</span> </label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005711.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005711.html
deleted file mode 100644
index 3c92921c..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005711.html
+++ /dev/null
@@ -1,1397 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship<span class="optional">(Optional)</span> </label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-					<span class="optional">(Optional)</span> </label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005719.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005719.html
deleted file mode 100644
index e961dfdd..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005719.html
+++ /dev/null
@@ -1,1397 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship<span class="optional">(Optional)</span> </label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				<span class="optional">(Optional)</span> </label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005720.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005720.html
deleted file mode 100644
index ee0fa4af..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005720.html
+++ /dev/null
@@ -1,1397 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship<span class="optional">(Optional)</span> </label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005723.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005723.html
deleted file mode 100644
index aed49b87..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005723.html
+++ /dev/null
@@ -1,1398 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship<span class="optional">(Optional)</span> </label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-					required
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference</h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005734.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005734.html
deleted file mode 100644
index 9888b275..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005734.html
+++ /dev/null
@@ -1,1398 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship<span class="optional">(Optional)</span> </label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-					required
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference<span class="optional">(Optional)</span> </h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005758.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005758.html
deleted file mode 100644
index c57cd740..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005758.html
+++ /dev/null
@@ -1,1398 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship<span class="optional">(Optional)</span> </label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-					required
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference<span class="optional">(Optional)</span> </h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request<h3>Parent On Duty (POD) Preference<span class="optional">(Optional)</span> </h3></h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005801.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005801.html
deleted file mode 100644
index 9888b275..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005801.html
+++ /dev/null
@@ -1,1398 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship<span class="optional">(Optional)</span> </label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-					required
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference<span class="optional">(Optional)</span> </h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request</h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005808.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005808.html
deleted file mode 100644
index a509ae5d..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005808.html
+++ /dev/null
@@ -1,1398 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship<span class="optional">(Optional)</span> </label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-					required
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference<span class="optional">(Optional)</span> </h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request<span class="optional">(Optional)</span></h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005908.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005908.html
deleted file mode 100644
index f2e12419..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005908.html
+++ /dev/null
@@ -1,1398 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship<span class="optional">(Optional)</span> </label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-					required
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference<span class="optional">(Optional)</span> </h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request<span class="optional">(Optional)</span></h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup<span class="optional">(Optional)</span></h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005912.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005912.html
deleted file mode 100644
index c5412084..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005912.html
+++ /dev/null
@@ -1,1398 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship<span class="optional">(Optional)</span> </label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-					required
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference<span class="optional">(Optional)</span> </h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request<span class="optional">(Optional)</span></h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup<span class="optional">(Optional)</span></h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs<span class="optional">(Optional)</span></h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005915.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005915.html
deleted file mode 100644
index c4f192bc..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005915.html
+++ /dev/null
@@ -1,1398 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship<span class="optional">(Optional)</span> </label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-					required
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference<span class="optional">(Optional)</span> </h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request<span class="optional">(Optional)</span></h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup<span class="optional">(Optional)</span></h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs<span class="optional">(Optional)</span></h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs<span class="optional">(Optional)</span></h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information</h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005921.html b/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005921.html
deleted file mode 100644
index 0e46d8f0..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/new_application_20241204005921.html
+++ /dev/null
@@ -1,1398 +0,0 @@
-{% extends "necysc_app/base.html" %}
-<!-- prevent line break on autoformat -->
-{% block title %} New Application {% endblock %} {% block content %}
-<!--Application Border Box-->
-
-<div class="border p-5 rounded shadow-lg">
-	<h1>Start a New Application</h1>
-
-	<!--this overrides the default browser validation, we need to update the validation manually-->
-	<form
-		class="needs-validation"
-		novalidate
-		action="{% url 'necysc_app:submit_application' %}"
-		method="post"
-	>
-		{% csrf_token %}
-
-		<h3>Camper Information</h3>
-		<!--name inputs-->
-		<div class="row">
-			<div class="mb-3 col-md-4">
-				<label for="firstnamet" class="form-label"
-					>English First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="firstname"
-					name="applicant_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="lastnamet" class="form-label"
-					>English Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="lastname"
-					name="applicant_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
-				<input
-					type="text"
-					class="form-control"
-					id="chineseName"
-					name="applicant_chinese_name"
-					placeholder="Chinese Name"
-				/>
-				<div class="form-text">Use Chinese characters please.</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="applicantemail"
-					name="applicant_email"
-					placeholder="ex. johnsmith@gmail.com"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="applicantbirthdate" class="form-label"
-					>Birth Date</label
-				>
-				<input
-					type="date"
-					class="form-control"
-					id="applicantbirthdate"
-					name="applicant_bday"
-					data-date-format="yyyy/mm/dd"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--radio buttons for gender-->
-		<label class="form-label">Gender</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="male"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="male"> Male </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_sex"
-				id="female"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="female"> Female </label>
-		</div>
-
-		<div class="mb-3 col-md-4">
-			<label for="applicantgrade" class="form-label">School Grade</label>
-			<input
-				type="number"
-				class="form-control"
-				id="applicantgrade"
-				name="applicant_grade"
-				placeholder="ex. 5"
-				step="1"
-				required
-			/>
-			<div class="form-text">Number only, in 2025 Fall semester</div>
-		</div>
-
-		<!--Need to change the application model field to accept more than 2 letters?-->
-		<!--Camper T-Shirt Size-->
-		<label class="form-label">Camper T-Shirt Size</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthsmall"
-				value="YS"
-				required
-			/>
-			<label class="form-check-label" for="youthsmall">
-				Youth Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthmedium"
-				value="YM"
-				required
-			/>
-			<label class="form-check-label" for="youthmedium">
-				Youth Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="youthlarge"
-				value="YL"
-				required
-			/>
-			<label class="form-check-label" for="youthlarge">
-				Youth Large
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultsmall"
-				value="AS"
-				required
-			/>
-			<label class="form-check-label" for="adultsmall">
-				Adult Small
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultmedium"
-				value="AM"
-				required
-			/>
-			<label class="form-check-label" for="adultmedium">
-				Adult Medium
-			</label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultlarge"
-				value="AL"
-				required
-			/>
-			<label class="form-check-label" for="adultlarge">
-				Adult Large
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="applicant_shirt_size"
-				id="adultextralarge"
-				value="AX"
-				required
-			/>
-			<label class="form-check-label" for="adultextralarge">
-				Adult Extra Large
-			</label>
-		</div>
-
-		<!--Program options-->
-		<label class="form-label">Program</label>
-		<div id="program">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="day"
-					value="D"
-					required
-				/>
-				<label class="form-check-label" for="day"> Day </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="overnight"
-					value="ON"
-					required
-				/>
-				<label class="form-check-label" for="overnight"> Overnight </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="cit"
-					value="CIT"
-					required
-				/>
-				<label class="form-check-label" for="cit"> CIT </label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="counselor"
-					value="C"
-					required
-				/>
-				<label class="form-check-label" for="counselor"> Counselor </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="program"
-					id="ea"
-					value="EA"
-					required
-				/>
-				<label class="form-check-label" for="ea"> EA </label>
-			</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="streetaddress" class="form-label"
-					>Street Address</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="streetaddress"
-					name="street_address"
-					placeholder="Street Address"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="city" class="form-label">City</label>
-				<input
-					type="text"
-					class="form-control"
-					id="city"
-					name="city"
-					placeholder="City/Town"
-					required
-				/>
-			</div>
-		</div>
-	</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="state" class="form-label">State</label>
-				<input
-					type="text"
-					class="form-control"
-					id="state"
-					name="state"
-					placeholder="ex. MA"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="zipcode" class="form-label">Zip Code</label>
-				<input
-					type="text"
-					class="form-control"
-					id="zipcode"
-					name="zip_code"
-					placeholder="ex. 01719"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--parent/guardian/emergency contact info-->
-		<h3>Parent/Guardian/Emergency Contact Information</h3>
-		<div class="form-text mb-3">
-			NOTE: Please enter as much contact information as possible in case
-			we need to contact you for application or during the camp week. The
-			parent's first and last name must match the legal name on government
-			issued ID
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1fname" class="form-label"
-					>Main Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1fname"
-					name="parent1_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1lname" class="form-label"
-					>Main Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent1lname"
-					name="parent1_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent1phone" class="form-label"
-					>Main Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent1phone"
-					name="parent1_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent1email" class="form-label"
-					>Main Contact Email</label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent1email"
-					name="parent1_email"
-					placeholder="ex. johnsmith@gmail.com"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--Parent relationship choices-->
-		<label class="form-label">Main Contact Relationship</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1father"
-				value="F"
-				required
-			/>
-			<label class="form-check-label" for="parent1father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1mother"
-				value="M"
-				required
-			/>
-			<label class="form-check-label" for="parent1mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent1_relationship"
-				id="parent1guardian"
-				value="G"
-				required
-			/>
-			<label class="form-check-label" for="parent1guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Secondary Contact-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2fname"
-					name="parent2_fname"
-					placeholder="First Name"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="parent2lname"
-					name="parent2_lname"
-					placeholder="Last Name"
-				/>
-			</div>
-		</div>
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="parent2phone"
-					name="parent2_phone"
-					placeholder="ex. 123-456-7890"
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="parent2email" class="form-label"
-					>Secondary Contact Email<span class="optional">(Optional)</span> </label
-				>
-				<input
-					type="email"
-					class="form-control"
-					id="parent2email"
-					name="parent2_email"
-					placeholder="ex. janesmith@gmail.com"
-				/>
-			</div>
-		</div>
-
-		<label class="form-label">Secondary Contact Relationship<span class="optional">(Optional)</span> </label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2father"
-				value="F"
-			/>
-			<label class="form-check-label" for="parent2father"> Father </label>
-		</div>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2mother"
-				value="M"
-			/>
-			<label class="form-check-label" for="parent2mother"> Mother </label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="radio"
-				name="parent2_relationship"
-				id="parent2guardian"
-				value="G"
-			/>
-			<label class="form-check-label" for="parent2guardian">
-				Guardian
-			</label>
-		</div>
-
-		<!--Emergency Contact Info-->
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label for="emergencyfname" class="form-label"
-					>Emergency Contact First Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencyfname"
-					name="additional_emergency_contact_fname"
-					placeholder="First Name"
-					required
-				/>
-			</div>
-			<div class="mb-3 col-md-6">
-				<label for="emergencylname" class="form-label"
-					>Emergency Contact Last Name</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="emergencylname"
-					name="additional_emergency_contact_lname"
-					placeholder="Last Name"
-					required
-				/>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="mb-3 col-md-6">
-				<label class="form-label" for="emergencyrelationship">
-					Emergency Contact Relationship
-				</label>
-				<input
-					class="form-control"
-					type="text"
-					name="additional_emergency_contact_relationship"
-					id="emergencyrelationship"
-					placeholder="ex. Grandmother"
-					required
-				/>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="emergencyphone" class="form-label"
-					>Emergency Contact Phone Number</label
-				>
-				<input
-					type="tel"
-					class="form-control"
-					id="emergencyphone"
-					name="additional_emergency_contact_phone"
-					placeholder="ex. 123-456-7890"
-					required
-				/>
-			</div>
-		</div>
-
-		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference<span class="optional">(Optional)</span> </h3>
-		<div class="form-text mb-3">
-			NOTE: One shift required for each child enrolled in Overnight and
-			ExplorAsian program. If you cannot serve POD, please select Paid
-			Waiver. For all other program we encourage parents to help out.
-		</div>
-		<label class="form-label">POD Preference</label>
-		<div class="form-check">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent1_for_POD"
-				value="false"
-				id="parent1POD"
-			/>
-			<label class="form-check-label" for="parent1POD">
-				Parent #1 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="parent2_for_POD"
-				value="false"
-				id="parent2POD"
-			/>
-			<label class="form-check-label" for="parent2POD">
-				Parent #2 as POD
-			</label>
-		</div>
-		<div class="form-check mb-3">
-			<input
-				class="form-check-input"
-				type="checkbox"
-				name="interest_in_POD_lead"
-				value="false"
-				id="PODlead"
-			/>
-			<label class="form-check-label" for="PODlead">
-				I am willing to be a POD lead.
-			</label>
-		</div>
-
-		<h3>Roomate Request<span class="optional">(Optional)</span></h3>
-		<div class="mb-3 col-md-4">
-			<label for="roomaterequest" class="form-label">Roomate Name</label>
-			<input
-				type="text"
-				class="form-control"
-				id="roommaterequest"
-				name="preferred_roommate"
-				placeholder="ex. Michael Li"
-			/>
-		</div>
-		<div class="form-text mb-3">
-			If no roommate name is indicated, a roommate of the same gender and
-			age category will be assigned. Roommate request will only be
-			considered if both campers request each other. Ask your friend to
-			put your name as their roommate request. Group request for Overnight
-			Campers will NOT be accepted.
-		</div>
-
-		<h3>Medical Information</h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				For camper's immunization requirements, please refer to
-				<a
-					href="https://www.mass.gov/info-details/massachusetts-law-about-vaccination-immunization#massachusetts-regulations-"
-					>regulations</a
-				>
-				from Mass Department of Public Health.
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="insuranceprovider" class="form-label"
-						>Health Insurance Provider</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insuranceprovider"
-						name="insurance_provider"
-						placeholder="Insurance Provider"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="insurancesubscriber" class="form-label"
-						>Insurance Subscriber's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="insurancesubscriber"
-						name="subscriber_name"
-						placeholder="Subscriber's Name"
-						required
-					/>
-				</div>
-			</div>
-			<div class="row">
-				<div class="mb-3 col-md-6">
-					<label for="doctorname" class="form-label"
-						>Primary Physician's Name</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorname"
-						name="primary_physician_name"
-						placeholder="Doctor's Name"
-						required
-					/>
-				</div>
-				<div class="mb-3 col-md-6">
-					<label for="doctorphone" class="form-label"
-						>Primary Physician's Phone</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="doctorphone"
-						name="primary_physician_phone"
-						placeholder="Doctor's Phone"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>I grant NECYSC permission to: (check box to grant
-				consent)</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_hospital_permission"
-					value="false"
-					id="hospitalpermission"
-				/>
-				<label class="form-check-label" for="hospitalpermission">
-					Accompany my child to the nearest hospital in case of an
-					Emergency
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_medical_treatment_permission"
-					value="false"
-					id="medicaltreatmentpermission"
-				/>
-				<label
-					class="form-check-label"
-					for="medicaltreatmentpermission"
-				>
-					Secure medical treatment for my child if I cannot be reached
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_first_aid_permission"
-					value="false"
-					id="firstaidpermission"
-				/>
-				<label class="form-check-label" for="firstaidpermission">
-					Administer first aid in case of an injury
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_meds_permission"
-					value="false"
-					id="medspermission"
-				/>
-				<label class="form-check-label" for="medspermission">
-					Administer Tylenol/Ibuprofen/Benadryl/Tums to my child by
-					the camp nurse if needed
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_bug_spray_permission"
-					value="false"
-					id="bugspraypermission"
-				/>
-				<label class="form-check-label" for="bugspraypermission">
-					Apply insect repellant (bug spray) if needed
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="grant_skin_treatment_permission"
-					value="false"
-					id="skintreatmentpermission"
-				/>
-				<label class="form-check-label" for="skintreatmentpermission">
-					Apply Calamine lotion/Bacitracin/Sunscreen if needed
-				</label>
-			</div>
-			<div class="form-text mb-3">
-				NOTE: If consent is not granted for any of the above, please
-				email us at
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label">
-						Does your child have any allergies?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="allergiesyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="allergies"
-							id="allergiesno"
-							value="false"
-				
-						/>
-						<label class="form-check-label" for="allergiesno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="allergieslist" class="form-label"
-						>If yes, to what? Please describe reaction and
-						treatment.</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="allergieslist"
-						name="allergies_description"
-						placeholder="List allergies"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3">
-				<label for="initialforallergytreatment" class="form-label"
-					>Initial to grant permission to treat allergic
-					reactions</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="initialforallergytreatment"
-						name="initial_for_allergy_treatment"
-						placeholder="Initials"
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your Physician's Health Form list an Epi-Pen as medication
-				prescribed?</label
-			>
-			<div class="form-text mb-3">
-				If yes, do you understand that you MUST bring two Epi-Pens so
-				that your child can attend camp? You must also fill out the
-				NECYSC Medication Permission Slip for the Epi-Pens and submit
-				along with other application forms.
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenyes"
-					value="false"
-					required
-				/>
-				<label class="form-check-label" for="epipenyes"> Yes </label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="radio"
-					name="epi_pen_prescribed"
-					id="epipenno"
-					value="false"
-				/>
-				<label class="form-check-label" for="epipenno"> No </label>
-			</div>
-
-			<div class="mb-3">
-				<label for="socialemotionalconcerns" class="form-label"
-					>Does your child have any social/emotional concerns we
-					should be aware of? If yes, please elaborate.</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="socialemotionalconcerns"
-						name="social_emotional_concerns"
-						placeholder="Yes/no, please describe"
-						required
-					/>
-				</div>
-			</div>
-
-			<label class="form-label"
-				>Does your child wear any of the following:</label
-			>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_glasses"
-					value="false"
-					id="wearsglasses"
-				/>
-				<label class="form-check-label" for="wearsglasses">
-					Glasses
-				</label>
-			</div>
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_contacts"
-					value="false"
-					id="wearscontacts"
-				/>
-				<label class="form-check-label" for="wearscontacts">
-					Contact lenses
-				</label>
-			</div>
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="wear_hearing_aids"
-					value="false"
-					id="wearshearingaids"
-				/>
-				<label class="form-check-label" for="wearshearingaids">
-					Hearing Aids
-				</label>
-			</div>
-
-			<div class="row">
-				<div class="col-md-6">
-					<label class="form-label"
-						>Is your child taking any medication?</label
-					>
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationyes"
-							value="false"
-							required
-						/>
-						<label class="form-check-label" for="medicationyes">
-							Yes
-						</label>
-					</div>
-					<div class="form-check mb-3">
-						<input
-							class="form-check-input"
-							type="radio"
-							name="medication"
-							id="medicationno"
-							value="false"
-						/>
-						<label class="form-check-label" for="medicationno">
-							No
-						</label>
-					</div>
-				</div>
-
-				<div class="mb-3 col-md-6">
-					<label for="medicationdescription" class="form-label"
-						>If yes, will the camp need to administer the medication
-						to your child during camp? Please explain
-						dose/frequency/other note; If no, please explain why
-						medication is not needed at camp</label
-					>
-					<input
-						type="text"
-						class="form-control"
-						id="medicationdescription"
-						name="medication_description"
-						placeholder="Yes/no, please describe"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-6">
-				<label for="optoutactivity" class="form-label"
-					>Are there any activities your child should not take part
-					in? If yes, please elaborate.</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="optoutactivity"
-					name="opt_out_activities"
-					placeholder="Yes/no, please describe"
-					required
-				/>
-			</div>
-
-			<div class="text mb-3">
-				In case of medical emergency: I understand every effort will be
-				made to contact parents/guardians of campers. IN THE EVENT THAT
-				I CANNOT BE REACHED, I HEREBY GIVE MY PERMISSION FOR THE
-				FOLLOWING: THE PHYSICIAN SELECTED BY THE CAMP DIRECTOR MAY
-				SECURE PROPER TREATMENT FOR, HOSPITALIZE, ORDER AND ADMINISTER
-				MEDICATIONS AND ANESTHESIA, PERFORM X-RAYS, SPECIAL PROCEDURES
-				OR SURGERY IF DEEMED NECESSARY BY HIM/HER FOR MY CHILD.
-			</div>
-
-			<div class="mb-3">
-				<label for="signature" class="form-label"
-					>PARENT/GUARDIAN SIGNATURE (Type in full name)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="signature"
-						name="signature"
-						placeholder="Signature"
-						required
-					/>
-				</div>
-			</div>
-		</div>
-
-		<h3>All Persons authorized For Child Pickup<span class="optional">(Optional)</span></h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				NOTE: Please list names for all persons including parents that
-				are authorized to pick up your child(ren). We will only release
-				your child(ren) to the authorized persons listed.
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="pickuppersons" class="form-label"
-					>Names of authorized persons</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="pickuppersons"
-					name="allowed_pickup_persons"
-				/>
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs<span class="optional">(Optional)</span></h3>
-		<div class="mb-3">
-			<div class="form-text mb-3">
-				Supplements for the Counselor/CIT/RA application are required
-				and can be found on the <a>website</a>
-				<!-- TODO: add website link -->
-			</div>
-			<div class="form-text mb-3">
-				Please follow the instruction to complete it and email it by
-				application deadline when applicable.
-			</div>
-		</div>
-
-		<h3>Supplemental Information for CITs/Counselors/RAs<span class="optional">(Optional)</span></h3>
-		<div class="mb-3">
-			<!-- TODO: update camp fees -->
-			<div class="form-text mb-3">
-				NOTE: The camp fee: $1800 for ExplorAsian, $1800 for Overnight,
-				$900 for Day Camp and $1100 for CIT.
-			</div>
-
-			<!-- TODO: make '$' inline/part of the input box? -->
-			<div class="mb-3 col-md-4">
-				<label for="campfee" class="form-label">Camp Fee: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="campfee"
-					name="payment_camp"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="podfee" class="form-label"
-					>Parent On Duty (POD) Waiver Fee: ($)</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="podfee"
-					name="payment_pod"
-				/>
-			</div>
-
-			<div class="mb-3">
-				<label for="donation" class="form-label"
-					>Voluntary Donation (tax deductible receipt will be mailed
-					after camp): ($)</label
-				>
-				<div class="col-md-4">
-					<input
-						type="text"
-						class="form-control"
-						id="donation"
-						name="payment_donation"
-					/>
-				</div>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label id=totalcostlabel for="paymenttotal" class="form-label">TOTAL: ($)</label>
-				<input
-					type="text"
-					class="form-control"
-					id="paymenttotal"
-					name="payment_total"
-					readonly="true"
-				/>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="financial_aid_requested"
-					value="false"
-					id="fincialaid"
-				/>
-				<label class="form-check-label" for="fincialaid">
-					I am also applying for financial aid. I will submit 50% of
-					my payment to hold my application. Please download and
-					submit the financial aid application form for consideration.
-					Use original amount for the Camp Fee field and 50% amount
-					for the TOTAL field.
-				</label>
-			</div>
-		</div>
-
-		<h3>Additional Information<span class="optional">(Optional)</span></h3>
-		<div class="mb-3">
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_wkbook_ads"
-					value="false"
-					id="weekbookads"
-				/>
-				<label class="form-check-label" for="weekbookads">
-					Check if you want us to contact you to place ads in Camp
-					Book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="listing_on_weekbook"
-					value="false"
-					id="listonweekbook"
-				/>
-				<label class="form-check-label" for="listonweekbook">
-					Check if you don't want to publish name/address/phone in
-					camp week-book
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="available_for_carpool"
-					value="false"
-					id="carpoollist"
-				/>
-				<label class="form-check-label" for="carpoollist">
-					Check if you want to publish name/city/phone in day camp car
-					pool list
-				</label>
-			</div>
-
-			<div class="form-check mb-3">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="interest_in_committee"
-					value="false"
-					id="committeeinterest"
-				/>
-				<label class="form-check-label" for="committeeinterest">
-					Check if you want to be added in next year camp Committee
-					candidate list
-				</label>
-			</div>
-
-			<div class="mb-3 col-md-4">
-				<label for="heardfrom" class="form-label"
-					>Where did you hear about us?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="heardfrom"
-					name="heard_from"
-				/>
-			</div>
-			<div class="mb-3 col-md-4">
-				<label for="referrals" class="form-label"
-					>Were you referred by anyone?</label
-				>
-				<input
-					type="text"
-					class="form-control"
-					id="referrals"
-					name="referrals"
-				/>
-			</div>
-		</div>
-
-		<h3>Important Documents</h3>
-		<div class="mb-3">
-			<div class="form-text">
-				Please access and read our documents on camp rules form via the
-				hyperlinks below and acknowledge consent by checking the boxes
-				below.
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="camp_rule_agreement"
-					value="false"
-					id="campruleagrement"
-					required
-				/>
-				<label class="form-check-label" for="campruleagrement">
-					<a
-						href="https://www.necysc.org/v2/files/app//Camp_Rules_Form.pdf"
-						>*Click here to accept the Camp Rule Agreement</a
-					>
-				</label>
-			</div>
-
-			<div class="form-check">
-				<input
-					class="form-check-input"
-					type="checkbox"
-					name="liability_agreement"
-					value="false"
-					id="liabilityagreement"
-					required
-				/>
-				<label class="form-check-label" for="liabilityagreement">
-					<a
-						href="https://www.necysc.org/v2/files/app/Liability_and_Photo_Waiver.pdf"
-						>*Click here to accept the Liability and Photo
-						Agreement</a
-					>
-				</label>
-			</div>
-		</div>
-
-		<div class="mb-3">
-			<div class="text">
-				By clicking the Submit button below I certify that I have read
-				and understand
-				<a
-					href="https://www.necysc.org/v2/files/app/Application-Information-Sheet.pdf"
-					>NECYSC Camp Information</a
-				>
-				and the information provided on this application form is
-				accurate to the best of my knowledge.
-			</div>
-		</div>
-		<div class="mb-3">
-			<div class="text">
-				NOTE: After you submit this application, please make sure you
-				see a confirmation page. Write down your confirmation number. In
-				order to complete the registration process, you must print and
-				fill out the required forms on the
-				<a href="http://www.necysc.org/v2/admission.php"
-					>Download Forms page</a
-				>
-				and mail them along with your check to "NECYSC, P.O.BOX 615,
-				Weston, MA 02493" as soon as possible. Please make sure to write
-				your camper's name and confirmation number on the check. The
-				application priority is based on the latest postmark date of
-				receipt of the check and
-				<a href="http://www.necysc.org/v2/admission.php"
-					>ALL required information</a
-				>. Contact
-				<a href="mailto: registration@necysc.org"
-					>registration@necysc.org</a
-				>
-				if you have trouble to complete online application.
-			</div>
-		</div>
-
-		<!--old form: {{ form.as_p }}-->
-
-		<button type="submit" class="btn-purple fw-bold">Submit</button>
-
-		{% if form.errors %}
-		<div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Oops!</strong> There was an error processing your form. Please check the form for any errors and try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-		{% endif %}
-
-		<script>
-			//change value depending on whether the checkbox is checked or not
-			document
-				.getElementById("parent1POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-			document
-				.getElementById("parent2POD")
-				.addEventListener("change", function () {
-					this.value = this.checked ? true : false;
-				});
-
-			//custom check validation on form submission
-			document
-				.querySelector("form")
-				.addEventListener("submit", function (event) {
-					if (!this.checkValidity()) {
-						event.preventDefault();
-						event.stopPropagation();
-					}
-					this.classList.add("was-validated");
-				});
-
-			// access to global data values
-			const globaldata = {
-				day_camp_cost: "{{ globaldata.day_camp_cost }}",
-				ON_camp_cost: "{{ globaldata.ON_camp_cost }}",
-				CIT_camp_cost: "{{ globaldata.CIT_camp_cost }}",
-				RA_camp_cost: "{{ globaldata.RA_camp_cost }}",
-				EA_camp_cost: "{{ globaldata.EA_camp_cost }}"
-       		};
-
-			// updates the total cost field to the corresponding cost of the program chosen
-			document
-				.querySelectorAll('input[name="program"]')
-				.forEach((radio) => {
-					radio.addEventListener("change", (event) => {
-						changeCost(event.target.value)
-					} )
-				});
-
-			function changeCost(program) {
-				switch(program) {
-					case "D":
-						document.getElementById("paymenttotal").value = globaldata.day_camp_cost;
-						break;
-					case "ON":
-						document.getElementById("paymenttotal").value = globaldata.ON_camp_cost;
-						break;
-					case "CIT":
-						document.getElementById("paymenttotal").value = globaldata.CIT_camp_cost;
-						break;
-					case "C":
-						document.getElementById("paymenttotal").value = globaldata.RA_camp_cost;
-						break;
-					case "EA":
-						document.getElementById("paymenttotal").value = globaldata.EA_camp_cost;
-						break;
-					default:
-				}
-			}
-		</script>
-	</form>
-</div>
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/register_20241203231402.html b/.history/necysc_app/templates/necysc_app/applicant/register_20241203231402.html
deleted file mode 100644
index 04c1246b..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/register_20241203231402.html
+++ /dev/null
@@ -1,64 +0,0 @@
-{% extends "necysc_app/base.html" %} 
-
-{% load static %}
-
-{% block title %} Register {% endblock %}
-
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/register.css' %}">
-
-<div class="register_page">
-    <div class="register_form">
-        <h1 style="color: #4e598c">Create Your Account</h1>
-        <form method="POST" action="" class="register_form_body">
-            {% csrf_token %}
-            <div>
-                {{ form.username.label }}
-                {{ form.username }}
-            </div>
-            <div>
-                {{ form.email.label }}
-                {{ form.email }}
-            </div>
-            <div>
-                {{ form.password1.label }}
-                {{ form.password1 }}
-            </div>
-            <div>
-                {{ form.password2.label }}
-                {{ form.password2 }}
-            </div>
-
-            <input type="submit" class="fw-bold btn-purple" value="Register" name="Create User">
-        </form>
-
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password confirmation</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-
-    </div>
-    <div class="login_redirect">
-       <h2>Already have an account? </h2> 
-       <p>Login to view your application!</p>
-        <a href="{% url 'necysc_app:login' %}">Login</a>
-    </div>
-</div>
-
-<script>
-    var form_fields = document.getElementsByTagName('input');
-    form_fields[1].placeholder = 'Username...';
-    form_fields[2].placeholder = 'Email...';
-    form_fields[3].placeholder = 'Enter password...';
-    form_fields[4].placeholder = 'Re-enter password...';
-
-    for (var i = 0; i < form_fields.length; i++) {
-        form_fields[i].className += ' form-control';
-    }
-</script>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/register_20241204012211.html b/.history/necysc_app/templates/necysc_app/applicant/register_20241204012211.html
deleted file mode 100644
index ff9e5e29..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/register_20241204012211.html
+++ /dev/null
@@ -1,64 +0,0 @@
-{% extends "necysc_app/base.html" %} 
-
-{% load static %}
-
-{% block title %} Register {% endblock %}
-
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/register.css' %}">
-
-<div class="register_page">
-    <div class="register_form">
-        <h1 style="color: #4e598c">Create Your Account</h1>
-        <form method="POST" action="" class="register_form_body">
-            {% csrf_token %}
-            <div>
-                {{ form.username.label }}
-                {{ form.username }}
-            </div>
-            <div>
-                {{ form.email.label }}
-                {{ form.email }}
-            </div>
-            <div>
-                {{ form.password1.label }}
-                {{ form.password1 }}
-            </div>
-            <div>
-                {{ form.password2.label }}
-                {{ form.password2 }}
-            </div>
-
-            <input type="submit" class="fw-bold btn-purple" value="Register" name="Create User">
-        </form>
-
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password confirmation</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-
-    </div>
-    <div class="login_redirect">
-       <h2>Already have an account? </h2> 
-       <p>Login to view your application!</p>
-        <a href="{% url 'necysc_app:login' %}">Login</a>
-    </div>
-</div>
-
-<script>
-    var form_fields = document.getElementsByTagName('input');
-    form_fields[1].placeholder = 'Username...';
-    form_fields[2].placeholder = 'Email...';
-    form_fields[3].placeholder = 'Enter password...';
-    form_fields[4].placeholder = 'Re-enter password...';
-
-    for (var i = 0; i  form_fields.length; i++) {
-        form_fields[i].className += ' form-control';
-    }
-</script>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/register_20241204012219.html b/.history/necysc_app/templates/necysc_app/applicant/register_20241204012219.html
deleted file mode 100644
index 04c1246b..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/register_20241204012219.html
+++ /dev/null
@@ -1,64 +0,0 @@
-{% extends "necysc_app/base.html" %} 
-
-{% load static %}
-
-{% block title %} Register {% endblock %}
-
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/register.css' %}">
-
-<div class="register_page">
-    <div class="register_form">
-        <h1 style="color: #4e598c">Create Your Account</h1>
-        <form method="POST" action="" class="register_form_body">
-            {% csrf_token %}
-            <div>
-                {{ form.username.label }}
-                {{ form.username }}
-            </div>
-            <div>
-                {{ form.email.label }}
-                {{ form.email }}
-            </div>
-            <div>
-                {{ form.password1.label }}
-                {{ form.password1 }}
-            </div>
-            <div>
-                {{ form.password2.label }}
-                {{ form.password2 }}
-            </div>
-
-            <input type="submit" class="fw-bold btn-purple" value="Register" name="Create User">
-        </form>
-
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password confirmation</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-
-    </div>
-    <div class="login_redirect">
-       <h2>Already have an account? </h2> 
-       <p>Login to view your application!</p>
-        <a href="{% url 'necysc_app:login' %}">Login</a>
-    </div>
-</div>
-
-<script>
-    var form_fields = document.getElementsByTagName('input');
-    form_fields[1].placeholder = 'Username...';
-    form_fields[2].placeholder = 'Email...';
-    form_fields[3].placeholder = 'Enter password...';
-    form_fields[4].placeholder = 'Re-enter password...';
-
-    for (var i = 0; i < form_fields.length; i++) {
-        form_fields[i].className += ' form-control';
-    }
-</script>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/applicant/register_20241204012222.html b/.history/necysc_app/templates/necysc_app/applicant/register_20241204012222.html
deleted file mode 100644
index 04c1246b..00000000
--- a/.history/necysc_app/templates/necysc_app/applicant/register_20241204012222.html
+++ /dev/null
@@ -1,64 +0,0 @@
-{% extends "necysc_app/base.html" %} 
-
-{% load static %}
-
-{% block title %} Register {% endblock %}
-
-{% block content %}
-<link rel="stylesheet" href="{% static 'necysc_app/register.css' %}">
-
-<div class="register_page">
-    <div class="register_form">
-        <h1 style="color: #4e598c">Create Your Account</h1>
-        <form method="POST" action="" class="register_form_body">
-            {% csrf_token %}
-            <div>
-                {{ form.username.label }}
-                {{ form.username }}
-            </div>
-            <div>
-                {{ form.email.label }}
-                {{ form.email }}
-            </div>
-            <div>
-                {{ form.password1.label }}
-                {{ form.password1 }}
-            </div>
-            <div>
-                {{ form.password2.label }}
-                {{ form.password2 }}
-            </div>
-
-            <input type="submit" class="fw-bold btn-purple" value="Register" name="Create User">
-        </form>
-
-        {% if form.errors %}
-        <div>
-            <div class="alert alert-danger alert-dismissible fade show" role="alert">
-                <strong>Invalid email or password confirmation</strong> Please try again.
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-              </div>
-        </div>
-        {% endif %}
-
-    </div>
-    <div class="login_redirect">
-       <h2>Already have an account? </h2> 
-       <p>Login to view your application!</p>
-        <a href="{% url 'necysc_app:login' %}">Login</a>
-    </div>
-</div>
-
-<script>
-    var form_fields = document.getElementsByTagName('input');
-    form_fields[1].placeholder = 'Username...';
-    form_fields[2].placeholder = 'Email...';
-    form_fields[3].placeholder = 'Enter password...';
-    form_fields[4].placeholder = 'Re-enter password...';
-
-    for (var i = 0; i < form_fields.length; i++) {
-        form_fields[i].className += ' form-control';
-    }
-</script>
-
-{% endblock %}
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241203231402.html b/.history/necysc_app/templates/necysc_app/footer_20241203231402.html
deleted file mode 100644
index 2d434c60..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241203231402.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center"> General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014030.html b/.history/necysc_app/templates/necysc_app/footer_20241204014030.html
deleted file mode 100644
index a8cc71a3..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014030.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="welcome-title"> General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014037.html b/.history/necysc_app/templates/necysc_app/footer_20241204014037.html
deleted file mode 100644
index 2d434c60..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014037.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center"> General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014110.html b/.history/necysc_app/templates/necysc_app/footer_20241204014110.html
deleted file mode 100644
index d2685532..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014110.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p <p class="ps-5 text-center"> General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>> General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014112.html b/.history/necysc_app/templates/necysc_app/footer_20241204014112.html
deleted file mode 100644
index 2d434c60..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014112.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center"> General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014115.html b/.history/necysc_app/templates/necysc_app/footer_20241204014115.html
deleted file mode 100644
index d2685532..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014115.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p <p class="ps-5 text-center"> General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>> General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014119.html b/.history/necysc_app/templates/necysc_app/footer_20241204014119.html
deleted file mode 100644
index 2d434c60..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014119.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center"> General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014121.html b/.history/necysc_app/templates/necysc_app/footer_20241204014121.html
deleted file mode 100644
index d2685532..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014121.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p <p class="ps-5 text-center"> General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>> General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014122.html b/.history/necysc_app/templates/necysc_app/footer_20241204014122.html
deleted file mode 100644
index 2d434c60..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014122.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center"> General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014142.html b/.history/necysc_app/templates/necysc_app/footer_20241204014142.html
deleted file mode 100644
index f385236e..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014142.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="welcome-title "> General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014150.html b/.history/necysc_app/templates/necysc_app/footer_20241204014150.html
deleted file mode 100644
index 2d434c60..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014150.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center"> General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014259.html b/.history/necysc_app/templates/necysc_app/footer_20241204014259.html
deleted file mode 100644
index 711f7605..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014259.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:</p>
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014313.html b/.history/necysc_app/templates/necysc_app/footer_20241204014313.html
deleted file mode 100644
index dbf043de..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014313.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014319.html b/.history/necysc_app/templates/necysc_app/footer_20241204014319.html
deleted file mode 100644
index 5a3895f3..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014319.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014323.html b/.history/necysc_app/templates/necysc_app/footer_20241204014323.html
deleted file mode 100644
index 540f2ade..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014323.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014354.html b/.history/necysc_app/templates/necysc_app/footer_20241204014354.html
deleted file mode 100644
index ce4cacc0..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014354.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p style="color: white;"class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014358.html b/.history/necysc_app/templates/necysc_app/footer_20241204014358.html
deleted file mode 100644
index 540f2ade..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014358.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014406.html b/.history/necysc_app/templates/necysc_app/footer_20241204014406.html
deleted file mode 100644
index 039d5342..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014406.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014409.html b/.history/necysc_app/templates/necysc_app/footer_20241204014409.html
deleted file mode 100644
index cf1a18e7..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014409.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014413.html b/.history/necysc_app/templates/necysc_app/footer_20241204014413.html
deleted file mode 100644
index fc33a108..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014413.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014433.html b/.history/necysc_app/templates/necysc_app/footer_20241204014433.html
deleted file mode 100644
index 93970fc4..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014433.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" style ="color =white"href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014435.html b/.history/necysc_app/templates/necysc_app/footer_20241204014435.html
deleted file mode 100644
index cfad3f45..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014435.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" style"color =white"href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014437.html b/.history/necysc_app/templates/necysc_app/footer_20241204014437.html
deleted file mode 100644
index c13d6f54..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014437.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" style="color =white"href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014443.html b/.history/necysc_app/templates/necysc_app/footer_20241204014443.html
deleted file mode 100644
index f1ddf30c..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014443.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" style="color:white"href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014445.html b/.history/necysc_app/templates/necysc_app/footer_20241204014445.html
deleted file mode 100644
index 48499e65..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014445.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" style="color:white" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014458.html b/.history/necysc_app/templates/necysc_app/footer_20241204014458.html
deleted file mode 100644
index 252fca02..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014458.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" style="color: white" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014523.html b/.history/necysc_app/templates/necysc_app/footer_20241204014523.html
deleted file mode 100644
index 24e5390d..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014523.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" style="color: white;" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014535.html b/.history/necysc_app/templates/necysc_app/footer_20241204014535.html
deleted file mode 100644
index fc33a108..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014535.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4">
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014538.html b/.history/necysc_app/templates/necysc_app/footer_20241204014538.html
deleted file mode 100644
index fc1849eb..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014538.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: white;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014551.html b/.history/necysc_app/templates/necysc_app/footer_20241204014551.html
deleted file mode 100644
index c6bc2ec7..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014551.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: balck;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014558.html b/.history/necysc_app/templates/necysc_app/footer_20241204014558.html
deleted file mode 100644
index 76cf7298..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014558.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: balck">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: balck;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014600.html b/.history/necysc_app/templates/necysc_app/footer_20241204014600.html
deleted file mode 100644
index 78db5610..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014600.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: balck">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: balck">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: balck;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014601.html b/.history/necysc_app/templates/necysc_app/footer_20241204014601.html
deleted file mode 100644
index b0a18d91..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014601.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: balck">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: balck">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: balck">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: balck;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014604.html b/.history/necysc_app/templates/necysc_app/footer_20241204014604.html
deleted file mode 100644
index ff8b1c16..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014604.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: balck;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: balck">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: balck">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: balck">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: balck;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014606.html b/.history/necysc_app/templates/necysc_app/footer_20241204014606.html
deleted file mode 100644
index 60805476..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014606.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: balck;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: balck">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: balck;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: balck">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: balck">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: balck;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014608.html b/.history/necysc_app/templates/necysc_app/footer_20241204014608.html
deleted file mode 100644
index c412e3cd..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014608.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: balck;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: balck">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: balck;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: balck">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: balck;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: balck">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: balck;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014623.html b/.history/necysc_app/templates/necysc_app/footer_20241204014623.html
deleted file mode 100644
index 3160801f..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014623.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: ;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014626.html b/.history/necysc_app/templates/necysc_app/footer_20241204014626.html
deleted file mode 100644
index fc1849eb..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014626.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: white;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014640.html b/.history/necysc_app/templates/necysc_app/footer_20241204014640.html
deleted file mode 100644
index eedec222..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014640.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="color: white;"target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: white;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014641.html b/.history/necysc_app/templates/necysc_app/footer_20241204014641.html
deleted file mode 100644
index ce6191d9..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014641.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="color: white;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="color: white;"target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: white;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014652.html b/.history/necysc_app/templates/necysc_app/footer_20241204014652.html
deleted file mode 100644
index 707ab38f..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014652.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto"style="color: white;">
-        <a href="https://www.instagram.com/NECYSC/" style="color: white;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="color: white;"target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: white;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014654.html b/.history/necysc_app/templates/necysc_app/footer_20241204014654.html
deleted file mode 100644
index 3093fc82..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014654.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto"style="color: white;">
-        <a href="https://www.instagram.com/NECYSC/" style="color: white;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto"style="color: white;">
-      <a href="https://www.facebook.com/NECYSC" style="color: white;"target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: white;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014721.html b/.history/necysc_app/templates/necysc_app/footer_20241204014721.html
deleted file mode 100644
index be18fce9..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014721.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="color: white;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto"style="color: white;">
-      <a href="https://www.facebook.com/NECYSC" style="color: white;"target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: white;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014723.html b/.history/necysc_app/templates/necysc_app/footer_20241204014723.html
deleted file mode 100644
index ce6191d9..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014723.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="color: white;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC" style="color: white;"target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: white;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014726.html b/.history/necysc_app/templates/necysc_app/footer_20241204014726.html
deleted file mode 100644
index 42ff73a5..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014726.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/" style="color: white;" target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC"target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: white;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014729.html b/.history/necysc_app/templates/necysc_app/footer_20241204014729.html
deleted file mode 100644
index 361fe579..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014729.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/"  target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC"target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  <div class="container"></div>
-  <div class="text-center p-4" style="color: white;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014924.html b/.history/necysc_app/templates/necysc_app/footer_20241204014924.html
deleted file mode 100644
index 4cbd5c39..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014924.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/"  target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC"target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-  </div>
-  <div class="text-center p-4" style="color: white;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204014929.html b/.history/necysc_app/templates/necysc_app/footer_20241204014929.html
deleted file mode 100644
index f8ea5b5c..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204014929.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/"  target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC"target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-
-  <div class="text-center p-4" style="color: white;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204015208.html b/.history/necysc_app/templates/necysc_app/footer_20241204015208.html
deleted file mode 100644
index a2cb470b..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204015208.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: white;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/"  target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC"target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-
-  <div class="text-center p-4" style="color: white;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/footer_20241204015239.html b/.history/necysc_app/templates/necysc_app/footer_20241204015239.html
deleted file mode 100644
index c6ead0de..00000000
--- a/.history/necysc_app/templates/necysc_app/footer_20241204015239.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Footer -->
-<footer class="pt-4" id="contact">
-
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: white;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
-  </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
-  </p>
-
-  <div class="row text-center align-items-center justify-content-center">
-    <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/"  target="_blank">
-            <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
-        </a>
-    </div>
-    <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC"target="_blank">
-          <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
-      </a>
-    </div>
-  </div>
-
-
-  <!-- Copyright -->
-
-  <div class="text-center p-4" style="color: white;" >
-    © 2024 Copyright.
-    <a class="text-reset" href="https://necysc.org/">necysc.org</a>
-  </div>
-
-</footer>
-<!-- Footer -->
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241203231402.html b/.history/necysc_app/templates/necysc_app/navbar_20241203231402.html
deleted file mode 100644
index 0d65a833..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241203231402.html
+++ /dev/null
@@ -1,196 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html>
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241203233353.html b/.history/necysc_app/templates/necysc_app/navbar_20241203233353.html
deleted file mode 100644
index 2fdae9de..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241203233353.html
+++ /dev/null
@@ -1,196 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% comment %} <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> {% endcomment %}
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241203233354.html b/.history/necysc_app/templates/necysc_app/navbar_20241203233354.html
deleted file mode 100644
index e962a5fd..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241203233354.html
+++ /dev/null
@@ -1,250 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% comment %} <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> {% endcomment %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC Logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <!-- 汉堡菜单图标 -->
-    <div class="hamburger" id="hamburger">
-        &#9776; <!-- 汉堡菜单图标 -->
-    </div>
-
-    <!-- 导航链接 -->
-    <div class="nav-links" id="nav-links">
-        <!-- 这里放你的原始导航链接部分 -->
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-        <!-- 其他链接 -->
-        {% endif %}
-    </div>
-
-    <!-- 右侧按钮 -->
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-</div>
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241203233405.html b/.history/necysc_app/templates/necysc_app/navbar_20241203233405.html
deleted file mode 100644
index 2e7a7382..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241203233405.html
+++ /dev/null
@@ -1,252 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% comment %} <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> {% endcomment %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC Logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <!-- 汉堡菜单图标 -->
-    <div class="hamburger" id="hamburger">
-        &#9776; <!-- 汉堡菜单图标 -->
-    </div>
-
-    <!-- 导航链接 -->
-    <div class="nav-links" id="nav-links">
-        <!-- 这里放你的原始导航链接部分 -->
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-        <!-- 其他链接 -->
-        {% endif %}
-    </div>
-
-    <!-- 右侧按钮 -->
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-</div>
-</body>
-</html> {% endcomment %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241203233912.html b/.history/necysc_app/templates/necysc_app/navbar_20241203233912.html
deleted file mode 100644
index 0129d9bc..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241203233912.html
+++ /dev/null
@@ -1,282 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% comment %} <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> {% endcomment %}
-{% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- 汉堡菜单按钮 -->
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <!-- 导航内容 -->
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html> {% endcomment %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241203234105.html b/.history/necysc_app/templates/necysc_app/navbar_20241203234105.html
deleted file mode 100644
index 93080eaf..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241203234105.html
+++ /dev/null
@@ -1,282 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% comment %} <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> {% endcomment %}
-{% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- 汉堡菜单按钮 -->
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <!-- 导航内容 -->
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html> 
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241203234814.html b/.history/necysc_app/templates/necysc_app/navbar_20241203234814.html
deleted file mode 100644
index e9ffda42..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241203234814.html
+++ /dev/null
@@ -1,282 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% comment %} <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> {% endcomment %}
-{% comment %} {% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- 汉堡菜单按钮 -->
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <!-- 导航内容 -->
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html>  {% endcomment %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241203234823.html b/.history/necysc_app/templates/necysc_app/navbar_20241203234823.html
deleted file mode 100644
index 148968d6..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241203234823.html
+++ /dev/null
@@ -1,282 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% comment %} {% comment %} <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> {% endcomment %} {% endcomment %}
-{% comment %} {% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- 汉堡菜单按钮 -->
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <!-- 导航内容 -->
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html>  {% endcomment %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241203234827.html b/.history/necysc_app/templates/necysc_app/navbar_20241203234827.html
deleted file mode 100644
index 87938b11..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241203234827.html
+++ /dev/null
@@ -1,283 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% comment %} {% comment %} <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> {% endcomment %} {% endcomment %}
-
-{% comment %} {% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- 汉堡菜单按钮 -->
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <!-- 导航内容 -->
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html>  {% endcomment %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241203234833.html b/.history/necysc_app/templates/necysc_app/navbar_20241203234833.html
deleted file mode 100644
index b3fe6420..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241203234833.html
+++ /dev/null
@@ -1,283 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
- <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> {% endcomment %} {% endcomment %}
-
-{% comment %} {% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- 汉堡菜单按钮 -->
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <!-- 导航内容 -->
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html>  {% endcomment %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241203234837.html b/.history/necysc_app/templates/necysc_app/navbar_20241203234837.html
deleted file mode 100644
index 919b3382..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241203234837.html
+++ /dev/null
@@ -1,283 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
- <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> 
-
-{% comment %} {% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- 汉堡菜单按钮 -->
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <!-- 导航内容 -->
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html>  {% endcomment %}
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241203235143.html b/.history/necysc_app/templates/necysc_app/navbar_20241203235143.html
deleted file mode 100644
index 93080eaf..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241203235143.html
+++ /dev/null
@@ -1,282 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% comment %} <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> {% endcomment %}
-{% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- 汉堡菜单按钮 -->
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <!-- 导航内容 -->
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html> 
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241204004948.html b/.history/necysc_app/templates/necysc_app/navbar_20241204004948.html
deleted file mode 100644
index 03acdef3..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241204004948.html
+++ /dev/null
@@ -1,281 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% comment %} <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> {% endcomment %}
-{% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <!-- 导航内容 -->
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html> 
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241204004950.html b/.history/necysc_app/templates/necysc_app/navbar_20241204004950.html
deleted file mode 100644
index 567e7b33..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241204004950.html
+++ /dev/null
@@ -1,280 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% comment %} <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> {% endcomment %}
-{% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html> 
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241204004953.html b/.history/necysc_app/templates/necysc_app/navbar_20241204004953.html
deleted file mode 100644
index 3fb950d4..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241204004953.html
+++ /dev/null
@@ -1,279 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% comment %} <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> {% endcomment %}
-{% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <div class="nav-links">
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html> 
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241204004955.html b/.history/necysc_app/templates/necysc_app/navbar_20241204004955.html
deleted file mode 100644
index 8e303da2..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241204004955.html
+++ /dev/null
@@ -1,282 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% comment %} <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> {% endcomment %}
-{% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <!-- 导航内容 -->
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html> 
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241204004956.html b/.history/necysc_app/templates/necysc_app/navbar_20241204004956.html
deleted file mode 100644
index 93080eaf..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241204004956.html
+++ /dev/null
@@ -1,282 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% comment %} <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- NECYSC logo -->
-    <div class="col-auto">
-        <a href="{% url 'necysc_app:index' %}" id="logo-link">
-            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-        </a>
-    </div>
-
-    <div class="dropdown col-auto">
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-        {% else %}
-        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-        {% endif %}
-    </div>
-
-    {% if not request.user.is_authenticated %}
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-        </div>
-    </div>
-
-    <div class="dropdown col-auto">
-        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-        <div class="dropdown-content">
-            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-        </div>
-    </div>
-    {% endif %}
-    
-    <div class="col-auto ms-auto">
-        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-        {% else %}
-        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-        {% endif %}
-    </div>
-    
-</div>
-
-</body>
-</html> {% endcomment %}
-{% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- 汉堡菜单按钮 -->
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <!-- 导航内容 -->
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html> 
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241204010013.html b/.history/necysc_app/templates/necysc_app/navbar_20241204010013.html
deleted file mode 100644
index 9bd653dc..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241204010013.html
+++ /dev/null
@@ -1,205 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <!-- 汉堡菜单按钮 -->
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <!-- 导航内容 -->
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html> 
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241204010016.html b/.history/necysc_app/templates/necysc_app/navbar_20241204010016.html
deleted file mode 100644
index 7caa2d5c..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241204010016.html
+++ /dev/null
@@ -1,204 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <!-- 导航内容 -->
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html> 
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241204010018.html b/.history/necysc_app/templates/necysc_app/navbar_20241204010018.html
deleted file mode 100644
index ada22550..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241204010018.html
+++ /dev/null
@@ -1,203 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-    
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html> 
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241204010020.html b/.history/necysc_app/templates/necysc_app/navbar_20241204010020.html
deleted file mode 100644
index 16a2bd19..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241204010020.html
+++ /dev/null
@@ -1,204 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-    
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <div class="nav-links">
-        <!-- NECYSC logo -->
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html> 
\ No newline at end of file
diff --git a/.history/necysc_app/templates/necysc_app/navbar_20241204010022.html b/.history/necysc_app/templates/necysc_app/navbar_20241204010022.html
deleted file mode 100644
index 9b0b5fb6..00000000
--- a/.history/necysc_app/templates/necysc_app/navbar_20241204010022.html
+++ /dev/null
@@ -1,204 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Your Page Title</title>
-    <style>
-        a {
-            font-weight: bold;
-            text-decoration: none;
-        }
-
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #f9f9f9;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 10;
-            top: 100%;
-        }
-
-        .dropdown-content a {
-            color: #4e598c;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #4e598c;
-            color: #F9C784;
-        }
-
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-        .navbar-link {
-            color: #4e598c;
-            transition: color 0.3s ease;
-        }
-
-        .navbar-link:hover {
-            color: #F9C784;
-            background: #4e598c;
-            transition: color 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 9px;
-        }
-
-        .active {
-            color: #F9C784; 
-            background: #4e598c;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 9px;
-        }
-
-
-        .btn-login {
-            background-color: #4e598c;
-            color: #F9C784;
-            transition: all 0.3s ease;
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-        }
-
-        .btn-login:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-
-        .btn-padding {
-            padding: 10px 20px;
-            border-radius: 20px;
-            display: inline-block;
-            text-align: center;
-            background: #F9C784;
-            color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        .btn-padding:hover {
-            background-color: #4e598c;
-            color: #ffffff;
-        }
-
-
-        .col-auto {
-            display: flex;
-            align-items: center;
-        }
-
-        img {
-            height: 4rem;
-            max-width: 100%;
-        }
-
-        #logobutton {
-            background-color: #4e598c;
-            transition: all 0.3s ease;
-        }
-
-        #logobutton:hover {
-            background-color: #F9C784;
-            color: #FFFFFF;
-        }
-    </style>
-</head>
-<body>
-
-<!-- navbar sticky -->
-{% load static %}
-<div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
-
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <div class="nav-links">
-       
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
-
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
-        </div>
-
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
-        </div>
-        {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
-    </div>
-</div>
-
-</body>
-</html> 
\ No newline at end of file
diff --git a/necysc_app/forms.py b/necysc_app/forms.py
index 7f330656..204fc7e5 100644
--- a/necysc_app/forms.py
+++ b/necysc_app/forms.py
@@ -57,5 +57,4 @@ class Meta:
                 
                   # important docs
                   'camp_rule_agreement', 'liability_agreement',
-                  ]
-      
\ No newline at end of file
+                  ]
\ No newline at end of file
diff --git a/necysc_app/migrations/0001_initial.py b/necysc_app/migrations/0001_initial.py
index cfe96f9b..e69de29b 100644
--- a/necysc_app/migrations/0001_initial.py
+++ b/necysc_app/migrations/0001_initial.py
@@ -1,204 +0,0 @@
-# Generated by Django 5.1.1 on 2024-12-04 04:47
-
-import django.core.validators
-import django.db.models.deletion
-from django.conf import settings
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    initial = True
-
-    dependencies = [
-        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
-    ]
-
-    operations = [
-        migrations.CreateModel(
-            name='GlobalData',
-            fields=[
-                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('day_camp_cost', models.DecimalField(decimal_places=2, default=0, max_digits=10)),
-                ('ON_camp_cost', models.DecimalField(decimal_places=2, default=0, max_digits=10)),
-                ('EA_camp_cost', models.DecimalField(decimal_places=2, default=0, max_digits=10)),
-                ('CIT_camp_cost', models.DecimalField(decimal_places=2, default=0, max_digits=10)),
-                ('RA_camp_cost', models.DecimalField(decimal_places=2, default=0, max_digits=10)),
-                ('OPs_camp_cost', models.DecimalField(decimal_places=2, default=0, max_digits=10)),
-                ('POD_camp_cost', models.DecimalField(decimal_places=2, default=0, max_digits=10)),
-            ],
-            options={
-                'verbose_name': 'Global Data',
-                'verbose_name_plural': 'Global Data',
-            },
-        ),
-        migrations.CreateModel(
-            name='Applicant',
-            fields=[
-                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('created_at', models.DateTimeField(auto_now_add=True)),
-                ('last_updated_at', models.DateTimeField(auto_now=True)),
-                ('app_year', models.IntegerField(default=2024)),
-                ('app_status', models.CharField(choices=[('A', 'Accepted'), ('D', 'Denied'), ('P', 'Pending'), ('I', 'Incomplete')], default='I', max_length=1)),
-                ('health_record_status', models.CharField(choices=[('NC', 'Not checked'), ('FU', 'Needs follow up'), ('A', 'Approved')], default='NC', max_length=2)),
-                ('applicant_fname', models.CharField(max_length=200, verbose_name='First Name')),
-                ('applicant_lname', models.CharField(max_length=200, verbose_name='Last Name')),
-                ('applicant_chinese_name', models.CharField(blank=True, max_length=200, null=True, verbose_name='Chinese Name')),
-                ('applicant_email', models.EmailField(max_length=254, verbose_name='Email')),
-                ('parent1_fname', models.CharField(max_length=200, verbose_name='Primary Contact First Name')),
-                ('parent1_lname', models.CharField(max_length=200, verbose_name='Primary Contact Last Name')),
-                ('parent1_relationship', models.CharField(choices=[('F', 'Father'), ('M', 'Mother'), ('G', 'Guardian')], max_length=1, verbose_name='Primary Contact Relationship')),
-                ('parent1_phone', models.CharField(max_length=15, verbose_name='Primary Contact Phone')),
-                ('parent1_email', models.EmailField(max_length=254, verbose_name='Primary Contact Email')),
-                ('parent1_for_POD', models.BooleanField(verbose_name='Primary Contact as POD')),
-                ('parent2_fname', models.CharField(blank=True, max_length=200, null=True, verbose_name='Secondary Contact First Name')),
-                ('parent2_lname', models.CharField(blank=True, max_length=200, null=True, verbose_name='Secondary Contact Last Name')),
-                ('parent2_relationship', models.CharField(blank=True, choices=[('F', 'Father'), ('M', 'Mother'), ('G', 'Guardian')], max_length=1, null=True, verbose_name='Secondary Contact Relationship')),
-                ('parent2_phone', models.CharField(blank=True, max_length=15, null=True, verbose_name='Secondary Contact Phone')),
-                ('parent2_email', models.EmailField(blank=True, max_length=254, null=True, verbose_name='Secondary Contact Email')),
-                ('parent2_for_POD', models.BooleanField(blank=True, null=True, verbose_name='Secondary Contact as POD')),
-                ('interest_in_POD_lead', models.BooleanField(verbose_name='Interest in POD Lead')),
-                ('additional_emergency_contact_fname', models.CharField(blank=True, max_length=200, null=True, verbose_name='Emergency Contact First Name')),
-                ('additional_emergency_contact_lname', models.CharField(blank=True, max_length=200, null=True, verbose_name='Emergency Contact Last Name')),
-                ('additional_emergency_contact_relationship', models.CharField(blank=True, max_length=200, null=True, verbose_name='Emergency Contact Relationship')),
-                ('additional_emergency_contact_phone', models.CharField(blank=True, max_length=15, null=True, verbose_name='Emergency Contact Phone')),
-                ('street_address', models.CharField(max_length=200, verbose_name='Street')),
-                ('city', models.CharField(max_length=200, verbose_name='City')),
-                ('state', models.CharField(max_length=200, verbose_name='State')),
-                ('zip_code', models.CharField(max_length=200, verbose_name='Zip Code')),
-                ('applicant_bday', models.DateField(verbose_name='Birthday')),
-                ('applicant_sex', models.CharField(choices=[('M', 'Male'), ('F', 'Female'), ('O', 'Other')], max_length=1, verbose_name='Gender')),
-                ('applicant_grade', models.IntegerField(validators=[django.core.validators.MinValueValidator(0)], verbose_name='School Grade')),
-                ('applicant_shirt_size', models.CharField(choices=[('YS', 'Youth S'), ('YM', 'Youth M'), ('YL', 'Youth L'), ('AS', 'Adult S'), ('AM', 'Adult M'), ('AL', 'Adult L'), ('AX', 'Adult XL')], max_length=2, verbose_name='T-Shirt Size')),
-                ('program', models.CharField(choices=[('D', 'Day'), ('ON', 'Overnight'), ('CIT', 'CIT'), ('C', 'Counselor'), ('OPS', 'OPS'), ('EA', 'EA')], default='ON', max_length=3, verbose_name='Program')),
-                ('payment_received', models.BooleanField(default=False)),
-                ('payment_total', models.DecimalField(decimal_places=2, default=0, max_digits=10)),
-                ('payment_camp', models.DecimalField(decimal_places=2, default=0, max_digits=10)),
-                ('payment_donation', models.DecimalField(blank=True, decimal_places=2, default=0, max_digits=10, null=True)),
-                ('payment_pod', models.DecimalField(blank=True, decimal_places=2, default=0, max_digits=10, null=True)),
-                ('allowed_pickup_persons', models.CharField(blank=True, max_length=500, null=True)),
-                ('financial_aid_requested', models.BooleanField(default=False)),
-                ('listing_on_weekbook', models.BooleanField(default=False)),
-                ('camper_contact_email', models.EmailField(blank=True, max_length=254, null=True)),
-                ('interest_in_committee', models.BooleanField(default=False)),
-                ('interest_in_wkbook_ads', models.BooleanField(default=False)),
-                ('available_for_carpool', models.BooleanField(default=False)),
-                ('referrals', models.CharField(blank=True, max_length=200, null=True)),
-                ('heard_from', models.CharField(blank=True, max_length=200, null=True)),
-                ('preferred_roommate', models.CharField(blank=True, max_length=200, null=True)),
-                ('health_form_a_received', models.BooleanField(default=False)),
-                ('health_form_b_received', models.BooleanField(default=False)),
-                ('medication_slip_received', models.BooleanField(default=False)),
-                ('parent1_cori_status', models.CharField(blank=True, max_length=10, null=True)),
-                ('parent1_sori_status', models.CharField(blank=True, max_length=10, null=True)),
-                ('parent1_id_status', models.CharField(blank=True, max_length=10, null=True)),
-                ('parent2_cori_status', models.CharField(blank=True, max_length=10, null=True)),
-                ('parent2_sori_status', models.CharField(blank=True, max_length=10, null=True)),
-                ('parent2_id_status', models.CharField(blank=True, max_length=10, null=True)),
-                ('camper_cori_status', models.CharField(blank=True, max_length=10, null=True)),
-                ('camper_sori_status', models.CharField(blank=True, max_length=10, null=True)),
-                ('camper_id_status', models.CharField(blank=True, max_length=10, null=True)),
-                ('camp_rule_agreement', models.BooleanField(default=False)),
-                ('liability_agreement', models.BooleanField(default=False)),
-                ('insurance_provider', models.CharField(blank=True, max_length=200, null=True, verbose_name='Health Insurance Provider')),
-                ('subscriber_name', models.CharField(blank=True, max_length=200, null=True, verbose_name='Insurance Subscriber Name')),
-                ('primary_physician_name', models.CharField(blank=True, max_length=200, null=True, verbose_name='Physician Name')),
-                ('primary_physician_phone', models.CharField(blank=True, max_length=15, null=True, verbose_name='Physician Phone')),
-                ('grant_hospital_permission', models.BooleanField(default=False)),
-                ('grant_medical_treatment_permission', models.BooleanField(default=False)),
-                ('grant_first_aid_permission', models.BooleanField(default=False)),
-                ('grant_meds_permission', models.BooleanField(default=False)),
-                ('grant_bug_spray_permission', models.BooleanField(default=False)),
-                ('grant_skin_treatment_permission', models.BooleanField(default=False)),
-                ('allergies', models.BooleanField(default=False)),
-                ('allergies_description', models.CharField(blank=True, max_length=200, null=True)),
-                ('initial_for_allergy_treatment', models.CharField(blank=True, max_length=200, null=True)),
-                ('epi_pen_prescribed', models.BooleanField(default=False)),
-                ('social_emotional_concerns', models.CharField(blank=True, max_length=200, null=True)),
-                ('wear_glasses', models.BooleanField(default=False)),
-                ('wear_contacts', models.BooleanField(default=False)),
-                ('wear_hearing_aids', models.BooleanField(default=False)),
-                ('medication', models.BooleanField(default=False)),
-                ('medication_description', models.CharField(blank=True, max_length=200, null=True)),
-                ('opt_out_activities', models.CharField(blank=True, max_length=200, null=True)),
-                ('medical_comments', models.CharField(blank=True, max_length=200, null=True)),
-                ('signature', models.CharField(blank=True, max_length=200, null=True)),
-                ('group_id', models.CharField(blank=True, default='0', max_length=200, null=True)),
-                ('room_id', models.CharField(blank=True, max_length=200, null=True)),
-                ('internal_comments', models.CharField(blank=True, max_length=200, null=True)),
-                ('user', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
-            ],
-        ),
-        migrations.CreateModel(
-            name='ApplicantHealth',
-            fields=[
-            ],
-            options={
-                'verbose_name': 'Applicant Health Info',
-                'proxy': True,
-                'indexes': [],
-                'constraints': [],
-            },
-            bases=('necysc_app.applicant',),
-        ),
-        migrations.CreateModel(
-            name='CampDirectory',
-            fields=[
-            ],
-            options={
-                'verbose_name': 'Camp Directory',
-                'proxy': True,
-                'indexes': [],
-                'constraints': [],
-            },
-            bases=('necysc_app.applicant',),
-        ),
-        migrations.CreateModel(
-            name='CamperReferral',
-            fields=[
-            ],
-            options={
-                'verbose_name': 'Camper Referral',
-                'proxy': True,
-                'indexes': [],
-                'constraints': [],
-            },
-            bases=('necysc_app.applicant',),
-        ),
-        migrations.CreateModel(
-            name='CarpoolApplicant',
-            fields=[
-            ],
-            options={
-                'verbose_name': 'Carpool Directory',
-                'proxy': True,
-                'indexes': [],
-                'constraints': [],
-            },
-            bases=('necysc_app.applicant',),
-        ),
-        migrations.CreateModel(
-            name='POD',
-            fields=[
-            ],
-            options={
-                'verbose_name': 'Parent On Duty',
-                'proxy': True,
-                'indexes': [],
-                'constraints': [],
-            },
-            bases=('necysc_app.applicant',),
-        ),
-        migrations.CreateModel(
-            name='RoomateRequest',
-            fields=[
-            ],
-            options={
-                'verbose_name': 'Roomate Request',
-                'proxy': True,
-                'indexes': [],
-                'constraints': [],
-            },
-            bases=('necysc_app.applicant',),
-        ),
-    ]
diff --git a/necysc_app/migrations/__init__.py b/necysc_app/migrations/__init__.py
deleted file mode 100644
index e69de29b..00000000
diff --git a/necysc_app/models.py b/necysc_app/models.py
index d17c182c..7ad0a470 100644
--- a/necysc_app/models.py
+++ b/necysc_app/models.py
@@ -82,7 +82,7 @@ class Applicant(models.Model):
     applicant_fname = models.CharField(max_length=200, verbose_name="First Name")
     applicant_lname = models.CharField(max_length=200, verbose_name="Last Name")
     applicant_chinese_name = models.CharField(max_length=200, blank=True, null=True, verbose_name="Chinese Name") # optional
-    applicant_email = models.EmailField(verbose_name="Email", blank=False)
+    applicant_email = models.EmailField(verbose_name="Email")
 
     parent1_fname = models.CharField(max_length=200, verbose_name="Primary Contact First Name")
     parent1_lname = models.CharField(max_length=200, verbose_name="Primary Contact Last Name")
diff --git a/necysc_app/static/necysc_app/applicant_home.css b/necysc_app/static/necysc_app/applicant_home.css
index c6d86a3f..4ee2ea39 100644
--- a/necysc_app/static/necysc_app/applicant_home.css
+++ b/necysc_app/static/necysc_app/applicant_home.css
@@ -92,5 +92,4 @@
 
 .btn-logout:hover {
     background-color: #cc0000;
-}
-
+}
\ No newline at end of file
diff --git a/necysc_app/static/necysc_app/login.css b/necysc_app/static/necysc_app/login.css
index 78f1901c..ebeef5fb 100644
--- a/necysc_app/static/necysc_app/login.css
+++ b/necysc_app/static/necysc_app/login.css
@@ -2,7 +2,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  flex-direction: column;
+  flex-direction: row;
   width: 100%;
   height: 90vh;
 }
diff --git a/necysc_app/static/necysc_app/style.css b/necysc_app/static/necysc_app/style.css
index f5d3a20e..c373752e 100644
--- a/necysc_app/static/necysc_app/style.css
+++ b/necysc_app/static/necysc_app/style.css
@@ -47,72 +47,4 @@
 .accordion-item .accordion-button:not(.collapsed) {
   background-color: #4e598c; /* Darker purple when open */
   color: #ffffff; /* White text for contrast */
-}
-
-
-.menu-toggle {
-  display: none;
-}
-
-.hamburger {
-  display: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #4e598c;
-}
-
-
-.nav-links {
-  display: flex;
-  gap: 15px;
-}
-
-
-@media (max-width: 768px) {
-  .nav-links {
-      display: none;
-      flex-direction: column;
-      background-color: white;
-      position: absolute;
-      top: 60px;
-      right: 0;
-      width: 100%;
-      padding: 10px;
-      z-index: 1000;
-  }
-
-  .menu-toggle:checked + .hamburger + .nav-links {
-      display: flex;
-  }
-
-  .hamburger {
-      display: block; 
-  }
-}
-
-.optional {
-  color: gray;
-  font-style: italic;
-}
-
-.white-link {
-  color: #ffffff; 
-  text-decoration: none; 
-  transition: color 0.3s ease; 
-}
-
-.white-link:hover {
-  color: #cccccc;
-}
-
-.welcome-title {
-  color: white;
-}
-
-footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 10; 
-}
+}
\ No newline at end of file
diff --git a/necysc_app/templates/necysc_app/applicant/index.html b/necysc_app/templates/necysc_app/applicant/index.html
index 62daf531..774c5a3d 100644
--- a/necysc_app/templates/necysc_app/applicant/index.html
+++ b/necysc_app/templates/necysc_app/applicant/index.html
@@ -3,60 +3,7 @@
 {% block title %} Applicant Portal {% endblock %}
 {% block content %}
 <link rel="stylesheet" href="{% static 'necysc_app/applicant_home.css' %}">
-
-<style>
-    body {
-        background-color: #f8f9fa;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-    }
-    
-    .background {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: -1; 
-        background-image: url("{% static 'necysc_app/images/necyscbannerimage.jpg' %}");
-        background-size: cover;
-        background-position: center;
-        filter: blur(8px); 
-    }
-    
-    .container {
-        position: relative;
-        z-index: 1; 
-        background-color: rgba(255, 255, 255, 0.9); 
-        padding: 20px;
-        border-radius: 10px;
-        max-width: 1200px;
-        margin: auto;
-        margin-top: 20px;
-    }
-    
-    h1, p, a, button {
-        position: relative;
-        z-index: 2;
-    }
-    
-    .glow {
-        transition: box-shadow 0.3s ease-in-out;
-    }
-        
-    .glow:hover {
-        box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); 
-    }
-    </style>
-    <div class="background"></div>
-
-    <div class="content-container">
-
-    <h2 class="welcome-title">Welcome!</h2>
-</div>
+<h1>Welcome!</h1>
 {% if applications %}
     <div class="container mb-4">
         {% for application in applications %}
@@ -86,67 +33,18 @@ <h5 class="card-title"><span>{{ application.applicant_fname }}
     </div>
 {% endif %}
 
-
-<div class="button-container">
-    <a class="btn-purple enlarged-btn" 
+<div class="container mt-4 pt-4">
+<a class="btn-purple" 
         href="{% url 'necysc_app:new_application' %}">Create new camper application</a>
 </div>
 
 <style>
-    .button-container {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start; 
-        height: 33vh; 
-        margin-top: 5vh;
-       
-    }
-    .content-container {
-        display: flex;
-        flex-direction: column; 
-        justify-content: center; 
-        align-items: center;
-        height: 13vh; 
-        margin-top: 5vh; 
+.glow {
+    transition: box-shadow 0.3s ease-in-out;
     }
     
-
-/* 按钮样式 */
-.btn-purple {
-    background-color: #4e598c;
-    color: #f9c784;
-    transition: all 0.3s ease;
-    border: none;
-    padding: 15px 30px; 
-    cursor: pointer;
-    font-size: 18px; 
-    border-radius: 50px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 
-}
-
-.welcome-title {
-    font-size: 5rem; 
-    text-align: center; 
-    margin-bottom: 20px; 
-    font-weight: bold;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
-}
-
-.btn-purple:hover {
-    background-color: #f9c784;
-    color: #ffffff;
-}
-
-/* 放大效果 */
-.enlarged-btn {
-    transform: scale(1);
-    transition: transform 0.3s ease;
-}
-
-.enlarged-btn:hover {
-    transform: scale(1.2); 
+.glow:hover {
+box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.15); /* Adjust the glow effect */
 }
 </style>
-
-
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/necysc_app/templates/necysc_app/applicant/login.html b/necysc_app/templates/necysc_app/applicant/login.html
index a768db6d..17d4440f 100644
--- a/necysc_app/templates/necysc_app/applicant/login.html
+++ b/necysc_app/templates/necysc_app/applicant/login.html
@@ -37,9 +37,9 @@ <h1>Welcome Back!</h1>
 
     <!-- Register Form -->
     <div class="register_form">
-        <h4>Don't Have an Account?</h4>
-        <h4>Sign up for the summer!</h4>
-        <a class="white-link" href="{% url 'necysc_app:register' %}">Sign Up</a>
+        <h2>Don't Have an Account?</h2>
+        <p>Sign up for the summer!</p>
+        <a class="" href="{% url 'necysc_app:register' %}">Sign Up</a>
     </div>
     <script>
         var form_fields = document.getElementsByTagName('input')
diff --git a/necysc_app/templates/necysc_app/applicant/new_application.html b/necysc_app/templates/necysc_app/applicant/new_application.html
index 0e46d8f0..696ab5d8 100644
--- a/necysc_app/templates/necysc_app/applicant/new_application.html
+++ b/necysc_app/templates/necysc_app/applicant/new_application.html
@@ -45,7 +45,7 @@ <h3>Camper Information</h3>
 				/>
 			</div>
 			<div class="mb-3 col-md-4">
-				<label for="chineseName" class="form-label">Chinese Name <span class="optional">(Optional)</span> </label>
+				<label for="chineseName" class="form-label">Chinese Name</label>
 				<input
 					type="text"
 					class="form-control"
@@ -60,7 +60,7 @@ <h3>Camper Information</h3>
 		<div class="row">
 			<div class="mb-3 col-md-6">
 				<label for="applicantemail" class="form-label"
-					>Email Address<span class="optional">(Optional)</span> </label
+					>Email Address</label
 				>
 				<input
 					type="email"
@@ -439,7 +439,7 @@ <h3>Parent/Guardian/Emergency Contact Information</h3>
 		<div class="row">
 			<div class="mb-3 col-md-6">
 				<label for="parent2fname" class="form-label"
-					>Secondary Contact First Name<span class="optional">(Optional)</span> </label
+					>Secondary Contact First Name</label
 				>
 				<input
 					type="text"
@@ -451,7 +451,7 @@ <h3>Parent/Guardian/Emergency Contact Information</h3>
 			</div>
 			<div class="mb-3 col-md-6">
 				<label for="parent2lname" class="form-label"
-					>Secondary Contact Last Name<span class="optional">(Optional)</span> </label
+					>Secondary Contact Last Name</label
 				>
 				<input
 					type="text"
@@ -465,7 +465,7 @@ <h3>Parent/Guardian/Emergency Contact Information</h3>
 		<div class="row">
 			<div class="mb-3 col-md-6">
 				<label for="parent2phone" class="form-label"
-					>Secondary Contact Phone Number<span class="optional">(Optional)</span> </label
+					>Secondary Contact Phone Number</label
 				>
 				<input
 					type="tel"
@@ -477,7 +477,7 @@ <h3>Parent/Guardian/Emergency Contact Information</h3>
 			</div>
 			<div class="mb-3 col-md-6">
 				<label for="parent2email" class="form-label"
-					>Secondary Contact Email<span class="optional">(Optional)</span> </label
+					>Secondary Contact Email</label
 				>
 				<input
 					type="email"
@@ -489,7 +489,7 @@ <h3>Parent/Guardian/Emergency Contact Information</h3>
 			</div>
 		</div>
 
-		<label class="form-label">Secondary Contact Relationship<span class="optional">(Optional)</span> </label>
+		<label class="form-label">Secondary Contact Relationship</label>
 		<div class="form-check">
 			<input
 				class="form-check-input"
@@ -564,7 +564,6 @@ <h3>Parent/Guardian/Emergency Contact Information</h3>
 					name="additional_emergency_contact_relationship"
 					id="emergencyrelationship"
 					placeholder="ex. Grandmother"
-					required
 				/>
 			</div>
 
@@ -584,7 +583,7 @@ <h3>Parent/Guardian/Emergency Contact Information</h3>
 		</div>
 
 		<!--POD Preference--set to false by default-->
-		<h3>Parent On Duty (POD) Preference<span class="optional">(Optional)</span> </h3>
+		<h3>Parent On Duty (POD) Preference</h3>
 		<div class="form-text mb-3">
 			NOTE: One shift required for each child enrolled in Overnight and
 			ExplorAsian program. If you cannot serve POD, please select Paid
@@ -628,7 +627,7 @@ <h3>Parent On Duty (POD) Preference<span class="optional">(Optional)</span> </h3
 			</label>
 		</div>
 
-		<h3>Roomate Request<span class="optional">(Optional)</span></h3>
+		<h3>Roomate Request</h3>
 		<div class="mb-3 col-md-4">
 			<label for="roomaterequest" class="form-label">Roomate Name</label>
 			<input
@@ -668,7 +667,6 @@ <h3>Medical Information</h3>
 						id="insuranceprovider"
 						name="insurance_provider"
 						placeholder="Insurance Provider"
-						required
 					/>
 				</div>
 				<div class="mb-3 col-md-6">
@@ -681,7 +679,6 @@ <h3>Medical Information</h3>
 						id="insurancesubscriber"
 						name="subscriber_name"
 						placeholder="Subscriber's Name"
-						required
 					/>
 				</div>
 			</div>
@@ -696,7 +693,6 @@ <h3>Medical Information</h3>
 						id="doctorname"
 						name="primary_physician_name"
 						placeholder="Doctor's Name"
-						required
 					/>
 				</div>
 				<div class="mb-3 col-md-6">
@@ -709,7 +705,6 @@ <h3>Medical Information</h3>
 						id="doctorphone"
 						name="primary_physician_phone"
 						placeholder="Doctor's Phone"
-						required
 					/>
 				</div>
 			</div>
@@ -815,7 +810,6 @@ <h3>Medical Information</h3>
 							name="allergies"
 							id="allergiesyes"
 							value="false"
-							required
 						/>
 						<label class="form-check-label" for="allergiesyes">
 							Yes
@@ -828,7 +822,6 @@ <h3>Medical Information</h3>
 							name="allergies"
 							id="allergiesno"
 							value="false"
-				
 						/>
 						<label class="form-check-label" for="allergiesno">
 							No
@@ -884,7 +877,6 @@ <h3>Medical Information</h3>
 					name="epi_pen_prescribed"
 					id="epipenyes"
 					value="false"
-					required
 				/>
 				<label class="form-check-label" for="epipenyes"> Yes </label>
 			</div>
@@ -911,7 +903,6 @@ <h3>Medical Information</h3>
 						id="socialemotionalconcerns"
 						name="social_emotional_concerns"
 						placeholder="Yes/no, please describe"
-						required
 					/>
 				</div>
 			</div>
@@ -968,7 +959,6 @@ <h3>Medical Information</h3>
 							name="medication"
 							id="medicationyes"
 							value="false"
-							required
 						/>
 						<label class="form-check-label" for="medicationyes">
 							Yes
@@ -1016,7 +1006,6 @@ <h3>Medical Information</h3>
 					id="optoutactivity"
 					name="opt_out_activities"
 					placeholder="Yes/no, please describe"
-					required
 				/>
 			</div>
 
@@ -1041,13 +1030,12 @@ <h3>Medical Information</h3>
 						id="signature"
 						name="signature"
 						placeholder="Signature"
-						required
 					/>
 				</div>
 			</div>
 		</div>
 
-		<h3>All Persons authorized For Child Pickup<span class="optional">(Optional)</span></h3>
+		<h3>All Persons authorized For Child Pickup</h3>
 		<div class="mb-3">
 			<div class="form-text mb-3">
 				NOTE: Please list names for all persons including parents that
@@ -1068,7 +1056,7 @@ <h3>All Persons authorized For Child Pickup<span class="optional">(Optional)</sp
 			</div>
 		</div>
 
-		<h3>Supplemental Information for CITs/Counselors/RAs<span class="optional">(Optional)</span></h3>
+		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
 		<div class="mb-3">
 			<div class="form-text mb-3">
 				Supplements for the Counselor/CIT/RA application are required
@@ -1081,7 +1069,7 @@ <h3>Supplemental Information for CITs/Counselors/RAs<span class="optional">(Opti
 			</div>
 		</div>
 
-		<h3>Supplemental Information for CITs/Counselors/RAs<span class="optional">(Optional)</span></h3>
+		<h3>Supplemental Information for CITs/Counselors/RAs</h3>
 		<div class="mb-3">
 			<!-- TODO: update camp fees -->
 			<div class="form-text mb-3">
@@ -1155,7 +1143,7 @@ <h3>Supplemental Information for CITs/Counselors/RAs<span class="optional">(Opti
 			</div>
 		</div>
 
-		<h3>Additional Information<span class="optional">(Optional)</span></h3>
+		<h3>Additional Information</h3>
 		<div class="mb-3">
 			<div class="form-check">
 				<input
@@ -1252,7 +1240,6 @@ <h3>Important Documents</h3>
 					name="camp_rule_agreement"
 					value="false"
 					id="campruleagrement"
-					required
 				/>
 				<label class="form-check-label" for="campruleagrement">
 					<a
@@ -1269,7 +1256,6 @@ <h3>Important Documents</h3>
 					name="liability_agreement"
 					value="false"
 					id="liabilityagreement"
-					required
 				/>
 				<label class="form-check-label" for="liabilityagreement">
 					<a
diff --git a/necysc_app/templates/necysc_app/footer.html b/necysc_app/templates/necysc_app/footer.html
index c6ead0de..2d434c60 100644
--- a/necysc_app/templates/necysc_app/footer.html
+++ b/necysc_app/templates/necysc_app/footer.html
@@ -1,26 +1,26 @@
 <!-- Footer -->
 <footer class="pt-4" id="contact">
+  <div class="ms-5 me-5 mb-5 bg-dark" style="height: 2px;"></div>
 
-
-  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: white;">Connect With Us!</h2>
-  <p class="ps-5 text-center" style="color: white;">General Inquiries:
-    <a href="mailto:registration@necysc.org" style="color: white">registration@necysc.org</a>
+  <h2 class="ps-5 mb-3 mt-5 text-center" style="color: #4e598c;">Connect With Us!</h2>
+  <p class="ps-5 text-center"> General Inquiries:
+    <a href="mailto:registration@necysc.org" style="color: black">registration@necysc.org</a>
   </p>
-  <p class="ps-5 text-center" style="color: white;"> Director:
-    <a href="mailto:registration@necysc.org" style="color: white">director@necysc.org</a>
+  <p class="ps-5 text-center"> Director:
+    <a href="mailto:registration@necysc.org" style="color: black">director@necysc.org</a>
   </p>
-  <p class="ps-5 text-center" style="color: white;"> Assistant Director:
-    <a href="mailto:registration@necysc.org" style="color: white">assistantdirector@necysc.org</a>
+  <p class="ps-5 text-center"> Assistant Director:
+    <a href="mailto:registration@necysc.org" style="color: black">assistantdirector@necysc.org</a>
   </p>
 
   <div class="row text-center align-items-center justify-content-center">
     <div class="col-auto">
-        <a href="https://www.instagram.com/NECYSC/"  target="_blank">
+        <a href="https://www.instagram.com/NECYSC/" style="display: inline-block;" target="_blank">
             <img src="https://cdn.freebiesupply.com/images/large/2x/instagram-icon-white-on-black.png" alt="Instagram Logo" style="width: 50px; height: auto;">
         </a>
     </div>
     <div class="col-auto">
-      <a href="https://www.facebook.com/NECYSC"target="_blank">
+      <a href="https://www.facebook.com/NECYSC" style="display: inline-block;" target="_blank">
           <img src="https://www.freepnglogos.com/uploads/logo-facebook-png/logo-facebook-facebook-logo-png-transparent-svg-vector-bie-supply-18.png" alt="Facebook Logo" style="width: 40px; height: auto;">
       </a>
     </div>
@@ -28,8 +28,8 @@ <h2 class="ps-5 mb-3 mt-5 text-center" style="color: white;">Connect With Us!</h
 
 
   <!-- Copyright -->
-
-  <div class="text-center p-4" style="color: white;" >
+  <div class="container"></div>
+  <div class="text-center p-4">
     © 2024 Copyright.
     <a class="text-reset" href="https://necysc.org/">necysc.org</a>
   </div>
diff --git a/necysc_app/templates/necysc_app/navbar.html b/necysc_app/templates/necysc_app/navbar.html
index 9b0b5fb6..0d65a833 100644
--- a/necysc_app/templates/necysc_app/navbar.html
+++ b/necysc_app/templates/necysc_app/navbar.html
@@ -117,88 +117,80 @@
 <body>
 
 <!-- navbar sticky -->
-{% load static %}
 <div class="row mt-2 pt-4 pb-4 mb-3 d-flex ps-4 pe-5 align-items-center gap-3 sticky-top bg-bi-white bg-white row">
+    <!-- NECYSC logo -->
+    <div class="col-auto">
+        <a href="{% url 'necysc_app:index' %}" id="logo-link">
+            <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
+        </a>
+    </div>
 
-    <input type="checkbox" id="menu-toggle" class="menu-toggle">
-    <label for="menu-toggle" class="hamburger">
-        &#9776;
-    </label>
-
-    <div class="nav-links">
-       
-        <div class="col-auto">
-            <a href="{% url 'necysc_app:index' %}" id="logo-link">
-                <img src="https://www.necysc.org/v2/images/logo2.png" alt="Your Image Description" id="logobutton" class="rounded-pill p-3"/>
-            </a>
-        </div>
-
-        <div class="dropdown col-auto">
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
-            {% else %}
-            <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
-            {% endif %}
-        </div>
+    <div class="dropdown col-auto">
+        {% if request.user.is_authenticated %}
+        <a href="{% url 'necysc_app:home' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Applicant Home</a>
+        {% else %}
+        <a href="{% url 'necysc_app:index' %}" class="navbar-link {% if request.path == '/' %}active{% endif %}">Home</a>
+        {% endif %}
+    </div>
 
-        {% if not request.user.is_authenticated %}
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
-                <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
-            </div>
+    {% if not request.user.is_authenticated %}
+    <div class="dropdown col-auto">
+        <a href="{% url 'necysc_app:about' %}" class="navbar-link {% if request.path == '/about/' %}active{% endif %}">About</a>
+        <div class="dropdown-content">
+            <a href="{% url 'necysc_app:about' %}#sponsors">Sponsors</a>
+            <a href="{% url 'necysc_app:about' %}#contact">Contact Us</a>
         </div>
+    </div>
 
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
-                <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
-            </div>
+    <div class="dropdown col-auto">
+        <a href="{% url 'necysc_app:programs' %}" class="navbar-link {% if request.path == '/programs/' %}active{% endif %}">Programs</a>
+        <div class="dropdown-content">
+            <a href="{% url 'necysc_app:programs' %}#day">Day Camp</a>
+            <a href="{% url 'necysc_app:programs' %}#on">Overnight Camp</a>
+            <a href="{% url 'necysc_app:programs' %}#ea">ExplorAsian</a>
         </div>
+    </div>
 
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
-                <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
-                <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
-                <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
-                <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
-            </div>
+    <div class="dropdown col-auto">
+        <a href="{% url 'necysc_app:staff' %}" class="navbar-link {% if request.path == '/staff/' %}active{% endif %}">Staff</a>
+        <div class="dropdown-content">
+            <a href="{% url 'necysc_app:staff' %}#cit">CIT</a>
+            <a href="{% url 'necysc_app:staff' %}#counselor">Counselor</a>
+            <a href="{% url 'necysc_app:staff' %}#ra">RA</a>
+            <a href="{% url 'necysc_app:staff' %}#ops">OPs</a>
+            <a href="{% url 'necysc_app:staff' %}#committee">Committee</a>
         </div>
+    </div>
 
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
-                <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
-            </div>
+    <div class="dropdown col-auto">
+        <a href="{% url 'necysc_app:registration' %}" class="navbar-link {% if request.path == '/registration/' %}active{% endif %}">Registration</a>
+        <div class="dropdown-content">
+            <a href="{% url 'necysc_app:registration' %}#importantdates">2025 Important Dates</a>
+            <a href="{% url 'necysc_app:registration' %}#financialaid">Financial Aid</a>
         </div>
+    </div>
 
-        <div class="dropdown col-auto">
-            <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
-            <div class="dropdown-content">
-                <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
-                <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
-                <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
-                <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
-            </div>
+    <div class="dropdown col-auto">
+        <a href="{% url 'necysc_app:faq' %}" class="navbar-link {% if request.path == '/faq/' %}active{% endif %}">FAQ</a>
+        <div class="dropdown-content">
+            <a href="{% url 'necysc_app:faq' %}#faqregistration">Registration</a>
+            <a href="{% url 'necysc_app:faq' %}#faqleavingcamp">Leaves and Visits</a>
+            <a href="{% url 'necysc_app:faq' %}#faqhealth">Health and Safety</a>
+            <a href="{% url 'necysc_app:faq' %}#camp">Camp Activities</a>
         </div>
+    </div>
+    {% endif %}
+    
+    <div class="col-auto ms-auto">
+        <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
+        {% if request.user.is_authenticated %}
+        <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
+        {% else %}
+        <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
         {% endif %}
-        
-        <div class="col-auto ms-auto">
-            <a href="https://youtu.be/PPZ1zu8fGl0?si=h436QWcB9vHQeV_G" target="_blank" class="btn-padding me-3">Promo Video</a>
-            {% if request.user.is_authenticated %}
-            <a href="{% url 'necysc_app:logout' %}" class="btn-login">Logout</a>
-            {% else %}
-            <a href="{% url 'necysc_app:login' %}" class="btn-login">Login/Register</a>
-            {% endif %}
-        </div>
     </div>
+    
 </div>
 
 </body>
-</html> 
\ No newline at end of file
+</html>