HTML frontend part 2: game details
[stouyapi.git] / data / templates / game.tpl.php
1 <?xml version="1.0" encoding="utf-8"?>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3  <head>
4   <title><?= htmlspecialchars($json->title); ?> - OUYA game</title>
5   <meta name="generator" content="stouyapi"/>
6   <link rel="stylesheet" type="text/css" href="../ouya-game.css"/>
7  </head>
8  <body class="game">
9   <header>
10    <img class="ouyalogo" src="../ouya-logo.grey.svg" alt="OUYA logo" width="20%"/>
11   </header>
12   <section class="text">
13    <h1><?= htmlspecialchars($json->title); ?></h1>
14    <dl class="meta">
15     <dt>Rating</dt>
16     <dd class="rating">
17      <span class="average average-<?= round($json->rating->average) ?>"><?= $json->rating->average ?></span>
18      <span class="count">(<?= $json->rating->count ?>)</span>
19     </dd>
20
21     <dt>Developer</dt>
22     <dd class="company">
23      <?= htmlspecialchars($json->developer->name) ?>
24     </dd>
25
26     <dt>Suggested age</dt>
27     <dd class="contentRating">
28      <?= htmlspecialchars($json->suggestedAge) ?>
29     </dd>
30
31     <dt>Number of players</dt>
32     <dd class="players">
33      <?= htmlspecialchars(implode(', ', $json->gamerNumbers)) ?>
34     </dd>
35
36     <dt>Download size</dt>
37     <dd class="size">
38      <?= number_format($json->apk->fileSize / 1024 / 1024, 2) ?> MiB
39     </dd>
40    </dl>
41
42    <p class="description">
43     <?= nl2br(htmlspecialchars($json->description)) ?>
44    </p>
45   </section>
46
47   <section class="media">
48    <h2>Screenshots</h2>
49    <div class="content">
50     <?php foreach ($json->mediaTiles as $tile): ?>
51      <?php if ($tile->type == 'image'): ?>
52       <img src="<?= htmlspecialchars($tile->urls->thumbnail) ?>" alt="Screenshot of <?= htmlspecialchars($json->title); ?>"/>
53      <?php elseif ($tile->type == 'video'): ?>
54       <video controls="">
55        <source src="<?= htmlspecialchars($tile->url) ?>"/>
56       </video>
57      <?php endif ?>
58     <?php endforeach ?>
59    </div>
60   </section>
61
62   <section class="buttons">
63    <div>
64     <a href="<?= $apkDownloadUrl ?>">Download .apk</a>
65     <p>
66      Version <?= $json->version->number ?>, published
67      <?= gmdate('Y-m-d', $json->version->publishedAt) ?>
68     </p>
69    </div>
70   </section>
71
72   <nav>
73    <?php foreach ($navLinks as $url => $title): ?>
74     <a rel="up" href="<?= htmlspecialchars($url) ?>"><?= htmlspecialchars($title) ?></a>
75    <?php endforeach ?>
76   </nav>
77  </body>
78 </html>