<?php
define('BASE_URL', 'http://api.warriordudimanche.net/fancytation/');
include_once 'helpers.php';
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Fancytation</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
<form action="" method="POST">
<div class="px-4 py-5 bg-white sm:p-6">
<h1 class="text-xl leading-tight">Fancytation</h1>
<!-- t : texte (et on peut utiliser n pour les retours à la ligne) [ex: t=frist linensecond line] -->
<div class="mt-6">
<label for="t" class="block text-sm font-medium leading-5 text-gray-700">
Texte
</label>
<div class="rounded-md shadow-sm">
<textarea rows="3" class="border border-gray-300 bg-white rounded-md mt-1 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5" id="t" name="t">
<?= array_key_exists('t', $_POST) ? $_POST['t']:''?></textarea>
</div>
</div>
<!-- c :couleur du texte au format FFFFFF (fancytation choisit automatiquement une couleur d'ombre noire ou blanche) -->
<div class="grid grid-cols-3 gap-6">
<div class="col-span-3 sm:col-span-2">
<label for="c" class="block text-sm font-medium leading-5 text-gray-700">
Couleur
</label>
<div class="mt-1 flex rounded-md shadow-sm">
<input id="c" name="c" value="<?= array_key_exists('c', $_POST) ? $_POST['c']:'FFFFFF'?>" type="color" class="form-input flex-1 block w-full rounded-none rounded-r-md transition duration-150 ease-in-out sm:text-sm sm:leading-5">
</div>
</div>
</div>
<!-- i : image de fond -->
<div class="col-span-6 sm:col-span-3">
<label for="i" class="block text-sm font-medium leading-5 text-gray-700">Image de fond</label>
<select id="i" name="i" class="mt-1 block form-select w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5">
<?php foreach(get_images() as $image) { ?>
<option value="<?=$image?>" <?= array_key_exists('i', $_POST) && $_POST['i'] === $image ? ' selected="selected"': ''?>><?=$image?></option>
<?php } ?>
</select>
</div>
<!-- f : fonte utilisée -->
<div class="col-span-6 sm:col-span-3">
<label for="f" class="block text-sm font-medium leading-5 text-gray-700">Police</label>
<select id="f" name="f" class="mt-1 block form-select w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5">
<?php foreach(get_fonts() as $font) { ?>
<option value="<?=$font?>"<?= array_key_exists('f', $_POST) && $_POST['f'] === $image ? ' selected="selected"': ''?>><?=$font?></option>
<?php } ?>
</select>
</div>
<!-- fs: taille de fonte -->
<div class="grid grid-cols-3 gap-6">
<div class="col-span-3 sm:col-span-2">
<label for="fs" class="block text-sm font-medium leading-5 text-gray-700">
Taille du texte
</label>
<div class="mt-1 flex rounded-md shadow-sm">
<input id="fs" name="fs" value="<?= array_key_exists('fs', $_POST) ? $_POST['fs']:'32'?>" type="number" class="border border-gray-300 form-input flex-1 block w-full rounded-none rounded-r-md transition duration-150 ease-in-out sm:text-sm sm:leading-5">
</div>
</div>
</div>
</div>
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
<span class="inline-flex rounded-md shadow-sm">
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out">
Enregistrement
</button>
</span>
</div>
</form>
<?php
if (!empty($_POST)) {
$query_string = str_replace(
'%0D%0A', '\n', // %0D%0A provoque une 502 sur l'API 🤷♂️
http_build_query(
$_POST, null, '&', PHP_QUERY_RFC3986
)
);
$url = sprintf('%s?%s', BASE_URL, $query_string);
?>
<div class="px-4 py-5 bg-white sm:p-6">
<h1 class="text-xl leading-tight"><a href="<?=$url?>">Télécharger l'image</a></h1>
<img src="data:image/jpeg;charset=utf-8;base64,<?=base64_encode(file_curl_contents($url))?>"
</div>
<?php } ?>
</div>
</body>
</html>