small tweaks

backend/.gitignore

@@ -1,2 +1 @@
-./**/__pycache__
 __pycache__/

frontend/src/components/Navagation/navbar.js

@@ -202,7 +202,7 @@ export default class Navbar extends Component{
         
         return (<div>
         
-            <div className={`z-10 flex-1 float-left bg-white dark:bg-stone-900 h-screen p-5 pt-8 ${this.state.open ? "lg:w-72 md:64 sm:w-60" : "w-10"} duration-300 absolute shadow-2xl border-black border-r-[1px] dark:border-white dark:text-white`}>
+            <div className={`z-10 flex-1 float-left bg-white dark:bg-stone-900 h-screen p-5 pt-8 ${this.state.open ? "lg:w-72 md:64 sm:w-60" : "w-10"} duration-300 absolute shadow-2xl border-black border-r-[1px] dark:border-white dark:text-white`} >
 
             <BsArrowLeftShort onClick={this.handelNavbar} className={`  bg-white text-Retro-darl-blue text-3xl rounded-full absolute -right-3 top-9 border border-black cursor-pointer ${!this.state.open && 'rotate-180'} dark:border-white duration-300 dark:text-white dark:bg-stone-900 `}/>
 

frontend/src/css/counter.css

@@ -10,4 +10,4 @@ input[type='number']::-webkit-outer-spin-button {
 
 .custom-number-input button:focus {
   outline: none !important;
-}
+}

frontend/src/css/dist/output.css

@@ -549,44 +549,6 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-.container {
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1536px;
-  }
-}
-
-.pointer-events-none {
-  pointer-events: none;
-}
-
 .visible {
   visibility: visible;
 }
@@ -620,64 +582,36 @@ video {
   left: 0px;
 }
 
-.-right-3 {
-  right: -0.75rem;
-}
-
-.top-9 {
-  top: 2.25rem;
+.top-0 {
+  top: 0px;
 }
 
 .bottom-0 {
   bottom: 0px;
 }
 
-.top-0 {
-  top: 0px;
-}
-
-.-bottom-0 {
-  bottom: -0px;
+.-right-\[25px\] {
+  right: -25px;
 }
 
 .right-0 {
   right: 0px;
 }
 
-.top-4 {
-  top: 1rem;
-}
-
-.-right-4 {
-  right: -1rem;
-}
-
-.-right-\[17px\] {
-  right: -17px;
-}
-
-.-right-\[20px\] {
-  right: -20px;
-}
-
-.-right-\[30px\] {
-  right: -30px;
-}
-
-.-right-\[28px\] {
-  right: -28px;
+.-right-3 {
+  right: -0.75rem;
 }
 
-.-right-\[25px\] {
-  right: -25px;
+.top-9 {
+  top: 2.25rem;
 }
 
-.-right-\[22px\] {
-  right: -22px;
+.-bottom-0 {
+  bottom: -0px;
 }
 
-.-right-\[23px\] {
-  right: -23px;
+.top-4 {
+  top: 1rem;
 }
 
 .z-20 {
@@ -712,10 +646,6 @@ video {
   margin: 0px;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .mr-5 {
   margin-right: 1.25rem;
 }
@@ -736,8 +666,16 @@ video {
   margin-left: auto;
 }
 
-.ml-4 {
-  margin-left: 1rem;
+.-ml-\[5px\] {
+  margin-left: -5px;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.ml-5 {
+  margin-left: 1.25rem;
 }
 
 .mt-4 {
@@ -756,70 +694,6 @@ video {
   margin-top: 0.25rem;
 }
 
-.mr-3 {
-  margin-right: 0.75rem;
-}
-
-.mr-4 {
-  margin-right: 1rem;
-}
-
-.-ml-2 {
-  margin-left: -0.5rem;
-}
-
-.-ml-3 {
-  margin-left: -0.75rem;
-}
-
-.-ml-1 {
-  margin-left: -0.25rem;
-}
-
-.-ml-0 {
-  margin-left: -0px;
-}
-
-.-ml-\[8px\] {
-  margin-left: -8px;
-}
-
-.-ml-\[10px\] {
-  margin-left: -10px;
-}
-
-.-ml-\[4px\] {
-  margin-left: -4px;
-}
-
-.-ml-\[5px\] {
-  margin-left: -5px;
-}
-
-.ml-96 {
-  margin-left: 24rem;
-}
-
-.ml-\[30rem\] {
-  margin-left: 30rem;
-}
-
-.ml-\[46rem\] {
-  margin-left: 46rem;
-}
-
-.ml-\[40rem\] {
-  margin-left: 40rem;
-}
-
-.ml-\[44rem\] {
-  margin-left: 44rem;
-}
-
-.ml-5 {
-  margin-left: 1.25rem;
-}
-
 .block {
   display: block;
 }
@@ -852,6 +726,10 @@ video {
   height: 20rem;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -864,10 +742,6 @@ video {
   height: auto;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .h-\[600px\] {
   height: 600px;
 }
@@ -880,26 +754,6 @@ video {
   height: 41px;
 }
 
-.h-5 {
-  height: 1.25rem;
-}
-
-.h-8 {
-  height: 2rem;
-}
-
-.h-\[500px\] {
-  height: 500px;
-}
-
-.h-\[300px\] {
-  height: 300px;
-}
-
-.h-\[350px\] {
-  height: 350px;
-}
-
 .w-full {
   width: 100%;
 }
@@ -952,10 +806,6 @@ video {
   width: 100vw;
 }
 
-.w-\[80\%\] {
-  width: 80%;
-}
-
 .max-w-full {
   max-width: 100%;
 }
@@ -964,10 +814,6 @@ video {
   flex: 1 1 0%;
 }
 
-.flex-grow {
-  flex-grow: 1;
-}
-
 .rotate-180 {
   --tw-rotate: 180deg;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1025,12 +871,6 @@ video {
   justify-content: center;
 }
 
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
-
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -1045,22 +885,6 @@ video {
   overflow: hidden;
 }
 
-.overflow-scroll {
-  overflow: scroll;
-}
-
-.overflow-y-auto {
-  overflow-y: auto;
-}
-
-.overflow-x-hidden {
-  overflow-x: hidden;
-}
-
-.overflow-y-hidden {
-  overflow-y: hidden;
-}
-
 .overflow-y-scroll {
   overflow-y: scroll;
 }
@@ -1221,16 +1045,6 @@ video {
   background-color: rgb(254 169 89 / var(--tw-bg-opacity));
 }
 
-.bg-neutral-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(82 82 82 / var(--tw-bg-opacity));
-}
-
 .bg-gradient-to-bl {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }
@@ -1329,26 +1143,27 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-Peach-Yellow {
+  --tw-gradient-from: #FFEDBC;
+  --tw-gradient-to: rgb(255 237 188 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.via-Vapor-Purple {
+  --tw-gradient-to: rgb(148 22 127 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #94167f, var(--tw-gradient-to);
+}
+
 .via-purple-500 {
   --tw-gradient-to: rgb(168 85 247 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), #a855f7, var(--tw-gradient-to);
 }
 
-.via-Warm-Pink {
-  --tw-gradient-to: rgb(241 52 132 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), #F13484, var(--tw-gradient-to);
-}
-
 .via-Warm-Red {
   --tw-gradient-to: rgb(255 96 93 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), #FF605D, var(--tw-gradient-to);
 }
 
-.via-Warm-Orange {
-  --tw-gradient-to: rgb(254 169 89 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), #FEA959, var(--tw-gradient-to);
-}
-
 .via-Happy-Tangerine {
   --tw-gradient-to: rgb(241 160 137 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), #F1A089, var(--tw-gradient-to);
@@ -1409,8 +1224,8 @@ video {
   --tw-gradient-to: #6E48AA;
 }
 
-.to-Peach-Yello {
-  --tw-gradient-to: #FFEDBC;
+.to-Peach-Red {
+  --tw-gradient-to: #ED4264;
 }
 
 .to-Deep-Space-Gray {
@@ -1425,6 +1240,10 @@ video {
   --tw-gradient-to: #3b82f6;
 }
 
+.to-Peach-Yellow {
+  --tw-gradient-to: #FFEDBC;
+}
+
 .p-4 {
   padding: 1rem;
 }
@@ -1437,6 +1256,10 @@ video {
   padding: 1.25rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .p-0\.5 {
   padding: 0.125rem;
 }
@@ -1449,14 +1272,6 @@ video {
   padding: 0.25rem;
 }
 
-.p-3 {
-  padding: 0.75rem;
-}
-
-.p-6 {
-  padding: 1.5rem;
-}
-
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1467,6 +1282,11 @@ video {
   padding-bottom: 0.5rem;
 }
 
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -1492,31 +1312,6 @@ video {
   padding-bottom: 0.75rem;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-
-.px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
-
-.px-9 {
-  padding-left: 2.25rem;
-  padding-right: 2.25rem;
-}
-
-.px-7 {
-  padding-left: 1.75rem;
-  padding-right: 1.75rem;
-}
-
 .pb-3 {
   padding-bottom: 0.75rem;
 }
@@ -1545,10 +1340,6 @@ video {
   padding-left: 1.25rem;
 }
 
-.pl-3 {
-  padding-left: 0.75rem;
-}
-
 .pt-4 {
   padding-top: 1rem;
 }
@@ -1561,42 +1352,6 @@ video {
   padding-bottom: 0px;
 }
 
-.pr-2 {
-  padding-right: 0.5rem;
-}
-
-.pl-\[1\.80rem\] {
-  padding-left: 1.80rem;
-}
-
-.pr-\[1\.80rem\] {
-  padding-right: 1.80rem;
-}
-
-.pl-\[1\.90rem\] {
-  padding-left: 1.90rem;
-}
-
-.pr-\[1\.90rem\] {
-  padding-right: 1.90rem;
-}
-
-.pl-\[1\.85rem\] {
-  padding-left: 1.85rem;
-}
-
-.pr-\[1\.85rem\] {
-  padding-right: 1.85rem;
-}
-
-.pl-\[1\.82rem\] {
-  padding-left: 1.82rem;
-}
-
-.pr-\[1\.82rem\] {
-  padding-right: 1.82rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -1691,25 +1446,11 @@ video {
   color: rgb(0 83 215 / var(--tw-text-opacity));
 }
 
-.text-gray-100 {
-  --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity));
-}
-
-.text-cyan-50 {
-  --tw-text-opacity: 1;
-  color: rgb(236 254 255 / var(--tw-text-opacity));
-}
-
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
 
-.opacity-30 {
-  opacity: 0.3;
-}
-
 .opacity-60 {
   opacity: 0.6;
 }
@@ -1830,16 +1571,6 @@ video {
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
-.hover\:text-gray-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1863,11 +1594,6 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
-.focus\:bg-neutral-700:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
-}
-
 .focus\:from-fuchsia-200:focus {
   --tw-gradient-from: #f5d0fe;
   --tw-gradient-to: rgb(245 208 254 / 0);
@@ -1885,12 +1611,6 @@ video {
   outline-offset: 2px;
 }
 
-.focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
 .focus\:ring-1:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1903,15 +1623,6 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-inset:focus {
-  --tw-ring-inset: inset;
-}
-
-.focus\:ring-indigo-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
-}
-
 .focus\:ring-sky-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity));
@@ -1946,44 +1657,14 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.dark .dark\:border-gray-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(31 41 55 / var(--tw-border-opacity));
-}
-
-.dark .dark\:border-neutral-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(64 64 64 / var(--tw-border-opacity));
-}
-
 .dark .dark\:bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-stone-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(28 25 23 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-neutral-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-gray-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-black {
+.dark .dark\:bg-neutral-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
 }
 
 .dark .dark\:bg-\[\#1b1c1d\] {
@@ -1991,19 +1672,14 @@ video {
   background-color: rgb(27 28 29 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-neutral-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:bg-neutral-700 {
+.dark .dark\:bg-stone-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
+  background-color: rgb(28 25 23 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-neutral-900 {
+.dark .dark\:bg-neutral-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
 
 .dark .dark\:bg-gradient-to-bl {
@@ -2030,31 +1706,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-cream {
-  --tw-text-opacity: 1;
-  color: rgb(250 249 246 / var(--tw-text-opacity));
-}
-
 .dark .dark\:hover\:bg-gray-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
-.dark .hover\:dark\:bg-gray-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
-.dark .hover\:dark\:bg-neutral-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
-}
-
-.dark .dark\:hover\:bg-neutral-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
-}
-
 .dark .dark\:focus\:ring-blue-800:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
@@ -2075,4 +1731,5 @@ video {
   .lg\:w-72 {
     width: 18rem;
   }
-}
+}
+

frontend/src/css/input.css

@@ -1,3 +1,4 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+

frontend/src/helper/visual.js

@@ -3,18 +3,19 @@ const emote = ['👺','🎮', '💀','⚗️', '🎉','👾','🤖', '🍩','✏
 
 const colour_map = [
      'bg-gradient-to-bl from-Retro-light-blue to-Retro-light-pink',
-     'bg-gradient-to-bl from-Vapor-Violet to-Vapor-Orange',
+     'bg-gradient-to-bl from-Vapor-Violet via-Vapor-Purple to-Vapor-Orange',
      'bg-gradient-to-bl from-Retro-purple to-Vapor-Pink',
      'bg-gradient-to-bl from-Retro-purple to-Vapor-Blue',
      'bg-gradient-to-bl from-Retro-light-pink to-Vapor-Blue',
      'bg-gradient-to-bl from-indigo-500 via-purple-500 to-pink-500',
      'bg-gradient-to-bl from-Vapor-Rose to-Vapor-Blue',
-     'bg-gradient-to-bl from-Warm-Blue via-Warm-Pink via-Warm-Red via-Warm-Orange to-Warm-Yellow',
+     'bg-gradient-to-bl from-Warm-Blue via-Warm-Red to-Warm-Yellow',
      'bg-gradient-to-bl from-Happy-Yellow via-Happy-Tangerine via-Happy-Indego-Purple via-Cool-Blue to-Happy-Sea-Blue',
      'bg-gradient-to-bl from-Blue-Turquoise via-Blue-Midtone to-Blue-Royal',
      'bg-gradient-to-bl from-Green-Black via-Green-Forest to-Green-Emerald',
      'bg-gradient-to-bl from-Amethyst-Light to-Amethyst-Dark',
-     'bg-gradient-to-bl from-Peach-Red to-Peach-Yello',
+     'bg-gradient-to-bl from-Peach-Red to-Peach-Yellow',
+     'bg-gradient-to-bl from-Peach-Yellow to-Peach-Red',
      'bg-gradient-to-bl from-Deep-Space-Black to-Deep-Space-Gray dark:bg-gradient-to-bl dark:from-Entrepreneurial-Lies-Gray dark:to-Entrepreneurial-Lies-White ',
      'bg-gradient-to-bl from-Sunshine-Red to-Sunshine-Blue'
 ]

frontend/tailwind.config.js

@@ -12,7 +12,7 @@ module.exports = {
         "Amethyst-Light" : "#9D50BB",
         "Amethyst-Dark" : "#6E48AA",
         "Peach-Red" : "#ED4264",
-        "Peach-Yello" : "#FFEDBC",
+        "Peach-Yellow" : "#FFEDBC",
         "Deep-Space-Black" : "#000000",
         "Deep-Space-Gray" : "#434343",
         "Sunshine-Red" : "#b92b27",