<main>

  <section class="banner_paginas">
    <div class="container">
      <div class="row">
        <div class="col-md-12 d-none d-md-block">
			<h1 class="text-center roboto-thin titulo_banner">TRADUTORES</h1>
		</div>
		<div class="col-md-12 d-md-none">
			<h1 class="text-center roboto-medium">TRADUTORES</h1>
		</div>
      </div>
    </div>
  </section>
  
  <section class="edicao_container">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="row">
		  <?php
		  $sql2 = $conecta->query("SELECT * FROM tradutores WHERE status = '1' ORDER BY nome ASC");
		  while ($consulta2 = $sql2->fetch_assoc()){
		  ?>
		  <div class="col-3 retrato_tradutor d-none d-md-block">
			<?php
			// Decodifica a string base64
			$image_data = base64_decode($consulta2['foto']);

			$webp_header = 'RIFF';
			if (substr($image_data, 0, 4) === $webp_header) {
			?>
			<div style="position: relative; left: 50%; margin-left: -85px; background-image: url(data:image/webp;base64,<?php echo $consulta2['foto']; ?>); background-size: cover; background-position-y: center; width: 170px; height: 170px; border: 1px solid #ccc; border-radius: 50%; margin-bottom: 20px;"></div>
			<?php
			} else {
			// Verifica os primeiros bytes para identificar o tipo
			$first_two_bytes = substr($image_data, 0, 2);
			$jpeg_marker = "\xFF\xD8";
			$png_marker = "\x89\x50";
			if ($first_two_bytes === $jpeg_marker) {
			?>
			<div style="position: relative; left: 50%; margin-left: -85px; background-image: url(data:image/jpeg;base64,<?php echo $consulta2['foto']; ?>); width: 170px; height: 170px; border: 1px solid #ccc; border-radius: 50%; display: block; margin-bottom: 20px;"></div>
			<?php
			} elseif ($first_two_bytes === $png_marker) {
			?>
			<div style="position: relative; left: 50%; margin-left: -85px; background-image: url(data:image/png;base64,<?php echo $consulta2['foto']; ?>); width: 170px; height: 170px; border: 1px solid #ccc; border-radius: 50%; display: block; margin-bottom: 20px;"></div>
			<?php
			} else {
			echo "O tipo da imagem não pôde ser determinado.";
			}}
			?>	
				
			<h5 class="text-center"><?php echo $consulta2['nome']; ?></h5>
		  </div>
		  <div class="col-6 retrato_tradutor d-md-none">
			<?php
			// Decodifica a string base64
			$image_data = base64_decode($consulta2['foto']);

			$webp_header = 'RIFF';
			if (substr($image_data, 0, 4) === $webp_header) {
			?>
			<div style="position: relative; left: 50%; margin-left: -85px; background-image: url(data:image/webp;base64,<?php echo $consulta2['foto']; ?>); background-size: cover; background-position-y: center; width: 170px; height: 170px; border: 1px solid #ccc; border-radius: 50%; margin-bottom: 20px;"></div>
			<?php
			} else {
			// Verifica os primeiros bytes para identificar o tipo
			$first_two_bytes = substr($image_data, 0, 2);
			$jpeg_marker = "\xFF\xD8";
			$png_marker = "\x89\x50";
			if ($first_two_bytes === $jpeg_marker) {
			?>
			<div style="position: relative; left: 50%; margin-left: -85px; background-image: url(data:image/jpeg;base64,<?php echo $consulta2['foto']; ?>); width: 170px; height: 170px; border: 1px solid #ccc; border-radius: 50%; display: block; margin-bottom: 20px;"></div>
			<?php
			} elseif ($first_two_bytes === $png_marker) {
			?>
			<div style="position: relative; left: 50%; margin-left: -85px; background-image: url(data:image/png;base64,<?php echo $consulta2['foto']; ?>); width: 170px; height: 170px; border: 1px solid #ccc; border-radius: 50%; display: block; margin-bottom: 20px;"></div>
			<?php
			} else {
			echo "O tipo da imagem não pôde ser determinado.";
			}}
			?>	
				
			<h5 class="text-center"><?php echo $consulta2['nome']; ?></h5>
		  </div>
		  <?php
		  }
		  ?>
		  
		  </div>
        </div>
      </div>
    </div>
  </section>
