tobias-hilfiker/Modul_152
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

Add partials, add new images, edit html pages

Browse Source
This commit is contained in:
Tobias Hilfiker
2022-12-19 21:45:41 +01:00
parent d4250427b0
commit a37bf58d96
18 changed files with 83 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
Webauftritt/eportfolio/howto.html
View File

@@ -1,15 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to Play</title>
</head>
<body class="bg-primary">
{{> nav howtoActive=true}}
<h1 class="flex justify-center">How To Play</h1> <!--todo refine the positioning of text on page-->
<script type="module" src="/main.js"></script>
</body>
</html>

0
Webauftritt/eportfolio/examles.html → Webauftritt/eportfolio/impressions.html
View File

6
Webauftritt/eportfolio/index.html
View File

@@ -20,16 +20,12 @@ todo -> bind to bottom of page
<img src="./public/rules.svg" alt="Regeln" class="w-20 h-20"/> <img src="./public/rules.svg" alt="Regeln" class="w-20 h-20"/>
<p class="text-center">Regeln</p> <p class="text-center">Regeln</p>
</a> </a>
<a href="howto.html" class="flex flex-col align-middle">
<img src="./public/question.svg" alt="How to Play" class="w-20 h-20"/>
<p class="text-center">How to play</p>
</a>
<a href="spiritofcurling.html" class="flex flex-col align-middle"> <a href="spiritofcurling.html" class="flex flex-col align-middle">
<img src="./public/rules.svg" alt="Spirit of Curling" class="w-20 h-20"/> <img src="./public/rules.svg" alt="Spirit of Curling" class="w-20 h-20"/>
<!--todo replace icon with actual icon--> <!--todo replace icon with actual icon-->
<p class="text-center">Spirit of Curling</p> <p class="text-center">Spirit of Curling</p>
</a> </a>
<a href="examles.html" class="flex flex-col align-middle"> <a href="impressions.html" class="flex flex-col align-middle">
<img src="./public/extension.svg" alt="Beispiele" class="w-20 h-20"/> <img src="./public/extension.svg" alt="Beispiele" class="w-20 h-20"/>
<p class="text-center">Beispiele</p> <p class="text-center">Beispiele</p>
</a> </a>

3
Webauftritt/eportfolio/partials/nav.hbs
View File

@@ -1,9 +1,8 @@
<nav class="bg-navbackground h-32 text-right flex flex-row justify-between items-center px-20"> <nav class="bg-navbackground h-32 text-right flex flex-row justify-between items-center px-20">
<img src="/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"> <div class="flex justify-between w-1/3 text-textcolor">
<a href="index.html" class="nav-item {{#if homeActive}}font-bold{{/if}}">Home</a> <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> <a href="rules.html" class="{{#if rulesActive}}font-bold{{/if}}">Regeln</a>
<a href="howto.html" class="{{#if howtoActive}}font-bold{{/if}}">How to Play</a>
<a href="spiritofcurling.html" class="{{#if spiritActive}}font-bold{{/if}}">Spirit of Curling</a> <a href="spiritofcurling.html" class="{{#if spiritActive}}font-bold{{/if}}">Spirit of Curling</a>
<a href="examles.html" class="{{#if examplesActive}}font-bold{{/if}}">Beispiele</a> <a href="examles.html" class="{{#if examplesActive}}font-bold{{/if}}">Beispiele</a>
</div> </div>

7
Webauftritt/eportfolio/partials/spiritofcurlingitem.hbs Normal file
View File

@@ -0,0 +1,7 @@
<div class="flex flex-row bg-banner w-96 mb-6 items-center">
<img src="{{image}}" alt="Regeln" class="w-12 h-12 justify-center mr-5 ml-5"/>
<div>
<p class="font-bold">{{title}}</p>
<p>{{description}}</p>
</div>
</div>

BIN
Webauftritt/eportfolio/public/spiritofcurling/disappointed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
Webauftritt/eportfolio/public/spiritofcurling/distraction.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 395 B

BIN
Webauftritt/eportfolio/public/spiritofcurling/friendly.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
Webauftritt/eportfolio/public/spiritofcurling/magic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 764 B

BIN
Webauftritt/eportfolio/public/spiritofcurling/plus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 265 B

BIN
Webauftritt/eportfolio/public/spiritofcurling/prohibited.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 999 B

BIN
Webauftritt/eportfolio/public/spiritofcurling/psychology.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 883 B

BIN
Webauftritt/eportfolio/public/spiritofcurling/rules.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 571 B

BIN
Webauftritt/eportfolio/public/spiritofcurling/trophy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
Webauftritt/eportfolio/public/spiritofcurling/ways.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 806 B

48
Webauftritt/eportfolio/rules.html
View File

@@ -10,71 +10,55 @@
<h1 class="flex justify-center">Regeln</h1> <!--todo refine the positioning of text on page--> <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" <div class="max-h-96 flex justify-between items-center px-20 mb-14 mt-auto"
style="background: #9AD1D4; style="background: #9AD1D4;
background: linear-gradient(180deg, #9AD1D4 50%, #007EA7 50%);"> 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--> <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=""/> <img src="/example_rule.png" alt=""/>
<h3>Free Guard Zone (FGZ)</h3> <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 <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
darf. darf.</p>
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="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit--> <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=""/> <img src="/example_rule.png" alt=""/>
<h3 class="text-center">Free Guard Zone (FGZ)</h3> <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 <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
darf. darf.</p>
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="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit--> <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=""/> <img src="/example_rule.png" alt=""/>
<h3>Free Guard Zone (FGZ)</h3> <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 <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
darf. darf.</p>
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> </div>
<div class="h-60 bg-banner flex justify-between items-center px-40 mb-14 mt-auto"> <div class="max-h-96 flex justify-between items-center px-20 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--> <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=""/> <img src="/example_rule.png" alt=""/>
<h3>Free Guard Zone (FGZ)</h3> <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 <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
darf. darf.</p>
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="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit--> <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=""/> <img src="/example_rule.png" alt=""/>
<h3 class="text-center">Free Guard Zone (FGZ)</h3> <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 <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
darf. darf.</p>
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="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit--> <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=""/> <img src="/example_rule.png" alt=""/>
<h3>Free Guard Zone (FGZ)</h3> <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 <p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
darf. darf.</p>
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> </div>

58
Webauftritt/eportfolio/spiritofcurling.html
View File

@@ -8,11 +8,59 @@
{{> nav spiritActive=true}} {{> nav spiritActive=true}}
<div class="flex flex-col"> <div class="flex flex-col items-center">
<h1 class="flex justify-center">Spirit of Curling</h1> <!--todo refine the positioning of text on page--> <h1 class="">Spirit of Curling</h1>
<p class="flex justify-center text-center w-6/12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper, enim sed sodales egestas, <p class="text-center w-6/12">Der Spirit of Curling ist eine Art Regelwerk, welches beschreibt wie
leo nisl dictum libero, nec finibus ipsum enim viverra nunc. Aenean posuere augue nec bibendum iaculis. ein Curler den Respekt gegenüber den Mitspielern, Gegnern und dem Sport selbst zeigen soll.</p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div>
<div class="h-full grid grid-cols-3 gap-0.5 content-start p-16">
{{> spiritofcurlingitem
title="Manieren"
description="Ein Curler verhält sich imemr anständig, zuvorkommend und wie ein Gentleman."
image="/spiritofcurling/ways.png"}}
{{> spiritofcurlingitem
title="Gewinn ist das Ziel"
description="Ein Curler spielt um zu gewinnen, nie aber um seinen Gegner zu erniederigen."
image="/spiritofcurling/trophy.png"}}
{{> spiritofcurlingitem
title="Keine Ablenkung"
description="Ein Curler wird nie versuchen seinen Gegner abzulenken oder ihn daran zu hindern, sein Bestes zu tun."
image="/spiritofcurling/distraction.png"}}
{{> spiritofcurlingitem
title="Keine Vorteile verschaffen"
description="Ein Curler versucht nie, mit anderen Mitteln als mit den spielerischen Möglichkeiten, Vorteile zu
erzielen."
image="/spiritofcurling/plus.png"}}
{{> spiritofcurlingitem
title="Zuerst verlieren lernen"
description="Ein Curler muss zuerst lernen zu verlieren, erst dann ist er auch würdig zu gewinnen."
image="/spiritofcurling/psychology.png"}}
{{> spiritofcurlingitem
title="Niederlage über ungerechtem Sieg"
description="Ein Curler zieht eine Niederlage einem ungerecheten Sieg vor."
image="/spiritofcurling/disappointed.png"}}
{{> spiritofcurlingitem
title="Keine verstösse gegen Spielregeln"
description="Ein Curler verstösst nie absichtlich gegen Spielregeln oder eine der geschriebenen oder ungeschriebenen
Überlieferungen"
image="/spiritofcurling/prohibited.png"}}
{{> spiritofcurlingitem
title="Keine unerwarteten Handlungen"
description="Ein Curler wird nie etwas tun, was er auch von seinen Mitspielern nicht erwartet."
image="/spiritofcurling/magic.png"}}
{{> spiritofcurlingitem
title="Gegnerfreundlich"
description="Ein Curler entscheidet sich in Streitfragen immer zu Gunsten seines Gegners."
image="/spiritofcurling/friendly.png"}}
</div> </div>
<script type="module" src="/main.js"></script> <script type="module" src="/main.js"></script>

7
Webauftritt/eportfolio/tailwind.config.cjs
View File

@@ -1,6 +1,7 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ["./*.{html,js}"], content: ["./*.{html,js}",
"./partials/*.hbs"],
theme: { theme: {
extend: { extend: {
colors: { colors: {
@@ -11,7 +12,9 @@ module.exports = {
}, },
fontSize: { fontSize: {
's-h1': '50px', 's-h1': '50px',
h1: '56px' h1: '56px',
's-h2': '60px',
h2: '60px'
} }
}, },
}, },