Untitled
unknown
plain_text
2 years ago
6.8 kB
3
Indexable
<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>Editor is loading...