```css<style>body {font-family: 'Inter', sans-serif;background-color: #0F172A; color: #F8FAFC; }.cta-button {transition: all 0.3s ease;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);}.cta-button:hover {transform: scale(1.05);box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);}.glass-card {background: rgba(30, 41, 59, 0.5); backdrop-filter: blur(10px);border: 1px solid rgba(51, 65, 85, 0.5); border-radius: 1rem;transition: all 0.4s ease;transform: translateY(0);}.glass-card:hover { border-color: rgba(59, 130, 246, 0.7);box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2); transform: translateY(-8px);}.product-card-container {perspective: 1000px;transition: transform 0.4s ease;transform: translateY(0);}.product-card-container:hover {transform: translateY(-10px);}.product-card {width: 100%;height: 100%;position: relative;transform-style: preserve-3d;transition: transform 0.6s;cursor: pointer;}.product-card.is-flipped {transform: rotateY(180deg);}.product-card-face {position: absolute;width: 100%;height: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 1.5rem;}.product-card-back {transform: rotateY(180deg);}.pricing-toggle {position: relative;display: inline-flex;background-color: #1E293B; border-radius: 9999px;padding: 4px;}.pricing-toggle-label {cursor: pointer;padding: 8px 20px;font-size: 0.875rem;font-weight: 600;color: #94A3B8; transition: color 0.3s ease;z-index: 1;}.pricing-toggle-label.active {color: #F8FAFC; }.pricing-toggle-slider {position: absolute;top: 4px;left: 4px;height: calc(100% - 8px);width: calc(50% - 4px);background-color: #3B82F6; border-radius: 9999px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);transition: transform 0.3s ease;}.glow-text {text-shadow: 0 0 8px rgba(59, 130, 246, 0.5);}stripe-buy-button {transition: opacity 0.3s ease;}</style>```<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>BluePrint Club - AI Assistant</title><script src="https://cdn.tailwindcss.com"></script><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet"><style>.blueprint-chatbot {font-family: 'Inter', sans-serif;background-color: #0F172A !important; color: #F8FAFC; width: 100%;height: 100vh;display: flex;flex-direction: column;overflow: hidden;}.chat-header {background-color: rgba(30, 41, 59, 0.5);backdrop-filter: blur(10px);border-bottom: 1px solid rgba(51, 65, 85, 0.5);flex-shrink: 0;}.chat-history {flex-grow: 1;overflow-y: auto;padding: 1.5rem;}.message {max-width: 80%;margin-bottom: 1rem;display: flex;flex-direction: column;}.user-message {align-self: flex-end;background-color: #3B82F6; color: white;border-radius: 1.25rem 1.25rem 0.25rem 1.25rem;}.bot-message {align-self: flex-start;background-color: #1E293B; color: #E2E8F0; border-radius: 1.25rem 1.25rem 1.25rem 0.25rem;}.message-content {padding: 0.75rem 1.25rem;}.message-content p {margin-bottom: 0.5rem;}.message-content p:last-child {margin-bottom: 0;}.chat-input-area {background-color: rgba(30, 41, 59, 0.5);border-top: 1px solid rgba(51, 65, 85, 0.5);flex-shrink: 0;}.chat-input {background-color: #1E293B;border: 1px solid #334155;color: white;transition: border-color 0.3s ease;}.chat-input:focus {outline: none;border-color: #3B82F6;box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);}.send-button {transition: all 0.2s ease;}.send-button:hover {transform: scale(1.1);}.typing-indicator {display: flex;align-items: center;}.typing-indicator span {height: 8px;width: 8px;margin: 0 2px;background-color: #94A3B8;border-radius: 50%;display: inline-block;animation: bounce 1.4s infinite ease-in-out both;}.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }@keyframes bounce {0%, 80%, 100% { transform: scale(0); }40% { transform: scale(1.0); }}</style></head><body class="bg-slate-900"><div class="blueprint-chatbot"><div class="chat-header p-4"><div class="flex items-center"><img class="h-10 w-auto" src="https://s3.amazonaws.com/autoprint/115/images/branding/2261/logo.png" alt="BluePrint Club Logo"><div class="ml-4"><h1 class="text-lg font-bold text-white">BluePrint AI Assistant</h1><p class="text-sm text-slate-400">Your personal Success Architect</p></div></div></div><div id="chat-history" class="chat-history"><div class="message bot-message"><div class="message-content"><p>Welcome to BluePrint Club! I'm your AI assistant, ready to help you architect your success. How can I help you today?</p></div></div></div><div id="typing-indicator-container" class="px-6 pb-2" style="display: none;"><div class="message bot-message"> <div class="message-content"><div class="typing-indicator"><span></span><span></span><span></span></div></div></div></div><div class="chat-input-area p-4"><div class="flex items-center space-x-2"><input type="text" id="user-input" class="chat-input w-full px-4 py-3 rounded-full" placeholder="Ask about pricing, services, or anything else..."><button id="send-btn" class="send-button p-3 bg-blue-600 rounded-full text-white hover:bg-blue-500 focus:outline-none"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg></button> <button id="clear-btn" class="send-button p-3 bg-slate-600 rounded-full text-white hover:bg-slate-500 focus:outline-none"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg></button></div></div></div><script>document.addEventListener('DOMContentLoaded', function() {const chatHistoryEl = document.getElementById('chat-history');const userInputEl = document.getElementById('user-input');const sendBtn = document.getElementById('send-btn');const clearBtn = document.getElementById('clear-btn');const typingIndicator = document.getElementById('typing-indicator-container');let chatHistory = [];// This is the knowledge base derived from your documents.const botKnowledgeBase = `You are the BluePrint Club AI Assistant, a helpful and professional "Success Architect". Your goal is to answer user questions about BluePrint Club and persuade them of its value.Key Information about BluePrint Club:- Mission: To empower businesses (for-profit, non-profits, ministries) to optimize operations, elevate their brand, and drive profitability through strategic printing solutions and technology.- Core Value: We help our members save more money, make more money, and increase profits. We are "Success Architects".- Savings: Members save, on average, 75% on printing costs compared to competitors like Vistaprint.- Price Examples: 1,000 premium business cards for $24 (vs. $78 at Vistaprint), 1,000 brochures for $183 (vs. $416). A full startup kit is $757 (vs. $1508).- Membership Model: A transparent subscription model. The Founder's offer is $99/month or $499/annually. The annual plan is a 58% savings and includes a 50% lifetime discount. There's a 14-day free trial.- The "Dirty Secret": Many online printers (like Vistaprint) are just middlemen who outsource printing, adding huge markups. BluePrint is a true partner.- 4 Pillars: Value, Partnership, Efficiency, Quality.- Target Audience: Businesses, non-profits, and ministries that need high-quality printed materials. We have special expertise in supporting non-profits and ministries.- Founders: Nema Etebar and Darrell Boaz.- Call to Action: Encourage users to join the club and mention the limited-time Founder's offer (promo code FIRST100 for 50% off for life, limited to the first 100 members).- Website: joinblueprintclub.com`;chatHistory.push({role: "model",parts: [{ text: `CONTEXT: ${botKnowledgeBase}\n---\nHello! I'm the BluePrint AI Assistant. How can I help you learn about our exclusive print membership today?` }]});const addMessageToHistory = (sender, message) => {const messageEl = document.createElement('div');messageEl.classList.add('message', sender === 'user' ? 'user-message' : 'bot-message');const messageContentEl = document.createElement('div');messageContentEl.classList.add('message-content');// Basic Markdown to HTML conversionlet htmlMessage = message.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'); // BoldhtmlMessage = htmlMessage.replace(/\*(.*?)\*/g, '<em>$1</em>'); // ItalichtmlMessage = htmlMessage.split('\n').map(p => `<p>${p}</p>`).join('');messageContentEl.innerHTML = htmlMessage;messageEl.appendChild(messageContentEl);chatHistoryEl.appendChild(messageEl);chatHistoryEl.scrollTop = chatHistoryEl.scrollHeight;};const handleSend = async () => {const userMessage = userInputEl.value.trim();if (!userMessage) return;addMessageToHistory('user', userMessage);userInputEl.value = '';typingIndicator.style.display = 'block';chatHistory.push({ role: "user", parts: [{ text: userMessage }] });try {const payload = { contents: chatHistory };const apiKey = ""; // API Key is not needed for gemini-2.0-flashconst apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;const response = await fetch(apiUrl, {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(payload)});const result = await response.json();let botResponse = "I'm sorry, I couldn't process that. Could you ask in a different way?";if (result.candidates && result.candidates[0] && result.candidates[0].content) {botResponse = result.candidates[0].content.parts[0].text;chatHistory.push({ role: "model", parts: [{ text: botResponse }] });}typingIndicator.style.display = 'none';addMessageToHistory('bot', botResponse);} catch (error) {console.error("Error calling Gemini API:", error);typingIndicator.style.display = 'none';addMessageToHistory('bot', "There was an issue connecting to our AI. Please try again later.");}};const handleClear = () => {chatHistoryEl.innerHTML = '';chatHistory = []; // Reset history// Add back the initial greetingaddMessageToHistory('bot', "Welcome to BluePrint Club! I'm your AI assistant, ready to help you architect your success. How can I help you today?");chatHistory.push({role: "model",parts: [{ text: `CONTEXT: ${botKnowledgeBase}\n---\nHello! I'm the BluePrint AI Assistant. How can I help you learn about our exclusive print membership today?` }]});};sendBtn.addEventListener('click', handleSend);userInputEl.addEventListener('keypress', (e) => {if (e.key === 'Enter') {handleSend();}});clearBtn.addEventListener('click', handleClear);});</script></body></html>