stuve-it-backend/html/blankEmail.html

<style>
    .logo {
        width: 30px;
        height: 30px;
    }

    .group {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }

    .stack {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .container {
        padding: 15px 20px 15px 20px;
        border-radius: 4px;
        background-color: #f1f3f5;
    }

    .container > h1 {
        margin-top: 0;
    }

    .blue-text {
        color: #339af0;
    }

    .action-btn {
        color: #fff;
        background-color: #339af0;
        font-weight: 600;
        border-radius: 4px;
        padding: 10px;
        text-decoration: none;
    }

    .action-btn:hover {
        background-color: #228be6;
    }
</style>
<div class="stack">
    <div class="container">
        <h1 class="blue-text">You got mail 📩</h1>
        <p>
            Du hast eine E-Mail von {{.SENDER_GIVENNAME}} {{.SENDER_SN}} (<a href="mailto:{{.SENDER_EMAIL}}">{{.SENDER_EMAIL}}</a>)
        </p>
    </div>
    <div class="container">
        {{.CONTENT|raw}}
    </div>
    <div class="container">
        <p>Du kannst {{.SENDER_GIVENNAME}} {{.SENDER_SN}} antworten, indem du auf den untenstehenden Button klickst:</p>
        <br/>
        <a class="action-btn" href="mailto:{{.SENDER_EMAIL}}?subject=Re: {{.SUBJECT}}">↩ Antworten</a>
        <br/>
    </div>
    <div class="container">
        <div class="group">
            <svg class="logo" width="100%" height="100%" viewBox="0 0 100 100"
                 xmlns="http://www.w3.org/2000/svg"
                 xml:space="preserve"
                 style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
        <g transform="matrix(1.02041,0,0,1.02041,-197.959,0)">
          <rect id="Artboard1" x="194" y="0" width="98" height="98" style="fill:none;"/>
            <g id="Artboard11">
            <g transform="matrix(0.129488,0,0,0.128633,216.823,22.7241)">
              <g transform="matrix(7.56828,0,0,7.61857,-176.258,-188.086)">
                <path d="M95.493,95.155L4.5,95.155C4.5,95.155 4.726,76.243 5.56,72.26C5.961,70.348 5.798,55.477 5.798,55.477C5.798,55.477 5.802,55.187 5.8,55.048C5.795,54.633 6.268,53.615 6.72,53.294C7.011,53.086 7.343,52.821 7.343,52.419C7.345,49.181 7.341,34.535 7.341,34.535L7.339,34.302C7.329,33.742 7.68,32.975 8.093,32.614C8.55,32.214 9.207,31.923 9.441,31.656C9.589,31.487 9.709,31.294 9.815,30.999C9.9,30.761 16.837,4.845 16.837,4.845C16.837,4.845 23.776,30.762 23.861,30.999C23.967,31.294 24.087,31.487 24.234,31.656C24.469,31.923 25.126,32.214 25.583,32.614C25.996,32.975 26.347,33.742 26.337,34.302L26.334,34.535C26.334,34.535 26.331,49.181 26.333,52.419C26.333,52.821 26.665,53.086 26.956,53.294C27.408,53.615 27.88,54.633 27.876,55.048C27.874,55.187 27.878,55.477 27.878,55.477L27.863,65.838L73.37,65.833L76.83,49.964L78.56,57.898L80.294,49.942L83.757,65.832L83.757,71.587L90.119,71.584C90.119,71.584 91.628,71.592 91.636,71.588C92.215,71.34 94.358,74.803 94.912,76.282C95.606,78.131 95.493,95.155 95.493,95.155Z"
                      style="fill:none;"/>
              </g>
                <g transform="matrix(7.56828,0,0,7.61857,-176.28,-188.086)">
                <path d="M94.912,76.282C95.606,78.131 95.5,98.155 95.5,98.155L4.5,98.155C4.5,98.155 4.726,76.243 5.56,72.26C5.961,70.348 5.798,55.477 5.798,55.477C5.798,55.477 5.802,55.187 5.8,55.048C5.795,54.633 6.268,53.615 6.72,53.294C7.011,53.086 7.343,52.821 7.343,52.419C7.345,49.181 7.341,34.535 7.341,34.535L7.339,34.302C7.329,33.742 7.68,32.975 8.093,32.614C8.55,32.214 9.207,31.923 9.441,31.656C9.589,31.487 9.709,31.294 9.815,30.999C9.9,30.761 16.837,4.845 16.837,4.845C16.837,4.845 23.776,30.762 23.861,30.999C23.967,31.294 24.087,31.487 24.234,31.656C24.469,31.923 25.126,32.214 25.583,32.614C25.996,32.975 26.347,33.742 26.337,34.302L26.334,34.535C26.334,34.535 26.331,49.181 26.333,52.419C26.333,52.821 26.665,53.086 26.956,53.294C27.408,53.615 27.88,54.633 27.876,55.048C27.874,55.187 27.878,55.477 27.878,55.477L27.863,65.838L73.37,65.833L76.83,49.964L78.56,57.898L80.294,49.942L83.757,65.832L83.757,71.587L90.119,71.584C90.119,71.584 91.628,71.592 91.636,71.588C92.215,71.34 94.358,74.803 94.912,76.282Z"
                      style="fill:rgb(34,139,230);"/>
              </g>
                <g transform="matrix(3.31017,0,0,3.33216,-123.695,-80.204)">
                <path d="M47.904,125.072L82.509,185.184L13.3,185.184L47.904,125.072Z" style="fill:rgb(231,245,255);"/>
              </g>
            </g>
          </g>
        </g>
      </svg>
            <h3 class="blue-text">
                StuVe-IT
            </h3>
        </div>
        <hr/>
        <div class="group">
            <a href="{{.APP_URL}}/legal/terms-and-conditions">AGB der StuVe</a>
            •
            <a href="{{.APP_URL}}/legal/privacy-policy">Datenschutzerklärung</a>
            •
            <a href="{{.APP_URL}}/legal/imprint">Impressum</a>
        </div>
    </div>
</div>