Initial commit

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

README.md

@@ -0,0 +1,2 @@
+# apply
+ 

assets/Group 1.svg

@@ -0,0 +1,6 @@
+<svg width="77" height="77" viewBox="0 0 77 77" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="38.4806" cy="29.7768" r="29.1831" stroke="black"/>
+<circle cx="38.4806" cy="47.2232" r="29.1831" stroke="black"/>
+<circle cx="47.2038" cy="38.5" r="29.1831" transform="rotate(90 47.2038 38.5)" stroke="black"/>
+<circle cx="29.7574" cy="38.5" r="29.1831" transform="rotate(90 29.7574 38.5)" stroke="black"/>
+</svg>

css/Untitled-1.md

@@ -0,0 +1,7 @@
+What I like- Use of illustrations makes the site more friendly and appealing.- Minimal and simple to follow.
+Things I noticed and would like to changeUI:- Alignment issues and inconsistent spacing    - The site logo and company name, slogan don't center align properly.    - The footer section of the site doesn't align with the outer bounds of header content (Mobile view)
+Colors:    - The "Delivering Impact Across Three Core Areas" section tiles have a background color that clashes with the blue color behind them.
+Typography:    - The hierarchy of titles and descriptions could be improved with slight changes in font colors 
+UX:    - Links to other pages have inconstant behavior.      The 'services' link is a dropdown that is not distinguished so the user won't know to expect it. (Desktop view)    The services section requires an extra click to open the relevant links which can be avoided by keeping it open. (Mobile view)    - The text "Call to action" button on the first section with the label "Get a Quote" becomes black when hovered which lowers the contrast and becomes harder to read.    - When hovering over the "Delivering Impact Across Three Core Areas" section tiles the background color doesn't have a transition so it snaps between colors which is jarring. Also, the text has different transition timing so for a while the text loses contrast.    - The site isn't fully responsive and the layout is loaded based on conditions at initial loading. Which makes it break when the user tries to resize the window.
+
+What did I change in the mockup?- The inconsistent spacing and alignment of the elements

css/main.css

@@ -0,0 +1,969 @@
+@charset "UTF-8";
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "IBM Plex Sans", sans-serif;
+}
+
+:root {
+  font-size: clamp(1rem, 1.2vmax, 1.2rem);
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  --accent-color: #4d77ff;
+  --accent-color-rgb: 77, 119, 255;
+  --text-color: 20, 20, 20;
+  --foreground-color: 255, 255, 255;
+  --background-color: 248, 245, 242;
+  --danger-color: rgb(225, 58, 58);
+  --green: #1cad59;
+  --yellow: rgb(255, 207, 65);
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+  color: rgba(var(--text-color), 1);
+  background-color: rgba(var(--background-color), 1);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  color-scheme: light;
+}
+
+body[data-theme=dark] {
+  --accent-color: #a0b6ff;
+  --accent-color-rgb: 160, 182, 255;
+  --text-color: 220, 220, 220;
+  --foreground-color: 27, 28, 29;
+  --background-color: 21, 22, 22;
+  --danger-color: rgb(255, 106, 106);
+  --green: #00e676;
+  --yellow: rgb(255, 213, 5);
+  color-scheme: dark;
+}
+body[data-theme=dark] sm-popup::part(popup) {
+  background-color: rgba(var(--foreground-color), 1);
+}
+
+input[type=date] {
+  display: flex;
+  width: 100%;
+  padding: 0.8rem 0.6rem;
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background-color: rgba(var(--text-color), 0.06);
+}
+input[type=date]:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.1rem var(--accent-color);
+}
+
+p,
+strong {
+  font-size: 0.9rem;
+  max-width: 65ch;
+  line-height: 1.7;
+  color: rgba(var(--text-color), 0.9);
+}
+
+.warning {
+  line-height: normal;
+  padding: 1rem;
+  background-color: khaki;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+a {
+  text-decoration: none;
+  color: var(--accent-color);
+}
+a:focus-visible {
+  box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+}
+
+h1 {
+  font-size: 1.5rem;
+}
+
+h2 {
+  font-size: 1.3rem;
+}
+
+h3 {
+  font-size: 1.1rem;
+}
+
+h4 {
+  font-size: 1rem;
+}
+
+h5 {
+  font-size: 0.9rem;
+}
+
+h6 {
+  font-size: 0.8rem;
+}
+
+button,
+.button {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  position: relative;
+  display: inline-flex;
+  border: none;
+  background-color: transparent;
+  overflow: hidden;
+  -webkit-tap-highlight-color: transparent;
+  align-items: center;
+  font-size: 0.9rem;
+  font-weight: 700;
+  white-space: nowrap;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  justify-content: center;
+  flex-shrink: 0;
+}
+button:focus-visible,
+.button:focus-visible {
+  outline: var(--accent-color) solid medium;
+}
+button:not(:disabled),
+.button:not(:disabled) {
+  color: var(--accent-color);
+  cursor: pointer;
+}
+button .icon,
+.button .icon {
+  fill: var(--accent-color);
+}
+
+.button {
+  display: inline-flex;
+  background-color: rgba(var(--text-color), 0.06);
+  color: rgba(var(--text-color), 1);
+}
+.button--primary, .button--danger {
+  color: rgba(var(--background-color), 1) !important;
+}
+.button--primary .icon, .button--danger .icon {
+  fill: rgba(var(--background-color), 1);
+}
+.button--primary {
+  padding: 0.8rem 1.2rem;
+  background-color: rgba(var(--text-color), 1);
+}
+.button--danger {
+  background-color: var(--danger-color);
+}
+.button--small {
+  padding: 0.4rem 0.5rem;
+}
+.button--colored {
+  color: var(--accent-color) !important;
+}
+.button--colored .icon {
+  fill: var(--accent-color);
+}
+.button--outlined {
+  border: solid 0.12rem rgba(var(--text-color), 1);
+  background-color: transparent;
+  color: rgba(var(--text-color), 1) !important;
+}
+
+.cta {
+  text-transform: uppercase;
+  font-size: 0.9rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  padding: 0.8rem 1rem;
+}
+
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+  fill: rgba(var(--text-color), 0.8);
+  flex-shrink: 0;
+}
+
+.icon-only {
+  padding: 0.5rem;
+  border-radius: 0.3rem;
+}
+
+button:disabled {
+  opacity: 0.5;
+}
+
+a:-webkit-any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:-moz-any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+a:any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+details summary {
+  display: flex;
+  gap: 0.3rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  align-items: center;
+  color: var(--accent-color);
+}
+details summary .down-arrow {
+  fill: var(--accent-color);
+}
+
+details[open] summary {
+  margin-bottom: 1rem;
+}
+details[open] > summary .down-arrow {
+  transform: rotate(180deg);
+}
+
+sm-input,
+sm-textarea {
+  width: 100%;
+  --border-radius: 0.5rem;
+  --background-color: rgba(var(--foreground-color), 1);
+}
+sm-input button .icon,
+sm-textarea button .icon {
+  fill: var(--accent-color);
+}
+
+sm-button {
+  --padding: 0.8rem;
+}
+sm-button[variant=primary] .icon {
+  fill: rgba(var(--background-color), 1);
+}
+sm-button[disabled] .icon {
+  fill: rgba(var(--text-color), 0.6);
+}
+sm-button.danger {
+  --background: var(--danger-color);
+  color: rgba(var(--background-color), 1);
+}
+
+sm-spinner {
+  --size: 1rem;
+  --stroke-width: 0.1rem;
+}
+
+sm-form {
+  --gap: 1rem;
+}
+
+sm-select {
+  font-size: 0.9rem;
+  --padding: 0.6rem 0.3rem 0.6rem 0.6rem;
+}
+
+sm-option {
+  font-size: 0.9rem;
+  --border-radius: 0.3rem;
+}
+
+sm-chips {
+  --gap: 0.3rem;
+  background-color: rgba(var(--text-color), 0.06);
+  border-radius: 0.5rem;
+  padding: 0.3rem;
+}
+
+sm-chip {
+  font-size: 0.9rem;
+  --border-radius: 0.5rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  font-weight: 500;
+}
+sm-chip[selected] {
+  color: rgba(var(--background-color), 1);
+  --background: var(--accent-color);
+}
+
+sm-notifications {
+  z-index: 100000;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+.overflow-ellipsis {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.wrap-around {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.full-bleed {
+  grid-column: 1/-1;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+}
+
+.top-0 {
+  top: 0;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-direction-column {
+  flex-direction: column;
+}
+
+.grid {
+  display: grid;
+}
+
+.flow-column {
+  grid-auto-flow: column;
+}
+
+.gap-0-3 {
+  gap: 0.3rem;
+}
+
+.gap-0-5 {
+  gap: 0.5rem;
+}
+
+.gap-1 {
+  gap: 1rem;
+}
+
+.gap-1-5 {
+  gap: 1.5rem;
+}
+
+.gap-2 {
+  gap: 2rem;
+}
+
+.gap-3 {
+  gap: 3rem;
+}
+
+.text-align-right {
+  text-align: right;
+}
+
+.align-content-start {
+  align-content: flex-start;
+}
+
+.align-items-start {
+  align-items: flex-start;
+}
+
+.align-self-start {
+  align-self: flex-start;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.justify-start {
+  justify-items: start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-right {
+  margin-left: auto;
+}
+
+.align-self-center {
+  align-self: center;
+}
+
+.align-self-end {
+  align-self: end;
+}
+
+.justify-self-center {
+  justify-self: center;
+}
+
+.justify-self-start {
+  justify-self: start;
+}
+
+.justify-self-end {
+  justify-self: end;
+}
+
+.flex-direction-column {
+  flex-direction: column;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.label {
+  font-size: 0.9rem;
+  color: rgba(var(--text-color), 0.8);
+  font-weight: 500;
+  margin-bottom: 0.2rem;
+}
+
+.button--primary .ripple,
+.button--danger .ripple {
+  background: radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
+}
+
+.ripple {
+  height: 8rem;
+  width: 8rem;
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  background: radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);
+  pointer-events: none;
+}
+
+.interactive {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.empty-state {
+  display: grid;
+  width: 100%;
+  padding: 1.5rem 0;
+}
+
+.observe-empty-state:empty {
+  display: none !important;
+}
+
+.observe-empty-state:not(:empty) + .empty-state {
+  display: none !important;
+}
+
+.bullet-point {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0.8ch;
+}
+.bullet-point::after {
+  content: "";
+  height: 0.4ch;
+  width: 0.4ch;
+  border-radius: 0.5em;
+  background-color: var(--accent-color);
+}
+
+.margin-right-0-3 {
+  margin-right: 0.3rem;
+}
+
+.margin-right-0-5 {
+  margin-right: 0.5rem;
+}
+
+.margin-right-auto {
+  margin-right: auto;
+}
+
+.margin-left-0-5 {
+  margin-left: 0.5rem;
+}
+
+.margin-left-auto {
+  margin-left: auto;
+}
+
+.margin-top-1-5 {
+  margin-top: 1.5rem;
+}
+
+.margin-bottom-0-5 {
+  margin-bottom: 0.5rem;
+}
+
+.margin-bottom-1 {
+  margin-bottom: 1rem;
+}
+
+.margin-bottom-1-5 {
+  margin-bottom: 1.5rem;
+}
+
+.margin-bottom-2 {
+  margin-bottom: 2rem;
+}
+
+.icon-button {
+  padding: 0.6rem;
+  border-radius: 0.8rem;
+  background-color: rgba(var(--text-color), 0.1);
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
+}
+.icon-button .icon {
+  fill: var(--accent-color);
+}
+
+#confirmation_popup,
+#prompt_popup {
+  flex-direction: column;
+}
+#confirmation_popup h4,
+#prompt_popup h4 {
+  margin-bottom: 1.5rem;
+}
+#confirmation_popup sm-button,
+#prompt_popup sm-button {
+  margin: 0;
+}
+#confirmation_popup > .flex:last-of-type,
+#prompt_popup > .flex:last-of-type {
+  padding: 0;
+  margin-top: 1rem;
+}
+#confirmation_popup > .flex:last-of-type sm-button:first-of-type,
+#prompt_popup > .flex:last-of-type sm-button:first-of-type {
+  margin-right: 0.6rem;
+  margin-left: auto;
+}
+
+#prompt_message {
+  margin-bottom: 1.5rem;
+}
+
+.popup__header {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0 1.5rem;
+  align-items: center;
+  justify-items: flex-start;
+}
+
+.popup__header__close {
+  padding: 0.5rem;
+  margin-left: -0.5rem;
+}
+
+#loading {
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+#loading section {
+  place-content: center;
+  justify-items: center;
+}
+#loading h4 {
+  margin-top: 1.5rem;
+  font-weight: 500;
+}
+#loading sm-spinner {
+  --size: 1.5rem;
+}
+
+#sign_in,
+#sign_up {
+  display: grid;
+  height: 100%;
+  grid-template-rows: auto 1fr;
+}
+#sign_in section,
+#sign_up section {
+  margin: auto;
+  width: min(26rem, 100%);
+}
+#sign_in sm-form,
+#sign_up sm-form {
+  margin: 2rem 0;
+}
+
+#main_header {
+  padding: 1rem max(1rem, 4vw);
+}
+
+.app-brand {
+  display: flex;
+  gap: 0.3rem;
+  align-items: center;
+}
+.app-brand .icon {
+  height: 1.7rem;
+  width: 1.7rem;
+}
+
+.app-name__company {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: rgba(var(--text-color), 0.8);
+}
+
+.password-field label {
+  display: flex;
+}
+.password-field label input:checked ~ .visible {
+  display: none;
+}
+.password-field label input:not(:checked) ~ .invisible {
+  display: none;
+}
+
+.multi-state-button {
+  display: grid;
+  text-align: center;
+  align-items: center;
+  justify-items: center;
+}
+.multi-state-button > * {
+  grid-area: 1/1/2/2;
+}
+.multi-state-button button {
+  z-index: 1;
+  width: 100%;
+}
+
+.scrolling-wrapper {
+  overflow-y: auto;
+}
+
+#flo_id_warning {
+  padding-bottom: 1.5rem;
+  border-bottom: thin solid rgba(var(--text-color), 0.3);
+}
+#flo_id_warning .icon {
+  height: 4rem;
+  width: 4rem;
+  padding: 1rem;
+  background-color: #ffc107;
+  border-radius: 3rem;
+  fill: rgba(0, 0, 0, 0.8);
+  margin-bottom: 1.5rem;
+}
+
+.generated-id-card {
+  display: grid;
+  gap: 1rem;
+}
+.generated-id-card h5 {
+  margin-bottom: 0.3rem;
+}
+
+#app_body {
+  display: grid;
+  grid-template-columns: 1rem [main-margin-start] 1fr [main-margin-end] 1rem;
+  height: 100%;
+}
+#app_body > * {
+  grid-column: main-margin;
+}
+
+#main_header {
+  padding: 1rem 0;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: rgba(var(--background-color), 1);
+}
+#main_header #main_logo {
+  height: 2.5rem;
+  width: 2.5rem;
+  padding: 0.6rem;
+  border-radius: 5rem;
+  background-color: rgba(var(--text-color), 0.1);
+}
+#main_header .button {
+  text-transform: capitalize;
+}
+#main_header .button--primary {
+  padding: 0.6rem 1.8rem;
+  border: solid 0.12rem rgba(var(--text-color), 1);
+}
+
+#landing {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  height: 100%;
+}
+#landing section {
+  height: 100%;
+}
+#landing section > div:first-of-type {
+  display: grid;
+  place-content: center;
+  align-self: center;
+}
+#landing h1 span:first-of-type {
+  font-size: 1.2rem;
+}
+#landing h1 span:last-of-type {
+  font-size: 2rem;
+}
+
+.task-card {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.5rem;
+  align-items: center;
+  grid-template-areas: "task-title task-time" "task-description task-description" "task-requisites task-actions";
+}
+.task-card:not(:last-of-type) {
+  border-bottom: thin solid rgba(var(--text-color), 0.5);
+  padding-bottom: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+.task-card:last-of-type {
+  padding-bottom: 3rem;
+}
+.task-card h4 {
+  grid-area: task-title;
+  font-size: 1.2rem;
+}
+.task-card > sl-relative-time {
+  grid-area: task-time;
+  font-size: 0.8rem;
+  color: rgba(var(--text-color), 0.6);
+  text-align: end;
+}
+.task-card p {
+  grid-area: task-description;
+  font-size: 0.9rem;
+  color: rgba(var(--text-color), 0.8);
+}
+.task-card ul {
+  grid-area: task-requisites;
+}
+.task-card ul li {
+  font-size: 0.9rem;
+  color: rgba(var(--text-color), 0.8);
+  font-weight: 500;
+}
+.task-card ul li:not(:last-of-type)::after {
+  content: "•";
+  margin-left: 0.3rem;
+}
+.task-card .button {
+  grid-area: task-actions;
+}
+
+#profile {
+  text-align: center;
+}
+#profile sm-form {
+  margin: auto;
+  width: min(32rem, 100%);
+}
+
+#task_popup sm-chips {
+  background-color: transparent;
+  padding: 0;
+}
+#task_popup sm-chips sm-chip {
+  --background: rgba(var(--text-color), 0.06) ;
+}
+
+@media screen and (max-width: 40rem) {
+  #landing section > div:first-of-type {
+    padding: 3rem 0;
+  }
+  #emblem {
+    display: none;
+  }
+  .task-card {
+    grid-template-areas: "task-title task-time" "task-description task-description" "task-requisites task-requisites" "task-actions task-actions";
+  }
+}
+@media screen and (min-width: 40rem) {
+  h1 {
+    font-size: 3rem;
+  }
+  h2 {
+    font-size: 2rem;
+  }
+  h3 {
+    font-size: 1.5rem;
+  }
+  h4 {
+    font-size: 1.2rem;
+  }
+  h5 {
+    font-size: 1rem;
+  }
+  h6 {
+    font-size: 0.9rem;
+  }
+  sm-popup {
+    --width: 24rem;
+  }
+  .popup__header {
+    grid-column: 1/-1;
+    padding: 1rem 1.5rem 0 1.5rem;
+  }
+  #app_body {
+    grid-template-columns: 4vw [main-margin-start] 4vw [inner-margin-start] 1fr [inner-margin-end] 4vw [main-margin-end] 4vw;
+  }
+  #main_header {
+    padding: 2rem 0;
+  }
+  #landing section {
+    display: grid;
+    grid-template-columns: 1fr 1.2fr;
+    gap: 8vw;
+  }
+  #landing section > div:first-of-type {
+    align-self: flex-start;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 40vh;
+  }
+  #landing section > div:first-of-type::after {
+    content: "";
+    position: absolute;
+    height: 12rem;
+    width: 0.1rem;
+    background-color: rgba(var(--text-color), 1);
+    right: 0;
+    align-self: center;
+    margin-top: 5rem;
+  }
+  #landing section > div:first-of-type #emblem {
+    position: absolute;
+    align-self: center;
+    right: -1.45rem;
+    width: 3rem;
+    height: 3rem;
+    stroke: rgba(var(--text-color), 1);
+    stroke-width: 0.1rem;
+    margin-top: 5rem;
+  }
+  #landing section > div:last-of-type {
+    margin-top: 3rem;
+  }
+  #home > section {
+    padding: 0 8vw;
+  }
+  #task_popup {
+    --width: 36rem;
+  }
+}
+@media (any-hover: hover) {
+  html {
+    /* Foreground, Background */
+    scrollbar-color: #888 transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 10px;
+    /* Mostly for vertical scrollbars */
+    height: 10px;
+    /* Mostly for horizontal scrollbars */
+  }
+  ::-webkit-scrollbar-thumb {
+    /* Foreground */
+    background: currentColor;
+  }
+  ::-webkit-scrollbar-track {
+    /* Background */
+    background: transparent;
+  }
+  .interactive:not([disabled]) {
+    transition: background-color 0.3s;
+  }
+  .interactive:not([disabled]):hover {
+    background-color: rgba(var(--text-color), 0.06);
+  }
+  button:not([disabled]),
+.button:not([disabled]) {
+    transition: background-color 0.3s, filter 0.3s;
+  }
+  button:not([disabled]):hover,
+.button:not([disabled]):hover {
+    filter: contrast(2);
+  }
+}
+@supports (overflow: overlay) {
+  body {
+    overflow: overlay;
+  }
+}
+.hidden {
+  display: none !important;
+}

index.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Internship@RanchiMall</title>
+    <link rel="stylesheet" href="css/main.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
+        rel="stylesheet">
+</head>
+
+<body class="hidden">
+    <sm-notifications id="notification_drawer"></sm-notifications>
+    <sm-popup id="confirmation_popup">
+        <h4 id="confirm_title"></h4>
+        <div id="confirm_message"></div>
+        <div class="flex align-center gap-0-5 margin-left-auto">
+            <button class="button cancel-button">Cancel</button>
+            <button class="button button--primary confirm-button">OK</button>
+        </div>
+    </sm-popup>
+    <div id="app_body"></div>
+    <sm-popup id="task_popup">
+        <header slot="header" class="popup__header">
+            <button class="popup__header__close" onclick="closePopup()">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <path
+                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
+                </svg>
+            </button>
+            <h3 id="task_popup__title"></h3>
+        </header>
+        <sm-form>
+            <div class="grid">
+                <label class="label" for="task_popup__title_input">Title*</label>
+                <sm-input name="title" id="task_popup__title_input" autofocus required></sm-input>
+            </div>
+            <div class="grid">
+                <label class="label" for="task_popup__description">Description*</label>
+                <sm-textarea name="description" id="task_popup__description" rows="3" required></sm-textarea>
+            </div>
+            <div class="flex-column gap-1">
+                <div class="flex-column flex-1 gap-0-3">
+                    <label class="label" for="task_popup__category">Category*</label>
+                    <sm-chips name="category" id="task_popup__category" class="flex-1" multiline>
+                        <sm-chip value="c00" selected="">Creative Writing</sm-chip>
+                        <sm-chip value="c01">Marketing</sm-chip>
+                        <sm-chip value="c02">Design</sm-chip>
+                        <sm-chip value="c03">Development</sm-chip>
+                        <sm-chip value="c04">Social Media Management</sm-chip>
+                        <sm-chip value="c05">Video Making</sm-chip>
+                        <sm-chip value="c06">Project Scouting & Capital Raising</sm-chip>
+                        <sm-chip value="c07">Investment & Finance</sm-chip>
+                    </sm-chips>
+                </div>
+                <div class="flex-column flex-1">
+                    <label class="label" for="task_popup__deadline">Deadline</label>
+                    <sm-input name="deadline" id="task_popup__deadline" type="date"></sm-input>
+                </div>
+            </div>
+            <div class="multi-state-button">
+                <button class="button button--primary" id="task_popup__submit" onclick="saveTask()"
+                    type="submit">Submit</button>
+            </div>
+        </sm-form>
+    </sm-popup>
+    <script id="floGlobals">
+        /* Constants for FLO blockchain operations !!Make sure to add this at beginning!! */
+        const floGlobals = {
+            blockchain: "FLO",
+            adminID: "FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf",
+            application: "TEST_MODE",
+            taskCategories: {
+                c00: 'Creative Writing',
+                c01: 'Marketing',
+                c02: 'Design',
+                c03: 'Development',
+                c04: 'Social Media Management',
+                c05: 'Video Making',
+                c06: 'Project Scouting & Capital Raising',
+                c07: 'Investment & Finance',
+            }
+        }
+    </script>
+    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
+    <script src="scripts/components.min.js"></script>
+    <script type="module"
+        src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.13.1/cdn/components/relative-time/relative-time.js"></script>
+    <script src="scripts/lib.min.js" type="text/javascript"></script>
+    <script src="scripts/floCrypto.min.js" type="text/javascript"></script>
+    <script src="scripts/btcOperator.min.js" type="text/javascript"></script>
+    <script src="scripts/floBlockchainAPI.min.js" type="text/javascript"></script>
+    <script src="scripts/compactIDB.min.js" type="text/javascript"></script>
+    <script src="scripts/floCloudAPI.min.js" type="text/javascript"></script>
+    <script src="scripts/floDapps.min.js" type="text/javascript"></script>
+    <script src="scripts/app.js"></script>
+</body>
+
+</html>