156 lines
5.5 KiB
PHP
156 lines
5.5 KiB
PHP
<?php
|
|
require_once __DIR__ . '/lang_helper.php';
|
|
|
|
$demoCards = [
|
|
[
|
|
'label' => 'demo_cruncher_label',
|
|
'title' => 'demo_cruncher_title',
|
|
'description' => 'demo_cruncher_desc',
|
|
'href' => '/demo-apps/media-cruncher/',
|
|
'icon' => 'cruncher-icon',
|
|
],
|
|
[
|
|
'label' => 'demo_network_label',
|
|
'title' => 'demo_network_title',
|
|
'description' => 'demo_network_desc',
|
|
'href' => '/demo-apps/network-quality/',
|
|
'icon' => 'demo-icon network-icon',
|
|
],
|
|
[
|
|
'label' => 'demo_toolbelt_label',
|
|
'title' => 'demo_toolbelt_title',
|
|
'description' => 'demo_toolbelt_desc',
|
|
'href' => '/demo-apps/dev-toolbelt/',
|
|
'icon' => 'demo-icon toolbelt-icon',
|
|
],
|
|
[
|
|
'label' => 'demo_arch_label',
|
|
'title' => 'demo_arch_title',
|
|
'description' => 'demo_arch_desc',
|
|
'href' => '/demo-apps/architecture-simulator/',
|
|
'icon' => 'demo-icon architecture-icon',
|
|
],
|
|
[
|
|
'label' => 'demo_traveler_label',
|
|
'title' => 'demo_traveler_title',
|
|
'description' => 'demo_traveler_desc',
|
|
'href' => '/demo-apps/traveler-tools/',
|
|
'icon' => 'demo-icon traveler-icon',
|
|
],
|
|
[
|
|
'label' => 'demo_redactor_label',
|
|
'title' => 'demo_redactor_title',
|
|
'description' => 'demo_redactor_desc',
|
|
'href' => '/demo-apps/privacy-redactor/',
|
|
'icon' => 'demo-icon redactor-icon',
|
|
],
|
|
[
|
|
'label' => 'demo_sentiment_label',
|
|
'title' => 'demo_sentiment_title',
|
|
'description' => 'demo_sentiment_desc',
|
|
'href' => '/demo-apps/sentiment-sandbox/',
|
|
'icon' => 'demo-icon sentiment-icon',
|
|
],
|
|
[
|
|
'label' => 'demo_drift_label',
|
|
'title' => 'demo_drift_title',
|
|
'description' => 'demo_drift_desc',
|
|
'href' => '/demo-apps/model-drift/',
|
|
'icon' => 'demo-icon drift-icon',
|
|
],
|
|
];
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="<?php echo $lang; ?>">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title><?php echo $text['demos_title']; ?> - <?php echo $text['name']; ?></title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="top-nav">
|
|
<div class="nav-left">Juvenal Diaz</div>
|
|
<div class="nav-right">
|
|
<?php foreach ($availableLangs as $code): ?>
|
|
<a href="demos.php?lang=<?php echo $code; ?>"><?php echo strtoupper($code); ?></a>
|
|
<?php endforeach; ?>
|
|
|
|
|
<a href="index.php?lang=<?php echo $lang; ?>"
|
|
data-translate data-key="nav_home"
|
|
data-en="<?php echo htmlspecialchars($en['nav_home']); ?>">
|
|
<?php echo $text['nav_home']; ?>
|
|
</a>
|
|
<a href="cv.php?lang=<?php echo $lang; ?>"
|
|
data-translate data-key="nav_cv"
|
|
data-en="<?php echo htmlspecialchars($en['nav_cv']); ?>">
|
|
<?php echo $text['nav_cv']; ?>
|
|
</a>
|
|
<a href="blog.php?lang=<?php echo $lang; ?>"
|
|
data-translate data-key="nav_blog"
|
|
data-en="<?php echo htmlspecialchars($en['nav_blog']); ?>">
|
|
<?php echo $text['nav_blog']; ?>
|
|
</a>
|
|
<a href="demos.php?lang=<?php echo $lang; ?>"
|
|
data-translate data-key="nav_demos"
|
|
data-en="<?php echo htmlspecialchars($en['nav_demos']); ?>">
|
|
<?php echo $text['nav_demos']; ?>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="demos-page">
|
|
<section class="demos-hero">
|
|
<p class="blog-kicker"
|
|
data-translate data-key="demos_kicker"
|
|
data-en="<?php echo htmlspecialchars($en['demos_kicker']); ?>">
|
|
<?php echo $text['demos_kicker']; ?>
|
|
</p>
|
|
<h1 data-translate data-key="demos_title"
|
|
data-en="<?php echo htmlspecialchars($en['demos_title']); ?>">
|
|
<?php echo $text['demos_title']; ?>
|
|
</h1>
|
|
<p data-translate data-key="demos_subtitle"
|
|
data-en="<?php echo htmlspecialchars($en['demos_subtitle']); ?>">
|
|
<?php echo $text['demos_subtitle']; ?>
|
|
</p>
|
|
</section>
|
|
|
|
<section class="demo-grid" aria-label="<?php echo htmlspecialchars($en['demos_title']); ?>">
|
|
<?php foreach ($demoCards as $card): ?>
|
|
<a class="demo-card demo-catalog-card" href="<?php echo htmlspecialchars($card['href']); ?>">
|
|
<div class="demo-card-header">
|
|
<div class="<?php echo htmlspecialchars($card['icon']); ?>" aria-hidden="true">
|
|
<?php if ($card['icon'] === 'cruncher-icon'): ?>
|
|
<span class="cruncher-icon-file"></span>
|
|
<span class="cruncher-icon-spark"></span>
|
|
<?php elseif ($card['icon'] === 'demo-icon network-icon'): ?>
|
|
<span></span><span></span><span></span>
|
|
<?php elseif ($card['icon'] === 'demo-icon toolbelt-icon'): ?>
|
|
{ }
|
|
<?php endif; ?>
|
|
</div>
|
|
<div>
|
|
<p class="demo-label"
|
|
data-translate data-key="<?php echo htmlspecialchars($card['label']); ?>"
|
|
data-en="<?php echo htmlspecialchars($en[$card['label']]); ?>">
|
|
<?php echo htmlspecialchars($text[$card['label']]); ?>
|
|
</p>
|
|
<h2 data-translate data-key="<?php echo htmlspecialchars($card['title']); ?>"
|
|
data-en="<?php echo htmlspecialchars($en[$card['title']]); ?>">
|
|
<?php echo htmlspecialchars($text[$card['title']]); ?>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<p data-translate data-key="<?php echo htmlspecialchars($card['description']); ?>"
|
|
data-en="<?php echo htmlspecialchars($en[$card['description']]); ?>">
|
|
<?php echo htmlspecialchars($text[$card['description']]); ?>
|
|
</p>
|
|
</a>
|
|
<?php endforeach; ?>
|
|
</section>
|
|
</main>
|
|
|
|
</body>
|
|
</html>
|