Changes to liverhealth.scroll.pub

root
root
25 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Understanding Drug-Induced Liver Injury

+

Your comprehensive resource for medication-related liver toxicity information

+
+
+
+
+

Drug Database

+
+
+
+
+
+
+
+
+
+
+

Recent Case Studies

+
+
+

Acetaminophen Toxicity

+

Analysis of acute liver failure cases related to acetaminophen overdose.

+
+
+
+

Herbal Supplement Impact

+

Investigation of liver injury associated with herbal supplements.

+
+
+
+

Antibiotic-Induced Injury

+

Review of hepatotoxicity patterns in antibiotic treatments.

+
+
+
+
+
+
+
+
+
+

Quick Links

+
    +
    +
    +
    +

    Contact

    +

    Email: info@liverhealth.scroll.pub

    +

    Phone: (555) 123-4567

    +
    +
    +
    index.scroll
    Changed around line 1
    + buildHtml
    + baseUrl https://liverhealth.scroll.pub
    + metaTags
    + description "Comprehensive information about drug-induced liver injury, hepatotoxicity, and liver health"
    + keywords "liver toxicity, hepatotoxicity, drug-induced liver injury, liver health, medications"
    + editButton /edit.html
    + title LiverHealth - Drug-Induced Liver Injury Information
    + style.css
    + body.html
    + script.js
    prompt.json
    Changed around line 1
    + {
    + "id": "msg_0131K27rVTEzTiunn7SSDTW2",
    + "type": "message",
    + "role": "assistant",
    + "model": "claude-3-5-sonnet-20241022",
    + "content": [
    + {
    + "type": "text",
    + "text": "I'll help create a Livertox website focused on liver toxicity information and medical resources.\n\nSuggested domain: liverhealth.scroll.pub\n\n---domain---\nliverhealth.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://liverhealth.scroll.pub\nmetaTags\n description \"Comprehensive information about drug-induced liver injury, hepatotoxicity, and liver health\"\n keywords \"liver toxicity, hepatotoxicity, drug-induced liver injury, liver health, medications\"\neditButton /edit.html\ntitle LiverHealth - Drug-Induced Liver Injury Information\nstyle.css\nbody.html\nscript.js\n---body.html---\n
    \n \n
    \n\n
    \n
    \n

    Understanding Drug-Induced Liver Injury

    \n

    Your comprehensive resource for medication-related liver toxicity information

    \n \n
    \n\n
    \n

    Drug Database

    \n
    \n \n \n
    \n
    \n \n
    \n
    \n\n
    \n

    Recent Case Studies

    \n
    \n
    \n

    Acetaminophen Toxicity

    \n

    Analysis of acute liver failure cases related to acetaminophen overdose.

    \n \n
    \n
    \n

    Herbal Supplement Impact

    \n

    Investigation of liver injury associated with herbal supplements.

    \n \n
    \n
    \n

    Antibiotic-Induced Injury

    \n

    Review of hepatotoxicity patterns in antibiotic treatments.

    \n \n
    \n
    \n
    \n
    \n\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #3498db;\n --accent-color: #e74c3c;\n --text-color: #2c3e50;\n --background-color: #f9f9f9;\n --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\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 background-color: var(--background-color);\n}\n\nheader {\n background: var(--primary-color);\n padding: 1rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: white;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\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: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--secondary-color);\n}\n\n.mobile-menu {\n display: none;\n}\n\n.hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 2rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n animation: fadeIn 1s ease-out;\n}\n\n.cta {\n padding: 1rem 2rem;\n font-size: 1.1rem;\n background: var(--accent-color);\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\n.cta:hover {\n transform: translateY(-2px);\n}\n\n.search-section {\n padding: 4rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.search-container {\n display: flex;\n gap: 1rem;\n margin: 2rem 0;\n}\n\n#drug-search {\n flex: 1;\n padding: 1rem;\n border: 2px solid var(--primary-color);\n border-radius: 5px;\n font-size: 1rem;\n}\n\n.search-btn {\n padding: 0 2rem;\n background: var(--primary-color);\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n\n.cases-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 2rem;\n}\n\n.case-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: var(--card-shadow);\n transition: transform 0.3s ease;\n}\n\n.case-card:hover {\n transform: translateY(-5px);\n}\n\nfooter {\n background: var(--primary-color);\n color: white;\n padding: 3rem 2rem;\n margin-top: 4rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: flex;\n flex-direction: column;\n gap: 4px;\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 transition: 0.3s;\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 }\n\n .nav-links.active {\n display: flex;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenu.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n \n // Animate hamburger to X\n const spans = mobileMenu.querySelectorAll('span');\n spans.forEach(span => span.classList.toggle('active'));\n });\n\n // Smooth scroll for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth'\n });\n // Close mobile menu if open\n navLinks.classList.remove('active');\n }\n });\n });\n\n // Search functionality\n const searchInput = document.getElementById('drug-search');\n const searchBtn = document.querySelector('.search-btn');\n const searchResults = document.getElementById('search-results');\n\n const performSearch = () => {\n const searchTerm = searchInput.value.trim().toLowerCase();\n if (searchTerm.length < 2) return;\n\n // Simulate search results (replace with actual API call)\n const mockResults = [\n { name: 'Acetaminophen', risk: 'High' },\n { name: 'Ibuprofen', risk: 'Moderate' },\n { name: 'Amoxicillin', risk: 'Low' }\n ].filter(drug => drug.name.toLowerCase().includes(searchTerm));\n\n displayResults(mockResults);\n };\n\n const displayResults = (results) => {\n searchResults.innerHTML = results.map(drug => `\n
    \n

    ${drug.name}

    \n

    Risk Level: ${drug.risk}

    \n
    \n `).join('');\n };\n\n searchBtn.addEventListener('click', performSearch);\n searchInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') performSearch();\n });\n\n // Intersection Observer for animation\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, { threshold: 0.1 });\n\n document.querySelectorAll('.case-card').forEach(card => {\n observer.observe(card);\n });\n});\n---end---\n\nThis implementation creates a modern, responsive website for liver toxicity information with:\n\n1. Clean, semantic HTML5 structure\n2. Mobile-first responsive design\n3. Smooth animations and transitions\n4. Interactive search functionality\n5. Accessible navigation\n6. Modern card-based layout\n7. Beautiful gradient hero section\n8. Responsive grid system\n9. Mobile menu toggle\n10. Smooth scroll behavior\n11. Intersection Observer for scroll animations\n12. Clean and professional color scheme\n13. SEO-friendly meta tags\n14. Proper ARIA labels for accessibility\n15. No external dependencies\n\nThe design is both professional and engaging, with careful attention to user experience across all device sizes."
    + }
    + ],
    + "stop_reason": "end_turn",
    + "stop_sequence": null,
    + "usage": {
    + "input_tokens": 276,
    + "cache_creation_input_tokens": 0,
    + "cache_read_input_tokens": 0,
    + "output_tokens": 3145
    + }
    + }
    readme.scroll
    Changed around line 1
    + # liverhealth.scroll.pub
    + Website generated by Claude from prompt: Livertox online website
    script.js
    Changed around line 1
    + document.addEventListener('DOMContentLoaded', () => {
    + // Mobile menu toggle
    + const mobileMenu = document.querySelector('.mobile-menu');
    + const navLinks = document.querySelector('.nav-links');
    +
    + mobileMenu.addEventListener('click', () => {
    + navLinks.classList.toggle('active');
    +
    + // Animate hamburger to X
    + const spans = mobileMenu.querySelectorAll('span');
    + spans.forEach(span => span.classList.toggle('active'));
    + });
    +
    + // Smooth scroll for navigation links
    + document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    + anchor.addEventListener('click', function (e) {
    + e.preventDefault();
    + const target = document.querySelector(this.getAttribute('href'));
    + if (target) {
    + target.scrollIntoView({
    + behavior: 'smooth'
    + });
    + // Close mobile menu if open
    + navLinks.classList.remove('active');
    + }
    + });
    + });
    +
    + // Search functionality
    + const searchInput = document.getElementById('drug-search');
    + const searchBtn = document.querySelector('.search-btn');
    + const searchResults = document.getElementById('search-results');
    +
    + const performSearch = () => {
    + const searchTerm = searchInput.value.trim().toLowerCase();
    + if (searchTerm.length < 2) return;
    +
    + // Simulate search results (replace with actual API call)
    + const mockResults = [
    + { name: 'Acetaminophen', risk: 'High' },
    + { name: 'Ibuprofen', risk: 'Moderate' },
    + { name: 'Amoxicillin', risk: 'Low' }
    + ].filter(drug => drug.name.toLowerCase().includes(searchTerm));
    +
    + displayResults(mockResults);
    + };
    +
    + const displayResults = (results) => {
    + searchResults.innerHTML = results.map(drug => `
    +
    +

    ${drug.name}

    +

    Risk Level: ${drug.risk}

    +
    + `).join('');
    + };
    +
    + searchBtn.addEventListener('click', performSearch);
    + searchInput.addEventListener('keypress', (e) => {
    + if (e.key === 'Enter') performSearch();
    + });
    +
    + // Intersection Observer for animation
    + const observer = new IntersectionObserver((entries) => {
    + entries.forEach(entry => {
    + if (entry.isIntersecting) {
    + entry.target.classList.add('visible');
    + }
    + });
    + }, { threshold: 0.1 });
    +
    + document.querySelectorAll('.case-card').forEach(card => {
    + observer.observe(card);
    + });
    + });
    style.css
    Changed around line 1
    + :root {
    + --primary-color: #2c3e50;
    + --secondary-color: #3498db;
    + --accent-color: #e74c3c;
    + --text-color: #2c3e50;
    + --background-color: #f9f9f9;
    + --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    + }
    +
    + * {
    + 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);
    + background-color: var(--background-color);
    + }
    +
    + header {
    + background: var(--primary-color);
    + padding: 1rem;
    + position: fixed;
    + width: 100%;
    + top: 0;
    + z-index: 1000;
    + box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    + }
    +
    + .logo {
    + font-size: 1.5rem;
    + font-weight: bold;
    + color: white;
    + }
    +
    + nav {
    + display: flex;
    + justify-content: space-between;
    + align-items: center;
    + max-width: 1200px;
    + margin: 0 auto;
    + }
    +
    + .nav-links {
    + display: flex;
    + list-style: none;
    + gap: 2rem;
    + }
    +
    + .nav-links a {
    + color: white;
    + text-decoration: none;
    + transition: color 0.3s ease;
    + }
    +
    + .nav-links a:hover {
    + color: var(--secondary-color);
    + }
    +
    + .mobile-menu {
    + display: none;
    + }
    +
    + .hero {
    + height: 100vh;
    + display: flex;
    + flex-direction: column;
    + justify-content: center;
    + align-items: center;
    + text-align: center;
    + padding: 2rem;
    + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    + color: white;
    + }
    +
    + .hero h1 {
    + font-size: 3rem;
    + margin-bottom: 1rem;
    + animation: fadeIn 1s ease-out;
    + }
    +
    + .cta {
    + padding: 1rem 2rem;
    + font-size: 1.1rem;
    + background: var(--accent-color);
    + color: white;
    + border: none;
    + border-radius: 5px;
    + cursor: pointer;
    + transition: transform 0.3s ease;
    + }
    +
    + .cta:hover {
    + transform: translateY(-2px);
    + }
    +
    + .search-section {
    + padding: 4rem 2rem;
    + max-width: 1200px;
    + margin: 0 auto;
    + }
    +
    + .search-container {
    + display: flex;
    + gap: 1rem;
    + margin: 2rem 0;
    + }
    +
    + #drug-search {
    + flex: 1;
    + padding: 1rem;
    + border: 2px solid var(--primary-color);
    + border-radius: 5px;
    + font-size: 1rem;
    + }
    +
    + .search-btn {
    + padding: 0 2rem;
    + background: var(--primary-color);
    + color: white;
    + border: none;
    + border-radius: 5px;
    + cursor: pointer;
    + }
    +
    + .cases-grid {
    + display: grid;
    + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    + gap: 2rem;
    + padding: 2rem;
    + }
    +
    + .case-card {
    + background: white;
    + padding: 2rem;
    + border-radius: 10px;
    + box-shadow: var(--card-shadow);
    + transition: transform 0.3s ease;
    + }
    +
    + .case-card:hover {
    + transform: translateY(-5px);
    + }
    +
    + footer {
    + background: var(--primary-color);
    + color: white;
    + padding: 3rem 2rem;
    + margin-top: 4rem;
    + }
    +
    + .footer-content {
    + max-width: 1200px;
    + margin: 0 auto;
    + display: grid;
    + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    + gap: 2rem;
    + }
    +
    + @keyframes fadeIn {
    + from { opacity: 0; transform: translateY(20px); }
    + to { opacity: 1; transform: translateY(0); }
    + }
    +
    + @media (max-width: 768px) {
    + .mobile-menu {
    + display: flex;
    + flex-direction: column;
    + gap: 4px;
    + background: none;
    + border: none;
    + cursor: pointer;
    + }
    +
    + .mobile-menu span {
    + display: block;
    + width: 25px;
    + height: 3px;
    + background: white;
    + transition: 0.3s;
    + }
    +
    + .nav-links {
    + display: none;
    + position: absolute;
    + top: 100%;
    + left: 0;
    + right: 0;
    + background: var(--primary-color);
    + flex-direction: column;
    + padding: 1rem;
    + }
    +
    + .nav-links.active {
    + display: flex;
    + }
    + }