utils_html.py

HTML_TEMPLATE = """
<style>
    body {
        background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
    }
    #app-header {
        text-align: center;
        background: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        position: relative; /* To position the artifacts */
    }
    #app-header h1 {
        color: #4CAF50;
        font-size: 2em;
        margin-bottom: 10px;
    }
    .concept {
        position: relative;
        transition: transform 0.3s;
    }
    .concept:hover {
        transform: scale(1.1);
    }
    .concept img {
        width: 100px;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .concept-description {
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #4CAF50;
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .concept:hover .concept-description {
        opacity: 1;
    }
    /* Artifacts */
    .artifact {
        position: absolute;
        background: rgba(76, 175, 80, 0.1); /* Semi-transparent green */
        border-radius: 50%; /* Make it circular */
    }
    .artifact.large {
        width: 300px;
        height: 300px;
        top: -50px;
        left: -150px;
    }
    .artifact.medium {
        width: 200px;
        height: 200px;
        bottom: -50px;
        right: -100px;
    }
    .artifact.small {
        width: 100px;
        height: 100px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<div id="app-header">
    <!-- Artifacts -->
    <div class="artifact large"></div>
    <div class="artifact medium"></div>
    <div class="artifact small"></div>
    <!-- Content -->
    <h1>Casa AI</h1>
    <p>ReImagine your spaces.</p>
    <div style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
        <div class="concept">
            <img src="https://github.com/Capybara-AI/Image-Caption-Editor/assets/11761529/5f6668df-7806-4b25-8d3e-ab1d51940a4d" alt="Rustic Style">
            <div class="concept-description">Rustic and Farmhouse</div>
        </div>
        <div class="concept">
            <img src="https://github.com/Capybara-AI/Image-Caption-Editor/assets/11761529/8e656841-df89-446b-9285-9532dab23023" alt="Art Deco">
            <div class="concept-description">Art Deco and Coastal</div>
        </div>
        <div class="concept">
            <img src="https://github.com/Capybara-AI/Image-Caption-Editor/assets/11761529/526ae86d-4c1c-496c-b2c3-cd808ffc6161" alt="Scandinavian">
            <div class="concept-description">Minimalist Scandinavian</div>
        </div>
        <div class="concept">
            <img src="https://github.com/Capybara-AI/Image-Caption-Editor/assets/11761529/503760a4-412c-455d-a5fa-27b616e25ca8" alt="Japanese">
            <div class="concept-description">Japanese Style</div>
        </div>
        <div class="concept">
            <img src="https://github.com/Capybara-AI/Image-Caption-Editor/assets/11761529/45c4299f-b8a5-4bae-8435-62af5ed1d238" alt="Traditional">
            <div class="concept-description">Traditional</div>
        </div>
    </div>
</div>
"""