From 7e1d20d0ec9b0464307afce4af93fa84c1ab3ca5 Mon Sep 17 00:00:00 2001 From: Philippe Torrel Date: Mon, 5 Oct 2026 14:47:25 +0200 Subject: [PATCH] --- .../08_newsboard-lernheft/assets/css/main.css | 227 ++++++++++++++++++ .../assets/img/empty.png | Bin 0 -> 5270 bytes .../assets/img/paperclip.png | Bin 0 -> 2658 bytes .../assets/img/sheets.png | Bin 0 -> 3591 bytes .../08_newsboard-lernheft/assets/js/main.js | 50 ++++ .../tag21/08_newsboard-lernheft/index.html | 40 +++ 6 files changed, 317 insertions(+) create mode 100644 03_js-dom/unterricht/tag21/08_newsboard-lernheft/assets/css/main.css create mode 100644 03_js-dom/unterricht/tag21/08_newsboard-lernheft/assets/img/empty.png create mode 100644 03_js-dom/unterricht/tag21/08_newsboard-lernheft/assets/img/paperclip.png create mode 100644 03_js-dom/unterricht/tag21/08_newsboard-lernheft/assets/img/sheets.png create mode 100644 03_js-dom/unterricht/tag21/08_newsboard-lernheft/assets/js/main.js create mode 100644 03_js-dom/unterricht/tag21/08_newsboard-lernheft/index.html diff --git a/03_js-dom/unterricht/tag21/08_newsboard-lernheft/assets/css/main.css b/03_js-dom/unterricht/tag21/08_newsboard-lernheft/assets/css/main.css new file mode 100644 index 0000000..58fcd5a --- /dev/null +++ b/03_js-dom/unterricht/tag21/08_newsboard-lernheft/assets/css/main.css @@ -0,0 +1,227 @@ +* { + margin: 0; +} +html { + font-size: 100%; + padding: 0; + background-attachment: fixed; + background-image: -webkit-linear-gradient(top, #eef0f2, #d3d5d9); + background-image: -moz-linear-gradient(top, #eef0f2, #d3d5d9); + background-image: linear-gradient(to bottom, #eef0f2, #d3d5d9); +} +body { + color: #333; + font-size: 1em; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + text-align: left; + margin: 1em; + padding: 0; +} +p, +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 1rem; +} +p { + line-height: 1.5em; + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; +} +p:last-child { + margin-bottom: 0; +} +a { + color: #2f83e8; + text-decoration: none; +} +a:hover { + text-decoration: underline; +} +strong, +b { + font-weight: bold; +} +em, +i { + font-style: italic; +} +.float_left { + float: left; +} +.float_right { + float: right; +} +.disabled { + opacity: 0.4; + cursor: default; +} +.message_number { + color: #fff; + font-size: 0.8em; + font-weight: bold; + text-align: center; + line-height: 1em; + position: absolute; + top: -0.5em; + left: -0.5em; + display: block; + padding-top: 0.3em; + min-width: 2em; + height: 2em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + cursor: default; + background-color: #ea2314; + background-image: -webkit-linear-gradient(top, #f78f91, #c50404); + background-image: -moz-linear-gradient(top, #f78f91, #c50404); + background-image: linear-gradient(to bottom, #f78f91, #c50404); + border: 2px solid #fff; + -webkit-border-radius: 1em; + -moz-border-radius: 1em; + border-radius: 1em; + -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); +} +.newsboard_wrapper { + margin: 0 auto 2em auto; + padding: 13px 0 0 17px; + max-width: 550px; + position: relative; + background: url('../img/sheets.png') no-repeat; +} +.newsboard_wrapper:before { + content: url('../img/paperclip.png'); + position: absolute; + top: 5px; + right: 35px; + z-index: 1; +} +.newsboard_wrapper .newsboard { + padding: 29px 1.25rem 4rem 1.25rem; + min-height: 20em; + position: relative; + border: 1px solid #ccc; + background-color: #fff; + background-image: -webkit-linear-gradient(#dddddd, #ffffff 1px); + background-image: -moz-linear-gradient(#dddddd, #ffffff 1px); + background-image: linear-gradient(#dddddd, #ffffff 1px); + background-position: 0 1.3em; + -webkit-background-size: 100% 1.5em; + -moz-background-size: 100% 1.5em; + background-size: 100% 1.5em; + -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); + box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); +} +.newsboard_wrapper .newsboard .close_button { + color: #777; + font-size: 1.2em; + text-decoration: none; + line-height: 1em; + position: absolute; + top: 10px; + right: 14px; + display: block; +} +.newsboard_wrapper .newsboard .close_button:hover { + color: #444; +} +.newsboard_wrapper .newsboard .newsboard_footer { + color: #999; + font-size: 0.8em; +} +.newsboard_wrapper .newsboard .paging_bar { + font-size: 1.8em; + padding: 0 1.25rem; + position: absolute; + left: 0; + right: 0; + bottom: 1rem; + white-space: nowrap; +} +.newsboard_wrapper .newsboard .paging_bar .float_left a, +.newsboard_wrapper .newsboard .paging_bar .float_right a { + color: #777; + text-decoration: none; +} +.newsboard_wrapper .newsboard .paging_bar .float_left a { + margin-right: 0.3em; +} +.newsboard_wrapper .newsboard .paging_bar .float_right a { + margin-left: 0.3em; +} +.newsboard_wrapper .newsboard .paging_bar .progressbar { + display: block; + width: 40%; + margin: 0 auto; +} +.newsboard_wrapper .newsboard .paging_bar progress { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + vertical-align: 0; + line-height: normal; + color: #2f83e8; + width: 100%; + height: 0.6rem; + border-style: none; + padding: 0; + background-color: #eee; + -webkit-border-radius: 0.3rem; + -moz-border-radius: 0.3rem; + border-radius: 0.3rem; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); +} +.newsboard_wrapper .newsboard .paging_bar progress::-webkit-progress-bar { + padding: 0; + border-style: none; + background-color: transparent; +} +.newsboard_wrapper .newsboard .paging_bar progress::-webkit-progress-value { + -webkit-border-radius: 0.3rem; + border-radius: 0.3rem; + background-color: #2f83e8; + background-image: -webkit-linear-gradient(top, #8bbaf2, #176acd); + background-image: linear-gradient(to bottom, #8bbaf2, #176acd); +} +.newsboard_wrapper .newsboard .paging_bar progress::-moz-progress-bar { + -moz-border-radius: 0.3rem; + border-radius: 0.3rem; + background-color: #2f83e8; + background-image: -moz-linear-gradient(top, #8bbaf2, #176acd); + background-image: linear-gradient(to bottom, #8bbaf2, #176acd); +} +.newsboard_wrapper .newsboard .newsboard_content h1, +.newsboard_wrapper .newsboard .newsboard_content h2 { + font-weight: normal; + font-family: + 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Light', 'Helvetica-Light', Helvetica, Arial, sans-serif; + letter-spacing: 0.03em; +} +.newsboard_wrapper .newsboard .newsboard_content h1 { + font-size: 1.75em; +} +.newsboard_wrapper .newsboard .newsboard_content h2 { + color: #2f83e8; + font-size: 1.2em; + line-height: 1.4em; +} +.newsboard_wrapper .newsboard .newsboard_content:empty { + color: #999; + font-size: 1.15em; + text-align: center; + padding-top: 10.5rem; + background: url('../img/empty.png') no-repeat center 3.75rem; +} +.newsboard_wrapper .newsboard .newsboard_content:empty:after { + content: 'Keine neuen Mitteilungen.'; +} diff --git a/03_js-dom/unterricht/tag21/08_newsboard-lernheft/assets/img/empty.png b/03_js-dom/unterricht/tag21/08_newsboard-lernheft/assets/img/empty.png new file mode 100644 index 0000000000000000000000000000000000000000..d650b1b78887a3516f6357dc094da5b9088979af GIT binary patch literal 5270 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 QO#lD@07*qoM6N<$f*W@tL;wH) literal 0 HcmV?d00001 diff --git a/03_js-dom/unterricht/tag21/08_newsboard-lernheft/assets/img/sheets.png b/03_js-dom/unterricht/tag21/08_newsboard-lernheft/assets/img/sheets.png new file mode 100644 index 0000000000000000000000000000000000000000..14680cbc1301ad6934e18960b52d5224b780173f GIT binary patch literal 3591 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 Pb~1L>N3F^%&&2-^^j01| literal 0 HcmV?d00001 diff --git a/03_js-dom/unterricht/tag21/08_newsboard-lernheft/assets/js/main.js b/03_js-dom/unterricht/tag21/08_newsboard-lernheft/assets/js/main.js new file mode 100644 index 0000000..0ed6caa --- /dev/null +++ b/03_js-dom/unterricht/tag21/08_newsboard-lernheft/assets/js/main.js @@ -0,0 +1,50 @@ +'use strict'; + +{ + const init = () => { + showFirstMessage(); + $('[title=next]').addEventListener('click', nextMessage); + $('[title=prev]').addEventListener('click', prevMessage); + }; + + const showFirstMessage = () => showMessageByNumber(1); + + const showMessageByNumber = (messageNumber) => { + $('.newsboard_content').innerHTML = messages[messageNumber - 1]; + }; + + const nextMessage = (e) => { + e.preventDefault(); // Standardverhalten unterbinden + showMessageByNumber(++currentMessageNumber); + console.log('next'); + }; + const prevMessage = (e) => { + e.preventDefault(); // Standardverhalten unterbinden + showMessageByNumber(--currentMessageNumber); + console.log('prev'); + }; + + const messages = [ + `

Tutors are on a strike!!!

+

All assignmnent are automatically graded with 0 points

+

Duis pretium ornare odio nec cursus. Nulla quis dolor vitae nulla condimentum maximus nec vitae purus. Curabitur ut mi non nulla molestie porta. Curabitur dignissim lacinia condimentum. In hac habitasse platea dictumst. Mauris ut urna magna. Mauris venenatis eu quam nec posuere. Nulla facilisi. Donec convallis sodales massa, et consequat nunc vehicula malesuada.

+

9/25/2015 by N. O'body

`, + + `

Madness!

+

How to earn a fortune, with a complete stupid idea

+

Ut molestie elementum risus, eget rutrum dui tristique id. Duis ac elit a mi convallis lacinia. Sed at ultricies magna. Pellentesque nisl est, mattis eget porta eu, rhoncus in urna. Integer faucibus lectus nec malesuada tempus. Duis consectetur sollicitudin ultricies. Cras massa nulla, aliquet vitae interdum quis, venenatis at quam.

+

08/13/20156 by Dr. Ken Hurt

`, + + `

I did something, and you will never guess what happened next...

+

Donec tristique, leo at suscipit pellentesque, mauris neque congue leo!

+

Aenean egestas mauris at neque egestas hendrerit id ut erat. Donec iaculis ornare gravida. Vestibulum condimentum, tortor nec eleifend consectetur, justo lacus dignissim ante, eget commodo enim urna sollicitudin arcu. Odio eu leo pulvinar rutrum sed a turpis. Nunc dui tortor, rutrum vitae gravida quis, hendrerit a massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas

+

Integer non venenatis tellus. Phasellus tellus leo, suscipit ac vulputate non, varius nec eros. Etiam scelerisque nisi arcu, interdum tempus dui volutpat vel. Donec eget posuere nulla. Etiam ornare dapibus tortor, ac sollicitudin nisi porta a. Donec tristique, leo at suscipit pellentesque, mauris neque congue leo, sed tempor massa justo a ligula. Curabitur vitae rhoncus lacus, quis varius felis. Ut tincidunt sit amet nisl finibus tempus. Curabitur mollis sit amet leo a sagittis.

+

2015/06/02 by Chris P. Bacon

`, + ]; + let currentMessageNumber = 1; + + const $ = (qs) => document.querySelector(qs); + const $$ = (qs) => Array.from(document.querySelectorAll(qs)); + + init(); +} diff --git a/03_js-dom/unterricht/tag21/08_newsboard-lernheft/index.html b/03_js-dom/unterricht/tag21/08_newsboard-lernheft/index.html new file mode 100644 index 0000000..9c007ea --- /dev/null +++ b/03_js-dom/unterricht/tag21/08_newsboard-lernheft/index.html @@ -0,0 +1,40 @@ + + + + + + Newsboard + + + + + + + +
+
+ X + + × + +
+ +
+ + « + ‹ + + + + › + » + + + + + +
+
+
+ +