Spaces:

Boobs00
/

ask-me-anything

Running

App Files Files

ask-me-anything / index.html

Boobs00

Add 3 files

7dc28fd verified 8 months ago

raw

history blame

7.19 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Interactive AI Assistant</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	@keyframes bounce {
	0%, 100% { transform: translateY(0) rotate(30deg); }
	50% { transform: translateY(-15px) rotate(30deg); }
	}
	.typing {
	border-right: 2px solid;
	animation: blink 0.75s step-end infinite;
	}
	@keyframes blink {
	from, to { border-color: transparent }
	50% { border-color: #3b82f6; }
	}
	.fade-in {
	animation: fadeIn 0.5s ease-in;
	}
	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
	}
	</style>
	</head>
	<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex flex-col items-center justify-center p-4">
	<div class="max-w-2xl w-full text-center space-y-8">
	<div class="space-y-4">
	<h1 class="text-5xl md:text-6xl font-bold text-gray-800">
	<span class="text-gray-500 text-3xl md:text-4xl block">I'm ready to work,</span>
	Ask me anything
	</h1>
	<p class="text-gray-600 text-lg">Your personal AI assistant at your service</p>
	</div>

	<div class="bg-white rounded-xl shadow-lg p-6 space-y-6 fade-in">
	<div class="flex flex-col sm:flex-row gap-2">
	<input
	type="text"
	id="userQuestion"
	placeholder="Type your question here..."
	class="flex-1 px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
	autocomplete="off"
	>
	<button
	id="askBtn"
	class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors duration-200 flex items-center justify-center gap-2"
	>
	<i class="fas fa-paper-plane"></i> Ask
	</button>
	</div>

	<div id="response" class="min-h-32 p-4 bg-gray-50 rounded-lg text-left text-gray-700">
	<p class="text-gray-500 italic">Your answer will appear here...</p>
	</div>
	</div>
	</div>

	<div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
	<i class="fas fa-arrow-down text-gray-400 text-2xl"></i>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', () => {
	const askBtn = document.getElementById('askBtn');
	const userQuestion = document.getElementById('userQuestion');
	const responseDiv = document.getElementById('response');

	// Sample responses for demo purposes
	const sampleResponses = [
	"Great question! The answer depends on several factors, but generally speaking...",
	"I'd be happy to help with that. Based on my knowledge...",
	"Interesting query! Here's what I can tell you about this topic...",
	"That's a thoughtful question. The current understanding is...",
	"I've analyzed similar questions before. The consensus seems to be..."
	];

	askBtn.addEventListener('click', () => {
	if (!userQuestion.value.trim()) {
	responseDiv.innerHTML = `
	<div class="text-red-500 flex items-center gap-2">
	<i class="fas fa-exclamation-circle"></i>
	<span>Please enter a question first</span>
	</div>
	`;
	return;
	}

	// Show loading state
	responseDiv.innerHTML = `
	<div class="flex items-center gap-3 text-blue-600">
	<div class="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
	<span class="typing">Thinking deeply about your question</span>
	</div>
	`;

	// Simulate API call delay
	setTimeout(() => {
	const randomResponse = sampleResponses[Math.floor(Math.random() * sampleResponses.length)];

	responseDiv.innerHTML = `
	<div class="space-y-4 fade-in">
	<div class="flex items-start gap-3">
	<div class="bg-blue-100 p-2 rounded-full">
	<i class="fas fa-robot text-blue-600"></i>
	</div>
	<div>
	<p class="font-medium text-gray-800">You asked:</p>
	<p class="text-gray-600">"${userQuestion.value}"</p>
	</div>
	</div>
	<div class="flex items-start gap-3">
	<div class="bg-indigo-100 p-2 rounded-full">
	<i class="fas fa-lightbulb text-indigo-600"></i>
	</div>
	<div>
	<p class="font-medium text-gray-800">My answer:</p>
	<p class="text-gray-700">${randomResponse}</p>
	</div>
	</div>
	</div>
	`;

	// Scroll to response
	responseDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
	}, 1500);
	});

	// Allow Enter key to submit
	userQuestion.addEventListener('keypress', (e) => {
	if (e.key === 'Enter') {
	askBtn.click();
	}
	});
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Boobs00/ask-me-anything" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>