[Development] Front-end: User interface

[minayu416]

WIP

TODO List

• [ ] Develop interface by HTML, JS, CSS
• [ ] Design form to input data from users
• [ ] Call APIs (axios/fetch API) + Error handling
• [ ] Handle response and render back to interface
• [ ] Deploy to Github Page
• [ ] Test

Technology:

• Numeric Stepper -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number (Don't need to write by ownself) (Can set max and min)
• https://stackoverflow.com/questions/45396280/customizing-increment-arrows-on-input-of-type-number-using-css
• Cool UI Lib: https://uiverse.io/?fbclid=IwZXh0bgNhZW0CMTEAAR0F3MN_XP-4wgCt28TLa-VY68gztBc1gtIGwPm-qR29xFx1rAB6v-EZ5OQ_aem_w_YexvcP2h_9KQXC9d06lA

Figma

[minayu416]

Figma HTML code:

Left one

<div style="width: 393px; height: 682px; position: relative; background: #FFE3CA">
  <div style="width: 97px; height: 35px; left: 148px; top: 416px; position: absolute">
    <div style="width: 97px; height: 35px; left: 0px; top: 0px; position: absolute; background: #9C836A; border-radius: 10px; border: 1px #C18859 solid"></div>
    <div style="width: 57px; height: 14px; left: 22px; top: 8px; position: absolute; color: #FFF3E8; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">Submit</div>
  </div>
  <div style="height: 151px; left: 67px; top: 482px; position: absolute">
    <div style="width: 246px; height: 124px; left: 0px; top: 27px; position: absolute; background: #FFFBF8; border-radius: 10px; border: 1px #B59376 solid"></div>
    <div style="left: 97px; top: 0px; position: absolute; color: #9C836A; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">Result</div>
  </div>
  <div style="width: 298px; height: 119px; left: 47px; top: 18px; position: absolute">
    <div style="width: 298px; height: 73px; left: 0px; top: 46px; position: absolute">
      <div style="width: 89px; height: 29px; left: 0px; top: 0px; position: absolute">
        <div style="width: 89px; height: 29px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 7px; border: 1px #B59376 solid"></div>
        <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0.81px; position: absolute">
          <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0px; position: absolute; background: #9C836A; border-radius: 7px; border: 1px #C18859 solid"></div>
          <div style="width: 7.18px; height: 14.71px; left: 12.65px; top: 4.83px; position: absolute; color: #FFFBF8; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">1</div>
        </div>
        <div style="width: 37.04px; height: 18.53px; left: 46.08px; top: 4.83px; position: absolute; color: #B59376; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">3, 4</div>
      </div>
      <div style="width: 89px; height: 29px; left: 105px; top: 0px; position: absolute">
        <div style="width: 89px; height: 29px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 7px; border: 1px #B59376 solid"></div>
        <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0.81px; position: absolute">
          <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0px; position: absolute; background: #9C836A; border-radius: 7px; border: 1px #C18859 solid"></div>
          <div style="width: 7.18px; height: 14.71px; left: 12.65px; top: 4.83px; position: absolute; color: #FFFBF8; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">2</div>
        </div>
        <div style="width: 44px; height: 18px; left: 39px; top: 5px; position: absolute; color: #B59376; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">1, 2, 6</div>
      </div>
      <div style="width: 89px; height: 29px; left: 208px; top: 0px; position: absolute">
        <div style="width: 89px; height: 29px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 7px; border: 1px #B59376 solid"></div>
        <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0.81px; position: absolute">
          <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0px; position: absolute; background: #9C836A; border-radius: 7px; border: 1px #C18859 solid"></div>
          <div style="width: 7.18px; height: 14.71px; left: 12.65px; top: 4.83px; position: absolute; color: #FFFBF8; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">3</div>
        </div>
        <div style="width: 47px; height: 18px; left: 36px; top: 5px; position: absolute; color: #B59376; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">3, 5, 6</div>
      </div>
      <div style="width: 89px; height: 29px; left: 0px; top: 44px; position: absolute">
        <div style="width: 89px; height: 29px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 7px; border: 1px #B59376 solid"></div>
        <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0.81px; position: absolute">
          <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0px; position: absolute; background: #9C836A; border-radius: 7px; border: 1px #C18859 solid"></div>
          <div style="width: 7.18px; height: 14.71px; left: 12.65px; top: 4.83px; position: absolute; color: #FFFBF8; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">4</div>
        </div>
        <div style="width: 37.04px; height: 18.53px; left: 46.08px; top: 4.83px; position: absolute; color: #B59376; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">4, 5</div>
      </div>
      <div style="width: 89px; height: 29px; left: 106px; top: 43px; position: absolute">
        <div style="width: 89px; height: 29px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 7px; border: 1px #B59376 solid"></div>
        <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0.81px; position: absolute">
          <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0px; position: absolute; background: #9C836A; border-radius: 7px; border: 1px #C18859 solid"></div>
          <div style="width: 7.18px; height: 14.71px; left: 12.65px; top: 4.83px; position: absolute; color: #FFFBF8; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">5</div>
        </div>
        <div style="width: 37.04px; height: 18.53px; left: 46.08px; top: 4.83px; position: absolute; color: #B59376; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">3, 4</div>
      </div>
      <div style="width: 89px; height: 29px; left: 209px; top: 42px; position: absolute">
        <div style="width: 89px; height: 29px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 7px; border: 1px #B59376 solid"></div>
        <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0.81px; position: absolute">
          <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0px; position: absolute; background: #9C836A; border-radius: 7px; border: 1px #C18859 solid"></div>
          <div style="width: 7.18px; height: 14.71px; left: 12.65px; top: 4.83px; position: absolute; color: #FFFBF8; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">6</div>
        </div>
        <div style="width: 48px; height: 18px; left: 35px; top: 5px; position: absolute; color: #B59376; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">2, 4 ,6</div>
      </div>
    </div>
    <div style="left: 52px; top: 0px; position: absolute; color: #9C836A; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">Horse Race Predictor</div>
  </div>
  <div style="width: 354px; height: 239px; left: 20px; top: 159px; position: absolute">
    <div style="left: 126px; top: 0px; position: absolute; color: #9C836A; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">Competitors</div>
    <div style="width: 354px; height: 41px; left: 0px; top: 35px; position: absolute">
      <div style="width: 32px; height: 32px; left: 0px; top: 5px; position: absolute">
        <div style="width: 32px; height: 32px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 10px; border: 1px #9C836A solid"></div>
        <div style="width: 11.97px; height: 24.52px; left: 10px; top: 5px; position: absolute; color: #B59376; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">1</div>
      </div>
      <div style="width: 206px; height: 41px; left: 65px; top: 0px; position: absolute">
        <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 35px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 70px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 105px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 140px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 175px; top: 1px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
      </div>
      <div style="width: 64px; height: 29px; left: 290px; top: 6px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
    </div>
    <div style="width: 354px; height: 41px; left: 0px; top: 90px; position: absolute">
      <div style="width: 32px; height: 32px; left: 0px; top: 5px; position: absolute">
        <div style="width: 32px; height: 32px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 10px; border: 1px #9C836A solid"></div>
        <div style="width: 11.97px; height: 24.52px; left: 10px; top: 5px; position: absolute; color: #B59376; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">2</div>
      </div>
      <div style="width: 206px; height: 41px; left: 65px; top: 0px; position: absolute">
        <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 35px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 70px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 105px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 140px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 175px; top: 1px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
      </div>
      <div style="width: 64px; height: 29px; left: 290px; top: 7px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
    </div>
    <div style="width: 354px; height: 41px; left: 0px; top: 141px; position: absolute">
      <div style="width: 32px; height: 32px; left: 0px; top: 5px; position: absolute">
        <div style="width: 32px; height: 32px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 10px; border: 1px #9C836A solid"></div>
        <div style="width: 11.97px; height: 24.52px; left: 10px; top: 5px; position: absolute; color: #B59376; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">3</div>
      </div>
      <div style="width: 206px; height: 41px; left: 65px; top: 0px; position: absolute">
        <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 35px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 70px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 105px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 140px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 175px; top: 1px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
      </div>
      <div style="width: 64px; height: 29px; left: 290px; top: 7px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
    </div>
    <div style="width: 354px; height: 41px; left: 0px; top: 198px; position: absolute">
      <div style="width: 32px; height: 32px; left: 0px; top: 5px; position: absolute">
        <div style="width: 32px; height: 32px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 10px; border: 1px #9C836A solid"></div>
        <div style="width: 11.97px; height: 24.52px; left: 10px; top: 5px; position: absolute; color: #B59376; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">4</div>
      </div>
      <div style="width: 206px; height: 41px; left: 65px; top: 0px; position: absolute">
        <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 35px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 70px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 105px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 140px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 175px; top: 1px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
      </div>
      <div style="width: 64px; height: 29px; left: 290px; top: 7px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
    </div>
  </div>
</div>

Right one:

<div style="width: 393px; height: 682px; position: relative; background: #FFE3CA">
  <div style="width: 97px; height: 35px; left: 148px; top: 416px; position: absolute">
    <div style="width: 97px; height: 35px; left: 0px; top: 0px; position: absolute; background: #9C836A; border-radius: 10px; border: 1px #C18859 solid"></div>
    <div style="width: 57px; height: 14px; left: 22px; top: 8px; position: absolute; color: #FFF3E8; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">Submit</div>
  </div>
  <div style="height: 151px; left: 67px; top: 482px; position: absolute">
    <div style="width: 246px; height: 124px; left: 0px; top: 27px; position: absolute; background: #FFFBF8; border-radius: 10px; border: 1px #B59376 solid"></div>
    <div style="left: 97px; top: 0px; position: absolute; color: #9C836A; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">Result</div>
  </div>
  <div style="width: 298px; height: 119px; left: 47px; top: 18px; position: absolute">
    <div style="width: 298px; height: 73px; left: 0px; top: 46px; position: absolute">
      <div style="width: 89px; height: 29px; left: 0px; top: 0px; position: absolute">
        <div style="width: 89px; height: 29px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 7px; border: 1px #B59376 solid"></div>
        <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0.81px; position: absolute">
          <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0px; position: absolute; background: #9C836A; border-radius: 7px; border: 1px #C18859 solid"></div>
          <div style="width: 7.18px; height: 14.71px; left: 12.65px; top: 4.83px; position: absolute; color: #FFFBF8; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">1</div>
        </div>
        <div style="width: 37.04px; height: 18.53px; left: 46.08px; top: 4.83px; position: absolute; color: #B59376; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">3, 4</div>
      </div>
      <div style="width: 89px; height: 29px; left: 105px; top: 0px; position: absolute">
        <div style="width: 89px; height: 29px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 7px; border: 1px #B59376 solid"></div>
        <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0.81px; position: absolute">
          <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0px; position: absolute; background: #9C836A; border-radius: 7px; border: 1px #C18859 solid"></div>
          <div style="width: 7.18px; height: 14.71px; left: 12.65px; top: 4.83px; position: absolute; color: #FFFBF8; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">2</div>
        </div>
        <div style="width: 44px; height: 18px; left: 39px; top: 5px; position: absolute; color: #B59376; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">1, 2, 6</div>
      </div>
      <div style="width: 89px; height: 29px; left: 208px; top: 0px; position: absolute">
        <div style="width: 89px; height: 29px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 7px; border: 1px #B59376 solid"></div>
        <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0.81px; position: absolute">
          <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0px; position: absolute; background: #9C836A; border-radius: 7px; border: 1px #C18859 solid"></div>
          <div style="width: 7.18px; height: 14.71px; left: 12.65px; top: 4.83px; position: absolute; color: #FFFBF8; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">3</div>
        </div>
        <div style="width: 47px; height: 18px; left: 36px; top: 5px; position: absolute; color: #B59376; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">3, 5, 6</div>
      </div>
      <div style="width: 89px; height: 29px; left: 0px; top: 44px; position: absolute">
        <div style="width: 89px; height: 29px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 7px; border: 1px #B59376 solid"></div>
        <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0.81px; position: absolute">
          <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0px; position: absolute; background: #9C836A; border-radius: 7px; border: 1px #C18859 solid"></div>
          <div style="width: 7.18px; height: 14.71px; left: 12.65px; top: 4.83px; position: absolute; color: #FFFBF8; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">4</div>
        </div>
        <div style="width: 37.04px; height: 18.53px; left: 46.08px; top: 4.83px; position: absolute; color: #B59376; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">4, 5</div>
      </div>
      <div style="width: 89px; height: 29px; left: 106px; top: 43px; position: absolute">
        <div style="width: 89px; height: 29px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 7px; border: 1px #B59376 solid"></div>
        <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0.81px; position: absolute">
          <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0px; position: absolute; background: #9C836A; border-radius: 7px; border: 1px #C18859 solid"></div>
          <div style="width: 7.18px; height: 14.71px; left: 12.65px; top: 4.83px; position: absolute; color: #FFFBF8; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">5</div>
        </div>
        <div style="width: 37.04px; height: 18.53px; left: 46.08px; top: 4.83px; position: absolute; color: #B59376; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">3, 4</div>
      </div>
      <div style="width: 89px; height: 29px; left: 209px; top: 42px; position: absolute">
        <div style="width: 89px; height: 29px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 7px; border: 1px #B59376 solid"></div>
        <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0.81px; position: absolute">
          <div style="width: 32.33px; height: 28.19px; left: 0px; top: 0px; position: absolute; background: #9C836A; border-radius: 7px; border: 1px #C18859 solid"></div>
          <div style="width: 7.18px; height: 14.71px; left: 12.65px; top: 4.83px; position: absolute; color: #FFFBF8; font-size: 16px; font-family: Inter; font-weight: 400; word-wrap: break-word">6</div>
        </div>
        <div style="width: 48px; height: 18px; left: 35px; top: 5px; position: absolute; color: #B59376; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">2, 4 ,6</div>
      </div>
    </div>
    <div style="left: 52px; top: 0px; position: absolute; color: #9C836A; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">Horse Race Predictor</div>
  </div>
  <div style="width: 354px; height: 239px; left: 20px; top: 159px; position: absolute">
    <div style="left: 126px; top: 0px; position: absolute; color: #9C836A; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">Competitors</div>
    <div style="width: 354px; height: 41px; left: 0px; top: 35px; position: absolute">
      <div style="width: 32px; height: 32px; left: 0px; top: 5px; position: absolute">
        <div style="width: 32px; height: 32px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 10px; border: 1px #9C836A solid"></div>
        <div style="width: 11.97px; height: 24.52px; left: 10px; top: 5px; position: absolute; color: #B59376; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">1</div>
      </div>
      <div style="width: 206px; height: 41px; left: 65px; top: 0px; position: absolute">
        <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 35px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 70px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 105px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 140px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 175px; top: 1px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
      </div>
      <div style="width: 64px; height: 29px; left: 290px; top: 6px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
    </div>
    <div style="width: 354px; height: 41px; left: 0px; top: 90px; position: absolute">
      <div style="width: 32px; height: 32px; left: 0px; top: 5px; position: absolute">
        <div style="width: 32px; height: 32px; left: 0px; top: 0px; position: absolute; background: #9C836A; border-radius: 10px; border: 1px #9C836A solid"></div>
        <div style="width: 11.97px; height: 24.52px; left: 10px; top: 5px; position: absolute; color: #FFFBF8; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">6</div>
      </div>
      <div style="width: 206px; height: 41px; left: 65px; top: 0px; position: absolute">
        <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 35px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 70px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 105px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 140px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 175px; top: 1px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
      </div>
      <div style="width: 64px; height: 29px; left: 290px; top: 7px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
    </div>
    <div style="width: 354px; height: 41px; left: 0px; top: 141px; position: absolute">
      <div style="width: 32px; height: 32px; left: 0px; top: 5px; position: absolute">
        <div style="width: 32px; height: 32px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 10px; border: 1px #9C836A solid"></div>
        <div style="width: 11.97px; height: 24.52px; left: 10px; top: 5px; position: absolute; color: #B59376; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">3</div>
      </div>
      <div style="width: 206px; height: 41px; left: 65px; top: 0px; position: absolute">
        <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 35px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 70px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 105px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 140px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 175px; top: 1px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
      </div>
      <div style="width: 64px; height: 29px; left: 290px; top: 7px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
    </div>
    <div style="width: 354px; height: 41px; left: 0px; top: 198px; position: absolute">
      <div style="width: 32px; height: 32px; left: 0px; top: 5px; position: absolute">
        <div style="width: 32px; height: 32px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 10px; border: 1px #9C836A solid"></div>
        <div style="width: 11.97px; height: 24.52px; left: 10px; top: 5px; position: absolute; color: #B59376; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">4</div>
      </div>
      <div style="width: 206px; height: 41px; left: 65px; top: 0px; position: absolute">
        <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 35px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 70px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 105px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 140px; top: 0px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
        <div style="width: 31px; height: 40px; left: 175px; top: 1px; position: absolute">
          <div style="width: 31px; height: 40px; left: 0px; top: 0px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
          <div style="width: 31px; height: 25px; left: 0px; top: 8px; position: absolute; background: #FFFBF8; border: 1px #B59376 solid"></div>
        </div>
      </div>
      <div style="width: 64px; height: 29px; left: 290px; top: 7px; position: absolute; background: #FFFBF8; border-radius: 5px; border: 1px #B59376 solid"></div>
    </div>
  </div>
  <div style="left: 96px; top: 259px; position: absolute; color: #B59376; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">1</div>
  <div style="left: 271px; top: 259px; position: absolute; color: #B59376; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">1</div>
  <div style="left: 324px; top: 262px; position: absolute; color: #B59376; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word">3000</div>
  <div style="left: 129px; top: 258px; position: absolute; color: #B59376; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">0</div>
  <div style="left: 164px; top: 258px; position: absolute; color: #B59376; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">0</div>
  <div style="left: 199px; top: 258px; position: absolute; color: #B59376; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">0</div>
  <div style="left: 234px; top: 258px; position: absolute; color: #B59376; font-size: 20px; font-family: Inter; font-weight: 700; word-wrap: break-word">1</div>
</div>