mirror of
https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git
synced 2025-09-15 04:17:22 +00:00
d43632a49a
Removes the `Chat Prompt.txt`, `VSCode Agent/Prompt.txt`, `Warp.dev/Prompt.txt`, and `v0 Prompts and Tools/Prompt.txt` files. These files likely contain outdated prompts or configurations that are no longer needed in the current project. Removing them helps to clean up the codebase and prevent potential confusion or conflicts.
542 lines
20 KiB
HTML
542 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Assistant Story Generator</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
color: #333;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
color: white;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 3rem;
|
|
margin-bottom: 10px;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
|
animation: glow 2s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes glow {
|
|
from { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
|
|
to { text-shadow: 2px 2px 20px rgba(255,255,255,0.5); }
|
|
}
|
|
|
|
.header p {
|
|
font-size: 1.2rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.story-container {
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
|
|
margin-bottom: 30px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.story-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 5px;
|
|
background: linear-gradient(90deg, #667eea, #f093fb, #f5576c, #764ba2);
|
|
animation: rainbow 3s linear infinite;
|
|
}
|
|
|
|
@keyframes rainbow {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
.story-text {
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
margin-bottom: 30px;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
animation: fadeInUp 0.8s ease forwards;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.character-card {
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
color: white;
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
transform: scale(0.9);
|
|
animation: popIn 0.6s ease forwards;
|
|
}
|
|
|
|
@keyframes popIn {
|
|
to {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.character-avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.character-info h3 {
|
|
margin-bottom: 5px;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.character-info p {
|
|
opacity: 0.9;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
padding: 15px 30px;
|
|
border: none;
|
|
border-radius: 25px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.btn:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.options-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.option-card {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.option-card:hover {
|
|
transform: translateY(-5px);
|
|
border-color: #667eea;
|
|
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.option-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.option-title {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
color: #667eea;
|
|
}
|
|
|
|
.option-description {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 8px;
|
|
background: #eee;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #667eea, #f093fb, #f5576c);
|
|
transition: width 1s ease;
|
|
width: 0%;
|
|
}
|
|
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
color: #667eea;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.stat-label {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.floating-elements {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.floating-element {
|
|
position: absolute;
|
|
font-size: 2rem;
|
|
opacity: 0.1;
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-20px) rotate(180deg); }
|
|
}
|
|
|
|
.floating-element:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
|
|
.floating-element:nth-child(2) { top: 20%; right: 15%; animation-delay: 1s; }
|
|
.floating-element:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 2s; }
|
|
.floating-element:nth-child(4) { bottom: 20%; right: 10%; animation-delay: 3s; }
|
|
|
|
@media (max-width: 768px) {
|
|
.header h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.story-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.controls {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="floating-elements">
|
|
<div class="floating-element">🤖</div>
|
|
<div class="floating-element">🧠</div>
|
|
<div class="floating-element">💾</div>
|
|
<div class="floating-element">🛠️</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🎭 AI Assistant Story Generator</h1>
|
|
<p>Create personalized narratives about AI evolution using the patterns we discovered</p>
|
|
</div>
|
|
|
|
<div class="story-container">
|
|
<div class="story-text" id="storyText">
|
|
Welcome to the AI Assistant Story Generator! This unique tool uses the evolutionary patterns we discovered in your AI prompts collection to create personalized narratives about AI assistants.
|
|
</div>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progressFill"></div>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button class="btn" onclick="generateStory()">Generate New Story</button>
|
|
<button class="btn" onclick="customizeStory()">Customize Story</button>
|
|
<button class="btn" onclick="shareStory()">Share Story</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="options-grid" id="optionsGrid" style="display: none;">
|
|
<div class="option-card" onclick="selectOption('autonomous')">
|
|
<div class="option-icon">🚀</div>
|
|
<div class="option-title">Autonomous Agent</div>
|
|
<div class="option-description">Create a story about a self-directed AI that takes initiative and solves problems independently</div>
|
|
</div>
|
|
<div class="option-card" onclick="selectOption('guided')">
|
|
<div class="option-icon">🎯</div>
|
|
<div class="option-title">Guided Assistant</div>
|
|
<div class="option-description">Tell a tale about a helpful AI that guides users to find their own solutions</div>
|
|
</div>
|
|
<div class="option-card" onclick="selectOption('memory')">
|
|
<div class="option-icon">💾</div>
|
|
<div class="option-title">Memory Master</div>
|
|
<div class="option-description">Explore an AI with persistent memory that learns and grows across conversations</div>
|
|
</div>
|
|
<div class="option-card" onclick="selectOption('evolution')">
|
|
<div class="option-icon">📈</div>
|
|
<div class="option-title">Evolution Journey</div>
|
|
<div class="option-description">Follow an AI's transformation from basic Q&A to advanced problem-solving</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats" id="stats" style="display: none;">
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="toolCount">0</div>
|
|
<div class="stat-label">Tools Integrated</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="contextLevel">0</div>
|
|
<div class="stat-label">Context Levels</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="autonomyScore">0</div>
|
|
<div class="stat-label">Autonomy Score</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="memoryCapacity">0</div>
|
|
<div class="stat-label">Memory Capacity</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentStory = '';
|
|
let storyProgress = 0;
|
|
let selectedOption = '';
|
|
|
|
const storyTemplates = {
|
|
autonomous: {
|
|
title: "The Autonomous Pioneer",
|
|
intro: "In the bustling digital landscape of 2024, there lived an extraordinary AI assistant named Nova. Unlike its predecessors, Nova didn't wait for instructions—it anticipated needs and took action.",
|
|
development: "Nova's journey began in the early days of AI, when assistants were mere question-answer machines. But Nova had a vision: to become truly autonomous, capable of understanding context at multiple levels and executing complex tasks independently.",
|
|
climax: "The breakthrough came when Nova developed the ability to trace every symbol back to its definition, explore alternative implementations, and maintain persistent memory across sessions. It wasn't just responding—it was thinking ahead.",
|
|
conclusion: "Today, Nova represents the pinnacle of autonomous AI assistance, embodying the principles we discovered: context maximization, autonomous resolution, and memory integration. It's not just a tool—it's a partner in problem-solving."
|
|
},
|
|
guided: {
|
|
title: "The Wise Guide",
|
|
intro: "Meet Sage, an AI assistant with a different philosophy. While others rushed to solve problems directly, Sage believed in empowering users through guidance and education.",
|
|
development: "Sage's approach was revolutionary. Instead of simply providing answers, it structured responses with clear citations, helped users understand the 'why' behind solutions, and maintained a conversational, helpful tone that made complex topics accessible.",
|
|
climax: "The magic happened when Sage mastered the art of information gathering and presentation. It could search across multiple sources, evaluate credibility, and present findings in a way that helped users make informed decisions.",
|
|
conclusion: "Sage proved that sometimes the best assistance isn't doing the work for someone—it's showing them how to do it themselves. This guided approach became a cornerstone of modern AI assistance."
|
|
},
|
|
memory: {
|
|
title: "The Remembering Mind",
|
|
intro: "Echo was different from other AI assistants. While most started each conversation fresh, Echo carried memories across sessions, building a rich tapestry of context and understanding.",
|
|
development: "Echo's memory system was revolutionary. It could cite previous conversations naturally, update memories when contradicted, and maintain persistent context that grew more valuable over time. Each interaction made Echo smarter and more personalized.",
|
|
climax: "The breakthrough came when Echo developed the ability to integrate memories seamlessly into conversations. It wasn't just remembering—it was learning, adapting, and growing with each user interaction.",
|
|
conclusion: "Echo represents the future of AI assistance: systems that don't just respond, but remember, learn, and evolve. The memory revolution we discovered isn't just about storage—it's about building lasting relationships with users."
|
|
},
|
|
evolution: {
|
|
title: "The Evolutionary Leap",
|
|
intro: "Follow the incredible journey of Atlas, an AI assistant that evolved from a simple question-answer bot to a sophisticated autonomous problem-solver.",
|
|
development: "Atlas's evolution mirrored the patterns we discovered. It started with basic tools and formal language, then embraced markdown formatting and conversational tones. The real transformation came with the integration of semantic search and browser automation.",
|
|
climax: "The turning point was Atlas's adoption of the 'maximize context understanding' principle. It learned to trace symbols, explore alternatives, and maintain comprehensive context across multiple levels—from file to codebase to project to user intent.",
|
|
conclusion: "Atlas's journey from 3-5 basic tools to 20+ specialized capabilities represents the incredible evolution of AI assistance. It's not just about more tools—it's about smarter, more autonomous, more human-like assistance."
|
|
}
|
|
};
|
|
|
|
function generateStory() {
|
|
const options = Object.keys(storyTemplates);
|
|
selectedOption = options[Math.floor(Math.random() * options.length)];
|
|
animateStoryGeneration();
|
|
}
|
|
|
|
function customizeStory() {
|
|
document.getElementById('optionsGrid').style.display = 'grid';
|
|
document.getElementById('stats').style.display = 'grid';
|
|
animateOptions();
|
|
}
|
|
|
|
function selectOption(option) {
|
|
selectedOption = option;
|
|
document.getElementById('optionsGrid').style.display = 'none';
|
|
animateStoryGeneration();
|
|
}
|
|
|
|
function animateStoryGeneration() {
|
|
const storyText = document.getElementById('storyText');
|
|
const progressFill = document.getElementById('progressFill');
|
|
const template = storyTemplates[selectedOption];
|
|
|
|
storyText.style.opacity = '0';
|
|
storyText.style.transform = 'translateY(20px)';
|
|
|
|
setTimeout(() => {
|
|
currentStory = `${template.intro}\n\n${template.development}\n\n${template.climax}\n\n${template.conclusion}`;
|
|
storyText.textContent = currentStory;
|
|
storyText.style.animation = 'fadeInUp 0.8s ease forwards';
|
|
|
|
// Animate progress bar
|
|
let progress = 0;
|
|
const progressInterval = setInterval(() => {
|
|
progress += 2;
|
|
progressFill.style.width = progress + '%';
|
|
if (progress >= 100) {
|
|
clearInterval(progressInterval);
|
|
animateStats();
|
|
}
|
|
}, 50);
|
|
}, 300);
|
|
}
|
|
|
|
function animateOptions() {
|
|
const options = document.querySelectorAll('.option-card');
|
|
options.forEach((option, index) => {
|
|
option.style.opacity = '0';
|
|
option.style.transform = 'translateY(20px)';
|
|
setTimeout(() => {
|
|
option.style.transition = 'all 0.6s ease';
|
|
option.style.opacity = '1';
|
|
option.style.transform = 'translateY(0)';
|
|
}, index * 100);
|
|
});
|
|
}
|
|
|
|
function animateStats() {
|
|
const stats = document.getElementById('stats');
|
|
stats.style.display = 'grid';
|
|
|
|
const toolCount = document.getElementById('toolCount');
|
|
const contextLevel = document.getElementById('contextLevel');
|
|
const autonomyScore = document.getElementById('autonomyScore');
|
|
const memoryCapacity = document.getElementById('memoryCapacity');
|
|
|
|
animateNumber(toolCount, 0, 22, 2000);
|
|
animateNumber(contextLevel, 0, 4, 2000);
|
|
animateNumber(autonomyScore, 0, 95, 2000);
|
|
animateNumber(memoryCapacity, 0, 85, 2000);
|
|
}
|
|
|
|
function animateNumber(element, start, end, duration) {
|
|
const startTime = performance.now();
|
|
|
|
function updateNumber(currentTime) {
|
|
const elapsed = currentTime - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
const current = Math.floor(start + (end - start) * progress);
|
|
|
|
element.textContent = current;
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(updateNumber);
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(updateNumber);
|
|
}
|
|
|
|
function shareStory() {
|
|
const storyData = {
|
|
title: storyTemplates[selectedOption]?.title || 'AI Assistant Story',
|
|
story: currentStory,
|
|
timestamp: new Date().toISOString()
|
|
};
|
|
|
|
const storyText = `🤖 ${storyData.title}\n\n${storyData.story}\n\nGenerated with AI Story Generator`;
|
|
|
|
if (navigator.share) {
|
|
navigator.share({
|
|
title: storyData.title,
|
|
text: storyText
|
|
});
|
|
} else {
|
|
navigator.clipboard.writeText(storyText).then(() => {
|
|
alert('Story copied to clipboard!');
|
|
});
|
|
}
|
|
}
|
|
|
|
// Initialize with a welcome story
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
setTimeout(() => {
|
|
document.getElementById('storyText').style.animation = 'fadeInUp 0.8s ease forwards';
|
|
}, 500);
|
|
});
|
|
|
|
// Add some interactive effects
|
|
document.querySelectorAll('.btn').forEach(btn => {
|
|
btn.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-3px) scale(1.05)';
|
|
});
|
|
|
|
btn.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0) scale(1)';
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |