commit 8bab654faa0f6dca7f2433ceb67a5106bea93a50
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 08:36:31 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..0334721
--- /dev/null
+++ b/body.html
@@ -0,0 +1,51 @@
+<header>
+ <nav>
+ <div class="logo">Maronite Heritage</div>
+ <div class="nav-links">
+ <a href="#home" class="active">Home</a>
+ <a href="#quizzes">Quizzes</a>
+ <a href="#gallery">Gallery</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section id="home" class="hero">
+ <h1>Discover Maronite History</h1>
+ <p>Test your knowledge about one of the oldest Christian communities</p>
+ <button class="cta-button" onclick="startQuiz()">Start Quiz</button>
+ </section>
+
+ <section id="quiz-container" class="hidden">
+ <div class="quiz-card">
+ <h2 id="question"></h2>
+ <div id="options" class="options-grid"></div>
+ <div class="quiz-footer">
+ <span id="score">Score: 0</span>
+ <button id="next-btn" onclick="nextQuestion()" disabled>Next</button>
+ </div>
+ </div>
+ </section>
+
+ <section id="gallery" class="gallery">
+ <h2>Historical Gallery</h2>
+ <div class="gallery-grid">
+ <figure class="gallery-item">
+ <div class="img-placeholder" data-caption="Saint Maron"></div>
+ <figcaption>Saint Maron (4th Century)</figcaption>
+ </figure>
+ <figure class="gallery-item">
+ <div class="img-placeholder" data-caption="Qadisha Valley"></div>
+ <figcaption>Qadisha Valley Monasteries</figcaption>
+ </figure>
+ <figure class="gallery-item">
+ <div class="img-placeholder" data-caption="Maronite Patriarch"></div>
+ <figcaption>First Maronite Patriarch</figcaption>
+ </figure>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Created with dedication to preserve Maronite heritage</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..e8a8024
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+buildHtml
+baseUrl https://maronite-heritage.scroll.pub
+metaTags
+ description "Interactive quizzes about Maronite history and heritage. Learn about this ancient Christian community through engaging questions and beautiful visuals."
+ keywords "Maronite, history quiz, Lebanese Christians, Middle Eastern Christianity, interactive learning"
+editButton /edit.html
+title Maronite Heritage Quiz
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..95355f2
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01VFdh7KHDuDRZEsK8De61Zn",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a complete interactive Maronite history quiz website:\n\n---domain---\nmaronite-heritage.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://maronite-heritage.scroll.pub\nmetaTags\n description \"Interactive quizzes about Maronite history and heritage. Learn about this ancient Christian community through engaging questions and beautiful visuals.\"\n keywords \"Maronite, history quiz, Lebanese Christians, Middle Eastern Christianity, interactive learning\"\neditButton /edit.html\ntitle Maronite Heritage Quiz\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">Maronite Heritage</div>\n <div class=\"nav-links\">\n <a href=\"#home\" class=\"active\">Home</a>\n <a href=\"#quizzes\">Quizzes</a>\n <a href=\"#gallery\">Gallery</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section id=\"home\" class=\"hero\">\n <h1>Discover Maronite History</h1>\n <p>Test your knowledge about one of the oldest Christian communities</p>\n <button class=\"cta-button\" onclick=\"startQuiz()\">Start Quiz</button>\n </section>\n\n <section id=\"quiz-container\" class=\"hidden\">\n <div class=\"quiz-card\">\n <h2 id=\"question\"></h2>\n <div id=\"options\" class=\"options-grid\"></div>\n <div class=\"quiz-footer\">\n <span id=\"score\">Score: 0</span>\n <button id=\"next-btn\" onclick=\"nextQuestion()\" disabled>Next</button>\n </div>\n </div>\n </section>\n\n <section id=\"gallery\" class=\"gallery\">\n <h2>Historical Gallery</h2>\n <div class=\"gallery-grid\">\n <figure class=\"gallery-item\">\n <div class=\"img-placeholder\" data-caption=\"Saint Maron\"></div>\n <figcaption>Saint Maron (4th Century)</figcaption>\n </figure>\n <figure class=\"gallery-item\">\n <div class=\"img-placeholder\" data-caption=\"Qadisha Valley\"></div>\n <figcaption>Qadisha Valley Monasteries</figcaption>\n </figure>\n <figure class=\"gallery-item\">\n <div class=\"img-placeholder\" data-caption=\"Maronite Patriarch\"></div>\n <figcaption>First Maronite Patriarch</figcaption>\n </figure>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Created with dedication to preserve Maronite heritage</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #e74c3c;\n --text-color: #333;\n --light-bg: #ecf0f1;\n --white: #ffffff;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n background: var(--primary-color);\n color: var(--white);\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links a {\n color: var(--white);\n text-decoration: none;\n margin-left: 2rem;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\n.hero {\n text-align: center;\n padding: 4rem 2rem;\n background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), \n var(--light-bg);\n color: var(--white);\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.cta-button {\n padding: 1rem 2rem;\n font-size: 1.2rem;\n background: var(--accent-color);\n color: var(--white);\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\n.cta-button:hover {\n transform: scale(1.05);\n}\n\n.quiz-card {\n max-width: 800px;\n margin: 2rem auto;\n padding: 2rem;\n background: var(--white);\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.options-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n margin: 2rem 0;\n}\n\n.option {\n padding: 1rem;\n border: 2px solid var(--primary-color);\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.option:hover {\n background: var(--light-bg);\n}\n\n.option.correct {\n background: #27ae60;\n color: var(--white);\n}\n\n.option.wrong {\n background: var(--accent-color);\n color: var(--white);\n}\n\n.gallery {\n padding: 4rem 2rem;\n}\n\n.gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.gallery-item {\n text-align: center;\n}\n\n.img-placeholder {\n height: 200px;\n background: var(--light-bg);\n border-radius: 10px;\n margin-bottom: 1rem;\n}\n\n.hidden {\n display: none;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary-color);\n color: var(--white);\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero h1 {\n font-size: 2rem;\n }\n}\n\n---script.js---\nconst quizData = [\n {\n question: \"Who was Saint Maron?\",\n options: [\n \"A 4th-century Syrian Christian monk\",\n \"A Roman emperor\",\n \"A Lebanese president\",\n \"A medieval scholar\"\n ],\n correct: 0\n },\n {\n question: \"Where did the early Maronite community first settle?\",\n options: [\n \"Egypt\",\n \"Mount Lebanon\",\n \"Rome\",\n \"Constantinople\"\n ],\n correct: 1\n },\n {\n question: \"What is the primary language of the Maronite liturgy?\",\n options: [\n \"Arabic\",\n \"Latin\",\n \"Syriac\",\n \"Greek\"\n ],\n correct: 2\n }\n];\n\nlet currentQuestion = 0;\nlet score = 0;\n\nfunction startQuiz() {\n document.getElementById('home').classList.add('hidden');\n document.getElementById('quiz-container').classList.remove('hidden');\n loadQuestion();\n}\n\nfunction loadQuestion() {\n const question = quizData[currentQuestion];\n document.getElementById('question').textContent = question.question;\n \n const optionsContainer = document.getElementById('options');\n optionsContainer.innerHTML = '';\n \n question.options.forEach((option, index) => {\n const button = document.createElement('button');\n button.classList.add('option');\n button.textContent = option;\n button.onclick = () => selectOption(index);\n optionsContainer.appendChild(button);\n });\n \n document.getElementById('next-btn').disabled = true;\n}\n\nfunction selectOption(index) {\n const options = document.querySelectorAll('.option');\n options.forEach(option => {\n option.disabled = true;\n });\n \n if (index === quizData[currentQuestion].correct) {\n options[index].classList.add('correct');\n score++;\n } else {\n options[index].classList.add('wrong');\n options[quizData[currentQuestion].correct].classList.add('correct');\n }\n \n document.getElementById('score').textContent = `Score: ${score}`;\n document.getElementById('next-btn').disabled = false;\n}\n\nfunction nextQuestion() {\n currentQuestion++;\n \n if (currentQuestion < quizData.length) {\n loadQuestion();\n } else {\n document.getElementById('quiz-container').innerHTML = `\n <div class=\"quiz-card\">\n <h2>Quiz Complete!</h2>\n <p>Your final score: ${score}/${quizData.length}</p>\n <button class=\"cta-button\" onclick=\"location.reload()\">Try Again</button>\n </div>\n `;\n }\n}\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 289,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2409
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..72805a6
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# maronite-heritage.scroll.pub
+Website generated by Claude from prompt: Interactive with quizzes about the history of the Maronite people with pictures and graphics
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..b03ccd9
--- /dev/null
+++ b/script.js
@@ -0,0 +1,93 @@
+const quizData = [
+ {
+ question: "Who was Saint Maron?",
+ options: [
+ "A 4th-century Syrian Christian monk",
+ "A Roman emperor",
+ "A Lebanese president",
+ "A medieval scholar"
+ ],
+ correct: 0
+ },
+ {
+ question: "Where did the early Maronite community first settle?",
+ options: [
+ "Egypt",
+ "Mount Lebanon",
+ "Rome",
+ "Constantinople"
+ ],
+ correct: 1
+ },
+ {
+ question: "What is the primary language of the Maronite liturgy?",
+ options: [
+ "Arabic",
+ "Latin",
+ "Syriac",
+ "Greek"
+ ],
+ correct: 2
+ }
+];
+
+let currentQuestion = 0;
+let score = 0;
+
+function startQuiz() {
+ document.getElementById('home').classList.add('hidden');
+ document.getElementById('quiz-container').classList.remove('hidden');
+ loadQuestion();
+}
+
+function loadQuestion() {
+ const question = quizData[currentQuestion];
+ document.getElementById('question').textContent = question.question;
+
+ const optionsContainer = document.getElementById('options');
+ optionsContainer.innerHTML = '';
+
+ question.options.forEach((option, index) => {
+ const button = document.createElement('button');
+ button.classList.add('option');
+ button.textContent = option;
+ button.onclick = () => selectOption(index);
+ optionsContainer.appendChild(button);
+ });
+
+ document.getElementById('next-btn').disabled = true;
+}
+
+function selectOption(index) {
+ const options = document.querySelectorAll('.option');
+ options.forEach(option => {
+ option.disabled = true;
+ });
+
+ if (index === quizData[currentQuestion].correct) {
+ options[index].classList.add('correct');
+ score++;
+ } else {
+ options[index].classList.add('wrong');
+ options[quizData[currentQuestion].correct].classList.add('correct');
+ }
+
+ document.getElementById('score').textContent = `Score: ${score}`;
+ document.getElementById('next-btn').disabled = false;
+}
+
+function nextQuestion() {
+ currentQuestion++;
+
+ if (currentQuestion < quizData.length) {
+ loadQuestion();
+ } else {
+ document.getElementById('quiz-container').innerHTML = `
+ <div class="quiz-card">
+ <h2>Quiz Complete!</h2>
+ <p>Your final score: ${score}/${quizData.length}</p>
+ <button class="cta-button" onclick="location.reload()">Try Again</button>
+ </div>
+ `;
+ }
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..39c02fc
--- /dev/null
+++ b/style.css
@@ -0,0 +1,153 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #e74c3c;
+ --text-color: #333;
+ --light-bg: #ecf0f1;
+ --white: #ffffff;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 2rem;
+ background: var(--primary-color);
+ color: var(--white);
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+.nav-links a {
+ color: var(--white);
+ text-decoration: none;
+ margin-left: 2rem;
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--accent-color);
+}
+
+.hero {
+ text-align: center;
+ padding: 4rem 2rem;
+ background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
+ var(--light-bg);
+ color: var(--white);
+}
+
+.hero h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+.cta-button {
+ padding: 1rem 2rem;
+ font-size: 1.2rem;
+ background: var(--accent-color);
+ color: var(--white);
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+}
+
+.cta-button:hover {
+ transform: scale(1.05);
+}
+
+.quiz-card {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 2rem;
+ background: var(--white);
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.options-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+ margin: 2rem 0;
+}
+
+.option {
+ padding: 1rem;
+ border: 2px solid var(--primary-color);
+ border-radius: 5px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.option:hover {
+ background: var(--light-bg);
+}
+
+.option.correct {
+ background: #27ae60;
+ color: var(--white);
+}
+
+.option.wrong {
+ background: var(--accent-color);
+ color: var(--white);
+}
+
+.gallery {
+ padding: 4rem 2rem;
+}
+
+.gallery-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.gallery-item {
+ text-align: center;
+}
+
+.img-placeholder {
+ height: 200px;
+ background: var(--light-bg);
+ border-radius: 10px;
+ margin-bottom: 1rem;
+}
+
+.hidden {
+ display: none;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary-color);
+ color: var(--white);
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero h1 {
+ font-size: 2rem;
+ }
+}