Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>YOUV.AI Skin Analysis Report</title> | |
| <!-- DM Sans Font --> | |
| <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* ============================== | |
| NORMAL SCREEN STYLES | |
| ============================== */ | |
| .info-value { | |
| font-weight: 500; | |
| margin-left: 6px; | |
| } | |
| body { | |
| font-family: 'DM Sans', sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background: #ffffff; | |
| color: #000; | |
| } | |
| .contact-row img { | |
| width: 22px; | |
| height: 22px; | |
| vertical-align: middle; | |
| margin-right: 6px; | |
| position: relative; | |
| top: -2px; | |
| } | |
| .page { | |
| width: 100%; | |
| padding: 40px 60px; | |
| box-sizing: border-box; | |
| page-break-after: always; | |
| height: auto; | |
| } | |
| .logo { | |
| width: 260px; | |
| margin: 0 auto 10px auto; | |
| display: block; | |
| } | |
| .section-title { | |
| background: #e3c4b5; | |
| padding: 12px 0; | |
| width: 100%; | |
| text-align: center; | |
| font-size: 32px; | |
| font-weight: 500; | |
| letter-spacing: 3px; | |
| color: black; | |
| border-radius: 10px; | |
| margin: 20px 0 30px 0; | |
| font-family: 'Copperplate Gothic', 'Copperplate', serif; | |
| } | |
| .info-title { | |
| background: #e3c4b5; | |
| padding: 10px 0; | |
| width: 90%; | |
| text-align: center; | |
| font-size: 22px; | |
| font-weight: 500; | |
| color: black; | |
| border-radius: 8px; | |
| margin: 30px auto; | |
| font-family: 'Copperplate Gothic', 'Copperplate', serif; | |
| letter-spacing: 2px; | |
| } | |
| .top-grid { | |
| width: 100%; | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| grid-gap: 12px; | |
| margin: 20px 0 30px 0; | |
| } | |
| .top-grid img { | |
| width: 100%; | |
| height: 150px; | |
| object-fit: cover; | |
| border-radius: 6px; | |
| } | |
| .contact-row { | |
| text-align: center; | |
| font-size: 22px; | |
| font-weight: 700; | |
| margin-bottom: 25px; | |
| line-height: 32px; | |
| } | |
| .contact-row span { | |
| font-size: 18px; | |
| font-weight: 400; | |
| } | |
| .score-pill { | |
| position: relative; | |
| width: 240px; | |
| height: 48px; | |
| border-radius: 30px; | |
| background: #e8c7b5 ; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-left: auto; | |
| margin-top: -40px; | |
| } | |
| .score-fill { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| background: #cb7b80 ; | |
| width: 0%; | |
| border-radius: 30px 0 0 30px ; | |
| z-index: 1; | |
| } | |
| .score-pill span { | |
| position: relative; | |
| z-index: 2; | |
| font-weight: 700; | |
| color: #3a2d2d; | |
| font-size: 20px; | |
| } | |
| h2 { | |
| font-size: 28px; | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| color: black; | |
| } | |
| .desc { | |
| font-size: 17px; | |
| color: black; | |
| font-style: italic; | |
| margin-bottom: 25px; | |
| width: 90%; | |
| line-height: 24px; | |
| } | |
| .card { | |
| background: #f3e9ea; | |
| padding: 30px; | |
| border-radius: 25px; | |
| margin: 40px 0; | |
| } | |
| .label { | |
| font-size: 20px; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| color: black; | |
| } | |
| .card p, .card li { | |
| font-size: 17px; | |
| color: black; | |
| } | |
| ul { | |
| margin-top: 5px; | |
| } | |
| .color-box-row { | |
| display: flex; | |
| gap: 8px; | |
| margin: 8px 0 14px 0; | |
| } | |
| .color-box { | |
| width: 36px; | |
| height: 22px; | |
| border-radius: 6px; | |
| background: #d08a8d; | |
| } | |
| .color-box:nth-child(2) { background: #d79a97; } | |
| .color-box:nth-child(3) { background: #e0b5a1; } | |
| .color-box:nth-child(4) { background: #e7c8b3; } | |
| .social-icons { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 26px; | |
| margin-top: 20px; | |
| } | |
| .social-icons img { | |
| width: 28px; | |
| filter: brightness(0) invert(1); | |
| } | |
| /* INFO GRID FIX */ | |
| .info-grid { | |
| width: 90%; | |
| margin: 20px auto 0 auto; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| column-gap: 40px; | |
| row-gap: 25px; | |
| font-size: 20px; | |
| } | |
| .info-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .info-item label { | |
| white-space: nowrap; | |
| font-weight: 500; | |
| } | |
| .line { | |
| flex: 1; | |
| height: 2px; | |
| background: black; | |
| margin-top: 4px; | |
| } | |
| .line.small { | |
| width: 120px; | |
| } | |
| .gender-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .gender-box { | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 4px; | |
| background: #e7c8b3; | |
| display: inline-block; | |
| margin-right: 4px; | |
| } | |
| /* Fix contact-row layout after logo removal */ | |
| .page:nth-of-type(2) .contact-row { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 6px; | |
| margin-top: 10px ; | |
| } | |
| /* Icons + text in a row like your example */ | |
| .page:nth-of-type(2) .contact-row span { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 18px; | |
| } | |
| .contact-icons { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 25px; /* Adjust spacing here */ | |
| margin-top: 4px; | |
| } | |
| .contact-icons .ci { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; /* space between icon + text */ | |
| font-size: 18px; | |
| } | |
| .contact-icons img { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| /* ========================================= | |
| PRINT STYLES — FIX PDF OUTPUT | |
| ========================================= */ | |
| /* ========================================= | |
| PERFECT A4 PRINT STYLESHEET (DO NOT EDIT UI) | |
| ========================================= */ | |
| @media print { | |
| /* Force exact colors and no print compression */ | |
| * { | |
| -webkit-print-color-adjust: exact ; | |
| print-color-adjust: exact ; | |
| color-adjust: exact ; | |
| } | |
| @page { | |
| size: A4 portrait; | |
| margin: 0; | |
| } | |
| .page:first-of-type { | |
| padding-top: 6mm ; | |
| } | |
| /* Pull Wrinkles page content upward */ | |
| /* --- PAGE 2 (Wrinkles Page) FIXES — CLEAN + CORRECT --- */ | |
| /* Fix contact-row layout after logo removal */ | |
| .page:nth-of-type(2) .contact-row { | |
| display: flex ; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 14px; | |
| margin-top: 6px ; | |
| } | |
| /* Make the icon row horizontal */ | |
| .page:nth-of-type(2) .contact-row span { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 40px; | |
| } | |
| /* Pull Wrinkles content upward (clean version) */ | |
| .page:nth-of-type(2) { | |
| padding-top: 5mm ; | |
| padding-bottom: 10mm ; /* prevents text clipping */ | |
| } | |
| /* Reduce spacing above the 'DETAILED REPORT SUMMARY' bar */ | |
| .page:nth-of-type(2) .section-title { | |
| margin-top: 3mm ; | |
| margin-bottom: 8mm ; | |
| } | |
| /* Compact sections so HydroFacial text fits on page */ | |
| .page:nth-of-type(2) h2 { | |
| margin-top: 6mm ; | |
| margin-bottom: 2mm ; | |
| } | |
| .page:nth-of-type(2) .desc { | |
| margin-bottom: 10px ; | |
| line-height: 22px ; | |
| } | |
| .page:nth-of-type(2) .card { | |
| margin: 20px 0 ; | |
| padding: 22px ; | |
| } | |
| .page:nth-of-type(2) .label { | |
| margin-bottom: 6px ; | |
| } | |
| /* Pull entire Wrinkles page upward so full card fits */ | |
| .page:nth-of-type(2) { | |
| padding-top: 2mm ; /* reduces empty top space */ | |
| } | |
| .page:nth-of-type(2) .section-title { | |
| margin-top: 1mm ; /* moves the title upward */ | |
| } | |
| /* Make the share wrapper center itself inside its parent */ | |
| .page:last-of-type .share-wrapper { | |
| width: 100% ; | |
| display: flex ; | |
| justify-content: center ; | |
| align-items: center ; | |
| } | |
| .page:last-of-type .share-wrapper img { | |
| margin: 0 auto ; | |
| display: block ; | |
| } | |
| .page:first-of-type .logo { | |
| max-height: 120px ; | |
| margin-top: 0mm ; | |
| margin-bottom: 4mm ; | |
| } | |
| .page:first-of-type .top-grid img { | |
| height: 140px ; /* your original height */ | |
| } | |
| .page:nth-of-type(2) .contact-icons { | |
| gap: 14px ; /* Tighter spacing in PDF */ | |
| } | |
| .page:nth-of-type(2) .contact-icons .ci { | |
| gap: 4px ; | |
| } | |
| /* Ensure links stay black in PDF */ | |
| .page:nth-of-type(2) .contact-row a { | |
| color: black ; | |
| -webkit-print-color-adjust: exact ; | |
| } | |
| html, body { | |
| width: 100%; | |
| height: auto ; | |
| margin: 0 ; | |
| padding: 0 ; | |
| overflow: visible ; | |
| } | |
| /* Each .page becomes a real A4 sheet */ | |
| .page { | |
| width: 210mm ; | |
| height: 297mm ; | |
| padding: 18mm 14mm ; /* balanced margins */ | |
| height: auto; | |
| box-sizing: border-box ; | |
| page-break-before: always ; | |
| page-break-after: always ; | |
| overflow: hidden ; | |
| position: relative ; | |
| } | |
| /* Prevent content splitting across pages */ | |
| h1, h2, p, img, .card, .desc, .score-pill, .contact-row, | |
| .section-title, .info-title, .top-grid, ul, li { | |
| page-break-inside: avoid ; | |
| break-inside: avoid ; | |
| } | |
| /* Fix images shrinking or jumping */ | |
| img { | |
| max-width: 100% ; | |
| height: auto ; | |
| display: block; | |
| } | |
| /* Ensure grid images stay in place */ | |
| .top-grid img { | |
| page-break-inside: avoid ; | |
| } | |
| /* Keep color icons visible (Instagram, Facebook, etc.) */ | |
| /* Keep social icons white in PDF */ | |
| .social-icons img { | |
| filter: brightness(0) invert(1) ; | |
| -webkit-filter: brightness(0) invert(1) ; | |
| } | |
| /* Remove weird blank pages caused by margins */ | |
| .page:last-child { | |
| page-break-after: auto ; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ====================================================== --> | |
| <!-- FIRST PAGE --> | |
| <!-- ====================================================== --> | |
| <div class="page"> | |
| <img src="logo.png" class="logo" /> | |
| <h1 style=" | |
| text-align:center; | |
| font-size:28px; | |
| letter-spacing:2px; | |
| margin-top:10px; | |
| font-weight:600; | |
| ">ATTRACTIVENESS INDEX (AI) REPORT</h1> | |
| <div class="top-grid"> | |
| <img src="img1.png" /> | |
| <img src="img2.png" /> | |
| <img src="img3.png" /> | |
| <img src="img4.png" /> | |
| <img src="img5.png" /> | |
| <img src="img6.png" /> | |
| </div> | |
| <p style=" | |
| font-size:18px; | |
| line-height:26px; | |
| width:90%; | |
| margin:0 auto; | |
| text-align:center; | |
| "> | |
| <span style="color:#673736; font-weight:700;">YOUV.AI</span> is | |
| <b>India’s first AI-powered Platform Backed by Experts</b>, | |
| helping in skin & hair analysis. With YOUV.AI, your clinic visit becomes | |
| smarter, faster, and tailored just for you. | |
| </p> | |
| <div class="info-title">YOUR INFORMATION</div> | |
| <div class="info-grid"> | |
| <div class="info-item"> | |
| <label>Full Name:</label> | |
| <span class="info-value">{{full_name}}</span> | |
| </div> | |
| <div class="info-item"> | |
| <label>Age:</label> | |
| <span class="info-value">{{age}}</span> | |
| </div> | |
| <div class="info-item"> | |
| <label>Phone Number:</label> | |
| <span class="info-value">{{phone}}</span> | |
| </div> | |
| <div class="info-item"> | |
| <label>Gender:</label> | |
| <span class="info-value">{{gender}}</span> | |
| </div> | |
| </div> | |
| </div> <!-- CLOSE FIRST PAGE --> | |
| <!-- ====================================================== --> | |
| <!-- WRINKLES PAGE --> | |
| <!-- ====================================================== --> | |
| <div class="page"> | |
| <div class="section-title">DETAILED REPORT SUMMARY</div> | |
| <div class="contact-row"> | |
| Book a consultation through YOUV.AI for further guidance<br> | |
| <div class="contact-icons"> | |
| <div class="ci"> | |
| <img src="phone-svgrepo-com.svg"> | |
| +91-9321962943 | |
| </div> | |
| <div class="ci"> | |
| <img src="web-svgrepo-com (1).svg"> | |
| <a href="https://www.youv.ai" target="_blank">www.youv.ai</a> | |
| </div> | |
| <div class="ci"> | |
| <img src="email-svgrepo-com.svg"> | |
| <a href="mailto:info@youv.ai">info@youv.ai</a> | |
| </div> | |
| </div> | |
| </div> | |
| <h2>Wrinkles</h2> | |
| <div class="score-pill"> | |
| <div class="score-fill" style="width: {{wrinkles_score}}%;"></div> | |
| <span>{{wrinkles_score}}</span> | |
| </div> | |
| <p class="desc"> | |
| Wrinkles are lines or folds on the skin caused by aging as collagen and elastin break down, reducing | |
| firmness and elasticity. Factors like sun exposure, facial movements, smoking, and dehydration | |
| speed up their appearance. | |
| </p> | |
| <div class="card"> | |
| <div class="label">Detected Severity</div> | |
| <div class="color-box-row"> | |
| <div class="color-box"></div><div class="color-box"></div><div class="color-box"></div> | |
| </div> | |
| <p>{{wrinkles_severity_label}}</p> | |
| <p><i>{{wrinkles_detected_text}}</i></p> | |
| <br> | |
| <div class="label">Grading (Wrinkle Severity Rating Scale – WSRS)</div> | |
| <div class="color-box-row"> | |
| <div class="color-box"></div><div class="color-box"></div><div class="color-box"></div><div class="color-box"></div> | |
| </div> | |
| <p>{{wrinkles_grade}}</p> | |
| <br> | |
| <div class="label">Recommendations</div> | |
| <ul> | |
| <li>Daily moisturization to keep skin hydrated</li> | |
| <li>Apply sunscreen before outdoor exposure</li> | |
| <li>Maintain consistent sleep schedule</li> | |
| <li>Include antioxidant-rich foods (berries, leafy greens)</li> | |
| <li>Non-invasive procedures (optional)*: mild peels, HydraFacial</li> | |
| </ul> | |
| <br> | |
| <div class="label">Mild Peels (Chemical Peels)</div> | |
| <p> | |
| A cosmetic treatment where a gentle chemical solution (like glycolic acid or lactic acid) is | |
| applied to the skin to exfoliate the outermost layer. It helps with dullness, mild pigmentation, | |
| and uneven skin tone. | |
| </p> | |
| <div class="label">HydraFacial</div> | |
| <p> | |
| A non-invasive facial treatment that uses a patented device to cleanse, exfoliate, extract | |
| impurities, and infuse the skin with hydrating serums. It improves hydration, radiance, | |
| and overall skin health. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- ====================================================== --> | |
| <!-- ACNE PAGE --> | |
| <!-- ====================================================== --> | |
| <div class="page"> | |
| <h2>Acne</h2> | |
| <div class="score-pill"> | |
| <div class="score-fill" style="width: {{acne_score}}%;"></div> | |
| <span>{{acne_score}}</span> | |
| </div> | |
| <p class="desc"> | |
| Acne is a skin condition in which pores become blocked by oil, dead skin cells, and bacteria. | |
| It appears in the form of blackheads, whiteheads, papules, pustules, nodules, or cysts. | |
| </p> | |
| <div class="card"> | |
| <div class="label">Detected Severity</div> | |
| <div class="color-box-row"> | |
| <div class="color-box"></div><div class="color-box"></div><div class="color-box"></div> | |
| </div> | |
| <p>{{acne_severity_label}}</p> | |
| <p><i>{{acne_detected_text}}</i></p> | |
| <br> | |
| <div class="label">Grading (Global Acne Grading System – GAGS)</div> | |
| <div class="color-box-row"> | |
| <div class="color-box"></div><div class="color-box"></div><div class="color-box"></div><div class="color-box"></div> | |
| </div> | |
| <p>{{acne_grade}}</p> | |
| <br> | |
| <div class="label">Recommendations</div> | |
| <ul> | |
| <li>Gentle cleansing and skincare</li> | |
| <li>Avoid picking to prevent scarring</li> | |
| <li>Consider non-invasive treatments (optional)*: chemical peels, acne facials </li> | |
| <li>Clinical options if needed: prescription topical medications</li> | |
| </ul> | |
| <div class="label">Chemical Peels</div> | |
| <p> | |
| A cosmetic treatment where a gentle chemical solution (like glycolic acid or lactic acid) is | |
| applied to the skin to exfoliate the outermost layer. It helps with dullness, mild pigmentation, | |
| and uneven skin tone. | |
| </p> | |
| <div class="label">Acne Facials</div> | |
| <p> | |
| An acne facial cleanses and exfoliates acne-prone skin, softens pores for extractions, | |
| soothes with a calming mask, applies targeted serums to control breakouts, and finishes | |
| with hydration and sun protection. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- ========================= PORES PAGE ========================= --> | |
| <div class="page"> | |
| <h2>Pore Prominence</h2> | |
| <div class="score-pill"> | |
| <div class="score-fill" style="width: {{pores_score}}%;"></div> | |
| <span>{{pores_score}}</span> | |
| </div> | |
| <p class="desc"> | |
| Pore prominence refers to visibly enlarged pores on the skin surface. They are tiny openings in | |
| the skin that release oil and sweat, but when they dilate, they become visible to the naked eye. | |
| They are most common on the nose, cheeks, and forehead, and usually linked to oiliness and | |
| acne-prone skin. | |
| </p> | |
| <div class="card"> | |
| <div class="label">Detected Severity</div> | |
| <div class="color-box-row"> | |
| <div class="color-box"></div><div class="color-box"></div><div class="color-box"></div> | |
| </div> | |
| <p>{{pores_severity_label}}</p> | |
| <p><i>{{pores_detected_text}}</i></p> | |
| <br> | |
| <div class="label">Grading (Clinical Assessment)</div> | |
| <div class="color-box-row"> | |
| <div class="color-box"></div><div class="color-box"></div><div class="color-box"></div><div class="color-box"></div> | |
| </div> | |
| <p>{{pores_grade}}</p> | |
| <br> | |
| <div class="label">Recommendations</div> | |
| <ul> | |
| <li>Clean skin after sweat or outdoor exposure</li> | |
| <li>Keep skin moisturized to balance oil</li> | |
| <li>Avoid heavy makeup that can clog pores</li> | |
| <li>Non-invasive treatments (optional)*: hydrafacials, mild exfoliating peels</li> | |
| </ul> | |
| <div class="label">HydraFacial</div> | |
| <p> | |
| A mechanized, non-invasive facial therapy combining vortex-assisted exfoliation, chemical | |
| peeling, and serum infusion. It removes corneocytes, clears sebum and debris from follicles, and | |
| delivers antioxidants and hyaluronic acid to enhance epidermal hydration and barrier function. | |
| </p> | |
| <div class="label">Mild Exfoliating Peels</div> | |
| <p> | |
| Superficial chemical peels (commonly alpha-hydroxy acids or beta-hydroxy acids) induce | |
| controlled keratocyte desquamation, promoting epidermal turnover, reducing | |
| hyperpigmentation, and stimulating mild dermal remodeling. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- ========================= PIGMENTATION PAGE ========================= --> | |
| <div class="page"> | |
| <h2>Pigmentation</h2> | |
| <div class="score-pill"> | |
| <div class="score-fill" style="width: {{pigmentation_score}}%;"></div> | |
| <span>{{pigmentation_score}}</span> | |
| </div> | |
| <p class="desc"> | |
| Pigmentation is uneven skin coloration caused by excessive melanin production in specific areas | |
| of the skin. It manifests as dark patches, melasma, freckles, age spots, or post-acne marks. | |
| </p> | |
| <div class="card"> | |
| <div class="label">Detected Severity</div> | |
| <div class="color-box-row"> | |
| <div class="color-box"></div><div class="color-box"></div><div class="color-box"></div> | |
| </div> | |
| <p>{{pig_severity_label}}</p> | |
| <p><i>{{pig_detected_text}}</i></p> | |
| <br> | |
| <div class="label">Grading (Clinical Assessment)</div> | |
| <div class="color-box-row"> | |
| <div class="color-box"></div><div class="color-box"></div><div class="color-box"></div><div class="color-box"></div> | |
| </div> | |
| <p>{{pigmentation_grade}}</p> | |
| <br> | |
| <div class="label">Recommendations</div> | |
| <ul> | |
| <li>Apply sunscreen daily</li> | |
| <li>Minimize direct sun exposure; use hats or shade</li> | |
| <li>Include vitamin C–rich fruits for natural skin brightness</li> | |
| <li>Maintain a simple skincare routine</li> | |
| <li>Non-invasive treatments (optional)*: skin-brightening masks, mild peels</li> | |
| </ul> | |
| <div class="label">Skin-Brightening Masks</div> | |
| <p> | |
| These masks work to reduce dullness, pigmentation, and uneven skin tone, nourishing the | |
| skin and leaving it visibly radiant and refreshed. | |
| </p> | |
| <div class="label">Mild Peels</div> | |
| <p> | |
| Mild chemical peels gently remove dead skin cells from the surface, promote cell renewal, | |
| improve texture and clarity, and enhance the skin’s natural glow without causing irritation. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- ========================= HYDRATION PAGE ========================= --> | |
| <div class="page"> | |
| <h2>Hydration</h2> | |
| <div class="score-pill"> | |
| <div class="score-fill" style="width: {{hydration_score}}%;"></div> | |
| <span>{{hydration_score}}</span> | |
| </div> | |
| <p class="desc"> | |
| Hydration measures how well the skin holds and maintains moisture. Proper hydration keeps the skin soft, | |
| smooth, and radiant, while poor hydration leads to dryness, flakiness, dullness, and visible fine lines. | |
| </p> | |
| <div class="card"> | |
| <div class="label">Detected Severity</div> | |
| <div class="color-box-row"> | |
| <div class="color-box"></div><div class="color-box"></div><div class="color-box"></div> | |
| </div> | |
| <p>{{hydration_severity_label}}</p> | |
| <p><i>{{hydration_detected_text}}</i></p> | |
| <br> | |
| <div class="label">Grading (Hydration Assessment Scale)</div> | |
| <div class="color-box-row"> | |
| <div class="color-box"></div><div class="color-box"></div><div class="color-box"></div><div class="color-box"></div> | |
| </div> | |
| <p>{{hydration_grade}}</p> | |
| <br> | |
| <div class="label">Recommendations</div> | |
| <ul> | |
| <li>Use a gentle, hydrating cleanser to avoid stripping the skin’s natural moisture.</li> | |
| <li>Apply a moisturizer on damp skin to lock in hydration.</li> | |
| <li>Drink plenty of water throughout the day to maintain internal hydration.</li> | |
| <li>Avoid hot showers and harsh soaps, which can increase dryness and irritation.</li> | |
| <li>Protect skin from sun exposure, because UV accelerates dehydration and dullness.</li> | |
| </ul> | |
| <div class="label">HydraFacial</div> | |
| <p> | |
| A gentle device-based treatment that deeply saturates the skin with hydrating serums, especially | |
| hyaluronic acid. It helps the skin retain moisture more effectively, improves softness, and gives an | |
| immediate, healthy glow by restoring water levels in the skin. | |
| </p> | |
| </div> | |
| <p style=" | |
| text-align:center; | |
| font-size:18px; | |
| margin-top:15px; | |
| color:#673736; | |
| font-weight:600; | |
| "> | |
| *Non-invasive procedures are optional and should be considered with professional guidance.* | |
| </p> | |
| </div> | |
| <!-- ========================= DISCLAIMER PAGE ========================= --> | |
| <div class="page"> | |
| <img src="logo.png" class="logo" /> | |
| <h1 style=" | |
| text-align:center; | |
| font-size:28px; | |
| letter-spacing:2px; | |
| margin-top:10px; | |
| font-weight:600; | |
| ">ATTRACTIVENESS INDEX (AI) REPORT</h1> | |
| <div style=" | |
| background:#e3c4b5; | |
| padding:12px 0; | |
| width:100%; | |
| text-align:center; | |
| font-size:28px; | |
| font-weight:500; | |
| color:black; | |
| border-radius:10px; | |
| margin:30px 0 30px 0; | |
| font-family:'Copperplate Gothic','Copperplate',serif; | |
| letter-spacing:2px; | |
| "> | |
| DISCLAIMER | |
| </div> | |
| <p style=" | |
| font-size:18px; | |
| line-height:28px; | |
| width:90%; | |
| margin:0 auto 20px auto; | |
| text-align:left; | |
| color:#333; | |
| "> | |
| The <b>YOUV.AI Aesthetic Index Report</b> of Skin Analysis is digitally generated and provided for | |
| informational and awareness purposes only. It is not intended to replace professional medical advice, | |
| diagnosis, or treatment. The results are based on algorithmic assessment of uploaded images and may | |
| vary due to lighting, image quality, or other external factors. | |
| </p> | |
| <p style=" | |
| font-size:18px; | |
| line-height:28px; | |
| width:90%; | |
| margin:0 auto 20px auto; | |
| text-align:left; | |
| color:#333; | |
| "> | |
| Users are advised to consult a qualified dermatologist or healthcare professional for personalized | |
| evaluation and treatments. | |
| </p> | |
| <p style=" | |
| font-size:18px; | |
| line-height:28px; | |
| width:90%; | |
| margin:0 auto 30px auto; | |
| text-align:left; | |
| color:#333; | |
| "> | |
| Check out our website <b><a href="https://www.youv.ai" target="_blank" style="color:#673736; text-decoration:none;">www.youv.ai</a></b> for more details. | |
| </p> | |
| <div class="share-wrapper" style="text-align:center; margin:40px 0 20px 0;"> | |
| <img src="share_now.png" style="width:260px;" /> | |
| </div> | |
| <p style=" | |
| text-align:center; | |
| font-size:20px; | |
| margin:10px 0; | |
| color:#333; | |
| "> | |
| Refer and Get <b>10% off</b> on the next report<br> | |
| Code: <b>YOUV.AI10</b> | |
| </p> | |
| <div style=" | |
| width:100%; | |
| height:180px; | |
| background:#9c7576; | |
| border-top-left-radius:150px; | |
| border-top-right-radius:150px; | |
| margin-top:40px; | |
| padding-top:40px; | |
| text-align:center; | |
| color:white; | |
| "> | |
| <div style="font-size:18px; margin-bottom:10px;"> | |
| +91-9321962943 info@youv.ai | |
| </div> | |
| <div class="social-icons"> | |
| <a href="https://www.instagram.com/youv.ai_/" target="_blank"><img src="instagram.svg"></a> | |
| <a href="https://www.facebook.com/profile.php?id=61579066716345" target="_blank"><img src="facebook.svg"></a> | |
| <a href="https://www.youtube.com/channel/UCZi2N5Joyv1yXP3octOBkPw" target="_blank"><img src="youtube.svg"></a> | |
| <a href="https://www.linkedin.com/company/youv-ai/" target="_blank"> | |
| <img src="https://img.icons8.com/ios-filled/50/1A1A1A/linkedin.png" alt="linkedin"> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |