From e4dc874374f55b46cf3ead75306322ae8d097d50 Mon Sep 17 00:00:00 2001
From: Suvodip <suvodip@l1>
Date: Thu, 21 Nov 2024 16:57:31 +0530
Subject: [PATCH] s1

---
 public/assets/brainstrom-logo.svg |    4 +
 src/pages/buzzboard.astro         | 1012 +++++++++++++++++++++++++++++
 2 files changed, 1016 insertions(+)
 create mode 100644 public/assets/brainstrom-logo.svg
 create mode 100644 src/pages/buzzboard.astro

diff --git a/public/assets/brainstrom-logo.svg b/public/assets/brainstrom-logo.svg
new file mode 100644
index 0000000..8d153b4
--- /dev/null
+++ b/public/assets/brainstrom-logo.svg
@@ -0,0 +1,4 @@
+<svg width="131" height="47" viewBox="0 0 131 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.125 23V5.54545H5.82955V12.1932H5.89773C6.06818 11.75 6.31818 11.3437 6.64773 10.9744C6.97727 10.5994 7.38636 10.3011 7.875 10.0795C8.36364 9.85227 8.93182 9.73864 9.57955 9.73864C10.4432 9.73864 11.2642 9.96875 12.0426 10.429C12.8267 10.8892 13.4631 11.6136 13.9517 12.6023C14.446 13.5909 14.6932 14.875 14.6932 16.4545C14.6932 17.9659 14.4574 19.2187 13.9858 20.2131C13.5199 21.2074 12.8949 21.9489 12.1108 22.4375C11.3324 22.9261 10.4773 23.1705 9.54545 23.1705C8.93182 23.1705 8.38352 23.071 7.90057 22.8722C7.4233 22.6676 7.0142 22.392 6.6733 22.0455C6.33807 21.6932 6.07955 21.2955 5.89773 20.8523H5.79545V23H1.125ZM5.72727 16.4545C5.72727 17.0909 5.80966 17.642 5.97443 18.108C6.14489 18.5682 6.38352 18.9261 6.69034 19.1818C7.00284 19.4318 7.375 19.5568 7.80682 19.5568C8.23864 19.5568 8.60511 19.4347 8.90625 19.1903C9.21307 18.9403 9.44602 18.5852 9.60511 18.125C9.76989 17.6591 9.85227 17.1023 9.85227 16.4545C9.85227 15.8068 9.76989 15.2528 9.60511 14.7926C9.44602 14.3267 9.21307 13.9716 8.90625 13.7273C8.60511 13.4773 8.23864 13.3523 7.80682 13.3523C7.375 13.3523 7.00284 13.4773 6.69034 13.7273C6.38352 13.9716 6.14489 14.3267 5.97443 14.7926C5.80966 15.2528 5.72727 15.8068 5.72727 16.4545ZM25.1506 17.2727V9.90909H29.8551V23H25.3892V20.5114H25.2528C24.9688 21.3466 24.4716 22 23.7614 22.4716C23.0511 22.9375 22.2074 23.1705 21.2301 23.1705C20.3153 23.1705 19.5142 22.9602 18.8267 22.5398C18.1449 22.1193 17.6136 21.5398 17.233 20.8011C16.858 20.0625 16.6676 19.2159 16.6619 18.2614V9.90909H21.3665V17.2727C21.3722 17.9205 21.5369 18.429 21.8608 18.7983C22.1903 19.1676 22.6506 19.3523 23.2415 19.3523C23.6335 19.3523 23.9716 19.2699 24.2557 19.1051C24.5455 18.9347 24.767 18.696 24.9205 18.3892C25.0795 18.0767 25.1563 17.7045 25.1506 17.2727ZM32.3842 23V20.4091L38.1115 13.5568V13.4886H32.5888V9.90909H43.6683V12.7727L38.4524 19.3523V19.4205H43.8729V23H32.3842ZM46.6108 23V20.4091L52.3381 13.5568V13.4886H46.8153V9.90909H57.8949V12.7727L52.679 19.3523V19.4205H58.0994V23H46.6108ZM60.6328 23V5.54545H65.3374V12.1932H65.4055C65.576 11.75 65.826 11.3437 66.1555 10.9744C66.4851 10.5994 66.8942 10.3011 67.3828 10.0795C67.8714 9.85227 68.4396 9.73864 69.0874 9.73864C69.951 9.73864 70.772 9.96875 71.5504 10.429C72.3345 10.8892 72.9709 11.6136 73.4595 12.6023C73.9538 13.5909 74.201 14.875 74.201 16.4545C74.201 17.9659 73.9652 19.2187 73.4936 20.2131C73.0277 21.2074 72.4027 21.9489 71.6186 22.4375C70.8402 22.9261 69.9851 23.1705 69.0533 23.1705C68.4396 23.1705 67.8913 23.071 67.4084 22.8722C66.9311 22.6676 66.522 22.392 66.1811 22.0455C65.8459 21.6932 65.5874 21.2955 65.4055 20.8523H65.3033V23H60.6328ZM65.2351 16.4545C65.2351 17.0909 65.3175 17.642 65.4822 18.108C65.6527 18.5682 65.8913 18.9261 66.1982 19.1818C66.5107 19.4318 66.8828 19.5568 67.3146 19.5568C67.7464 19.5568 68.1129 19.4347 68.4141 19.1903C68.7209 18.9403 68.9538 18.5852 69.1129 18.125C69.2777 17.6591 69.3601 17.1023 69.3601 16.4545C69.3601 15.8068 69.2777 15.2528 69.1129 14.7926C68.9538 14.3267 68.7209 13.9716 68.4141 13.7273C68.1129 13.4773 67.7464 13.3523 67.3146 13.3523C66.8828 13.3523 66.5107 13.4773 66.1982 13.7273C65.8913 13.9716 65.6527 14.3267 65.4822 14.7926C65.3175 15.2528 65.2351 15.8068 65.2351 16.4545ZM82.4766 23.2386C81.0561 23.2386 79.8402 22.9574 78.8288 22.3949C77.8175 21.8267 77.0419 21.0369 76.5021 20.0256C75.9624 19.0085 75.6925 17.8295 75.6925 16.4886C75.6925 15.1477 75.9624 13.9716 76.5021 12.9602C77.0419 11.9432 77.8175 11.1534 78.8288 10.5909C79.8402 10.0227 81.0561 9.73864 82.4766 9.73864C83.897 9.73864 85.1129 10.0227 86.1243 10.5909C87.1357 11.1534 87.9112 11.9432 88.451 12.9602C88.9908 13.9716 89.2607 15.1477 89.2607 16.4886C89.2607 17.8295 88.9908 19.0085 88.451 20.0256C87.9112 21.0369 87.1357 21.8267 86.1243 22.3949C85.1129 22.9574 83.897 23.2386 82.4766 23.2386ZM82.5107 19.7614C82.9084 19.7614 83.2521 19.6278 83.5419 19.3608C83.8317 19.0937 84.0561 18.7131 84.2152 18.2188C84.3743 17.7244 84.4538 17.1364 84.4538 16.4545C84.4538 15.767 84.3743 15.179 84.2152 14.6903C84.0561 14.196 83.8317 13.8153 83.5419 13.5483C83.2521 13.2812 82.9084 13.1477 82.5107 13.1477C82.0902 13.1477 81.7294 13.2812 81.4283 13.5483C81.1271 13.8153 80.897 14.196 80.7379 14.6903C80.5788 15.179 80.4993 15.767 80.4993 16.4545C80.4993 17.1364 80.5788 17.7244 80.7379 18.2188C80.897 18.7131 81.1271 19.0937 81.4283 19.3608C81.7294 19.6278 82.0902 19.7614 82.5107 19.7614ZM94.8175 23.2045C93.9822 23.2045 93.2436 23.0682 92.6016 22.7955C91.9652 22.517 91.4652 22.0966 91.1016 21.5341C90.7379 20.9716 90.5561 20.2557 90.5561 19.3864C90.5561 18.6705 90.6783 18.0597 90.9226 17.554C91.1669 17.0426 91.5078 16.625 91.9453 16.3011C92.3828 15.9773 92.8913 15.7301 93.4709 15.5597C94.0561 15.3892 94.6868 15.2784 95.3629 15.2273C96.0959 15.1705 96.6839 15.1023 97.1271 15.0227C97.576 14.9375 97.8999 14.821 98.0987 14.6733C98.2976 14.5199 98.397 14.3182 98.397 14.0682V14.0341C98.397 13.6932 98.2663 13.4318 98.005 13.25C97.7436 13.0682 97.4084 12.9773 96.9993 12.9773C96.5504 12.9773 96.1839 13.0767 95.8999 13.2756C95.6214 13.4687 95.4538 13.767 95.397 14.1705H91.0675C91.1243 13.375 91.3771 12.642 91.826 11.9716C92.2805 11.2955 92.9425 10.7557 93.8118 10.3523C94.6811 9.94318 95.7663 9.73864 97.0675 9.73864C98.005 9.73864 98.8459 9.84943 99.5902 10.071C100.335 10.2869 100.968 10.5909 101.491 10.983C102.013 11.3693 102.411 11.8239 102.684 12.3466C102.962 12.8636 103.102 13.4261 103.102 14.0341V23H98.7038V21.1591H98.6016C98.3402 21.6477 98.022 22.0426 97.647 22.3438C97.2777 22.6449 96.8544 22.8636 96.3771 23C95.9055 23.1364 95.3857 23.2045 94.8175 23.2045ZM96.3516 20.2386C96.7095 20.2386 97.0447 20.1648 97.3572 20.017C97.6754 19.8693 97.9339 19.6562 98.1328 19.3778C98.3317 19.0994 98.4311 18.7614 98.4311 18.3636V17.2727C98.3061 17.3239 98.1726 17.3722 98.0305 17.4176C97.8942 17.4631 97.7464 17.5057 97.5874 17.5455C97.4339 17.5852 97.2692 17.6222 97.093 17.6562C96.9226 17.6903 96.7436 17.7216 96.5561 17.75C96.1925 17.8068 95.8942 17.9006 95.6612 18.0312C95.4339 18.1562 95.2635 18.3125 95.1499 18.5C95.0419 18.6818 94.9879 18.8864 94.9879 19.1136C94.9879 19.4773 95.1158 19.7557 95.3714 19.9489C95.6271 20.142 95.9538 20.2386 96.3516 20.2386ZM105.349 23V9.90909H109.918V12.3977H110.054C110.293 11.4773 110.67 10.804 111.188 10.3778C111.71 9.9517 112.321 9.73864 113.02 9.73864C113.224 9.73864 113.426 9.75568 113.625 9.78977C113.83 9.81818 114.026 9.8608 114.213 9.91761V13.9318C113.98 13.8523 113.693 13.7926 113.352 13.7528C113.011 13.7131 112.719 13.6932 112.474 13.6932C112.014 13.6932 111.599 13.7983 111.23 14.0085C110.866 14.2131 110.58 14.5028 110.369 14.8778C110.159 15.2472 110.054 15.6818 110.054 16.1818V23H105.349ZM119.744 23.1705C118.812 23.1705 117.955 22.9261 117.17 22.4375C116.392 21.9489 115.767 21.2074 115.295 20.2131C114.83 19.2187 114.597 17.9659 114.597 16.4545C114.597 14.875 114.841 13.5909 115.33 12.6023C115.824 11.6136 116.46 10.8892 117.239 10.429C118.023 9.96875 118.847 9.73864 119.71 9.73864C120.358 9.73864 120.926 9.85227 121.415 10.0795C121.903 10.3011 122.313 10.5994 122.642 10.9744C122.972 11.3437 123.222 11.75 123.392 12.1932H123.46V5.54545H128.165V23H123.494V20.8523H123.392C123.21 21.2955 122.949 21.6932 122.608 22.0455C122.273 22.392 121.864 22.6676 121.381 22.8722C120.903 23.071 120.358 23.1705 119.744 23.1705ZM121.483 19.5568C121.915 19.5568 122.284 19.4318 122.591 19.1818C122.903 18.9261 123.142 18.5682 123.307 18.108C123.477 17.642 123.562 17.0909 123.562 16.4545C123.562 15.8068 123.477 15.2528 123.307 14.7926C123.142 14.3267 122.903 13.9716 122.591 13.7273C122.284 13.4773 121.915 13.3523 121.483 13.3523C121.051 13.3523 120.682 13.4773 120.375 13.7273C120.074 13.9716 119.841 14.3267 119.676 14.7926C119.517 15.2528 119.438 15.8068 119.438 16.4545C119.438 17.1023 119.517 17.6591 119.676 18.125C119.841 18.5852 120.074 18.9403 120.375 19.1903C120.682 19.4347 121.051 19.5568 121.483 19.5568Z" fill="#004AAD"/>
+<path d="M41.496 39.856C41.176 39.824 40.92 39.744 40.728 39.616C40.552 39.472 40.416 39.296 40.32 39.088C40.192 38.944 40.112 38.832 40.08 38.752C40.064 38.672 40.064 38.6 40.08 38.536C40.16 38.536 40.232 38.536 40.296 38.536C40.36 38.52 40.4 38.488 40.416 38.44C40.416 38.392 40.44 38.36 40.488 38.344C40.552 38.328 40.616 38.328 40.68 38.344C40.984 38.36 41.352 38.256 41.784 38.032C42.232 37.808 42.72 37.496 43.248 37.096C43.776 36.68 44.304 36.232 44.832 35.752C45.248 35.208 45.536 34.808 45.696 34.552C45.872 34.296 45.96 34.104 45.96 33.976C45.976 33.832 45.944 33.688 45.864 33.544C45.8 33.416 45.648 33.352 45.408 33.352C45.168 33.352 44.8 33.512 44.304 33.832C43.616 34.264 43.064 34.664 42.648 35.032C42.232 35.4 41.848 35.816 41.496 36.28C41.368 36.44 41.224 36.616 41.064 36.808C40.92 36.984 40.792 37.136 40.68 37.264C40.584 37.392 40.536 37.456 40.536 37.456C40.536 37.52 40.44 37.6 40.248 37.696C40.072 37.792 39.92 37.84 39.792 37.84C39.728 37.808 39.64 37.752 39.528 37.672C39.432 37.576 39.368 37.456 39.336 37.312C39.192 37.2 39.072 37.104 38.976 37.024C38.88 36.928 38.832 36.776 38.832 36.568C38.832 36.44 38.848 36.28 38.88 36.088C38.928 35.896 38.992 35.648 39.072 35.344C39.168 34.928 39.272 34.496 39.384 34.048C39.496 33.584 39.6 33.192 39.696 32.872C39.808 32.536 39.888 32.352 39.936 32.32C39.936 32.32 39.968 32.248 40.032 32.104C40.096 31.96 40.128 31.792 40.128 31.6C40.16 31.408 40.208 31.24 40.272 31.096C40.352 30.952 40.392 30.848 40.392 30.784C40.456 30.736 40.552 30.544 40.68 30.208C40.808 29.872 40.968 29.432 41.16 28.888C41.16 28.84 41.216 28.688 41.328 28.432C41.44 28.16 41.576 27.848 41.736 27.496C41.896 27.128 42.056 26.752 42.216 26.368C42.392 25.968 42.536 25.616 42.648 25.312C42.84 25.04 43 24.768 43.128 24.496C43.272 24.208 43.4 24.04 43.512 23.992C43.592 23.976 43.728 24.008 43.92 24.088C44.128 24.168 44.336 24.272 44.544 24.4C44.752 24.528 44.896 24.656 44.976 24.784C45.024 24.864 45.048 24.944 45.048 25.024C45.064 25.104 45.032 25.24 44.952 25.432C44.872 25.608 44.736 25.904 44.544 26.32C44.352 26.72 44.08 27.288 43.728 28.024C43.28 28.984 42.928 29.784 42.672 30.424C42.432 31.064 42.232 31.616 42.072 32.08C41.928 32.544 41.776 32.984 41.616 33.4L41.496 33.928L42.12 33.232C42.28 33.072 42.448 32.92 42.624 32.776C42.8 32.632 42.992 32.488 43.2 32.344C43.328 32.248 43.496 32.152 43.704 32.056C43.928 31.944 44.144 31.848 44.352 31.768C44.56 31.688 44.712 31.64 44.808 31.624C44.856 31.608 45.016 31.576 45.288 31.528C45.576 31.464 45.856 31.432 46.128 31.432C46.48 31.432 46.784 31.56 47.04 31.816C47.312 32.056 47.552 32.352 47.76 32.704C47.936 33.04 48 33.472 47.952 34C47.904 34.512 47.768 34.952 47.544 35.32C47.464 35.384 47.384 35.472 47.304 35.584C47.224 35.68 47.184 35.76 47.184 35.824C47.168 35.936 47.024 36.168 46.752 36.52C46.48 36.856 46.208 37.176 45.936 37.48C45.648 37.784 45.296 38.088 44.88 38.392C44.464 38.68 44.048 38.944 43.632 39.184C43.232 39.408 42.888 39.568 42.6 39.664C42.472 39.68 42.288 39.712 42.048 39.76C41.808 39.792 41.624 39.824 41.496 39.856ZM50.9841 39.496C50.9361 39.512 50.8321 39.504 50.6721 39.472C50.5281 39.44 50.3761 39.4 50.2161 39.352C50.0721 39.304 49.9841 39.264 49.9521 39.232C49.8881 39.168 49.8001 39.056 49.6881 38.896C49.5761 38.72 49.5121 38.488 49.4961 38.2C49.4961 37.912 49.6321 37.568 49.9041 37.168C49.9841 37.008 50.0801 36.768 50.1921 36.448C50.3041 36.128 50.4161 35.792 50.5281 35.44C50.6561 35.072 50.7681 34.744 50.8641 34.456C50.9761 34.168 51.0561 33.968 51.1041 33.856C51.1361 33.584 51.1201 33.392 51.0561 33.28C51.0081 33.152 50.8721 33.08 50.6481 33.064C50.4881 33.064 50.3601 33.008 50.2641 32.896C50.1841 32.784 50.1441 32.584 50.1441 32.296C50.1761 32.072 50.2321 31.88 50.3121 31.72C50.4081 31.544 50.5361 31.4 50.6961 31.288C50.8561 31.208 51.0561 31.152 51.2961 31.12C51.5521 31.088 51.8001 31.08 52.0401 31.096C52.2801 31.112 52.4481 31.168 52.5441 31.264C52.6561 31.328 52.7441 31.472 52.8081 31.696C52.8881 31.904 52.9521 32.12 53.0001 32.344C53.0481 32.568 53.0801 32.736 53.0961 32.848C53.2561 32.72 53.4321 32.544 53.6241 32.32C53.8321 32.08 54.0401 31.856 54.2481 31.648C54.5041 31.472 54.8081 31.296 55.1601 31.12C55.5121 30.928 55.7681 30.832 55.9281 30.832C56.1041 30.832 56.3201 30.92 56.5761 31.096C56.8321 31.256 56.9921 31.4 57.0561 31.528C57.2161 31.8 57.3281 32.088 57.3921 32.392C57.4721 32.68 57.4241 32.936 57.2481 33.16C57.0881 33.368 56.8641 33.576 56.5761 33.784C56.2881 33.976 55.9281 34.032 55.4961 33.952C55.4001 33.92 55.2961 33.8 55.1841 33.592C55.0881 33.384 55.0321 33.232 55.0161 33.136C55.0161 33.088 54.9441 33.136 54.8001 33.28C54.6721 33.408 54.5121 33.568 54.3201 33.76C54.1441 33.952 53.9761 34.128 53.8161 34.288C53.5441 34.624 53.2561 35.08 52.9521 35.656C52.6481 36.232 52.2881 36.928 51.8721 37.744C51.6801 38.144 51.5201 38.528 51.3921 38.896C51.2641 39.248 51.1281 39.448 50.9841 39.496ZM58.2885 39.496C58.2245 39.368 58.0805 39.24 57.8565 39.112C57.6485 38.984 57.5445 38.888 57.5445 38.824C57.5445 38.76 57.5045 38.664 57.4245 38.536C57.3605 38.392 57.2965 38.288 57.2325 38.224C57.1525 38.128 57.1765 37.896 57.3045 37.528C57.4325 37.144 57.6245 36.68 57.8805 36.136C58.1365 35.592 58.4165 35.04 58.7205 34.48C58.8485 34.352 58.9765 34.184 59.1045 33.976C59.2325 33.768 59.3285 33.632 59.3925 33.568C59.3925 33.504 59.4165 33.448 59.4645 33.4C59.5125 33.336 59.5685 33.304 59.6325 33.304L59.8245 32.92C59.8565 32.856 59.9525 32.728 60.1125 32.536C60.2885 32.344 60.4965 32.136 60.7365 31.912C60.9765 31.672 61.2165 31.448 61.4565 31.24C61.7125 31.032 61.9205 30.88 62.0805 30.784C62.4165 30.56 62.7605 30.456 63.1125 30.472C63.4805 30.488 63.7925 30.6 64.0485 30.808C64.0965 30.856 64.2005 30.952 64.3605 31.096C64.5365 31.24 64.7285 31.4 64.9365 31.576C65.1605 31.752 65.3525 31.912 65.5125 32.056L66.4005 32.848L65.9925 34.048C65.7845 34.688 65.7285 35.248 65.8245 35.728C65.9205 36.208 66.0725 36.624 66.2805 36.976C66.3605 37.152 66.4645 37.288 66.5925 37.384C66.7365 37.48 66.9205 37.544 67.1445 37.576C67.2725 37.592 67.3925 37.64 67.5045 37.72C67.6165 37.8 67.6725 37.928 67.6725 38.104C67.6725 38.488 67.6005 38.768 67.4565 38.944C67.3285 39.104 67.1845 39.2 67.0245 39.232C66.4965 39.296 65.9925 39.24 65.5125 39.064C65.0325 38.888 64.6005 38.432 64.2165 37.696C64.1525 37.6 64.0645 37.424 63.9525 37.168C63.8565 36.896 63.8005 36.72 63.7845 36.64C63.7205 36.72 63.6325 36.824 63.5205 36.952C63.4245 37.064 63.3285 37.168 63.2325 37.264C62.0965 38.416 61.1205 39.168 60.3045 39.52C59.5045 39.856 58.8325 39.848 58.2885 39.496ZM59.6085 37.504C59.7205 37.52 59.8965 37.464 60.1365 37.336C60.3765 37.192 60.6965 36.96 61.0965 36.64C61.6405 36.176 62.0885 35.792 62.4405 35.488C62.7925 35.184 63.1365 34.792 63.4725 34.312L64.0005 33.448C63.8405 33.08 63.6965 32.84 63.5685 32.728C63.4405 32.616 63.3125 32.56 63.1845 32.56C62.9765 32.56 62.7285 32.696 62.4405 32.968C62.1525 33.224 61.8245 33.608 61.4565 34.12C61.1045 34.616 60.7045 35.24 60.2565 35.992C60.0485 36.344 59.8885 36.688 59.7765 37.024C59.6645 37.344 59.6085 37.504 59.6085 37.504ZM70.1274 39.976C69.7434 39.976 69.4074 39.776 69.1194 39.376C68.8474 38.96 68.6794 38.464 68.6154 37.888C68.6314 37.76 68.6474 37.576 68.6634 37.336C68.6954 37.096 68.7274 36.848 68.7594 36.592C68.8234 36.288 68.9114 35.896 69.0234 35.416C69.1354 34.936 69.2554 34.456 69.3834 33.976C69.5114 33.48 69.6234 33.056 69.7194 32.704C69.8154 32.336 69.8714 32.12 69.8874 32.056C69.9834 31.832 70.1994 31.776 70.5354 31.888C70.8714 32 71.1594 32.24 71.3994 32.608C71.4954 32.736 71.5514 32.888 71.5674 33.064C71.5994 33.24 71.5754 33.496 71.4954 33.832C71.4314 34.168 71.3034 34.664 71.1114 35.32C70.9354 35.96 70.7994 36.48 70.7034 36.88C70.6234 37.264 70.5914 37.672 70.6074 38.104C70.5434 38.84 70.4794 39.344 70.4154 39.616C70.3514 39.872 70.2554 39.992 70.1274 39.976ZM72.3354 30.016C72.2714 30.064 72.2074 30.088 72.1434 30.088C72.0954 30.072 72.0074 30.024 71.8794 29.944C71.7674 29.928 71.6234 29.856 71.4474 29.728C71.2874 29.584 71.1434 29.44 71.0154 29.296C70.9034 29.152 70.8474 29.064 70.8474 29.032C70.8314 28.872 70.8394 28.616 70.8714 28.264C70.9194 27.912 71.0074 27.584 71.1354 27.28C71.2794 26.96 71.4714 26.792 71.7114 26.776C71.7754 26.776 71.9114 26.808 72.1194 26.872C72.3434 26.936 72.5754 27.016 72.8154 27.112C72.9434 27.352 73.0634 27.664 73.1754 28.048C73.2874 28.432 73.2954 28.808 73.1994 29.176C73.1194 29.528 72.8314 29.808 72.3354 30.016ZM74.3824 39.184C74.3184 39.184 74.1664 39.128 73.9264 39.016C73.6864 38.888 73.5344 38.792 73.4704 38.728C73.3584 38.6 73.2864 38.464 73.2544 38.32C73.2224 38.16 73.2064 37.856 73.2064 37.408C73.2064 36.896 73.3104 36.32 73.5184 35.68C73.7264 35.024 74.0784 34.152 74.5744 33.064L75.5584 31.072C75.6384 30.96 75.7104 30.864 75.7744 30.784C75.8384 30.688 75.9104 30.6 75.9904 30.52C76.0224 30.52 76.0624 30.52 76.1104 30.52C76.1744 30.52 76.2224 30.528 76.2544 30.544C76.3984 30.56 76.6224 30.648 76.9264 30.808C77.2464 30.968 77.4384 31.208 77.5024 31.528C77.5024 31.736 77.4704 31.984 77.4064 32.272C77.3424 32.544 77.1504 32.904 76.8304 33.352C76.7024 33.512 76.5744 33.744 76.4464 34.048C76.3344 34.352 76.2304 34.64 76.1344 34.912C76.1184 34.944 76.0704 35.024 75.9904 35.152C75.9264 35.264 75.8624 35.384 75.7984 35.512C75.7344 35.624 75.7024 35.696 75.7024 35.728L75.6064 35.944L76.6384 34.936C77.3584 34.216 77.9664 33.704 78.4624 33.4C78.9584 33.096 79.3744 32.968 79.7104 33.016C80.0624 33.064 80.3424 33.264 80.5504 33.616C80.6624 33.776 80.7424 33.952 80.7904 34.144C80.8384 34.32 80.8704 34.528 80.8864 34.768C80.9024 35.008 80.8944 35.312 80.8624 35.68V37.048C81.1664 36.968 81.3984 36.904 81.5584 36.856C81.7184 36.792 81.8784 36.736 82.0384 36.688C82.1664 36.656 82.2944 36.624 82.4224 36.592C82.5664 36.56 82.7424 36.536 82.9504 36.52C82.9344 36.728 82.8464 36.984 82.6864 37.288C82.5264 37.592 82.3264 37.896 82.0864 38.2C81.8624 38.504 81.6144 38.76 81.3424 38.968C81.0864 39.176 80.8464 39.28 80.6224 39.28C80.4144 39.28 80.1744 39.216 79.9024 39.088C79.6304 38.944 79.3984 38.672 79.2064 38.272C79.1424 38.064 79.0784 37.824 79.0144 37.552C78.9504 37.28 78.9184 36.992 78.9184 36.688V35.632C78.9184 35.536 78.9104 35.472 78.8944 35.44C78.8944 35.392 78.8864 35.368 78.8704 35.368C78.8064 35.368 78.5984 35.536 78.2464 35.872C77.9104 36.208 77.5664 36.56 77.2144 36.928C76.4784 37.696 75.8624 38.264 75.3664 38.632C74.8864 39 74.5584 39.184 74.3824 39.184ZM85.422 40.144C84.878 39.92 84.478 39.688 84.222 39.448C83.982 39.192 83.886 38.968 83.934 38.776C83.966 38.68 84.022 38.592 84.102 38.512C84.182 38.432 84.358 38.4 84.63 38.416C84.918 38.416 85.358 38.488 85.95 38.632C86.126 38.632 86.302 38.624 86.478 38.608C86.654 38.592 86.814 38.568 86.958 38.536C87.118 38.504 87.246 38.464 87.342 38.416C87.422 38.384 87.446 38.344 87.414 38.296C87.382 38.232 87.326 38.168 87.246 38.104C87.182 38.024 87.11 37.976 87.03 37.96C86.95 37.928 86.878 37.912 86.814 37.912C86.782 37.832 86.71 37.752 86.598 37.672C86.502 37.592 86.382 37.504 86.238 37.408C85.886 37.12 85.566 36.864 85.278 36.64C84.99 36.416 84.878 36.248 84.942 36.136C84.942 36.072 84.942 36.04 84.942 36.04C84.942 36.024 84.942 36.016 84.942 36.016C84.83 36.016 84.726 35.864 84.63 35.56C84.534 35.24 84.486 34.952 84.486 34.696C84.486 34.376 84.55 34.056 84.678 33.736C84.822 33.416 84.998 33.112 85.206 32.824C85.43 32.536 85.654 32.28 85.878 32.056C86.182 31.768 86.502 31.488 86.838 31.216C87.19 30.928 87.566 30.672 87.966 30.448C88.382 30.224 88.838 30.048 89.334 29.92C89.558 29.872 89.814 29.848 90.102 29.848C90.39 29.848 90.598 29.888 90.726 29.968C90.854 29.888 91.014 29.912 91.206 30.04C91.398 30.152 91.59 30.312 91.782 30.52C91.974 30.728 92.118 30.936 92.214 31.144C92.214 31.336 92.206 31.576 92.19 31.864C92.19 32.136 92.174 32.376 92.142 32.584C92.11 32.792 92.038 32.896 91.926 32.896C91.926 32.896 91.902 32.904 91.854 32.92C91.822 32.92 91.806 32.96 91.806 33.04C91.806 33.2 91.686 33.384 91.446 33.592C91.142 33.8 90.854 33.968 90.582 34.096C90.31 34.224 90.102 34.232 89.958 34.12C89.862 34.056 89.774 33.992 89.694 33.928C89.614 33.864 89.542 33.784 89.478 33.688C89.478 33.688 89.454 33.656 89.406 33.592C89.374 33.512 89.358 33.44 89.358 33.376C89.358 33.312 89.382 33.256 89.43 33.208C89.478 33.144 89.502 33.112 89.502 33.112C89.726 32.904 89.894 32.712 90.006 32.536C90.134 32.36 90.222 32.208 90.27 32.08C90.318 31.936 90.342 31.824 90.342 31.744C90.342 31.648 90.318 31.592 90.27 31.576C90.238 31.544 90.158 31.528 90.03 31.528C89.95 31.528 89.774 31.592 89.502 31.72C89.246 31.848 88.974 32.008 88.686 32.2C88.398 32.376 88.174 32.536 88.014 32.68C87.95 32.792 87.902 32.864 87.87 32.896C87.854 32.928 87.814 32.944 87.75 32.944C87.75 32.88 87.71 32.888 87.63 32.968C87.55 33.048 87.454 33.16 87.342 33.304C87.23 33.448 87.118 33.6 87.006 33.76C86.894 33.92 86.806 34.048 86.742 34.144C86.726 34.288 86.686 34.424 86.622 34.552C86.574 34.664 86.558 34.784 86.574 34.912C86.59 35.072 86.67 35.224 86.814 35.368C86.958 35.512 87.166 35.696 87.438 35.92C87.998 36.336 88.414 36.664 88.686 36.904C88.974 37.144 89.174 37.336 89.286 37.48C89.398 37.624 89.47 37.768 89.502 37.912C89.774 38.408 89.806 38.84 89.598 39.208C89.39 39.56 89.07 39.832 88.638 40.024C88.478 40.104 88.198 40.176 87.798 40.24C87.398 40.32 86.974 40.352 86.526 40.336C86.094 40.336 85.726 40.272 85.422 40.144ZM95.6606 40.144C95.4366 40.08 95.2126 39.968 94.9886 39.808C94.7646 39.648 94.5326 39.464 94.2926 39.256C94.1006 39 93.9646 38.768 93.8846 38.56C93.8046 38.336 93.7566 38.08 93.7406 37.792C93.7406 37.488 93.7406 37.104 93.7406 36.64C93.7406 36.448 93.7726 36.176 93.8366 35.824C93.9166 35.472 93.9966 35.104 94.0766 34.72C94.1726 34.336 94.2606 34 94.3406 33.712C94.4206 33.408 94.4686 33.208 94.4846 33.112C94.5326 32.904 94.4526 32.784 94.2446 32.752C94.0366 32.72 93.8046 32.712 93.5486 32.728C93.3086 32.728 93.1486 32.704 93.0686 32.656C93.0046 32.64 92.9726 32.56 92.9726 32.416C92.9726 32.256 92.9726 32.176 92.9726 32.176C92.9726 32.112 92.9406 32.072 92.8766 32.056C92.8126 32.024 92.7566 31.968 92.7086 31.888C92.6766 31.824 92.7166 31.704 92.8286 31.528C92.9406 31.352 93.0846 31.248 93.2606 31.216C93.4046 31.184 93.6206 31.16 93.9086 31.144C94.1966 31.112 94.4846 31.056 94.7726 30.976C95.0766 30.88 95.3086 30.736 95.4686 30.544C95.6126 30.192 95.7726 29.816 95.9486 29.416C96.1246 29 96.2926 28.64 96.4526 28.336C96.6126 28.016 96.7246 27.816 96.7886 27.736C97.0606 27.592 97.3406 27.536 97.6286 27.568C97.9166 27.584 98.1406 27.72 98.3006 27.976C98.3806 28.088 98.4446 28.168 98.4926 28.216C98.5566 28.264 98.5806 28.336 98.5646 28.432C98.5646 28.528 98.5006 28.704 98.3726 28.96C98.2606 29.2 98.0686 29.576 97.7966 30.088C97.7166 30.248 97.6446 30.392 97.5806 30.52C97.5166 30.632 97.4846 30.688 97.4846 30.688C97.5486 30.704 97.6446 30.712 97.7726 30.712C97.9006 30.712 98.0606 30.704 98.2526 30.688C98.4286 30.656 98.6206 30.632 98.8286 30.616C99.0366 30.584 99.2206 30.584 99.3806 30.616C99.7486 30.616 100.021 30.72 100.197 30.928C100.373 31.136 100.469 31.4 100.485 31.72C100.517 31.896 100.453 32.048 100.293 32.176C100.133 32.304 99.8366 32.368 99.4046 32.368C99.2606 32.368 99.0526 32.376 98.7806 32.392C98.5086 32.408 98.2286 32.424 97.9406 32.44C97.6526 32.456 97.4046 32.48 97.1966 32.512C97.0046 32.528 96.9086 32.552 96.9086 32.584C96.8606 32.616 96.7806 32.744 96.6686 32.968C96.5726 33.176 96.4686 33.432 96.3566 33.736C96.2606 34.04 96.1726 34.328 96.0926 34.6C95.9806 35.144 95.9006 35.672 95.8526 36.184C95.8046 36.696 95.7966 37.144 95.8286 37.528C95.8766 37.896 95.9726 38.16 96.1166 38.32C96.2606 38.464 96.4766 38.464 96.7646 38.32C97.0686 38.16 97.3486 37.976 97.6046 37.768C97.8926 37.528 98.1406 37.456 98.3486 37.552C98.5566 37.632 98.6846 37.808 98.7326 38.08C98.7966 38.336 98.7246 38.616 98.5166 38.92C98.3246 39.224 98.0526 39.48 97.7006 39.688C97.3486 39.896 96.9886 40.04 96.6206 40.12C96.2526 40.216 95.9326 40.224 95.6606 40.144ZM102.838 40.216C102.63 40.232 102.462 40.208 102.334 40.144C102.206 40.096 102.046 40.016 101.854 39.904C101.502 39.632 101.206 39.296 100.966 38.896C100.742 38.496 100.638 38.16 100.654 37.888C100.686 37.744 100.686 37.616 100.654 37.504C100.638 37.392 100.63 37.336 100.63 37.336C100.534 37.256 100.502 37.208 100.534 37.192C100.566 37.16 100.59 37.112 100.606 37.048C100.734 37.016 100.75 36.928 100.654 36.784C100.606 36.656 100.63 36.368 100.726 35.92C100.838 35.456 100.982 35.024 101.158 34.624C101.238 34.448 101.35 34.216 101.494 33.928C101.654 33.64 101.83 33.352 102.022 33.064C102.214 32.76 102.39 32.52 102.55 32.344C102.902 31.944 103.214 31.616 103.486 31.36C103.774 31.104 104.094 30.912 104.446 30.784C104.766 30.656 105.086 30.6 105.406 30.616C105.742 30.632 106.038 30.744 106.294 30.952C106.678 31.064 107.022 31.24 107.326 31.48C107.63 31.704 107.838 32.024 107.95 32.44C108.078 32.904 108.118 33.456 108.07 34.096C108.038 34.72 107.766 35.528 107.254 36.52C106.95 37.144 106.646 37.648 106.342 38.032C106.054 38.416 105.702 38.784 105.286 39.136C104.982 39.392 104.59 39.616 104.11 39.808C103.63 40 103.206 40.136 102.838 40.216ZM104.926 36.592C105.134 36.304 105.294 36.024 105.406 35.752C105.534 35.48 105.654 35.104 105.766 34.624C105.814 34.448 105.838 34.232 105.838 33.976C105.854 33.72 105.846 33.488 105.814 33.28C105.798 33.056 105.742 32.936 105.646 32.92C105.438 32.84 105.222 32.84 104.998 32.92C104.79 32.984 104.542 33.176 104.254 33.496C103.998 33.784 103.79 34.056 103.63 34.312C103.486 34.552 103.35 34.848 103.222 35.2C103.11 35.536 102.982 35.976 102.838 36.52C102.71 37.048 102.702 37.472 102.814 37.792C102.942 38.112 103.182 38.2 103.534 38.056C103.886 37.912 104.35 37.424 104.926 36.592ZM109.901 39.64C109.789 39.64 109.637 39.56 109.445 39.4C109.269 39.24 109.165 39.096 109.133 38.968C109.085 38.84 109.085 38.656 109.133 38.416C109.197 38.16 109.285 37.864 109.397 37.528C109.525 37 109.613 36.616 109.661 36.376C109.709 36.136 109.757 35.928 109.805 35.752C109.853 35.576 109.917 35.32 109.997 34.984C110.093 34.776 110.165 34.576 110.213 34.384C110.277 34.176 110.341 33.968 110.405 33.76C110.485 33.552 110.573 33.344 110.669 33.136C110.781 32.72 110.917 32.328 111.077 31.96C111.253 31.576 111.421 31.256 111.581 31C111.613 30.952 111.685 30.864 111.797 30.736C111.909 30.608 111.997 30.544 112.061 30.544C112.189 30.416 112.365 30.376 112.589 30.424C112.813 30.456 113.005 30.536 113.165 30.664C113.357 30.872 113.461 31.12 113.477 31.408C113.509 31.68 113.397 32.064 113.141 32.56C112.949 33.056 112.765 33.448 112.589 33.736C112.429 34.008 112.269 34.328 112.109 34.696C112.285 34.44 112.501 34.176 112.757 33.904C113.013 33.632 113.213 33.416 113.357 33.256C113.565 33.032 113.757 32.856 113.933 32.728C114.125 32.584 114.381 32.408 114.701 32.2C114.973 32.008 115.245 31.832 115.517 31.672C115.805 31.512 116.149 31.464 116.549 31.528C116.709 31.512 116.877 31.592 117.053 31.768C117.245 31.944 117.389 32.176 117.485 32.464C117.597 32.736 117.597 33.032 117.485 33.352C117.117 33.272 116.789 33.288 116.501 33.4C116.213 33.496 115.965 33.616 115.757 33.76C115.565 33.904 115.413 34.016 115.301 34.096C115.141 34.192 114.957 34.32 114.749 34.48C114.541 34.624 114.317 34.792 114.077 34.984C113.837 35.16 113.581 35.36 113.309 35.584C112.925 35.904 112.637 36.184 112.445 36.424C112.253 36.664 112.101 36.92 111.989 37.192C111.893 37.432 111.773 37.72 111.629 38.056C111.485 38.392 111.349 38.696 111.221 38.968C111.093 39.224 110.989 39.384 110.909 39.448C110.829 39.608 110.661 39.696 110.405 39.712C110.165 39.728 109.997 39.704 109.901 39.64ZM129.014 39.424C128.902 39.392 128.726 39.288 128.486 39.112C128.246 38.936 128.03 38.672 127.838 38.32C127.662 37.968 127.582 37.512 127.598 36.952C127.614 36.472 127.646 36.136 127.694 35.944C127.758 35.736 127.734 35.624 127.622 35.608C127.542 35.592 127.382 35.664 127.142 35.824C126.902 35.984 126.59 36.24 126.206 36.592C125.822 36.944 125.358 37.408 124.814 37.984C124.622 38.144 124.406 38.344 124.166 38.584C123.942 38.808 123.71 38.976 123.47 39.088C123.246 39.2 123.046 39.176 122.87 39.016L122.63 38.8C122.518 38.704 122.422 38.576 122.342 38.416C122.262 38.256 122.238 38.12 122.27 38.008L122.942 36.136C123.134 35.72 123.262 35.416 123.326 35.224C123.406 35.032 123.438 34.912 123.422 34.864C123.422 34.816 123.382 34.8 123.302 34.816C123.206 34.832 123.07 34.92 122.894 35.08C122.718 35.224 122.598 35.344 122.534 35.44C122.47 35.44 122.382 35.504 122.27 35.632C122.174 35.76 122.078 35.872 121.982 35.968C121.886 36.064 121.718 36.248 121.478 36.52C121.238 36.776 120.982 37.048 120.71 37.336C120.502 37.528 120.262 37.784 119.99 38.104C119.718 38.424 119.478 38.712 119.27 38.968C119.062 39.224 118.934 39.352 118.886 39.352C118.598 39.336 118.334 39.24 118.094 39.064C117.87 38.888 117.718 38.672 117.638 38.416C117.542 38.24 117.534 37.92 117.614 37.456C117.694 36.976 117.846 36.216 118.07 35.176C118.134 34.936 118.19 34.728 118.238 34.552C118.302 34.376 118.366 34.2 118.43 34.024C118.494 33.848 118.566 33.648 118.646 33.424C118.742 33.2 118.862 32.928 119.006 32.608C119.086 32.384 119.118 32.176 119.102 31.984C119.086 31.776 119.07 31.608 119.054 31.48C119.054 31.24 119.126 31.048 119.27 30.904C119.43 30.76 119.606 30.664 119.798 30.616C119.99 30.552 120.142 30.536 120.254 30.568C120.702 30.616 121.006 30.776 121.166 31.048C121.326 31.32 121.414 31.584 121.43 31.84C121.446 32.08 121.414 32.296 121.334 32.488C121.254 32.68 121.19 32.84 121.142 32.968L120.878 33.616C120.718 33.984 120.598 34.256 120.518 34.432C120.454 34.592 120.414 34.704 120.398 34.768C120.398 34.816 120.398 34.864 120.398 34.912C120.414 34.96 120.486 34.936 120.614 34.84C120.742 34.744 120.894 34.616 121.07 34.456C121.262 34.28 121.438 34.128 121.598 34C121.886 33.76 122.19 33.52 122.51 33.28C122.846 33.024 123.174 32.8 123.494 32.608C123.814 32.416 124.078 32.288 124.286 32.224C124.558 32.272 124.806 32.408 125.03 32.632C125.27 32.856 125.422 33.048 125.486 33.208C125.566 33.448 125.574 33.664 125.51 33.856C125.462 34.048 125.422 34.224 125.39 34.384C125.374 34.448 125.342 34.568 125.294 34.744C125.246 34.92 125.198 35.088 125.15 35.248C125.102 35.392 125.078 35.464 125.078 35.464C125.078 35.464 125.126 35.416 125.222 35.32C125.318 35.224 125.446 35.112 125.606 34.984C125.766 34.84 125.926 34.712 126.086 34.6C126.886 33.992 127.518 33.608 127.982 33.448C128.462 33.272 128.87 33.408 129.206 33.856C129.398 34.032 129.518 34.272 129.566 34.576C129.63 34.88 129.662 35.288 129.662 35.8C129.678 36.008 129.694 36.24 129.71 36.496C129.742 36.752 129.774 36.976 129.806 37.168C129.854 37.36 129.894 37.48 129.926 37.528C129.974 37.592 130.062 37.656 130.19 37.72C130.318 37.768 130.438 37.808 130.55 37.84C130.774 37.952 130.894 38.16 130.91 38.464C130.942 38.752 130.83 38.976 130.574 39.136C130.334 39.28 130.078 39.368 129.806 39.4C129.55 39.432 129.286 39.44 129.014 39.424Z" fill="#4B4B4B"/>
+</svg>
diff --git a/src/pages/buzzboard.astro b/src/pages/buzzboard.astro
new file mode 100644
index 0000000..9e06036
--- /dev/null
+++ b/src/pages/buzzboard.astro
@@ -0,0 +1,1012 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+<Layout title='Drawing Game'>
+    <main>
+		<div id="parentMainContainer"class="hidden">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
+                <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
+            </div>
+            <div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
+                <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                    <div class="flex flex-row space-x-4 items-center justify-center">
+                        <div id="star-container"></div>
+                    </div>
+                    <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                        <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
+                        <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+                    </div>
+                    <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                        <button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                        <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                    </div>
+                </div>
+            </div>
+            <div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
+                <div class="flex flex-row z-50 place-items-end clip-art">
+                    <img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
+                    <div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
+                        <img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        <img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
+                        
+                        <!-- Content -->
+                        <div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
+                            <p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
+                            <button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
+                            <a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
+                        </div>
+                      </div>
+                </div>
+            </div>
+            <div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
+                <div class="w-full max-w-6xl bg-white rounded-lg">
+                    <div class="flex justify-between p-3">
+                        <p class="text-[19px] font-[700]">Attempt 2</p>
+                        <button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
+                    </div>
+                    <div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
+                        <img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
+
+                        <button  id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
+                        <button  id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
+
+                        <div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
+                            <h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
+                            <p class="text-sm" id="imageDescription">Description goes here.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+	</main>
+    
+</Layout>
+<script src="/saveGameAI.js" is:inline></script>
+<script is:inline>
+    const jsonData = [
+        {
+            "src": "/assets/back.jpeg",
+            "title": "Image Title 1",
+            "description": "Description for image 1 goes here."
+        },
+        {
+            "src": "/assets/background.jpg",
+            "title": "Image Title 2",
+            "description": "Description for image 2 goes here."
+        },
+        {
+            "src": "/assets/backgroundImage.png",
+            "title": "Image Title 3",
+            "description": "Description for image 3 goes here."
+        },
+        {
+            "src": "/assets/beanieImage.png",
+            "title": "Image Title 4",
+            "description": "Description for image 4 goes here."
+        }
+    ];
+    let currentSlide = 0;
+    function updateSlide(){
+        const slide = jsonData[currentSlide];
+        document.getElementById('slideImage').src = slide.src;
+        document.getElementById('imageTitle').textContent = slide.title;
+        document.getElementById('imageDescription').textContent = slide.description;
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % jsonData.length;
+        console.log(currentSlide)
+        updateSlide();
+    })
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
+        updateSlide();
+    })
+    updateSlide();
+    let parentMainContainer = document.getElementById('parentMainContainer');
+    let gallerySliderId = document.getElementById('gallerySliderId');
+    function closeGallery(){
+        parentMainContainer.classList.add('hidden');
+        gallerySliderId.classList.add('hidden');
+        
+    }
+    function showAnimation() {
+        const clipArt = document.querySelector('.clip-art');
+        clipArt.classList.add('show');
+    }
+    const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+    const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
+
+    const drawingZone = {
+        x: 0,
+        y: 0,
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
+    let topLogoWidth;
+    let muteIconWidth;
+    let galleryIconWidth;
+    let resetIconWidth;
+    let tickIconWidth;
+    let cancelIconWidth;
+    var assetsList = {}
+    var snapshotButton;
+    let submitButton;
+    let galleryButton;
+    let formattedDateTime;
+    let shortUniqueID;
+    let scoreTotal = 0;
+    let noticeWidth;
+    let noticeHeight;
+    let muteIcon;
+    let retryButton;
+    let maxScore;
+    let erase;
+    if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.65;
+        resetIconWidth = 1.40;
+        tickIconWidth = 1.21;
+        cancelIconWidth = 1.08;
+        galleryIconWidth = 2;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+        galleryIconWidth = 1.81;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+        galleryIconWidth = 1.345;
+    }
+    
+    if(isMobile){
+        submitWidth = 250;
+        submitHeight = 110;
+        noticeWidth = 100;
+        noticeHeight = 0;
+        downloadWidth = 67;
+        downloadHeight = 200;
+        learningWidth = 200;
+        learningHeight = 400
+    }else {
+        submitWidth = 380;
+        submitHeight = 95;
+        noticeWidth = 0;
+        noticeHeight = 0;
+        downloadWidth = 180;
+        downloadHeight = 70;
+        learningWidth = 450;
+        learningHeight = 400
+    }
+
+    gameResult = [];
+    window.onload = function() {
+        currentDate = new Date();
+        formattedDateTime = currentDate.toLocaleString();
+        // console.log("Page loaded on: " + formattedDateTime);
+    };
+    function generateShortUniqueID(length) {
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        let result = '';
+        for (let i = 0; i < length; i++) {
+            const randomIndex = Math.floor(Math.random() * characters.length);
+            result += characters.charAt(randomIndex);
+        }
+        return result;
+    }
+    // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
+    // console.log(shortUniqueID);
+
+    // const params = new URLSearchParams(window.location.search);
+    // const paramsID = params.get('id');
+    // const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    // .then(response => response.json())
+    // .then(({data}) => {
+
+    // const {image} = data;
+    // assetsList.image = "https://game-du.teachertrainingkolkata.in/assets/" + image;
+    
+    
+    // })
+
+    // .catch(error => {
+    //   console.error('Error fetching initial data:', error);
+    // });
+
+    const config = {
+        type: Phaser.AUTO,
+        width: window.innerWidth,
+        height: window.innerHeight,
+        backgroundColor: '#ffffff',
+        scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+        },
+        scene: {
+            preload: preload,
+            create: create,
+            update: update,
+        },
+    };
+    const game = new Phaser.Game(config);
+    const customWidth = window.innerWidth;
+    const customHeight = window.innerHeight;
+    let graphics;
+    let isDrawing = false;
+    let selectedColor = '#394FC0'; // Default color
+    let brushSize = 10; // Default brush size
+    let customCursor;
+    const cursorSizeMultiplier = 1;
+    let isErasing = false;
+    let snapNotice;
+    let colorList;
+
+    function preload() {
+        // this.load.image('outline', assetsList.image);
+        this.load.image('topLogo', '/assets/brainstrom-logo.svg');
+        // this.load.image("tickIcon", '/assets/svg/tick2.svg');
+        // this.load.image("muteIcon", '/assets/svg/mute.svg');
+        // this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+        // this.load.image("resetIcon", '/assets/svg/reset.svg');
+        // this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
+        // this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
+        // this.load.svg('cursorImage', '/assets/svg/pencil.svg');
+        this.load.image('colorButton', '/assets/color_button.png');
+    }
+
+    function create() {
+        // const params = new URLSearchParams(window.location.search);
+        // const paramsID = params.get('id');
+        // fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        //     .then(response => response.json())
+        //     .then(({ data }) => {
+        //         console.log(data.colors)
+        //         const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+        //         const baseFontSize = 24;
+        //         const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
+        //         let wrapWidth;
+        //         if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
+        //         const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
+        //         this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
+        //         this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
+        //     })
+        //     .catch(error => {
+        //         console.error('Error fetching initial data:', error);
+        //     });
+            // window.load
+
+            // const borderBottom = this.add.graphics();
+            // const x = 0; const y = 54;
+            // const lineWidth = window.innerWidth;
+            // borderBottom.lineStyle(1, 0x0348A8);
+            // borderBottom.setAlpha(0.2);
+            // borderBottom.beginPath();
+            // borderBottom.moveTo(x, y);
+            // borderBottom.lineTo(x + lineWidth, y);
+            // borderBottom.strokePath();
+
+            // this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+            // muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            // retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            // submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+            // galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
+
+            // this.add.text(customWidth / cancelIconWidth, 5, 'Save', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}})
+            
+
+            // retryButton.setInteractive().on('pointerdown', () => {
+            //     graphics.clear();
+            // });
+
+
+            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+
+            // submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+            // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
+            // font: '600 30px Quicksand',
+            // fill: '#fff',
+            // backgroundColor: 'blue',
+            // padding: { x: 20, y: 10 },
+            // });
+            // submitButton.setVisible(true);
+            // submitButton.setInteractive().on('pointerdown', () => {
+            //     submitUserData(this);
+            //     showAnimation();
+            //     parentMainContainer.classList.remove('hidden');
+            //     if(isMobile){
+            //         colorContainer.style.display = 'none';
+            //     }
+            // });
+
+            // galleryButton.setInteractive().on('pointerdown', () => {
+            //     parentMainContainer.classList.remove('hidden');
+            //     gallerySliderId.classList.remove('hidden');
+            // });
+
+            const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
+            if(!isMobile){
+                // this.add.text(customWidth / 10, 20, "Drawing", textStyle);
+                // this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+            } else {
+                // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
+                // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
+            }
+            // const outlineImage = this.add.image(customWidth / 2, customHeight / 2.2, 'outline');
+            // if(isMobile){
+            //     outlineImage.setDepth(1).setScale(0.30);
+            // }else if(isTab){
+            //     outlineImage.setDepth(1).setScale(0.40);
+            // } else{
+            //     outlineImage.setDepth(1).setScale(0.65);   
+            // }
+            
+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 0, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
+
+            graphics = this.add.graphics();
+            graphics.setMask(mask);
+            const colorContainer = document.createElement('div');
+            colorContainer.style.zIndex = '1';
+            colorContainer.style.position = 'absolute';
+            colorContainer.style.top = '0';
+            colorContainer.style.left = '10px';
+            colorContainer.style.display = 'flex';
+            colorContainer.style.marginBottom = '0';
+            if(!isMobile){
+                colorContainer.style.flexDirection = 'row'; 
+            }
+            if(isMobile){
+                colorContainer.style.display = 'none';
+                colorContainer.style.flexDirection = 'row'; 
+                
+            }
+            colorContainer.style.backgroundColor = '#FFFFFF';
+            colorContainer.style.padding = '1px 10px';
+            colorContainer.style.borderRadius = '30px';
+            // colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
+            colorContainer.style.left = '0px';
+            // colorContainer.style.top = '50%';
+            // colorContainer.style.transform = 'translate(0, -50%)';
+            colorContainer.style.border = '1px solid #F9F9F9'; 
+
+            let colorEraserCont = document.createElement('div');
+            colorEraserCont.style.display = 'flex';
+            colorEraserCont.style.flexDirection = 'row';
+
+            let clearBoard = document.createElement('button');
+            clearBoard.innerHTML ='<svg width="48px" height="48px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#0348A8"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M6 12h12M4 16h12M8 8h12" stroke="#0348A8" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"></path></g></svg>';
+            clearBoard.style.boxShadow = '5px 10px 30px #7c4c2390';
+            clearBoard.style.borderRadius = '8px';
+            colorContainer.appendChild(colorEraserCont);
+
+            let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
+            if(!isMobile){
+                colorViewButton.setVisible(false);
+            }
+            colorViewButton.setInteractive().on('pointerdown', () => {
+                if(colorContainer.style.display === 'block') {
+                    colorContainer.style.display = 'none';
+                }else{
+                    colorContainer.style.display = 'block';
+                }
+            });
+
+
+            // Create the color picker
+            const colorPicker = document.createElement('input');
+            colorPicker.type = 'color';
+            colorPicker.value = selectedColor;
+            colorPicker.className = 'color-picker';
+            colorPicker.style.marginBottom = '0px';
+            colorPicker.style.marginTop = '-0px';
+            colorPicker.style.marginRight = '15px';
+            // colorPicker.style.padding = '1px 1px';
+            // colorPicker.style.outline = 'none';
+            if (!isMobile) {
+                colorPicker.style.marginBottom = '15px';
+                colorPicker.style.width = '46px';
+                colorPicker.style.height = '46px';
+            } else {
+                colorPicker.style.width = '40px';
+                colorPicker.style.height = '40px';
+            }
+            // colorPicker.style.border = '3px solid #05b3a4';
+            colorPicker.style.borderRadius = '20%';
+            colorPicker.style.boxShadow = '5px 10px 30px #7c4c2390';
+            colorPicker.addEventListener('input', (event) => {
+                if (!isErasing) {
+                    selectedColor = event.target.value; // Update selectedColor if not erasing
+                }
+            });
+            // Append the color picker to the color container data
+            
+            // const colors = data.colors;
+            // var colors = colorList;
+            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
+            // var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
+            // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
+            const buttonSize = 60;
+            const buttonSpacing = 5;
+            // Create a container div for the color buttons
+            const colorButtonsContainer = document.createElement('div');
+            colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
+            colorButtonsContainer.style.flexDirection = 'column'; //** */
+            if(!isMobile){
+                colorButtonsContainer.style.flexDirection = 'column'; 
+            }
+            // Align the color buttons to the left of the viewport
+            const buttonX = 30; // Adjusted position (e.g., 10px from the left)
+            const colorPaletteY = drawingZone.y - 20; // Position it at the top of the drawing zone
+            // Keep track of the selected color
+            let selectedButton = null;
+
+            // colors.forEach((color, index) => {
+            //     const x = buttonX + index * (buttonSize + buttonSpacing);
+            //     const button = document.createElement('button');
+
+            //     // Make the button transparent
+            //     button.style.backgroundColor = 'transparent';
+
+            //     // Remove any border or outline styles
+            //     button.style.border = 'none';
+            //     button.style.outline = 'none';
+
+            //     // Other button styles remain the same
+            //     // ${color}
+            //     // Create the SVG element with dynamic fill color
+            //     if (!isMobile) {
+            //         // pencilSize = '150px';
+            //         button.style.width = `${buttonSize}px`; 
+            //         button.style.height = `${buttonSize}px`;
+            //     } else {
+            //         // pencilSize = '150px';
+            //         // button.style.width = `${buttonSize}px`; 
+            //         // button.style.height = `${buttonSize}px`;
+            //         // pencilSize = '40px';
+            //         button.style.width = `45px`;
+            //         button.style.height = `45px`;
+            //     }
+            //     button.innerHTML = `
+            //                     <svg width="125" height="25" viewBox="0 0 125 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            //                         <path d="M121.521 12.0599C121.821 10.2699 122.901 10.5299 122.901 10.5299C122.901 10.5299 123.821 11.3399 124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.611 15.3799 121.231 13.7699 121.521 12.0599Z" fill="${color}"/>
+            //                         <g style="mix-blend-mode:multiply">
+            //                         <path d="M124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.811 15.3199 121.861 14.4199 121.571 13.2199C123.241 13.6699 124.161 12.3899 124.161 12.3899Z" fill="url(#paint1_linear_3573_1528)"/>
+            //                         </g>
+            //                         <g style="mix-blend-mode:screen" opacity="0.6">
+            //                         <path d="M122.791 10.5199C122.791 10.5199 121.651 10.4399 121.491 12.3699C121.491 12.3699 121.591 10.9699 122.791 10.5199Z" fill="#F8F8F7"/>
+            //                         </g>
+            //                         <path d="M-33.199 19.2499C-34.279 17.1299 -35.079 14.9299 -34.989 12.5199C-34.939 11.0099 -34.659 8.80989 -33.869 7.47989C-33.869 7.47989 -30.569 1.92989 -26.809 1.39989L95.731 0.839893C95.731 0.839893 88.811 5.8299 90.831 14.2499C92.581 21.5899 95.611 23.1699 95.611 23.1699C95.611 23.1699 -27.549 23.9999 -27.699 23.9999C-30.259 24.0199 -32.189 21.2099 -33.199 19.2499Z" fill="${color}"/>
+            //                         <path d="M90.8307 14.2499C88.8107 5.82992 95.7307 0.839922 95.7307 0.839922C95.7307 0.839922 96.5407 0.649921 97.0507 1.30992C97.5507 1.96992 96.9307 22.8199 96.9307 22.8199C96.9307 22.8199 96.1707 23.1699 95.6207 23.1699C95.6207 23.1699 92.5907 21.5899 90.8407 14.2499H90.8307Z" fill="#ffffff"/>
+            //                         <path d="M92.4112 13.1799C91.3612 6.26989 97.0512 1.30989 97.0512 1.29988L122.901 10.5299C122.901 10.5299 121.821 10.2699 121.521 12.0599C121.231 13.7699 122.611 15.3799 123.471 15.1399C123.351 15.2599 123.221 15.3799 123.071 15.4699C122.231 15.9699 102.251 21.3799 96.9212 22.8199C96.0312 21.9799 93.2812 18.9599 92.4112 13.1799Z" fill="${color}"/>
+            //                         <path style="mix-blend-mode:screen" opacity="0.7" d="M94.4812 1.94991L-30.1688 3.0899C-29.1588 2.2499 -28.0088 1.5699 -26.8188 1.3999L95.7212 0.839905C95.7212 0.839905 95.2012 1.21991 94.4912 1.93991C94.4912 1.93991 94.4812 1.93991 94.4712 1.94991H94.4812Z" fill="${color}"/>
+            //                         <path style="mix-blend-mode:multiply" d="M92.5108 19.1599C94.0408 22.3399 95.6108 23.1699 95.6108 23.1699C95.6108 23.1699 -27.5492 23.9999 -27.6992 23.9999C-30.2592 24.0199 -32.1892 21.2099 -33.1992 19.2499L92.5108 19.1599Z" fill="url(#paint6_linear_3573_1528)"/>
+            //                         <path style="mix-blend-mode:multiply" opacity="0.8" d="M92.5209 19.1599C93.9909 19.8999 94.2509 19.0799 94.2509 19.0799C95.2909 21.1199 96.4109 22.3299 96.9209 22.8199C96.9209 22.8199 96.1609 23.1699 95.6109 23.1699C95.6109 23.1699 94.0509 22.3399 92.5109 19.1599H92.5209Z" fill="url(#paint7_linear_3573_1528)"/>
+            //                         <path style="mix-blend-mode:multiply" d="M94.251 19.0799L121.591 13.2999C121.901 14.4599 122.831 15.3199 123.481 15.1399C123.361 15.2599 123.231 15.3799 123.081 15.4699C122.241 15.9699 102.261 21.3799 96.931 22.8199C96.421 22.3299 95.291 21.1199 94.261 19.0799H94.251Z" fill="url(#paint8_linear_3573_1528)"/>
+            //                         <g style="mix-blend-mode:screen" opacity="0.1">
+            //                         <path d="M95.9608 2.42987C95.9608 2.42987 95.0908 1.32987 94.5008 1.92987C95.2108 1.20987 95.7308 0.82987 95.7308 0.82987C95.7308 0.82987 96.5408 0.639869 97.0508 1.29987C97.0508 1.29987 96.5908 1.70987 95.9708 2.42987H95.9608Z" fill="${color}"/>
+            //                         </g>
+            //                         <path opacity="0.4" d="M95.9609 2.42987C96.5909 1.70987 97.0409 1.29987 97.0409 1.29987L122.901 10.5299C122.901 10.5299 122.271 10.3899 121.841 11.1199L121.651 11.0799L95.9609 2.43987V2.42987Z" fill="${color}"/>
+            //                         <path style="mix-blend-mode:overlay" opacity="0.8" d="M93.0608 7.24991L91.4508 6.39991L-34.4192 8.76991C-34.2692 8.29991 -34.0892 7.84991 -33.8692 7.47991C-33.8692 7.47991 -33.4192 6.72991 -32.6692 5.74991L92.3308 4.69991L93.8808 5.44991L121.521 12.0599C121.461 12.4199 121.481 12.7699 121.551 13.0999L93.0608 7.24991Z" fill="url(#paint10_linear_3573_1528)"/>
+            //                         <path d="M77.6709 0.759924L81.1909 0.739923C78.8909 3.42992 72.7809 12.3099 80.8009 23.3399C79.8809 23.3399 78.9309 23.3499 77.9509 23.3599C69.8509 12.6599 75.1409 3.90992 77.6709 0.759924Z" fill="url(#paint11_linear_3573_1528)"/>
+            //                         <path d="M-1.92906 1.1199L77.6809 0.759903C75.1509 3.9199 69.8609 12.6699 77.9609 23.3599C56.9909 23.4999 21.8709 23.7399 -2.36906 23.8999C-10.7591 12.5699 -3.86906 3.3299 -1.92906 1.1199Z" fill="${color}"/>
+            //                         <path opacity="0.6" d="M6.38071 11.5899L58.1407 10.6999C58.1407 10.6999 65.4307 9.98993 66.7607 14.0799C66.7607 14.0799 67.9207 18.5799 62.8807 19.4999L5.36071 19.6799C5.36071 19.6799 2.74072 19.7899 1.57072 18.0199C0.400719 16.2499 1.20071 12.3099 6.38071 11.5999V11.5899Z" fill="#ffffff"/>
+            //                         <path d="M7.50074 11.4999L56.8107 10.6499C56.8107 10.6499 63.7607 9.97992 65.0207 13.8699C65.0207 13.8699 66.1207 18.1599 61.3207 19.0299L6.53074 19.1999C6.53074 19.1999 4.04074 19.2999 2.92074 17.6199C1.80074 15.9299 2.57074 12.1799 7.50074 11.4999Z" fill="#ffffff70"/>
+            //                         <g opacity="0.6">
+            //                         <g style="mix-blend-mode:screen" opacity="0.8">
+            //                         <path d="M94.1011 2.33987C94.1011 2.33987 89.2511 6.86987 90.7611 13.9899C90.7611 13.9899 89.4911 7.60987 94.1011 2.33987Z" fill="#F8F8F7"/>
+            //                         </g>
+            //                         <g style="mix-blend-mode:screen" opacity="0.8">
+            //                         <path d="M94.7212 4.03987C94.7212 4.03987 91.3312 8.57987 92.4612 13.5499C92.4612 13.5499 91.2712 10.2599 94.7212 4.03987Z" fill="#F8F8F7"/>
+            //                         </g>
+            //                         </g>
+            //                         <path style="mix-blend-mode:screen" opacity="0.8" d="M79.6012 2.07988C79.6012 2.07988 77.3112 4.52988 76.5512 7.60988C76.5512 7.60988 76.4412 9.19988 74.3912 9.06988C72.3412 8.94988 -5.1188 10.3099 -5.1188 10.3099C-5.1188 10.3099 -7.9988 10.9699 -8.3088 8.83988C-8.6088 6.70988 -6.1188 2.34988 -4.29881 2.04988C-2.47881 1.75988 78.1912 1.50988 78.1912 1.50988C78.1912 1.50988 80.2512 1.28988 79.6012 2.06988V2.07988Z" fill="url(#paint14_linear_3573_1528)"/>
+            //                         <path style="mix-blend-mode:multiply" d="M74.5509 17.1199C75.2209 19.0999 76.3109 21.1899 77.9609 23.3699C56.9909 23.5099 21.8709 23.7499 -2.36906 23.9099C-4.14906 21.5099 -5.23907 19.1999 -5.82907 17.0299L74.5609 17.1199H74.5509Z" fill="url(#paint15_linear_3573_1528)"/>
+            //                         <defs>
+            //                         <linearGradient id="paint0_linear_3573_1528" x1="123.151" y1="13.9754" x2="122.087" y2="9.86632" gradientUnits="userSpaceOnUse">
+            //                         <stop offset="0.12" stop-color="#881913"/>
+            //                         <stop offset="0.53" stop-color="#CA3418"/>
+            //                         <stop offset="1" stop-color="#EB5C37"/>
+            //                         </linearGradient>
+            //                         <linearGradient id="paint1_linear_3573_1528" x1="124.053" y1="23.1306" x2="122.178" y2="6.751" gradientUnits="userSpaceOnUse">
+            //                         <stop stop-color="#721C0D"/>
+            //                         <stop offset="0.35" stop-color="#491C0E"/>
+            //                         <stop offset="0.9" stop-color="white"/>
+            //                         </linearGradient>
+            //                         <linearGradient id="paint2_linear_3573_1528" x1="30.7266" y1="22.0303" x2="30.1754" y2="0.66354" gradientUnits="userSpaceOnUse">
+            //                         <stop offset="0.11" stop-color="#5E1104"/>
+            //                         <stop offset="0.55" stop-color="#DE3313"/>
+            //                         <stop offset="1" stop-color="#EA562A"/>
+            //                         </linearGradient>
+            //                         <linearGradient id="paint3_linear_3573_1528" x1="98.7993" y1="14.0938" x2="90.164" y2="7.46254" gradientUnits="userSpaceOnUse">
+            //                         <stop offset="0.12" stop-color="#881913"/>
+            //                         <stop offset="0.53" stop-color="#CC361A"/>
+            //                         <stop offset="0.59" stop-color="#DA4727"/>
+            //                         <stop offset="0.65" stop-color="#E35330"/>
+            //                         <stop offset="0.74" stop-color="#E95A35"/>
+            //                         <stop offset="1" stop-color="#EB5C37"/>
+            //                         </linearGradient>
+            //                         <linearGradient id="paint4_linear_3573_1528" x1="106.626" y1="23.7951" x2="109.063" y2="2.27873" gradientUnits="userSpaceOnUse">
+            //                         <stop offset="0.12" stop-color="#881913"/>
+            //                         <stop offset="0.53" stop-color="#CA3418"/>
+            //                         <stop offset="1" stop-color="#EB5C37"/>
+            //                         </linearGradient>
+            //                         <linearGradient id="paint5_linear_3573_1528" x1="32.7047" y1="1.02997" x2="33.1363" y2="8.59623" gradientUnits="userSpaceOnUse">
+            //                         <stop offset="0.1" stop-color="white"/>
+            //                         <stop offset="0.72" stop-color="white"/>
+            //                         </linearGradient>
+            //                         <linearGradient id="paint6_linear_3573_1528" x1="31.0748" y1="27.8663" x2="31.2566" y2="15.6366" gradientUnits="userSpaceOnUse">
+            //                         <stop stop-color="#721C0D"/>
+            //                         <stop offset="0.35" stop-color="#491C0E"/>
+            //                         <stop offset="0.9" stop-color="white"/>
+            //                         </linearGradient>
+            //                         <linearGradient id="paint7_linear_3573_1528" x1="95.4797" y1="23.146" x2="93.4037" y2="17.3432" gradientUnits="userSpaceOnUse">
+            //                         <stop stop-color="#721C0D"/>
+            //                         <stop offset="0.35" stop-color="#491C0E"/>
+            //                         <stop offset="0.9" stop-color="white"/>
+            //                         </linearGradient>
+            //                         <linearGradient id="paint8_linear_3573_1528" x1="109.97" y1="21.5463" x2="107.895" y2="13.3528" gradientUnits="userSpaceOnUse">
+            //                         <stop stop-color="#721C0D"/>
+            //                         <stop offset="0.35" stop-color="#491C0E"/>
+            //                         <stop offset="0.9" stop-color="white"/>
+            //                         </linearGradient>
+            //                         <linearGradient id="paint9_linear_3573_1528" x1="109.12" y1="7.20142" x2="109.703" y2="5.67219" gradientUnits="userSpaceOnUse">
+            //                         <stop offset="0.28" stop-color="white"/>
+            //                         <stop offset="0.9" stop-color="white"/>
+            //                         </linearGradient>
+            //                         <linearGradient id="paint10_linear_3573_1528" x1="44.6929" y1="-6.07285" x2="42.3312" y2="28.5009" gradientUnits="userSpaceOnUse">
+            //                         <stop stop-color="white"/>
+            //                         <stop offset="0.9" stop-color="white"/>
+            //                         </linearGradient>
+            //                         <linearGradient id="paint11_linear_3573_1528" x1="76.7851" y1="25.5965" x2="78.0173" y2="0.368542" gradientUnits="userSpaceOnUse">
+            //                         <stop offset="0.03" stop-color="#6D6D6C"/>
+            //                         <stop offset="0.89" stop-color="white"/>
+            //                         </linearGradient>
+            //                         <linearGradient id="paint12_linear_3573_1528" x1="35.6096" y1="26.5751" x2="36.1045" y2="-8.47478" gradientUnits="userSpaceOnUse">
+            //                         <stop offset="0.11" stop-color="#5E1104"/>
+            //                         <stop offset="0.55" stop-color="#CF0F14"/>
+            //                         <stop offset="1" stop-color="#E40426"/>
+            //                         </linearGradient>
+            //                         <linearGradient id="paint13_linear_3573_1528" x1="34.2885" y1="23.4606" x2="32.9234" y2="2.31828" gradientUnits="userSpaceOnUse">
+            //                         <stop offset="0.03" stop-color="#6D6D6C"/>
+            //                         <stop offset="0.89" stop-color="white"/>
+            //                         </linearGradient>
+            //                         <linearGradient id="paint14_linear_3573_1528" x1="35.7513" y1="-3.06963" x2="35.62" y2="10.0918" gradientUnits="userSpaceOnUse">
+            //                         <stop stop-color="white"/>
+            //                         <stop offset="0.9" stop-color="white"/>
+            //                         </linearGradient>
+            //                         <linearGradient id="paint15_linear_3573_1528" x1="36.0594" y1="24.0621" x2="36.0012" y2="15.0485" gradientUnits="userSpaceOnUse">
+            //                         <stop offset="0.03" stop-color="#9D3D3D"/>
+            //                         <stop offset="0.89" stop-color="white"/>
+            //                         </linearGradient>
+            //                         </defs>
+            //                     </svg>`;
+            //     // button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
+            //     // if(isMobile){
+            //     //     button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
+            //     // } else{
+            //     //     button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
+            //     // } //** */
+            //     button.style.marginRight = `${buttonSpacing}px`; 
+            //         button.addEventListener('click', () => {
+            //         // Remove the border from the previously selected button, if any
+            //         if (selectedButton) {
+            //             selectedButton.style.border = 'none';
+            //             selectedButton.style.scale = '1';
+            //             selectedButton.style.transform = 'translateX(0px)';
+            //             selectedButton.style.marginTop = '0px';
+            //             selectedButton.style.marginBottom = '0px';
+            //         }
+            //         // Set the new selected color
+            //         selectedColor = color;
+            //         // Add a border or tick mark to indicate the selected color to the current button
+            //         button.style.scale = '1.1';
+            //         if(!isMobile){
+            //             button.style.transform = 'translateX(0.75rem)'; 
+            //             button.style.transition = 'transform 0.6s ease'; // Add this line for a 0.3 second duration
+            //             button.style.marginTop = '5px';
+            //             button.style.marginBottom = '5px';
+            //         } else{
+            //             button.style.transform = 'translateX(0.75rem)'; 
+            //             button.style.transition = 'transform 0.6s ease'; // Add this line for a 0.3 second duration
+            //             button.style.marginTop = '5px';
+            //             button.style.marginBottom = '5px';
+            //             //  button.style.border = "2px solid";
+            //             // button.style.borderColor = color;
+            //             // button.style.boxShadow = '5px 10px 30px #7c4c2390';
+            //             // button.style.borderRadius = '20%';
+            //         }
+            //         // Update the selectedButton variable to the current button
+            //         selectedButton = button;
+            //     });
+            //     // Append the color button to the color buttons container
+            //     colorButtonsContainer.appendChild(button);
+            // });
+            const colorPreview = document.createElement('div');
+            colorPreview.style.width = '40px';
+            colorPreview.style.height = '40px';
+            colorPreview.style.backgroundColor = 'blue';
+            // Append the color buttons container to the color container
+            colorButtonsContainer.appendChild(clearBoard);
+            colorContainer.appendChild(colorButtonsContainer);
+            
+            // Append the color container to the document body 
+            document.body.appendChild(colorContainer);
+            // Create a container div for both buttons
+            const buttonsContainer = document.createElement('div');
+            buttonsContainer.style.position = 'absolute';
+            buttonsContainer.style.display = 'flex'; 
+            buttonsContainer.style.flexDirection = 'row';
+            buttonsContainer.style.top = '50%'; 
+            // buttonsContainer.style.transform = 'translate(0, -50%)';
+            // buttonsContainer.style.marginTop = '30px';
+
+            
+            if(!isMobile){
+                // buttonsContainer.style.position = 'fixed';
+                buttonsContainer.style.top = '10%';
+                buttonsContainer.style.flexDirection = 'column';
+                buttonsContainer.style.marginLeft = '60px';
+                buttonsContainer.style.marginTop = '0%';
+            } 
+            buttonsContainer.style.left = '20px';
+            // buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
+            document.body.appendChild(buttonsContainer);
+            // Create the Clear button
+            const clearButton = document.createElement('button');
+            clearButton.innerHTML ='<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#0348A8"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M6 12h12M4 16h12M8 8h12" stroke="#0348A8" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"></path></g></svg>';
+            // clearButton.style.border = '3px solid blue';
+            // clearButton.style.color = 'blue';
+            // clearButton.style.width = 'fit-content';
+            // clearButton.style.marginRight = '10px';
+            if(isMobile){
+                clearButton.style.padding = '2px 8px';
+                clearButton.style.display = 'none';
+                buttonsContainer.style.top = '9.5%';
+                buttonsContainer.style.marginLeft = '30px';
+            } else {
+                clearButton.style.padding = '5px 10px';
+            }        
+            // clearButton.style.fontWeight = 'bold';
+            // clearButton.style.borderRadius = '20%';
+            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+            clearBoard.addEventListener('click', () => {
+                graphics.clear();
+            })
+            // clearButton.addEventListener('click', () => {
+            //     clearDrawing();
+            // }); 
+            colorViewButton.setInteractive().on('pointerdown', () => {
+                if(eraserButton.style.display === 'block') {
+                    eraserButton.style.display = 'none';
+                }else{
+                    eraserButton.style.display = 'block';
+                }
+            })
+            // Create the Eraser button
+            const eraserButton = document.createElement('button');
+            if(isMobile){
+                eraserButton.style.display = 'none';
+            }
+            // eraserButton.textContent = 'Eraser';
+            eraserButton.innerHTML = '<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.1167 7.01651L16.1167 1.01651C15.897 0.796427 15.636 0.621831 15.3486 0.502706C15.0613 0.383582 14.7534 0.322266 14.4423 0.322266C14.1313 0.322266 13.8234 0.383582 13.5361 0.502706C13.2487 0.621831 12.9877 0.796427 12.768 1.01651L1.42422 12.3265C1.20414 12.5463 1.02955 12.8073 0.910421 13.0946C0.791296 13.3819 0.72998 13.6899 0.72998 14.0009C0.72998 14.3119 0.791296 14.6199 0.910421 14.9072C1.02955 15.1945 1.20414 15.4555 1.42422 15.6753L6.29922 20.5503H3.40047C3.25129 20.5503 3.10822 20.6095 3.00273 20.715C2.89724 20.8205 2.83797 20.9636 2.83797 21.1128C2.83797 21.2619 2.89724 21.405 3.00273 21.5105C3.10822 21.616 3.25129 21.6753 3.40047 21.6753H20.9167C21.0659 21.6753 21.209 21.616 21.3145 21.5105C21.42 21.405 21.4792 21.2619 21.4792 21.1128C21.4792 20.9636 21.42 20.8205 21.3145 20.715C21.209 20.6095 21.0659 20.5503 20.9167 20.5503H11.9392L22.1167 10.3653C22.5594 9.92043 22.8079 9.31843 22.8079 8.69088C22.8079 8.06334 22.5594 7.46133 22.1167 7.01651ZM10.3492 20.5428H7.87797L2.21922 14.8803C1.98725 14.6464 1.85708 14.3303 1.85708 14.0009C1.85708 13.6715 1.98725 13.3554 2.21922 13.1215L7.46922 7.87151L15.2617 15.6303L10.3492 20.5428Z" fill="#0348A8"/></svg>';
+            eraserButton.style.color = 'blue';
+            // eraserButton.style.border = '3px solid blue';
+            // eraserButton.style.color = 'white';
+            eraserButton.style.width = 'fit-content';
+            eraserButton.style.marginRight = '15px';
+            // eraserButton.style.marginTop = '0px';
+            eraserButton.style.marginBottom = '0px';
+            if(isMobile){
+                eraserButton.style.padding = '4px 4px';
+            }else{
+                eraserButton.style.padding = '5px 9px';
+                eraserButton.style.top = '50%';
+                eraserButton.style.marginBottom = '15px';
+            }
+            eraserButton.style.fontWeight = 'bold';
+            eraserButton.style.borderRadius = '20%';
+            eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
+            eraserButton.addEventListener('click', () => {
+            isErasing = !isErasing;
+            erase = false;
+                if (isErasing) {
+                    erase = true;
+                    eraserButton.style.border = '3px solid #0348A8';
+                    eraserButton.style.backgroundColor = '#0348A820';
+                } else {
+                    // Return to drawing mode
+                    // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
+                    eraserButton.style.color = 'blue';
+                    eraserButton.style.border = 'none';
+                    eraserButton.style.backgroundColor = 'transparent';
+                }
+            });
+            // Add the Clear and Eraser buttons to the container
+            // colorPicker.appendChild(eraserButton);
+            // colorPicker.appendChild(eraserButton);
+            // colorPicker.appendChild(eraserButton);
+
+            colorEraserCont.append(colorPicker);
+            colorEraserCont.append(eraserButton);
+            // colorContainer.appendChild(eraserButton);
+            const sliderContainer = document.createElement('div');
+            sliderContainer.style.backgroundColor = '#fff';
+
+            sliderContainer.className = 'slider-container';
+            // sliderContainer.style.position = 'absolute';
+            // sliderContainer.style.top = '25%';
+            sliderContainer.style.left = '100%';
+            // Create the slider
+            // const slider = document.createElement('input');
+            // slider.type = 'range';
+            // slider.min = '2';
+            // slider.max = '80';
+            // slider.value = brushSize.toString();
+            // slider.style.transform = 'rotate(0deg)';
+            // slider.style.marginTop = '20px';
+            // slider.style.marginLeft = '0px';
+            // if(isMobile){
+
+            // }
+            // // slider.style.width = `${window.innerWidth / 2}px`;
+            // slider.addEventListener('input', (event) => {
+            //     brushSize = parseInt(event.target.value);
+            //     slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
+            //     slider.style.backgroundColor = '#05b3a4';
+            // });
+            // colorContainer colorButtonsContainer
+            // colorButtonsContainer.appendChild(slider);
+            // sliderContainer.appendChild(slider);
+            // buttonsContainer.appendChild(sliderContainer);
+
+
+
+            this.input.on('pointerdown', () => {
+                isDrawing = true;
+                startDrawing(this.input.x, this.input.y);
+            });
+
+            this.input.on('pointermove', () => {
+                if (isDrawing) {
+                    continueDrawing(this.input.x, this.input.y);
+                }
+            });
+            this.input.on('pointerup', () => {
+                if (isDrawing) {
+                    finishDrawing();
+                }
+                isDrawing = false;
+            });
+            customCursor = this.add.graphics();
+            customCursor.setDepth(2)
+            // Disable the default cursor
+            this.input.setDefaultCursor('none');
+            const borderThickness = 0;
+            const borderColor = 0xffffff; // White color (you can customize this)
+            const borderGraphics = this.add.graphics();
+            borderGraphics.lineStyle(borderThickness, borderColor);
+            borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
+            function continueDrawing(x, y) {
+                // Check if the pointer coordinates are within the drawing zone
+                if (
+                    x >= drawingZone.x &&
+                    x <= drawingZone.x + drawingZone.width &&
+                    y >= drawingZone.y &&
+                    y <= drawingZone.y + drawingZone.height
+                ) {
+                    // The pointer is within the drawing zone, so continue drawing
+                    graphics.lineTo(x, y);
+                    graphics.strokePath();
+                }
+            };
+            // Add a "Save Snapshot" button
+            if(isMobile){
+                snapWidth = 70;
+                snapHeight = 70;
+            } else {
+                snapWidth = 200;
+                snapHeight = 70;
+            }
+            // snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
+            // // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
+            // snapshotButton.setInteractive();
+            // snapshotButton.on('pointerdown', () => {
+            //     captureSnapshot(this);
+            // });
+            snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloaded', {font :'700 30px Quicksand', fill: '#05b3a4'});
+            snapNotice.setVisible(false);
+    }
+    function captureSnapshot(drawingZone) {
+        // snapNotice.setVisible(true);
+        submitButton.setVisible(false);
+        // snapshotButton.setVisible(false);
+        customCursor.setVisible(false);
+        muteIcon.setVisible(false);
+        retryButton.setVisible(false);
+        galleryButton.setVisible(false);
+
+
+        drawingZone.renderer.snapshot((image) => {
+            submitButton.setVisible(true);
+            snapshotButton.setVisible(true);
+            customCursor.setVisible(true);
+            muteIcon.setVisible(true);
+            retryButton.setVisible(true);
+            galleryButton.setVisible(true);
+
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            // Download the snapshot as an image
+            const link = document.createElement('a');
+            link.href = image.src;
+            link.download = 'my_drawing.png';
+            link.click();
+            document.body.removeChild(image);
+            // Clear the drawing
+            // graphics.clear();
+        });
+    }
+
+    function startDrawing(x, y) {
+        if (!isErasing) {
+            graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
+        } else {
+            graphics.lineStyle(brushSize * 2, 0xffffff, 1); // Set a white color to clear lines (full opacity)
+        }
+        graphics.beginPath();
+        graphics.moveTo(x, y);
+        
+    }
+
+    function continueDrawing(x, y) {
+        if (!isErasing) {
+            graphics.lineTo(x, y); // Drawing
+        } else {
+            graphics.lineTo(x, y); // Erasing by drawing with a white line
+        }
+        graphics.strokePath();
+    }
+
+    function finishDrawing() {
+        // No need for additional actions here
+    }
+
+    function clearDrawing() {
+        graphics.clear();
+    }
+    function update() {
+        const slider = document.querySelector('input[type="range"]');
+        if (slider && !isDrawing) {
+            const sliderValue = parseInt(slider.value);
+            const max = parseInt(slider.max);
+            const width = slider.offsetWidth;
+            const offsetX = (sliderValue - 2) / (max - 2) * width;
+            slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
+        };
+        const cursorSize = brushSize * cursorSizeMultiplier;
+        customCursor.clear();
+        customCursor.lineStyle(1.5, 0x000000);
+        customCursor.strokeCircle(0, 0, cursorSize);
+        customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
+        customCursor.fillCircle(0, 0, cursorSize);
+        customCursor.x = this.input.x;
+        customCursor.y = this.input.y;
+        customCursor.moveTo(0, -cursorSize+3);  
+        customCursor.lineTo(0, cursorSize-3);   
+        
+        customCursor.moveTo(-cursorSize + 3, 0);  
+        customCursor.lineTo(cursorSize-3, 0);   
+        customCursor.strokePath(); 
+        
+        if (erase === true) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        } else if (erase === false) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);  
+            customCursor.fillCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+            
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        }
+    }
+
+    // function update() {
+    //     const slider = document.querySelector('input[type="range"]');
+        
+    //     if (slider && !isDrawing) {
+    //         const sliderValue = parseInt(slider.value);
+    //         const max = parseInt(slider.max);
+    //         const width = slider.offsetWidth;
+    //         const offsetX = (sliderValue - 2) / (max - 2) * width;
+    //         slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
+    //     }
+
+    //     const cursorSize = brushSize * cursorSizeMultiplier;
+    //     const cursorScale = 1; // Adjust this value to increase/decrease the cursor size
+
+    //     // Assuming 'this' refers to your Phaser.Scene instance
+    //     if (!this.customCursor) {
+    //         // Create the custom cursor sprite
+    //         this.customCursor = this.add.sprite(0, 0, 'cursorImage'); // Replace 'yourCursorImage' with the key of your loaded PNG image
+    //         this.customCursor.setOrigin(0.3, 0.8);
+    //     }
+
+    //     // Set the tint or fill color dynamically based on the selectedColor
+    //     const color = Phaser.Display.Color.HexStringToColor(selectedColor).color;
+    //     this.customCursor.setTint(color);
+
+    //     // Resize the cursor
+    //     this.customCursor.setScale( cursorScale);
+
+    //     // Position the cursor at the current mouse pointer coordinates
+    //     this.customCursor.x = this.input.x;
+    //     this.customCursor.y = this.input.y;
+    // }
+</script>
+<style>
+    .clear-button {
+        background-color: blue;
+    }
+    /* Animation styles */
+    @keyframes slideInUp {
+        0% {
+            opacity: 0;
+            transform: translateY(100%); /* Start below the viewport */
+        }
+        100% {
+            opacity: 1;
+            transform: translateY(0); /* End at its original position */
+        }
+    }
+
+    .clip-art-container {
+        overflow: hidden; /* Prevents overflow during the animation */
+    }
+
+    .clip-art {
+        transform: translateX(100%); /* Initially off-screen to the right */
+        opacity: 0; /* Initially hidden */
+        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
+    }
+
+    .clip-art.show {
+        transform: translateX(0); /* Move the image into view */
+        opacity: 1; /* Fade in */
+    }
+    .slide{
+        display: none;
+    }
+    .active{
+        display: block;
+    }
+</style>
\ No newline at end of file