<?php

$font = $_REQUEST["font"];

if (!is_dir($font) || !is_file("$font/font.css")) die("font not available to preview");

preg_match("/font-family: '(.*)'/", file_get_contents("$font/font.css"), $matches);
$fontname = $matches[1];
?>

<!DOCTYPE html>
<html>
    <head>
        <title>preview for <?=$font?></title>
        <link rel="stylesheet" href="../gruvbox/gruvbox.css">
        <link rel="stylesheet" href="https://tilde.team/~ben/fonts/<?=$font?>/font.css">
        <style>
            * {
                font-family: '<?=$fontname?>';
            }
        </style>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body id="top">
        <main>
            <h1><?=$font?></h1>

            <p><a href=".">&lt;- back</a></p>

            <p></p>

            <p>here's a sample of the font</p>

            <p>you can use this font by importing it or linking it as a stylesheet:</p>
            <pre>@import https://tilde.team/~ben/fonts/<?=$font?>/font.css;</pre>
            <pre>&lt;link rel="stylesheet" href="https://tilde.team/~ben/fonts/<?=$font?>/font.css"&gt;</pre>

            <p>and then using the font name in a font-face css rule:</p>
            <pre>* { font-family: '<?=$fontname?>'; }</pre>
            
            <hr>

            <p>
                <?php foreach (range('a', 'z') as $letter) { ?>
                    <?=$letter?>
                <?php } ?>
            </p>

            <p>
                <?php foreach (range('A', 'Z') as $letter) { ?>
                    <?=$letter?>
                <?php } ?>
            </p>

            <p>
                <?php foreach (range(0, 9) as $digit) { ?>
                    <?=$digit?>
                <?php } ?>
            </p>

            <p><?=htmlspecialchars("~ ! @ # $ % ^ & * ( ) - _ = + < > , . / ? `")?></p>

            <textarea>try typing something here</textarea>

        </main>
    </body>
</html>

