Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>How to Use Me - Interactive Guide</title> | |
| <!-- Importing FontAwesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* --- CSS VARIABLES & RESET --- */ | |
| :root { | |
| --primary-color: #6366f1; /* Indigo */ | |
| --secondary-color: #a855f7; /* Purple */ | |
| --accent-color: #ec4899; /* Pink */ | |
| --bg-dark: #0f172a; | |
| --bg-card: #1e293b; | |
| --text-main: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --border-color: #334155; | |
| --glass-bg: rgba(30, 41, 59, 0.7); | |
| --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', system-ui, -apple-system, sans-serif; | |
| background-color: var(--bg-dark); | |
| color: var(--text-main); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| } | |
| /* --- BACKGROUND ANIMATION --- */ | |
| .bg-gradient { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| background: radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.15), transparent 25%), | |
| radial-gradient(circle at 85% 30%, rgba(236, 72, 153, 0.15), transparent 25%); | |
| animation: pulseBg 10s infinite alternate; | |
| } | |
| @keyframes pulseBg { | |
| 0% { transform: scale(1); opacity: 0.8; } | |
| 100% { transform: scale(1.1); opacity: 1; } | |
| } | |
| /* --- HEADER & NAV --- */ | |
| header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| background: rgba(15, 23, 42, 0.8); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| background: linear-gradient(to right, var(--primary-color), var(--accent-color)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .built-with { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| padding: 0.4rem 1rem; | |
| border-radius: 20px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: var(--transition); | |
| } | |
| .built-with:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--text-main); | |
| transform: translateY(-2px); | |
| } | |
| /* --- HERO SECTION --- */ | |
| .hero { | |
| text-align: center; | |
| padding: 4rem 1rem 2rem; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .hero h1 { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| letter-spacing: -0.02em; | |
| } | |
| .hero p { | |
| font-size: 1.25rem; | |
| color: var(--text-muted); | |
| margin-bottom: 2rem; | |
| } | |
| /* --- SEARCH BAR --- */ | |
| .search-container { | |
| position: relative; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: 1rem 1.5rem 1rem 3rem; | |
| border-radius: 50px; | |
| border: 1px solid var(--border-color); | |
| background: var(--bg-card); | |
| color: var(--text-main); | |
| font-size: 1rem; | |
| outline: none; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .search-input:focus { | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); | |
| } | |
| .search-icon { | |
| position: absolute; | |
| left: 1.2rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-muted); | |
| } | |
| /* --- GRID LAYOUT --- */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| .guide-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| /* --- CARDS --- */ | |
| .card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| position: relative; | |
| overflow: hidden; | |
| transition: var(--transition); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--primary-color); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4); | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); | |
| opacity: 0; | |
| transition: var(--transition); | |
| } | |
| .card:hover::before { | |
| opacity: 1; | |
| } | |
| .icon-box { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| color: white; | |
| } | |
| .icon-box.blue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; } | |
| .icon-box.purple { background: rgba(168, 85, 247, 0.2); color: #c084fc; } | |
| .icon-box.green { background: rgba(34, 197, 94, 0.2); color: #4ade80; } | |
| .icon-box.pink { background: rgba(236, 72, 153, 0.2); color: #f472b6; } | |
| .card h3 { | |
| font-size: 1.25rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .card p { | |
| color: var(--text-muted); | |
| font-size: 0.95rem; | |
| margin-bottom: 1.5rem; | |
| flex-grow: 1; | |
| } | |
| .card-btn { | |
| align-self: flex-start; | |
| padding: 0.6rem 1.2rem; | |
| background: transparent; | |
| border: 1px solid var(--primary-color); | |
| color: var(--primary-color); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| transition: var(--transition); | |
| } | |
| .card-btn:hover { | |
| background: var(--primary-color); | |
| color: white; | |
| } | |
| /* --- FAQ SECTION --- */ | |
| .faq-section { | |
| margin-top: 4rem; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .faq-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1.5rem; | |
| } | |
| .faq-item { | |
| background: rgba(255, 255, 255, 0.03); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| border: 1px solid transparent; | |
| transition: var(--transition); | |
| } | |
| .faq-item:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .faq-question { | |
| font-weight: 600; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| cursor: pointer; | |
| margin-bottom: 0.5rem; | |
| } | |
| .faq-answer { | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| display: none; /* Hidden by default */ | |
| padding-top: 0.5rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .faq-item.active .faq-answer { | |
| display: block; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .faq-item.active .faq-question i { | |
| transform: rotate(180deg); | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(-5px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* --- FOOTER --- */ | |
| footer { | |
| text-align: center; | |
| padding: 3rem; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| border-top: 1px solid var(--border-color); | |
| margin-top: 4rem; | |
| } | |
| /* --- RESPONSIVE --- */ | |
| @media (max-width: 768px) { | |
| .hero h1 { font-size: 2rem; } | |
| .faq-grid { grid-template-columns: 1fr; } | |
| .search-container { width: 90%; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background Animation --> | |
| <div class="bg-gradient"></div> | |
| <!-- Navigation --> | |
| <header> | |
| <div class="logo"> | |
| <i class="fa-solid fa-robot"></i> | |
| <span>AI Assistant</span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with"> | |
| Built with anycoder | |
| </a> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <h1>How do I use you?</h1> | |
| <p>I'm designed to help you write code, explain concepts, and brainstorm ideas. Explore the guide below to see how we can work together.</p> | |
| <div class="search-container"> | |
| <i class="fa-solid fa-magnifying-glass search-icon"></i> | |
| <input type="text" id="searchInput" class="search-input" placeholder="Type a topic (e.g., 'code', 'writing', 'math')..."> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <main class="container"> | |
| <!-- Guide Grid --> | |
| <div class="guide-grid" id="guideGrid"> | |
| <!-- Card 1: Coding --> | |
| <div class="card" data-category="code"> | |
| <div class="icon-box blue"> | |
| <i class="fa-solid fa-code"></i> | |
| </div> | |
| <h3>Writing Code</h3> | |
| <p>Ask me to write, debug, or refactor code in any language. You can ask for specific snippets, full file structures, or explanations of complex algorithms.</p> | |
| <button class="card-btn" onclick="copyPrompt('Write a Python script to scrape a website.')">Try Example</button> | |
| </div> | |
| <!-- Card 2: Creative Writing --> | |
| <div class="card" data-category="writing"> | |
| <div class="icon-box pink"> | |
| <i class="fa-solid fa-pen-nib"></i> | |
| </div> | |
| <h3>Creative Writing</h3> | |
| <p>Need a story, poem, email, or social media post? Provide a topic, tone, or length, and I will generate creative text tailored to your needs.</p> | |
| <button class="card-btn" onclick="copyPrompt('Write a professional email to a client.')">Try Example</button> | |
| </div> | |
| <!-- Card 3: Analysis --> | |
| <div class="card" data-category="analysis"> | |
| <div class="icon-box purple"> | |
| <i class="fa-solid fa-chart-pie"></i> | |
| </div> | |
| <h3>Analysis & Summaries</h3> | |
| <p>Paste text or an article, and I can summarize it, extract key points, or analyze the sentiment. Great for research and quick information processing.</p> | |
| <button class="card-btn" onclick="copyPrompt('Summarize this text for me: ...')">Try Example</button> | |
| </div> | |
| <!-- Card 4: Learning --> | |
| <div class="card" data-category="learning"> | |
| <div class="icon-box green"> | |
| <i class="fa-solid fa-graduation-cap"></i> | |
| </div> | |
| <h3>Learning & Tutoring</h3> | |
| <p>Stuck on a concept? Ask me to explain things simply or act as a tutor. I can break down complex topics into easy-to-understand steps.</p> | |
| <button class="card-btn" onclick="copyPrompt('Explain quantum computing like I am 5.')">Try Example</button> | |
| </div> | |
| </div> | |
| <!-- FAQ Section --> | |
| <section class="faq-section"> | |
| <div class="section-title"> | |
| <h2>Frequently Asked Questions</h2> | |
| </div> | |
| <div class="faq-grid"> | |
| <div class="faq-item"> | |
| <div class="faq-question"> | |
| Can I use code generation? | |
| <i class="fa-solid fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| Yes, I can generate code in over 50 programming languages including Python, JavaScript, HTML, CSS, C++, and Java. I can also debug existing code. | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question"> | |
| Is my data private? | |
| <i class="fa-solid fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| While this is a demo application, generally you should not share sensitive personal data, passwords, or confidential business information with AI models. | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question"> | |
| How accurate is the information? | |
| <i class="fa-solid fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| I strive for accuracy, but I can occasionally make mistakes or "hallucinate" facts. Always verify critical information with trusted sources. | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question"> | |
| Can I change the tone of voice? | |
| <i class="fa-solid fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| Absolutely. You can ask me to respond formally, casually, in a specific character voice, or in a specific language. | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer> | |
| <p>© 2023 AI Assistant Guide. Built with anycoder</p> | |
| </footer> | |
| <!-- JavaScript for Interactivity --> | |
| <script> | |
| // 1. Search Functionality | |
| const searchInput = document.getElementById('searchInput'); | |
| const cards = document.querySelectorAll('.card'); | |
| searchInput.addEventListener('input', (e) => { | |
| const searchTerm = e.target.value.toLowerCase(); | |
| cards.forEach(card => { | |
| const title = card.querySelector('h3').textContent.toLowerCase(); | |
| const desc = card.querySelector('p').textContent.toLowerCase(); | |
| const category = card.getAttribute('data-category'); | |
| // Check if search term matches title, description, or category | |
| if (title.includes(searchTerm) || desc.includes(searchTerm) || category.includes(searchTerm)) { | |
| card.style.display = 'flex'; | |
| // Add a small animation effect when reappearing | |
| card.style.opacity = '0'; | |
| setTimeout(() => card.style.opacity = '1', 50); | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| // 2. FAQ Accordion | |
| const faqItems = document.querySelectorAll('.faq-item'); | |
| faqItems.forEach(item => { | |
| const question = item.querySelector('.faq-question'); | |
| question.addEventListener('click', () => { | |
| // Close other items (optional - remove if you want multiple open) | |
| faqItems.forEach(otherItem => { | |
| if (otherItem !== item) { | |
| otherItem.classList.remove('active'); | |
| } | |
| }); | |
| // Toggle current item | |
| item.classList.toggle('active'); | |
| }); | |
| }); | |
| // 3. Button Interaction (Copy Prompt) | |
| function copyPrompt(text) { | |
| // Create a temporary input to copy text | |
| const tempInput = document.createElement('input'); | |
| tempInput.value = text; | |
| document.body.appendChild(tempInput); | |
| tempInput.select(); | |
| document.execCommand('copy'); | |
| document.body.removeChild(tempInput); | |
| // Visual feedback | |
| const btn = event.target; | |
| const originalText = btn.innerText; | |
| btn.innerText = "Copied!"; | |
| btn.style.background = "var(--primary-color)"; | |
| btn.style.color = "white"; | |
| setTimeout(() => { | |
| btn.innerText = originalText; | |
| btn.style.background = "transparent"; | |
| btn.style.color = "var(--primary-color)"; | |
| }, 2000); | |
| } | |
| </script> | |
| </body> | |
| </html> |