<?php


define('_IN_JOHNCMS', 1);
$server = $_SERVER['DOCUMENT_ROOT'];
require($server . '/system/bootstrap.php');
/** @var Psr\Container\ContainerInterface $container */
$container = App::getContainer();
/** @var Johncms\Api\ConfigInterface $config */
$config = $container->get(Johncms\Api\ConfigInterface::class);
$headmod = 'fonts';
require($server . '/system/head.php'); 

echo '<style>
.o {
    width: auto;
    height: auto;
    padding: 20px;
    border: 1px solid white;
    border-radius: 10px;
 }
</style>';
 
function Text($text, $fileExt="")
{
    if ($fileExt == "php")
    {
        ini_set("highlight.comment", "#008000");
        ini_set("highlight.default", "#000000");
        ini_set("highlight.html", "#808080");
        ini_set("highlight.keyword", "#0000BB; font-weight: bold");
        ini_set("highlight.string", "#DD0000");
    }
    else if ($fileExt == "html")
    {
        ini_set("highlight.comment", "#008000");
        ini_set("highlight.default", "#000000");
        ini_set("highlight.html", "#808080");
        ini_set("highlight.keyword", "0000BB; font-weight: bold");
        ini_set("highlight.string", "#DD0000");
    }
    // ...

    $text = trim($text);
    $text = highlight_string("<?php " . $text, true);  // highlight_string() requires opening PHP tag or otherwise it will not colorize the text
    $text = trim($text);
    $text = preg_replace("|^\\<code\\>\\<span style\\=\"color\\: #[a-fA-F0-9]{0,6}\"\\>|", "", $text, 1);  // remove prefix
    $text = preg_replace("|\\</code\\>\$|", "", $text, 1);  // remove suffix 1
    $text = trim($text);  // remove line breaks
    $text = preg_replace("|\\</span\\>\$|", "", $text, 1);  // remove suffix 2
    $text = trim($text);  // remove line breaks
    $text = preg_replace("|^(\\<span style\\=\"color\\: #[a-fA-F0-9]{0,6}\"\\>)(&lt;\\?php&nbsp;)(.*?)(\\</span\\>)|", "\$1\$3\$4", $text);  // remove custom added "<?php "

    return $text;
}

$cod = '<link rel="stylesheet" href="'.$config['homeurl'].'/system/plugin/src/Fonts/font-awesome.css"><link rel="stylesheet" href="'.$config['homeurl'].'/system/plugin/src/Fonts/font-awesome.min.css">';
$code = htmlentities($cod, ENT_QUOTES, 'UTF-8');

//$code = base64_encode($cod);

echo '<div class="mainblok"><div class="phdr">How to use?</div><div class="menu">just Put this code on your head.php<br/><input type="text" value="'.$code.'"><br/></div></div>';

echo '<div class="mainblok">';
echo '<div class="phdr">Size Icon</div>';
echo '<div class="gmenu">';
echo '
          <p><i class="icon-camera-retro icon-s"></i> icon-camera-retro icon-s</p>
          <p><i class="icon-camera-retro icon-large"></i> icon-camera-retro icon-large</p>
          <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro icon-2x</p>
          <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro icon-3x</p>
          <p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro icon-4x</p>
';
echo '</div>';
echo '</div>';

echo '<div class="mainblok">';
echo '<div class="phdr">Bordered & Pulled Icons</div>';
echo '<div class="topmenu">' .
          'Use <font color="red">icon-border</font> and <font color="red">pull-right</font> or <font color="red">pull-left</font> for easy pull quotes or article graphics' .
    '</div>';
    echo '<div class="gmenu">' .
        '<i class="icon-quote-left icon-4x pull-left icon-muted"></i>' .
        'Use a few of the new styles together, and youve got easy pull quotes or a great introductory article image.
        Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all
        of them in any combination to get lots of new possibilities.
      </div>';


echo '<div class="topmenu">' . Text('<i class="icon-quote-left icon-4x pull-left icon-muted"></i>', 'html') . '<br/>Use a few of the new styles together ... lots of new possibilities.</div>';

echo '<div class="gmenu">';
echo '<i class="icon-flag icon-4x pull-left icon-border"></i>Use a few of the new styles together, and youve got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities.</div>';
echo '<div class="topmenu">' . Text('<i class="icon-flag icon-4x pull-left icon-border"></i>', 'html') . '<br/>Use a few of the new styles together ... lots of new possibilities.';
echo '</div></div>'; 


echo '<div class="mainblok">';
echo '<div class="phdr">Spinner Icons</div>';
echo '<div class="menu">' .
          'Use the icon-spin class to get any icon to rotate. Works well with icon-spinner and icon-refresh.<br/>' .
         '<div class="o"><i class="icon-spinner icon-spin icon-large"></i> Spinner icon when loading content...</div></div>';
echo '<div class="topmenu">' . Text('<i class="icon-spinner icon-spin icon-large"></i>', 'html') . '<br/>Spinner icon when loading content...</div>';
echo '</div>';

echo '<div class="mainblok">';
echo '<div class="phdr">Rotated & Flipped</div>';
echo '<div class="menu">';
echo 'A set of classes that can be used to arbitrarily rotate and flip icons.';
echo '<div class="o"><i class="icon-shield"></i>&nbsp; normal<br><i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br><i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br><i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br><i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br><i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical</div></div>';
echo '<div class="topmenu">' . Text('<i class="icon-shield"></i> normal
<i class="icon-shield icon-rotate-90"></i>icon-rotate-90
<i class="icon-shield icon-rotate-180"></i> icon-rotate-180
<i class="icon-shield icon-rotate-270"></i> icon-rotate-270
<i class="icon-shield icon-flip-horizontal"></i> icon-flip-horizontal
<i class="icon-shield icon-flip-vertical"></i> icon-flip-vertical', 'html') . '</div>';
echo '</div>';



echo '<div class="mainblok">';
echo '<div class="phdr">Stacked Icons</div>';
echo '<div class="topmenu">';
echo 'A method for easily stacking multiple icons. Use the <font color="red">icon-stack</font> class on the parent and <font color="red">icon-stack-base</font> for the bottom icon.';
echo '</div>';
echo '<div class="menu"><div class="o">';
echo '
<span class="icon-stack">
  <i class="icon-check-empty icon-stack-base"></i>
  <i class="icon-twitter"></i>
</span>
icon-twitter on icon-check-empty<br>
<span class="icon-stack">
  <i class="icon-circle icon-stack-base"></i>
  <i class="icon-flag icon-light"></i>
</span>
icon-flag on icon-circle<br>
<span class="icon-stack">
  <i class="icon-sign-blank icon-stack-base"></i>
  <i class="icon-terminal icon-light"></i>
</span>
icon-terminal on icon-sign-blank<br>
<span class="icon-stack">
  <i class="icon-camera"></i>
  <i class="icon-ban-circle icon-stack-base text-error"></i>
</span>
icon-camera on icon-ban-circle
';
echo '</div></div>';
echo '<div class="topmenu">' . Text('
<span class="icon-stack">
  <i class="icon-check-empty icon-stack-base"></i>
  <i class="icon-twitter"></i>
</span>
icon-twitter on icon-check-empty<br>
<span class="icon-stack">
  <i class="icon-circle icon-stack-base"></i>
  <i class="icon-flag icon-light"></i>
</span>
icon-flag on icon-circle<br>
<span class="icon-stack">
  <i class="icon-sign-blank icon-stack-base"></i>
  <i class="icon-terminal icon-light"></i>
</span>
icon-terminal on icon-sign-blank<br>
<span class="icon-stack">
  <i class="icon-camera"></i>
  <i class="icon-ban-circle icon-stack-base text-error"></i>
</span>
icon-camera on icon-ban-circle
', 'html') . '</div>';
echo '</div>';



echo '<div class="phdr"><a href="index.php">Back</a></div>';

require($server . '/system/end.php'); 

?>


