Convert overview image to maintainable format

[cbachhuber]

Result of this discussion: for now, we put just the image into the app's welcome screen. This will cause inconsistent fonts and make it hard to maintain. Consider converting this to html or a similar, human-maintainable format.

[BayerC]

->

`

<style> :root { /* Adjust this value to change the overall font size */ --base-font-size: 16px; --primary-blue: #0056b3; --bg-light: #f8f9fa; }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: var(--base-font-size);
        line-height: 1.6;
        color: #333;
        background-color: var(--bg-light);
        margin: 0;
        padding: 20px;
    }

    .container {
        max-width: 900px;
        margin: 0 auto;
        background: white;
        padding: 40px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    h1 {
        color: #000;
        text-align: center;
        font-size: 2.2em;
        margin-bottom: 40px;
    }

    h2 {
        color: var(--primary-blue);
        font-size: 1.5em;
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
    }

    .grid-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        margin-bottom: 40px;
    }

    .status-item {
        margin-bottom: 20px;
        padding-left: 15px;
    }

    .green { border-left: 5px solid #28a745; }
    .yellow { border-left: 5px solid #ffc107; }
    .red { border-left: 5px solid #dc3545; }

    .steps-container {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        margin-top: 30px;
    }

    .step-card {
        flex: 1;
        background: #fff;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .step-number {
        font-weight: bold;
        color: var(--primary-blue);
        display: block;
        margin-bottom: 5px;
    }

    @media (max-width: 768px) {
        .grid-section, .steps-container {
            grid-template-columns: 1fr;
            flex-direction: column;
        }
    }
</style>
<title>Lecture Feedback App Content</title>

Engage Your Audience Instantly with the Lecture Feedback App

<div class="grid-section">
    <section>
        <h2>The Traffic Light Feedback System</h2>
        <div class="status-item green">
            <strong>Green: I'm Following Easily</strong>
            <p>This lets the presenter know they can continue with the current pace or even speed up.</p>
        </div>
        <div class="status-item yellow">
            <strong>Yellow: I Need More Explanation</strong>
            <p>This signals to the presenter that a concept may need to be repeated or explained differently.</p>
        </div>
        <div class="status-item red">
            <strong>Red: I Cannot Follow</strong>
            <p>This is a clear alert for the presenter to stop and revisit a topic that is causing confusion.</p>
        </div>
    </section>

    <section>
        <h2>Interactive Q&A</h2>
        <h3>Ask Questions Anonymously</h3>
        <p>Attendees can type and submit questions at any time without revealing their identity, encouraging more open feedback.</p>
        
        <h3>Upvote Important Questions</h3>
        <p>Participants can see open questions and vote for the ones they also want answered, helping the presenter prioritize.</p>
        
        <h3>See What's on Their Minds</h3>
        <p>Example: "What's the difference between method A and B?" or "Can you explain slide 5 in detail again?"</p>
    </section>
</div>

<hr>

<section>
    <h2>Live Visual Feedback for the Presenter</h2>
    <p>Presenter sees a bar histogram showing the real-time distribution of feedback across all participants.</p>
</section>

<section>
    <h2>How It Works in 3 Simple Steps</h2>
    <div class="steps-container">
        <div class="step-card">
            <span class="step-number">1. Create a Room</span>
            <p>The presenter starts a new session, which generates a unique room.</p>
        </div>
        <div class="step-card">
            <span class="step-number">2. Share the Access Link</span>
            <p>The presenter shares the room ID, a direct link, or a QR code with the audience.</p>
        </div>
        <div class="step-card">
            <span class="step-number">3. Gather Live Feedback</span>
            <p>Participants join the room to share their status and ask/vote on questions while the presenter views the results.</p>
        </div>
    </div>
</section>

`

[BayerC]

results in