Fine-tuned animal detail page.
[toast/alpenzoo.git] / animals / templates / animals / detail.html
index ecf970c7f7c48bd8fed50231da993e750f6f0c20..18a17c1e56aa71fac11bc49e8398e25d0f094c1b 100644 (file)
@@ -2,15 +2,83 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:py="http://genshi.edgewall.org/"
-       xmlns:xi="http://www.w3.org/2001/XInclude">
-<html>
-<head>
-<title>Animal</title>
-</head>
-<body>
-<h1>${animal.name_german}</h1>
-<ul>
-    <li>Size: ${animal.size_cm}</li>
-</ul>
-</body>
+       xmlns:xi="http://www.w3.org/2001/XInclude"
+       lang="de">
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <meta name="description" content="" />
+    <meta name="author" content="" />
+    <link rel="icon" href="${static('favicon.ico')}" />
+
+    <title>${animal.name_german}</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="${static('bootstrap/css/bootstrap.min.css')}" rel="stylesheet"/>
+
+    <!-- Custom styles for this template -->
+    <link href="${static('animals/animals.css')}" rel="stylesheet"/>
+
+  </head>
+
+  <body>
+
+    <div class="container">
+      <div class="header clearfix">
+        <nav>
+          <ul class="nav nav-pills pull-right">
+            <li role="presentation" class="active"><a href="#">Alpenzoo</a></li>
+            <li role="presentation"><a href="${url('animal_list')}">Tiere</a></li>
+            <li role="presentation"><a href="#">Spiele</a></li>
+          </ul>
+        </nav>
+        <h3 class="text-muted">Alpenzoo</h3>
+      </div>
+
+      <div class="jumbotron">
+        <h1>${animal.name_german}</h1>
+        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+        <p>
+                       <a class="btn btn-lg btn-success" href="#" role="button">Vorlesen</a>
+                       <a class="btn btn-lg btn-success" href="#" role="button">Tiergeräusch</a>
+               </p>
+      </div>
+
+      <div class="row marketing">
+        <div class="col-md-6">
+          <h4>${animal.name_german} Eckdaten</h4>
+                       <ul>
+              <li>Größe: ${animal.size_cm} cm</li>
+              <li>Essbar: ${'Ja' if animal.edible else 'Nein :-('}</li>
+                       </ul>
+
+          <h4>Beschreibung</h4>
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
+
+          <h4>Geschichte des Geheges</h4>
+          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </div>
+
+        <div class="col-md-6">
+          <h4>Kochrezept</h4>
+          <p py:if="animal.edible">Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
+          <p py:if="not animal.edible">Leider ist ${animal.name_german} nicht essbar.</p>
+
+          <h4>Gefährlichkeit für mich</h4>
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
+
+          <h4>Gefährdung durch mich</h4>
+          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </div>
+      </div>
+
+      <footer class="footer">
+        <p>&copy; Sabine, Georg, Gregor, Philipp 2015</p>
+      </footer>
+
+    </div> <!-- /container -->
+
+  </body>
 </html>