Changes to lebanon-conflict.scroll.pub

root
root
25 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+
+
+
    +
  • Internal Factions
    • +
  • External Powers
    • +
  • Timeline
    • +
    +
    +
    +
    +
    +
    +

    Participants in the Lebanese Civil War

    +

    1975-1990

    +
    +
    +
    +

    Internal Factions

    +
    +
    +

    Lebanese Front

    +
      +
    • Kataeb Party
      • +
    • Tigers Militia
      • +
    • Guardians of the Cedars
      • +
      +
      +
      +

      Lebanese National Movement

      +
        +
      • Progressive Socialist Party
        • +
      • Lebanese Communist Party
        • +
      • Syrian Social Nationalist Party
        • +
        +
        +
        +

        Lebanese Armed Forces

        +
          +
        • Regular Army
          • +
        • Army of Free Lebanon
          • +
          +
          +
          +
          +
          +
          +

          External Powers

          +
          +
          +

          Syria

          +
            +
          • Syrian Army
            • +
          • Syrian-backed militias
            • +
            +
            +
            +

            Israel

            +
              +
            • Israel Defense Forces
              • +
            • South Lebanon Army
              • +
              +
              +
              +

              Palestinian Groups

              +
                +
              • PLO
                • +
              • Palestinian Liberation Army
                • +
                +
                +
                +
                +
                +
                +

                Key Events Timeline

                +
                +
                +
                1975
                +
                War begins
                +
                +
                +
                1976
                +
                Syrian intervention
                +
                +
                +
                1982
                +
                Israeli invasion
                +
                +
                +
                1990
                +
                Taif Agreement ends war
                +
                +
                +
                +
                +
                +
                +

                This website aims to provide historical information about the Lebanese Civil War

                +
                + Internal Factions
                + External Powers
                + Timeline
                +
                +
                index.scroll
                Changed around line 1
                + buildHtml
                + baseUrl https://lebanon-conflict.scroll.pub
                + metaTags
                + editButton /edit.html
                + title Lebanese Civil War Participants (1975-1990)
                + style.css
                + body.html
                + script.js
                prompt.json
                Changed around line 1
                + {
                + "id": "msg_01JPbKbXYnvNTCvyqExiwzoJ",
                + "type": "message",
                + "role": "assistant",
                + "model": "claude-3-5-sonnet-20241022",
                + "content": [
                + {
                + "type": "text",
                + "text": "I'll help create a website documenting the Lebanese Civil War participants. A fitting domain would be:\n\n---domain---\nlebanon-conflict.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://lebanon-conflict.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Lebanese Civil War Participants (1975-1990)\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
                \n \n
                \n\n
                \n
                \n

                Participants in the Lebanese Civil War

                \n

                1975-1990

                \n
                \n\n
                \n

                Internal Factions

                \n
                \n
                \n

                Lebanese Front

                \n
                  \n
                • Kataeb Party
                  • \n
                • Tigers Militia
                  • \n
                • Guardians of the Cedars
                  • \n
                \n
                \n
                \n

                Lebanese National Movement

                \n
                  \n
                • Progressive Socialist Party
                  • \n
                • Lebanese Communist Party
                  • \n
                • Syrian Social Nationalist Party
                  • \n
                \n
                \n
                \n

                Lebanese Armed Forces

                \n
                  \n
                • Regular Army
                  • \n
                • Army of Free Lebanon
                  • \n
                \n
                \n
                \n
                \n\n
                \n

                External Powers

                \n
                \n
                \n

                Syria

                \n
                  \n
                • Syrian Army
                  • \n
                • Syrian-backed militias
                  • \n
                \n
                \n
                \n

                Israel

                \n
                  \n
                • Israel Defense Forces
                  • \n
                • South Lebanon Army
                  • \n
                \n
                \n
                \n

                Palestinian Groups

                \n
                  \n
                • PLO
                  • \n
                • Palestinian Liberation Army
                  • \n
                \n
                \n
                \n
                \n\n
                \n

                Key Events Timeline

                \n
                \n
                \n
                1975
                \n
                War begins
                \n
                \n
                \n
                1976
                \n
                Syrian intervention
                \n
                \n
                \n
                1982
                \n
                Israeli invasion
                \n
                \n
                \n
                1990
                \n
                Taif Agreement ends war
                \n
                \n
                \n
                \n
                \n\n\n\n---style.css---\n:root {\n --primary-color: #8b0000;\n --secondary-color: #f4f4f4;\n --text-color: #333;\n --card-bg: #fff;\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n}\n\nheader {\n background: var(--primary-color);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n color: white;\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n gap: 2rem;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--secondary-color);\n}\n\n.mobile-menu {\n display: none;\n}\n\nmain {\n margin-top: 4rem;\n padding: 2rem 5%;\n}\n\n.hero {\n text-align: center;\n padding: 4rem 0;\n background: linear-gradient(rgba(139,0,0,0.9), rgba(139,0,0,0.7));\n color: white;\n margin: -2rem -5.5% 2rem;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.faction-section {\n margin: 4rem 0;\n}\n\nh2 {\n text-align: center;\n margin-bottom: 2rem;\n color: var(--primary-color);\n}\n\n.faction-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin: 2rem 0;\n}\n\n.faction-card {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.faction-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 6px 12px rgba(0,0,0,0.15);\n}\n\n.faction-card h3 {\n color: var(--primary-color);\n margin-bottom: 1rem;\n}\n\n.faction-card ul {\n list-style-position: inside;\n}\n\n.timeline {\n max-width: 800px;\n margin: 0 auto;\n position: relative;\n}\n\n.timeline::before {\n content: '';\n position: absolute;\n width: 2px;\n background: var(--primary-color);\n top: 0;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.timeline-item {\n padding: 2rem 0;\n position: relative;\n width: 50%;\n}\n\n.timeline-item:nth-child(odd) {\n left: 0;\n padding-right: 2rem;\n}\n\n.timeline-item:nth-child(even) {\n left: 50%;\n padding-left: 2rem;\n}\n\n.timeline-item::before {\n content: '';\n position: absolute;\n width: 20px;\n height: 20px;\n background: var(--primary-color);\n border-radius: 50%;\n top: 50%;\n}\n\n.timeline-item:nth-child(odd)::before {\n right: -10px;\n}\n\n.timeline-item:nth-child(even)::before {\n left: -10px;\n}\n\nfooter {\n background: var(--secondary-color);\n padding: 2rem 5%;\n text-align: center;\n margin-top: 4rem;\n}\n\nfooter nav {\n display: flex;\n justify-content: center;\n gap: 2rem;\n margin-top: 1rem;\n}\n\nfooter a {\n color: var(--primary-color);\n text-decoration: none;\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .mobile-menu span {\n display: block;\n width: 25px;\n height: 3px;\n background: white;\n margin: 5px 0;\n transition: var(--transition);\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: var(--primary-color);\n flex-direction: column;\n padding: 1rem;\n text-align: center;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .timeline::before {\n left: 0;\n }\n\n .timeline-item {\n width: 100%;\n padding-left: 2rem;\n }\n\n .timeline-item:nth-child(even) {\n left: 0;\n }\n\n .timeline-item::before {\n left: -10px;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenu.addEventListener('click', function() {\n navLinks.classList.toggle('active');\n \n const spans = this.querySelectorAll('span');\n spans[0].style.transform = navLinks.classList.contains('active') \n ? 'rotate(45deg) translate(8px, 8px)' \n : 'none';\n spans[1].style.opacity = navLinks.classList.contains('active') \n ? '0' \n : '1';\n spans[2].style.transform = navLinks.classList.contains('active') \n ? 'rotate(-45deg) translate(7px, -7px)' \n : 'none';\n });\n\n // Smooth scrolling for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n const targetId = this.getAttribute('href');\n const targetElement = document.querySelector(targetId);\n \n if (targetElement) {\n const headerOffset = 80;\n const elementPosition = targetElement.getBoundingClientRect().top;\n const offsetPosition = elementPosition + window.pageYOffset - headerOffset;\n\n window.scrollTo({\n top: offsetPosition,\n behavior: 'smooth'\n });\n\n // Close mobile menu if open\n navLinks.classList.remove('active');\n }\n });\n });\n});\n\n---end---"
                + }
                + ],
                + "stop_reason": "end_turn",
                + "stop_sequence": null,
                + "usage": {
                + "input_tokens": 278,
                + "cache_creation_input_tokens": 0,
                + "cache_read_input_tokens": 0,
                + "output_tokens": 2998
                + }
                + }
                readme.scroll
                Changed around line 1
                + # lebanon-conflict.scroll.pub
                + Website generated by Claude from prompt: Show all participants in the Lebanese civil war
                script.js
                Changed around line 1
                + document.addEventListener('DOMContentLoaded', function() {
                + const mobileMenu = document.querySelector('.mobile-menu');
                + const navLinks = document.querySelector('.nav-links');
                +
                + mobileMenu.addEventListener('click', function() {
                + navLinks.classList.toggle('active');
                +
                + const spans = this.querySelectorAll('span');
                + spans[0].style.transform = navLinks.classList.contains('active')
                + ? 'rotate(45deg) translate(8px, 8px)'
                + : 'none';
                + spans[1].style.opacity = navLinks.classList.contains('active')
                + ? '0'
                + : '1';
                + spans[2].style.transform = navLinks.classList.contains('active')
                + ? 'rotate(-45deg) translate(7px, -7px)'
                + : 'none';
                + });
                +
                + // Smooth scrolling for anchor links
                + document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                + anchor.addEventListener('click', function(e) {
                + e.preventDefault();
                + const targetId = this.getAttribute('href');
                + const targetElement = document.querySelector(targetId);
                +
                + if (targetElement) {
                + const headerOffset = 80;
                + const elementPosition = targetElement.getBoundingClientRect().top;
                + const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
                +
                + window.scrollTo({
                + top: offsetPosition,
                + behavior: 'smooth'
                + });
                +
                + // Close mobile menu if open
                + navLinks.classList.remove('active');
                + }
                + });
                + });
                + });
                style.css
                Changed around line 1
                + :root {
                + --primary-color: #8b0000;
                + --secondary-color: #f4f4f4;
                + --text-color: #333;
                + --card-bg: #fff;
                + --transition: all 0.3s ease;
                + }
                +
                + * {
                + margin: 0;
                + padding: 0;
                + box-sizing: border-box;
                + }
                +
                + body {
                + font-family: 'Segoe UI', system-ui, sans-serif;
                + line-height: 1.6;
                + color: var(--text-color);
                + }
                +
                + header {
                + background: var(--primary-color);
                + position: fixed;
                + width: 100%;
                + top: 0;
                + z-index: 1000;
                + box-shadow: 0 2px 5px rgba(0,0,0,0.2);
                + }
                +
                + nav {
                + display: flex;
                + justify-content: space-between;
                + align-items: center;
                + padding: 1rem 5%;
                + max-width: 1200px;
                + margin: 0 auto;
                + }
                +
                + .logo {
                + color: white;
                + font-size: 1.5rem;
                + font-weight: bold;
                + }
                +
                + .nav-links {
                + display: flex;
                + list-style: none;
                + gap: 2rem;
                + }
                +
                + .nav-links a {
                + color: white;
                + text-decoration: none;
                + transition: var(--transition);
                + }
                +
                + .nav-links a:hover {
                + color: var(--secondary-color);
                + }
                +
                + .mobile-menu {
                + display: none;
                + }
                +
                + main {
                + margin-top: 4rem;
                + padding: 2rem 5%;
                + }
                +
                + .hero {
                + text-align: center;
                + padding: 4rem 0;
                + background: linear-gradient(rgba(139,0,0,0.9), rgba(139,0,0,0.7));
                + color: white;
                + margin: -2rem -5.5% 2rem;
                + }
                +
                + .hero h1 {
                + font-size: 3rem;
                + margin-bottom: 1rem;
                + }
                +
                + .faction-section {
                + margin: 4rem 0;
                + }
                +
                + h2 {
                + text-align: center;
                + margin-bottom: 2rem;
                + color: var(--primary-color);
                + }
                +
                + .faction-grid {
                + display: grid;
                + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                + gap: 2rem;
                + margin: 2rem 0;
                + }
                +
                + .faction-card {
                + background: var(--card-bg);
                + padding: 2rem;
                + border-radius: 8px;
                + box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                + transition: var(--transition);
                + }
                +
                + .faction-card:hover {
                + transform: translateY(-5px);
                + box-shadow: 0 6px 12px rgba(0,0,0,0.15);
                + }
                +
                + .faction-card h3 {
                + color: var(--primary-color);
                + margin-bottom: 1rem;
                + }
                +
                + .faction-card ul {
                + list-style-position: inside;
                + }
                +
                + .timeline {
                + max-width: 800px;
                + margin: 0 auto;
                + position: relative;
                + }
                +
                + .timeline::before {
                + content: '';
                + position: absolute;
                + width: 2px;
                + background: var(--primary-color);
                + top: 0;
                + bottom: 0;
                + left: 50%;
                + transform: translateX(-50%);
                + }
                +
                + .timeline-item {
                + padding: 2rem 0;
                + position: relative;
                + width: 50%;
                + }
                +
                + .timeline-item:nth-child(odd) {
                + left: 0;
                + padding-right: 2rem;
                + }
                +
                + .timeline-item:nth-child(even) {
                + left: 50%;
                + padding-left: 2rem;
                + }
                +
                + .timeline-item::before {
                + content: '';
                + position: absolute;
                + width: 20px;
                + height: 20px;
                + background: var(--primary-color);
                + border-radius: 50%;
                + top: 50%;
                + }
                +
                + .timeline-item:nth-child(odd)::before {
                + right: -10px;
                + }
                +
                + .timeline-item:nth-child(even)::before {
                + left: -10px;
                + }
                +
                + footer {
                + background: var(--secondary-color);
                + padding: 2rem 5%;
                + text-align: center;
                + margin-top: 4rem;
                + }
                +
                + footer nav {
                + display: flex;
                + justify-content: center;
                + gap: 2rem;
                + margin-top: 1rem;
                + }
                +
                + footer a {
                + color: var(--primary-color);
                + text-decoration: none;
                + }
                +
                + @media (max-width: 768px) {
                + .mobile-menu {
                + display: block;
                + background: none;
                + border: none;
                + cursor: pointer;
                + }
                +
                + .mobile-menu span {
                + display: block;
                + width: 25px;
                + height: 3px;
                + background: white;
                + margin: 5px 0;
                + transition: var(--transition);
                + }
                +
                + .nav-links {
                + display: none;
                + position: absolute;
                + top: 100%;
                + left: 0;
                + right: 0;
                + background: var(--primary-color);
                + flex-direction: column;
                + padding: 1rem;
                + text-align: center;
                + }
                +
                + .nav-links.active {
                + display: flex;
                + }
                +
                + .timeline::before {
                + left: 0;
                + }
                +
                + .timeline-item {
                + width: 100%;
                + padding-left: 2rem;
                + }
                +
                + .timeline-item:nth-child(even) {
                + left: 0;
                + }
                +
                + .timeline-item::before {
                + left: -10px;
                + }
                + }