96 lines
5.2 KiB
PHP
96 lines
5.2 KiB
PHP
|
<?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>
|