title.py

"""
This module provides functions to generate the title section of the HyperFace web application.
It includes functions to encode images in base64 format and to generate CSS styles for the title.
"""

import base64


def encode_image(path):
    with open(path, "rb") as img:
        return base64.b64encode(img.read()).decode("utf-8")


light_logo_b64 = encode_image("static/idiap-black.png")
dark_logo_b64 = encode_image("static/idiap-white.png")


def title_css(TEXT_DARK, PRIMARY, PRIMARY_DARK, TEXT_LIGHT):
  return f"""
#title {{
  font-size: 2.6rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.25;
  color: {TEXT_DARK};
}}

/* brand class is passed in title parameter */
#title .brand {{
  background: linear-gradient(90deg, {PRIMARY} 0%, {PRIMARY_DARK} 90%);
  -webkit-background-clip: text;
  color: transparent;
}}

.dark #title {{
  color: {TEXT_LIGHT};
}}

.title-container {{
    display: flex;
    align-items: flex-start;;
    gap: 12px;
    justify-content: center;
    margin-bottom: 10px;
    text-align: center;
}}
"""


def title_with_logo(title):
    return f"""
<div class="title-container">
  <a href="https://www.idiap.ch">
    <img class="logo-light" src="data:image/png;base64,{light_logo_b64}" alt="HyperFace Logo Light" style="height: 50px;">
    <img class="logo-dark" src="data:image/png;base64,{dark_logo_b64}" alt="HyperFace Logo Dark" style="height: 50px;">
  </a>
  <h1 id="title" style="margin: 0;">
    {title}
  </h1>
</div>
"""