commit 3443d05ba18f7725e3217b9abeeb3cb815c538eb
Author: root <root@hub.scroll.pub> Date: 2024-12-27 00:39:10 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..3bcb5c6 --- /dev/null +++ b/body.html @@ -0,0 +1,51 @@ +<header> + <nav> + <div class="logo">JournoBot</div> + <div class="nav-links"> + <a href="#about">About</a> + <a href="#features">Features</a> + <a href="#chat">Start Chat</a> + </div> + </nav> +</header> + +<main> + <section id="hero"> + <h1>Your AI Journalism Assistant</h1> + <p>Enhance your reporting with intelligent conversation</p> + </section> + + <section id="chat-interface"> + <div class="chat-container"> + <div id="chat-messages"></div> + <div class="chat-input-area"> + <textarea id="user-input" placeholder="Ask me about news gathering, fact-checking, or story angles..." aria-label="Chat input"></textarea> + <button id="send-button" aria-label="Send message"> + <span class="send-icon">➤</span> + </button> + </div> + </div> + </section> + + <section id="features"> + <h2>Features</h2> + <div class="features-grid"> + <div class="feature-card"> + <h3>Story Research</h3> + <p>Quick access to contextual information and background research</p> + </div> + <div class="feature-card"> + <h3>Interview Prep</h3> + <p>Generate intelligent questions for your interviews</p> + </div> + <div class="feature-card"> + <h3>Fact Checking</h3> + <p>Cross-reference information and verify sources</p> + </div> + </div> + </section> +</main> + +<footer> + <p>JournoBot - Empowering Digital Journalism</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..3bf362f --- /dev/null +++ b/index.scroll @@ -0,0 +1,10 @@ +buildHtml +baseUrl https://journobot.scroll.pub +metaTags + description An AI-powered journalist chatbot for news gathering and reporting assistance + keywords journalism, AI, chatbot, news, reporting, writing assistant +editButton /edit.html +title JournoBot - AI Journalism Assistant +style.css +body.html +script.js diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..36ff9d9 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# journobot.scroll.pub +Website generated from prompt: A journalist chatbot \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..13eaf58 --- /dev/null +++ b/script.js @@ -0,0 +1,57 @@ +document.addEventListener('DOMContentLoaded', () => { + const chatMessages = document.getElementById('chat-messages'); + const userInput = document.getElementById('user-input'); + const sendButton = document.getElementById('send-button'); + + const botResponses = { + 'hello': 'Hello! How can I assist with your journalism today?', + 'help': 'I can help with research, interview questions, fact-checking, and story angles. What would you like to explore?', + 'default': 'I understand. Let me help you gather more information about that topic.' + }; + + function addMessage(message, isBot = false) { + const messageDiv = document.createElement('div'); + messageDiv.className = `message ${isBot ? 'bot' : 'user'}`; + messageDiv.style.padding = '10px'; + messageDiv.style.margin = '10px'; + messageDiv.style.borderRadius = '10px'; + messageDiv.style.maxWidth = '70%'; + messageDiv.style.alignSelf = isBot ? 'flex-start' : 'flex-end'; + messageDiv.style.background = isBot ? '#f0f0f0' : '#6c63ff'; + messageDiv.style.color = isBot ? '#333' : 'white'; + messageDiv.textContent = message; + chatMessages.appendChild(messageDiv); + chatMessages.scrollTop = chatMessages.scrollHeight; + } + + function getBotResponse(input) { + const lowercaseInput = input.toLowerCase(); + return botResponses[lowercaseInput] || botResponses.default; + } + + function handleSubmit() { + const message = userInput.value.trim(); + if (message) { + addMessage(message, false); + userInput.value = ''; + + setTimeout(() => { + const response = getBotResponse(message); + addMessage(response, true); + }, 500); + } + } + + sendButton.addEventListener('click', handleSubmit); + userInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + handleSubmit(); + } + }); + + // Initial bot greeting + setTimeout(() => { + addMessage('Welcome to JournoBot! How can I assist with your journalism today?', true); + }, 1000); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..6012b1d --- /dev/null +++ b/style.css @@ -0,0 +1,170 @@ +:root { + --primary-color: #2a4494; + --secondary-color: #6c63ff; + --text-color: #333; + --bg-color: #f9f9f9; + --accent-color: #ff6b6b; +} + +* { + 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: var(--bg-color); +} + +header { + background: white; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + position: fixed; + width: 100%; + top: 0; + z-index: 100; +} + +nav { + max-width: 1200px; + margin: 0 auto; + padding: 1rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.5rem; + font-weight: bold; + color: var(--primary-color); +} + +.nav-links a { + margin-left: 2rem; + text-decoration: none; + color: var(--text-color); + transition: color 0.3s; +} + +.nav-links a:hover { + color: var(--secondary-color); +} + +main { + margin-top: 4rem; + padding: 2rem; +} + +#hero { + text-align: center; + padding: 4rem 1rem; + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + color: white; + border-radius: 1rem; + margin-bottom: 3rem; +} + +#hero h1 { + font-size: 3rem; + margin-bottom: 1rem; +} + +.chat-container { + max-width: 800px; + margin: 0 auto; + background: white; + border-radius: 1rem; + box-shadow: 0 4px 20px rgba(0,0,0,0.1); + padding: 1rem; + height: 500px; + display: flex; + flex-direction: column; +} + +#chat-messages { + flex-grow: 1; + overflow-y: auto; + padding: 1rem; + margin-bottom: 1rem; +} + +.chat-input-area { + display: flex; + gap: 1rem; + padding: 1rem; + border-top: 1px solid #eee; +} + +#user-input { + flex-grow: 1; + padding: 1rem; + border: 2px solid #eee; + border-radius: 0.5rem; + resize: none; + height: 60px; + transition: border-color 0.3s; +} + +#user-input:focus { + border-color: var(--secondary-color); + outline: none; +} + +#send-button { + background: var(--secondary-color); + color: white; + border: none; + border-radius: 0.5rem; + padding: 0 1.5rem; + cursor: pointer; + transition: transform 0.2s; +} + +#send-button:hover { + transform: scale(1.05); +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +.feature-card { + background: white; + padding: 2rem; + border-radius: 1rem; + box-shadow: 0 4px 15px rgba(0,0,0,0.1); + transition: transform 0.3s; +} + +.feature-card:hover { + transform: translateY(-5px); +} + +footer { + text-align: center; + padding: 2rem; + margin-top: 4rem; + background: white; + border-top: 1px solid #eee; +} + +@media (max-width: 768px) { + .nav-links { + display: none; + } + + #hero h1 { + font-size: 2rem; + } + + .features-grid { + grid-template-columns: 1fr; + } +}