Spaces:

aniket9909
/

pdf

Running

App Files Files Community

aniket9909 commited on Dec 11, 2025

Commit

6ea55b0

verified ·

1 Parent(s): 36354ac

Upload report_template.html

Browse files

Files changed (1) hide show

report_template.html +993 -0

report_template.html ADDED Viewed

	@@ -0,0 +1,993 @@

+<!DOCTYPE html>
+<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
+   ============================== */
+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 !important;
+    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 !important;
+    width: 0%;
+    border-radius: 30px 0 0 30px !important;
+    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 !important;
+}
+/* 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 !important;
+        print-color-adjust: exact !important;
+        color-adjust: exact !important;
+    }
+    @page {
+        size: A4 portrait;
+        margin: 0;
+    }
+    .page:first-of-type {
+    padding-top: 6mm !important;
+}
+/* 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 !important;
+    flex-direction: column;
+    align-items: center;
+    gap: 14px;
+    margin-top: 6px !important;
+}
+/* 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 !important;
+    padding-bottom: 10mm !important; /* prevents text clipping */
+}
+/* Reduce spacing above the 'DETAILED REPORT SUMMARY' bar */
+.page:nth-of-type(2) .section-title {
+    margin-top: 3mm !important;
+    margin-bottom: 8mm !important;
+}
+/* Compact sections so HydroFacial text fits on page */
+.page:nth-of-type(2) h2 {
+    margin-top: 6mm !important;
+    margin-bottom: 2mm !important;
+}
+.page:nth-of-type(2) .desc {
+    margin-bottom: 10px !important;
+    line-height: 22px !important;
+}
+.page:nth-of-type(2) .card {
+    margin: 20px 0 !important;
+    padding: 22px !important;
+}
+.page:nth-of-type(2) .label {
+    margin-bottom: 6px !important;
+}
+/* Pull entire Wrinkles page upward so full card fits */
+.page:nth-of-type(2) {
+    padding-top: 2mm !important; /* reduces empty top space */
+}
+.page:nth-of-type(2) .section-title {
+    margin-top: 1mm !important; /* moves the title upward */
+}
+/* Make the share wrapper center itself inside its parent */
+.page:last-of-type .share-wrapper {
+    width: 100% !important;
+    display: flex !important;
+    justify-content: center !important;
+    align-items: center !important;
+}
+.page:last-of-type .share-wrapper img {
+    margin: 0 auto !important;
+    display: block !important;
+}
+.page:first-of-type .logo {
+    max-height: 120px !important;
+    margin-top: 0mm !important;
+    margin-bottom: 4mm !important;
+}
+.page:first-of-type .top-grid img {
+    height: 140px !important; /* your original height */
+}
+.page:nth-of-type(2) .contact-icons {
+    gap: 14px !important; /* Tighter spacing in PDF */
+}
+.page:nth-of-type(2) .contact-icons .ci {
+    gap: 4px !important;
+}
+/* Ensure links stay black in PDF */
+.page:nth-of-type(2) .contact-row a {
+    color: black !important;
+    -webkit-print-color-adjust: exact !important;
+}
+    html, body {
+        width: 100%;
+        height: auto !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        overflow: visible !important;
+    }
+    /* Each .page becomes a real A4 sheet */
+    .page {
+        width: 210mm !important;
+        height: 297mm !important;
+        padding: 18mm 14mm !important; /* balanced margins */
+        height: auto;
+        box-sizing: border-box !important;
+        page-break-before: always !important;
+        page-break-after: always !important;
+        overflow: hidden !important;
+        position: relative !important;
+    }
+    /* 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 !important;
+        break-inside: avoid !important;
+    }
+    /* Fix images shrinking or jumping */
+    img {
+        max-width: 100% !important;
+        height: auto !important;
+        display: block;
+    }
+    /* Ensure grid images stay in place */
+    .top-grid img {
+        page-break-inside: avoid !important;
+    }
+    /* Keep color icons visible (Instagram, Facebook, etc.) */
+    /* Keep social icons white in PDF */
+.social-icons img {
+    filter: brightness(0) invert(1) !important;
+    -webkit-filter: brightness(0) invert(1) !important;
+}
+    /* Remove weird blank pages caused by margins */
+    .page:last-child {
+        page-break-after: auto !important;
+    }
+}
+</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>
+        <div class="line"></div>
+    </div>
+    <div class="info-item">
+        <label>Age:</label>
+        <div class="line small"></div>
+    </div>
+    <div class="info-item">
+        <label>Phone Number:</label>
+        <div class="line"></div>
+    </div>
+    <div class="info-item gender-row">
+        <label>Gender:</label>
+        <span class="gender-box"></span> Male
+        <span class="gender-box"></span> Female
+        <span class="gender-box"></span> Other
+    </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 &nbsp;&nbsp;&nbsp; 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>