Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
6.8 kB
0
Indexable
Never
<head>
  <title>Bektita</title>
  <link rel="icon" type="image/x-icon" href="https://cdn.discordapp.com/attachments/1022211441824116831/1116057481743978546/people.png">
</head>

<div class="formbold-main-wrapper">
  
  <div class="formbold-form-wrapper">
    <div class="formbold-event-wrapper">
      <span>Powered by AI</span>
      <h3>ব্যক্তিতা</h3>
      
         <img src="https://cdn.discordapp.com/attachments/1022211441824116831/1109819242423005214/aesthetic-anime.gif" width="550">
<h4>What you’ll learn</h4>
      <p> Check Your Personality 
        and discover your unique personality type, understand your strengths and weaknesses, and apply this knowledge to enhance relationships, career choices, and personal growth.
        Begin your transformative journey today. </p>

      <div class="formbold-event-details">
        <h5>MBTI Details</h5>

        <ul>
          <li>
            <svg
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g clip-path="url(#clip0_1675_1725)">
               
              </g>
              <defs>
                <clipPath id="clip0_1675_1725">
                  <rect width="18" height="18" fill="white" />
                </clipPath>
              </defs>
            </svg>
            Extraversion (E)  <br> Introversion (I)
          </li>
          <li>
            <svg
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              
              
            </svg>
            Sensing (S) <br> Intuition (N)
          </li>
          <li>
            <svg
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              
              <defs>
                <clipPath id="clip0_1675_1730">
                  <rect width="18" height="18" fill="white" />
                </clipPath>
              </defs>
            </svg>
            Thinking (T) <br> Feeling (F)

          </li>
          <li>
            <svg
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              
                
              
            </svg>
            Judging (J) <br> Perceiving (P)
          </li>
        </ul>
      </div>
    </div>

    <form action="{% url 'home' %}" method="POST">
      {% csrf_token %}
      <h1 class="formbold-form-title">Explore Yourself!
      </h1>

      <div>
        <label for="input_string" class="formbold-form-label"> Input your feelings. Take the first step towards self-discovery! </label>
        <input
          type="text"
          name="input_string"
          id="string"
          class="formbold-form-input"
        />
      </div>
      <button class="formbold-btn">Submit </button>
    </form>
    
    {% if personality %}
    <div class="formbold-event-details">
      <h5>Your Personality:</h5>

      <ul>
        <li>
          
          {{ personality }}
          {{ scores }}
      </ul>
    </div>
  </div>
  {% endif %}
















  </div>
</div>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Inter', sans-serif;
    background-color: #D1F2EB;
  
  }
  .formbold-main-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
  }

  .formbold-form-wrapper {
    margin: 0 auto;
    max-width: 550px;
    width: 100%;
    background: #D1F2EB;
  }

  .formbold-event-wrapper span {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 2.5px;
    color: #625be2;
    display: inline-block;
    margin-bottom: 12px;
  }
  .formbold-event-wrapper h3 {
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    color: #07074d;
    width: 60%;
    margin-bottom: 15px;
  }
  .formbold-event-wrapper h4 {
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #07074d;
    width: 60%;
    margin: 25px 0 15px;
  }
  .formbold-event-wrapper p {
    font-size: 16px;
    line-height: 24px;
    color: #536387;
  }

  .formbold-event-details {
    background: #fafafa;
    border: 1px solid #dde3ec;
    border-radius: 5px;
    margin: 25px 0 30px;
  }
  .formbold-event-details h5 {
    color: #07074d;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    padding: 15px 25px;
  }
  .formbold-event-details ul {
    border-top: 1px solid #edeef2;
    padding: 25px;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    row-gap: 14px;
  }
  .formbold-event-details ul li {
    color: #536387;
    font-size: 16px;
    line-height: 24px;
    width: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .formbold-form-title {
    color: #07074d;
    font-weight: 600;
    font-size: 28px;
    line-height: 35px;
    width: 60%;
    margin-bottom: 30px;
  }

  .formbold-input-flex {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
  }
  .formbold-input-flex > div {
    width: 50%;
  }
  .formbold-form-input {
    text-align: center;
    width: 100%;
    padding: 13px 22px;
    border-radius: 5px;
    border: 1px solid #dde3ec;
    background: #ffffff;
    font-weight: 500;
    font-size: 16px;
    color: #536387;
    outline: none;
    resize: none;
  }
  .formbold-form-input:focus {
    border-color: #6a64f1;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
  }
  .formbold-form-label {
    color: #536387;
    font-size: 14px;
    line-height: 24px;
    display: block;
    margin-bottom: 10px;
  }

  .formbold-policy {
    font-size: 14px;
    line-height: 24px;
    color: #536387;
    width: 70%;
    margin-top: 22px;
  }
  .formbold-policy a {
    color: #6a64f1;
  }
  .formbold-btn {
    text-align: center;
    width: 100%;
    font-size: 16px;
    border-radius: 5px;
    padding: 14px 25px;
    border: none;
    font-weight: 500;
    background-color: #6a64f1;
    color: white;
    cursor: pointer;
    margin-top: 25px;
  }
  .formbold-btn:hover {
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
  }
</style>