Twitter für Tiere App
Von Wikiprompt, der freien Prompt-Enzyklopädie
9. Aug. 2025
Twitter für Tiere App Eine Aufforderung zur Erstellung einer auf Haustiere ausgerichteten Social-Media-App mit Profilen, Beiträgen und Bildunterstützung.
Prompt-InhaltSpeichern
🌐
I'll build a cute pet social media app called "PetPals" with persistent storage using localStorage. Here's the complete implementation:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PetPals - Social Media for Pets</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
min-height: 100vh;
padding: 20px;
}
.app-container {
max-width: 800px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 3px solid #ff9a9e;
}
.header {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
padding: 20px;
text-align: center;
border-bottom: 3px solid #ff6b6b;
}
.header h1 {
font-size: 2.5em;
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
margin-bottom: 5px;
}
.header .subtitle {
color: #fff;
font-size: 1.1em;
opacity: 0.9;
}
.profile-section {
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
padding: 20px;
border-bottom: 2px solid #ff9a9e;
}
.profile-form {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: center;
}
.profile-form input, .profile-form select {
padding: 10px;
border: 2px solid #ff9a9e;
border-radius: 10px;
font-size: 1em;
background: white;
}
.profile-form input[type="text"] {
flex: 1;
min-width: 150px;
}
.profile-form button {
padding: 10px 20px;
background: #ff6b6b;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 1em;
transition: all 0.3s;
}
.profile-form button:hover {
background: #ff4757;
transform: scale(1.05);
}
.current-profile {
margin-top: 15px;
padding: 15px;
background: white;
border-radius: 15px;
display: flex;
align-items: center;
gap: 15px;
border: 2px solid #ff9a9e;
}
.current-profile img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #ff6b6b;
}
.current-profile .profile-info {
flex: 1;
}
.current-profile .profile-info h3 {
color: #333;
margin-bottom: 5px;
}
.current-profile .profile-info p {
color: #666;
font-size: 0.9em;
}
.post-form-section {
padding: 20px;
background: white;
border-bottom: 2px solid #ff9a9e;
}
.post-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.post-form textarea {
padding: 15px;
border: 2px solid #ff9a9e;
border-radius: 10px;
font-size: 1em;
resize: vertical;
min-height: 80px;
font-family: inherit;
}
.post-form textarea:focus {
outline: none;
border-color: #ff6b6b;
box-shadow: 0 0 10px rgba(255, 107, 107, 0.2);
}
.post-form input[type="file"] {
padding: 10px;
border: 2px dashed #ff9a9e;
border-radius: 10px;
cursor: pointer;
}
.post-form button {
padding: 12px;
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 1.1em;
font-weight: bold;
transition: all 0.3s;
}
.post-form button:hover {
transform: scale(1.02);
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}
.feed-section {
padding: 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.feed-section h2 {
color: #333;
margin-bottom: 20px;
text-align: center;
font-size: 1.8em;
}
.post-card {
background: white;
border-radius: 15px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border: 2px solid #ff9a9e;
transition: transform 0.3s;
}
.post-card:hover {
transform: translateY(-5px);
}
.post-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.post-header img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #ff6b6b;
}
.post-header .post-author {
flex: 1;
}
.post-header .post-author h4 {
color: #333;
margin-bottom: 3px;
}
.post-header .post-author .post-time {
color: #999;
font-size: 0.8em;
}
.post-content {
color: #444;
line-height: 1.6;
margin-bottom: 15px;
}
.post-image {
width: 100%;
max-height: 400px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 15px;
}
.post-actions {
display: flex;
gap: 10px;
padding-top: 10px;
border-top: 1px solid #eee;
}
.post-actions button {
padding: 8px 15px;
background: #ff9a9e;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
font-size: 0.9em;
}
.post-actions button:hover {
background: #ff6b6b;
transform: scale(1.05);
}
.post-actions .delete-btn {
background: #ff4757;
margin-left: auto;
}
.post-actions .delete-btn:hover {
background: #ff0000;
}
.empty-feed {
text-align: center;
padding: 40px;
color: #999;
font-size: 1.2em;
}
.empty-feed .paw-icon {
font-size: 3em;
margin-bottom: 20px;
}
.toast {
position: fixed;
top: 20px;
right: 20px;
background: #ff6b6b;
color: white;
padding: 15px 25px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
z-index: 1000;
animation: slideIn 0.3s ease-out;
display: none;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.animal-emoji {
font-size: 1.5em;
margin-right: 5px;
}
@media (max-width: 600px) {
.app-container {
margin: 0;
border-radius: 10px;
}
.header h1 {
font-size: 2em;
}
.profile-form {
flex-direction: column;
}
.profile-form input[type="text"] {
width: 100%;
}
.current-profile {
flex-direction: column;
text-align: center;
}
}
</style>
</head>
<body>
<div class="app-container">
<div class="header">
<h1>🐾 PetPals</h1>
<div class="subtitle">Where pets connect with friends!</div>
</div>
<div class="profile-section">
<div id="profileFormContainer">
<form id="profileForm" class="profile-form">
<input type="text" id="petName" placeholder="Pet name" required>
<select id="petType">
<option value="🐶">🐶 Dog</option>
<option value="🐱">🐱 Cat</option>
<option value="🐰">🐰 Rabbit</option>
<option value="🐹">🐹 Hamster</option>
<option value="🐦">🐦 Bird</option>
<option value="🐢">🐢 Turtle</option>
<option value="🐠">🐠 Fish</option>
<option value="🦜">🦜 Parrot</option>
</select>
<input type="file" id="profilePic" accept="image/*">
<button type="submit">Create Profile</button>
</form>
</div>
<div id="currentProfile" class="current-profile" style="display: none;">
<img id="profilePicDisplay" src="" alt="Profile picture">
<div class="profile-info">
<h3 id="profileNameDisplay"></h3>
<p id="profileTypeDisplay"></p>
</div>
<button onclick="editProfile()" style="padding: 8px 15px; background: #ff9a9e; color: white; border: none; border-radius: 8px; cursor: pointer;">Edit</button>
</div>
</div>
<div class="post-form-section">
<form id="postForm" class="post-form">
<textarea id="postContent" placeholder="What's your pet up to? 🐾" required></textarea>
<input type="file" id="postImage" accept="image/*">
<button type="submit">Post Update 🐾</button>
</form>
</div>
<div class="feed-section">
<h2>🐾 Pet Feed</h2>
<div id="feed"></div>
</div>
</div>
<div id="toast" class="toast"></div>
<script>
// State management
let currentProfile = null;
let posts = [];
// Load data from localStorage
function loadData() {
const savedProfile = localStorage.getItem('petpals_profile');
const savedPosts = localStorage.getItem('petpals_posts');
if (savedProfile) {
currentProfile = JSON.parse(savedProfile);
displayProfile();
}
if (savedPosts) {
posts = JSON.parse(savedPosts);
renderFeed();
}
}
// Save data to localStorage
function saveData() {
if (currentProfile) {
localStorage.setItem('petpals_profile', JSON.stringify(currentProfile));
}
localStorage.setItem('petpals_posts', JSON.stringify(posts));
}
// Show toast notification
function showToast(message) {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.style.display = 'block';
setTimeout(() => {
toast.style.display = 'none';
}, 3000);
}
// Display current profile
function displayProfile() {
if (currentProfile) {
document.getElementById('profileFormContainer').style.display = 'none';
document.getElementById('currentProfile').style.display = 'flex';
document.getElementById('profileNameDisplay').textContent = currentProfile.name;
document.getElementById('profileTypeDisplay').textContent = currentProfile.type;
if (currentProfile.pic) {
document.getElementById('profilePicDisplay').src = currentProfile.pic;
} else {
document.getElementById('profilePicDisplay').src = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="#ff9a9e"/><text x="50" y="65" text-anchor="middle" font-size="40">' + currentProfile.type + '</text></svg>');
}
}
}
// Edit profile
function editProfile() {
document.getElementById('profileFormContainer').style.display = 'block';
document.getElementById('currentProfile').style.display = 'none';
document.getElementById('petName').value = currentProfile.name;
document.getElementById('petType').value = currentProfile.type;
}
// Handle profile creation
document.getElementById('profileForm').addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('petName').value;
const type = document.getElementById('petType').value;
const picInput = document.getElementById('profilePic');
const profile = {
name: name,
type: type,
pic: null
};
if (picInput.files && picInput.files[0]) {
const reader = new FileReader();
reader.onload = function(e) {
profile.pic = e.target.result;
currentProfile = profile;
saveData();
displayProfile();
showToast('Profile created! 🎉');
};
reader.readAsDataURL(picInput.files[0]);
} else {
currentProfile = profile;
saveData();
displayProfile();
showToast('Profile created! 🎉');
}
this.reset();
});
// Handle post creation
document.getElementById('postForm').addEventListener('submit', function(e) {
e.preventDefault();
if (!currentProfile) {
showToast('Please create a profile first! 🐾');
return;
}
const content = document.getElementById('postContent').value;
const imageInput = document.getElementById('postImage');
const post = {
id: Date.now(),
author: currentProfile,
content: content,
image: null,
timestamp: new Date().toISOString(),
likes: 0
};
if (imageInput.files && imageInput.files[0]) {
const reader = new FileReader();
reader.onload = function(e) {
post.image = e.target.result;
posts.unshift(post);
saveData();
renderFeed();
showToast('Post published! 🐾');
};
reader.readAsDataURL(imageInput.files[0]);
} else {
posts.unshift(post);
saveData();
renderFeed();
showToast('Post published! 🐾');
}
this.reset();
});
// Format timestamp
function formatTime(timestamp) {
const date = new Date(timestamp);
const now = new Date();
const diff = now - date;
const minutes = Math.floor(diff / 60000);
const hours = Math.floor(diff / 3600000);
const days = Math.floor(diff / 86400000);
if (minutes < 1) return 'Just now';
if (minutes < 60) return minutes + 'm ago';
if (hours < 24) return hours + 'h ago';
if (days < 7) return days + 'd ago';
return date.toLocaleDateString();
}
// Render feed
function renderFeed() {
const feed = document.getElementById('feed');
if (posts.length === 0) {
feed.innerHTML = `
<div class="empty-feed">
<div class="paw-icon">🐾</div>
<p>No posts yet! Be the first to share your pet's adventure!</p>
</div>
`;
return;
}
feed.innerHTML = posts.map(post => `
<div class="post-card">
<div class="post-header">
<img src="${post.author.pic || 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="#ff9a9e"/><text x="50" y="65" text-anchor="middle" font-size="40">' + post.author.type + '</text></svg>')}" alt="${post.author.name}">
<div class="post-author">
<h4>${post.author.name} <span class="animal-emoji">${post.author.type}</span></h4>
<div class="post-time">${formatTime(post.timestamp)}</div>
</div>
</div>
<div class="post-content">${post.content}</div>
${post.image ? `<img src="${post.image}" alt="Post image" class="post-image">` : ''}
<div class="post-actions">
<button onclick="likePost(${post.id})">❤️ ${post.likes}</button>
<button onclick="deletePost(${post.id})" class="delete-btn">🗑️ Delete</button>
</div>
</div>
`).join('');
}
// Like a post
function likePost(postId) {
const post = posts.find(p => p.id === postId);
if (post) {
post.likes++;
saveData();
renderFeed();
}
}
// Delete a post
function deletePost(postId) {
posts = posts.filter(p => p.id !== postId);
saveData();
renderFeed();
showToast('Post deleted 🗑️');
}
// Initialize app
loadData();
</script>
</body>
</html>
```
This is a fully functional pet social media app with:
**Features:**
- 🐾 **Pet Profiles** - Create profiles with pet name, type, and profile picture
- 📝 **Text Posts** - Share updates about your pets
- 🖼️ **Image Posts** - Upload and share photos
- 💾 **Persistent Storage** - All data saved in localStorage
- ❤️ **Like System** - Like posts from other pets
- 🗑️ **Delete Posts** - Remove your posts
- 🎨 **Cute Animal Theme** - Colorful, playful design with animal emojis
**How to use:**
1. Create a pet profile with name, type, and optional photo
2. Write posts and optionally add images
3. View the feed with all posts
4. Like and delete posts
5. All data persists even after refreshing
The app is fully interactive and runs directly in the browser with a cute, animal-themed UI perfect for pet lovers! 🐶🐱🐰
Melde dich an, um den vollständigen Prompt zu sehen
Weiter mit:
Mit der Anmeldung akzeptierst du unsere Nutzungsbedingungen und Datenschutz
Verwendung
Dieser Prompt ist für die Verwendung mit creative gedacht. Kopiere den Inhalt oben und füge ihn in dein bevorzugtes KI-Tool ein.
Für beste Ergebnisse passe die Platzhalter (eckige Klammern oder Großbuchstaben) an deine Anforderungen an.
Diskussion
0 Kommentare