From d4250427b050f43654ca21a9a768587195f1b8d5 Mon Sep 17 00:00:00 2001
From: Tobias Hilfiker <tobias.hilfiker@edu.gbssg.ch>
Date: Wed, 7 Dec 2022 22:25:37 +0100
Subject: [PATCH] Try out to model rules.html

---
 Webauftritt/eportfolio/partials/nav.hbs       |   2 +-
 .../eportfolio/public/example_rule.png        | Bin 0 -> 4513 bytes
 Webauftritt/eportfolio/rules.html             |  68 ++++++++++++++++++
 Webauftritt/eportfolio/spiritofcurling.html   |   7 +-
 4 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 Webauftritt/eportfolio/public/example_rule.png

diff --git a/Webauftritt/eportfolio/partials/nav.hbs b/Webauftritt/eportfolio/partials/nav.hbs
index 2bb9448..3c89b80 100644
--- a/Webauftritt/eportfolio/partials/nav.hbs
+++ b/Webauftritt/eportfolio/partials/nav.hbs
@@ -1,5 +1,5 @@
 <nav class="bg-navbackground h-32 text-right flex flex-row justify-between items-center px-20">
-    <img src="./public/curling_logo.png" alt="Logo" class="h-28"/>
+    <img src="/curling_logo.png" alt="Logo" class="h-28"/>
     <div class="flex justify-between w-1/2 text-textcolor">
         <a href="index.html" class="nav-item {{#if homeActive}}font-bold{{/if}}">Home</a>
         <a href="rules.html" class="{{#if rulesActive}}font-bold{{/if}}">Regeln</a>
diff --git a/Webauftritt/eportfolio/public/example_rule.png b/Webauftritt/eportfolio/public/example_rule.png
new file mode 100644
index 0000000000000000000000000000000000000000..441eed40410fbe8a78c7767d779ab0765a0fdfef
GIT binary patch
literal 4513
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
C`Fk+{

literal 0
HcmV?d00001

diff --git a/Webauftritt/eportfolio/rules.html b/Webauftritt/eportfolio/rules.html
index 8413e1b..862d866 100644
--- a/Webauftritt/eportfolio/rules.html
+++ b/Webauftritt/eportfolio/rules.html
@@ -10,6 +10,74 @@
 
 <h1 class="flex justify-center">Regeln</h1> <!--todo refine the positioning of text on page-->
 
+<div class="h-60 flex justify-between items-center px-40 mb-14 mt-auto"
+     style="background: #9AD1D4;
+  background: linear-gradient(180deg, #9AD1D4 50%, #007EA7 50%);">
+
+    <div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
+        <img src="public/example_rule.png" alt=""/>
+        <h3>Free Guard Zone (FGZ)</h3>
+        <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
+            darf.
+            Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
+            gilt
+            nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
+    </div>
+
+    <div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
+        <img src="public/example_rule.png" alt=""/>
+        <h3 class="text-center">Free Guard Zone (FGZ)</h3>
+        <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
+            darf.
+            Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
+            gilt
+            nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
+    </div>
+
+    <div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
+        <img src="public/example_rule.png" alt=""/>
+        <h3>Free Guard Zone (FGZ)</h3>
+        <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
+            darf.
+            Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
+            gilt
+            nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
+    </div>
+</div>
+
+<div class="h-60 bg-banner flex justify-between items-center px-40 mb-14 mt-auto">
+
+    <div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
+        <img src="public/example_rule.png" alt=""/>
+        <h3>Free Guard Zone (FGZ)</h3>
+        <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
+            darf.
+            Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
+            gilt
+            nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
+    </div>
+
+    <div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
+        <img src="public/example_rule.png" alt=""/>
+        <h3 class="text-center">Free Guard Zone (FGZ)</h3>
+        <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
+            darf.
+            Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
+            gilt
+            nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
+    </div>
+
+    <div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
+        <img src="public/example_rule.png" alt=""/>
+        <h3>Free Guard Zone (FGZ)</h3>
+        <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
+            darf.
+            Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
+            gilt
+            nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
+    </div>
+</div>
+
 <script type="module" src="/main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Webauftritt/eportfolio/spiritofcurling.html b/Webauftritt/eportfolio/spiritofcurling.html
index 5edafff..85785b2 100644
--- a/Webauftritt/eportfolio/spiritofcurling.html
+++ b/Webauftritt/eportfolio/spiritofcurling.html
@@ -8,7 +8,12 @@
 
 {{> nav spiritActive=true}}
 
-<h1 class="flex justify-center">Spirit of Curling</h1> <!--todo refine the positioning of text on page-->
+<div class="flex flex-col">
+    <h1 class="flex justify-center">Spirit of Curling</h1> <!--todo refine the positioning of text on page-->
+    <p class="flex justify-center text-center w-6/12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper, enim sed sodales egestas,
+        leo nisl dictum libero, nec finibus ipsum enim viverra nunc. Aenean posuere augue nec bibendum iaculis.
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+</div>
 
 <script type="module" src="/main.js"></script>
 </body>