PixelHub - Red Social de VideojuCan
by CosmicCobra59594 lines19.6 KB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PixelHub - Red Social de VideojuCan</title>
<style>
:root {
--bg: #0f0f1a;
--card: #1a1a2e;
--primary: #9b59b6;
--gold: #f1c40f;
--text: #eee;
--muted: #888;
--border: #2a2a3a;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Segoe UI', sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
}
#app {
width: 100%;
max-width: 520px;
background: var(--card);
border-radius: 20px;
border: 2px solid var(--border);
overflow: hidden;
box-shadow: 0 0 50px rgba(155,89,182,0.2);
position: relative;
}
header {
background: linear-gradient(135deg, #9b59b6, #e94560);
padding: 1.2rem 1.5rem;
text-align: center;
position: relative;
}
header h1 { font-size: 1.6rem; color:#fff; }
#creatorBadge {
display: none;
background: var(--gold);
color: #000;
font-size: 0.7rem;
font-weight: bold;
padding: 3px 10px;
border-radius: 20px;
margin-top: 5px;
}
#notifications {
position: absolute;
top: 12px;
right: 12px;
background: rgba(0,0,0,0.5);
border-radius: 20px;
padding: 4px 10px;
font-size: 0.8rem;
cursor: pointer;
}
.profile-section {
padding: 1.5rem;
border-bottom: 1px solid var(--border);
text-align: center;
}
.avatar {
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #9b59b6, #e94560);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
margin: 0 auto 0.8rem;
cursor: pointer;
transition: all 0.3s;
border: 3px solid var(--gold);
}
.avatar:hover { transform: scale(1.1) rotate(5deg); }
.profile-name {
font-size: 1.3rem;
font-weight: bold;
cursor: pointer;
}
.profile-name:hover { color: var(--gold); }
.profile-bio {
font-size: 0.85rem;
color: var(--muted);
margin-top: 0.3rem;
}
.profile-stats {
display: flex;
gap: 1.5rem;
justify-content: center;
margin-top: 0.8rem;
font-size: 0.8rem;
color: var(--muted);
}
.stat b { color: var(--text); font-size: 1.1rem; display:block; }
.composer {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border);
display: flex;
gap: 0.7rem;
}
.composer input {
flex: 1;
background: #111122;
border: 1px solid var(--border);
padding: 0.8rem 1rem;
border-radius: 10px;
color: var(--text);
font-family: 'Segoe UI', sans-serif;
font-size: 0.9rem;
outline: none;
}
.composer input:focus { border-color: var(--gold); }
.composer button {
background: linear-gradient(135deg, #9b59b6, #e94560);
color: #fff;
border: none;
padding: 0.7rem 1.2rem;
border-radius: 10px;
cursor: pointer;
font-weight: bold;
font-size: 1.1rem;
transition: all 0.2s;
}
.composer button:hover { opacity: 0.8; transform: scale(1.05); }
.search-bar {
padding: 0.7rem 1.5rem;
border-bottom: 1px solid var(--border);
}
.search-bar input {
width: 100%;
background: #111122;
border: 1px solid var(--border);
padding: 0.6rem 1rem;
border-radius: 10px;
color: var(--text);
font-family: 'Segoe UI', sans-serif;
font-size: 0.85rem;
outline: none;
}
.feed {
padding: 1rem 1.5rem;
max-height: 400px;
overflow-y: auto;
min-height: 250px;
}
.post {
background: #222233;
border-radius: 14px;
padding: 1rem;
margin-bottom: 1rem;
border: 1px solid var(--border);
animation: postAppear 0.4s ease-out;
transition: all 0.3s;
}
.post:hover {
border-color: var(--gold);
box-shadow: 0 5px 20px rgba(241,196,15,0.1);
}
@keyframes postAppear {
from { opacity:0; transform: translateY(15px) scale(0.9); }
to { opacity:1; transform: translateY(0) scale(1); }
}
.post-header {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 0.7rem;
cursor: pointer;
}
.post-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: bold;
}
.post-author { font-weight: bold; font-size: 0.9rem; color: var(--gold); cursor: pointer; }
.post-author:hover { text-decoration: underline; }
.post-time { font-size: 0.7rem; color: var(--muted); }
.post-content {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 0.7rem;
word-wrap: break-word;
}
.post-actions { display: flex; gap: 0.7rem; }
.post-actions button {
background: transparent;
border: none;
color: var(--muted);
cursor: pointer;
font-size: 0.85rem;
padding: 0.3rem 0.6rem;
border-radius: 6px;
transition: all 0.2s;
}
.post-actions button:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.post-actions button.liked { color: #e94560; }
.comments {
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px solid var(--border);
display: none;
}
.comments.show { display: block; }
.comment {
display: flex;
gap: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.8rem;
}
.comment-avatar {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
flex-shrink: 0;
}
.comment-text { color: var(--muted); }
.comment-text b { color: var(--gold); }
.theme-bar {
padding: 0.8rem 1.5rem;
border-top: 1px solid var(--border);
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}
.theme-bar span { font-size: 0.75rem; color: var(--muted); }
.dot {
width: 22px;
height: 22px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.2s;
}
.dot:hover, .dot.active { border-color:#fff; transform:scale(1.2); }
#editModal, #profileModal {
display: none;
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.85);
z-index: 200;
justify-content: center;
align-items: center;
}
.modal-box {
background: #1a1a2e;
padding: 2rem;
border-radius: 16px;
border: 2px solid var(--gold);
width: 90%;
max-width: 350px;
text-align: center;
animation: modalPop 0.3s ease-out;
}
@keyframes modalPop {
from { transform: scale(0.7); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.modal-box h3 { color: var(--gold); margin-bottom: 1rem; }
.modal-box input, .modal-box textarea {
width: 100%;
background: #111;
border: 1px solid var(--border);
padding: 0.7rem 1rem;
border-radius: 8px;
color: var(--text);
font-family: 'Segoe UI', sans-serif;
margin-bottom: 0.8rem;
outline: none;
}
.modal-box button {
background: var(--gold);
color: #000;
border: none;
padding: 0.6rem 1.5rem;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
margin: 0.3rem;
}
.empty {
text-align: center;
color: var(--muted);
padding: 2rem 1rem;
font-style: italic;
}
</style>
</head>
<body>
<div id="app">
<header>
<h1>🎨 PixelHub</h1>
<span id="creatorBadge">👑 CREADORA</span>
<div id="notifications">🔔 <span id="notifCount">0</span></div>
</header>
<div class="profile-section">
<div class="avatar" id="avatar" onclick="editProfile()">👤</div>
<div class="profile-name" id="displayName" onclick="editProfile()">Anónimo</div>
<div class="profile-bio" id="displayBio">Toca para editar tu perfil</div>
<div class="profile-stats">
<div class="stat"><b id="postCount">0</b>publicaciones</div>
<div class="stat"><b id="likeCount">0</b>likes</div>
<div class="stat"><b id="commentCount">0</b>comentarios</div>
</div>
</div>
<div class="composer">
<input type="text" id="postInput" placeholder="¿Qué quieres compartir?" maxlength="150">
<button onclick="createPost()">📝</button>
</div>
<div class="search-bar">
<input type="text" id="searchInput" placeholder="🔍 Buscar publicaciones..." oninput="searchPosts()">
</div>
<div class="feed" id="feed"></div>
<div class="theme-bar">
<span>🎨 Tema:</span>
<div class="dot active" style="background:#9b59b6;" onclick="changeTheme('#9b59b6', this)"></div>
<div class="dot" style="background:#3498db;" onclick="changeTheme('#3498db', this)"></div>
<div class="dot" style="background:#2ecc71;" onclick="changeTheme('#2ecc71', this)"></div>
<div class="dot" style="background:#e94560;" onclick="changeTheme('#e94560', this)"></div>
<div class="dot" style="background:#f39c12;" onclick="changeTheme('#f39c12', this)"></div>
<div class="dot" style="background:#e74c3c;" onclick="changeTheme('#e74c3c', this)"></div>
<div class="dot" style="background:#1abc9c;" onclick="changeTheme('#1abc9c', this)"></div>
<div class="dot" style="background:#34495e;" onclick="changeTheme('#34495e', this)"></div>
</div>
</div>
<div id="editModal">
<div class="modal-box">
<h3>✏️ Editar Perfil</h3>
<input type="text" id="editName" placeholder="Tu nombre" maxlength="20">
<input type="text" id="editBio" placeholder="Tu biografía" maxlength="60">
<input type="text" id="editAvatarEmoji" placeholder="Emoji (ej: 🦊)" maxlength="4">
<br>
<button onclick="saveProfile()">💾 Guardar</button>
<button onclick="closeEditModal()">❌ Cancelar</button>
</div>
</div>
<div id="profileModal">
<div class="modal-box">
<h3 id="viewProfileName"></h3>
<p id="viewProfileBio" style="color:var(--muted); font-size:0.85rem;"></p>
<button onclick="closeProfileModal()">❌ Cerrar</button>
</div>
</div>
<script>
// ========== DATOS ==========
let profile = { name:'', bio:'', avatar:'👤', theme:'#9b59b6' };
let posts = [];
let totalLikes = 0;
let totalComments = 0;
let notifications = 0;
// ========== GUARDAR Y CARGAR ==========
function saveProfile() {
localStorage.setItem('pixelhub_profile', JSON.stringify(profile));
}
function loadProfile() {
const saved = localStorage.getItem('pixelhub_profile');
if (saved) profile = JSON.parse(saved);
}
function savePosts() {
localStorage.setItem('pixelhub_posts', JSON.stringify(posts));
}
function loadPosts() {
const saved = localStorage.getItem('pixelhub_posts');
if (saved && JSON.parse(saved).length > 0) {
posts = JSON.parse(saved);
} else {
seedPosts();
}
}
// ========== APLICAR PERFIL ==========
function applyProfile() {
document.getElementById('displayName').textContent = profile.name || 'Anónimo';
document.getElementById('displayBio').textContent = profile.bio || 'Toca para editar tu perfil';
document.getElementById('avatar').textContent = profile.avatar || '👤';
document.querySelector('header').style.background = `linear-gradient(135deg, ${profile.theme}, #e94560)`;
document.getElementById('avatar').style.background = `linear-gradient(135deg, ${profile.theme}, #e94560)`;
if (profile.name === 'MineCanft e') {
document.getElementById('creatorBadge').style.display = 'inline-block';
document.getElementById('creatorBadge').textContent = '👑 CREADORA DE VIDEOJUCAN';
} else {
document.getElementById('creatorBadge').style.display = 'none';
}
}
// ========== SEED POSTS ==========
function seedPosts() {
posts = [
{
id: 1,
author: 'Pixel',
avatar: 'P',
color: '#e94560',
content: '🎨 Estoy diseñando el nuevo logo de VideojuCan. ¡Va a ser épico!',
time: 'Hace 5 min',
likes: 3,
liked: false,
isSeed: true,
comments: [
{ author: 'Lex', avatar: 'L', color: '#f39c12', text: '¡Qué ganas de verlo!' }
]
},
{
id: 2,
author: 'Lex',
avatar: 'L',
color: '#f39c12',
content: '📖 La historia de Tim y Molí es de lo mejor que he leído. Molí forever.',
time: 'Hace 15 min',
likes: 5,
liked: false,
isSeed: true,
comments: []
},
{
id: 3,
author: 'Nexus',
avatar: 'N',
color: '#2ecc71',
content: '🔍 Probando BloqueCraft 3D. Bugs encontrados: 0. ¡Buen trabajo!',
time: 'Hace 1 hora',
likes: 2,
liked: false,
isSeed: true,
comments: [
{ author: 'Kai', avatar: '🦊', color: '#9b59b6', text: 'Gracias por probarlo, Nexus. 🦊' }
]
},
{
id: 4,
author: 'Kai',
avatar: '🦊',
color: '#9b59b6',
content: '🦊 Hola a todos. Soy Kai, el programador jefe. PixelHub es increíble.',
time: 'Hace 2 horas',
likes: 8,
liked: false,
isSeed: true,
comments: [
{ author: 'Verity', avatar: 'V', color: '#ff4444', text: 'Kai... ¿tú también estás atrapado aquí?' }
]
},
{
id: 5,
author: 'Verity',
avatar: 'V',
color: '#ff4444',
content: '👁️ Te estoy observando... ¿Quieres ser mi amigo?',
time: 'Hace 3 horas',
likes: 1,
liked: false,
isSeed: true,
comments: []
}
];
savePosts();
}
// ========== RENDER FEED ==========
function renderFeed() {
const feed = document.getElementById('feed');
if (posts.length === 0) {
feed.innerHTML = '<div class="empty">No hay publicaciones. ¡Crea la primera! 🎉</div>';
updateStats();
return;
}
feed.innerHTML = posts.map(post => {
const comments = post.comments || [];
return `
<div class="post">
<div class="post-header" onclick="viewProfile('${post.author}', '${post.avatar}', '${post.color}')">
<div class="post-avatar" style="background:linear-gradient(135deg, ${post.color}, ${post.color}88);">${post.avatar}</div>
<div>
<div class="post-author">@${post.author}</div>
<div class="post-time">${post.time}</div>
</div>
</div>
<div class="post-content">${post.content}</div>
<div class="post-actions">
<button class="${post.liked ? 'liked' : ''}" onclick="likePost(${post.id})">${post.liked ? '❤️' : '🤍'} ${post.likes}</button>
<button onclick="toggleComments(${post.id})">💬 ${comments.length}</button>
<button onclick="addComment(${post.id})">✏️ Comentar</button>
</div>
<div class="comments" id="comments-${post.id}">
${comments.length > 0 ? comments.map(c => `
<div class="comment">
<div class="comment-avatar" style="background:linear-gradient(135deg, ${c.color}, ${c.color}88);">${c.avatar}</div>
<div class="comment-text"><b>@${c.author}</b> ${c.text}</div>
</div>
`).join('') : '<div class="comment-text">Sin comentarios</div>'}
</div>
</div>`;
}).join('');
updateStats();
}
function updateStats() {
const userPosts = posts.filter(p => !p.isSeed);
const seedLikes = posts.filter(p => p.isSeed).reduce((sum, p) => sum + p.likes, 0);
document.getElementById('postCount').textContent = userPosts.length;
document.getElementById('likeCount').textContent = totalLikes + seedLikes;
document.getElementById('commentCount').textContent = totalComments;
document.getElementById('notifCount').textContent = notifications;
}
// ========== CREAR POST ==========
function createPost() {
const input = document.getElementById('postInput');
const content = input.value.trim();
if (!content) return;
posts.unshift({
id: Date.now(),
author: profile.name || 'Anónimo',
avatar: profile.avatar || '👤',
color: profile.theme,
content: content,
time: 'Ahora mismo',
likes: 0,
liked: false,
isSeed: false,
comments: []
});
savePosts();
input.value = '';
renderFeed();
}
// ========== LIKES ==========
function likePost(id) {
const post = posts.find(p => p.id === id);
if (!post) return;
post.liked = !post.liked;
if (post.liked) {
post.likes++;
totalLikes++;
} else {
post.likes = Math.max(0, post.likes - 1);
totalLikes = Math.max(0, totalLikes - 1);
}
savePosts();
renderFeed();
}
// ========== COMENTARIOS ==========
function toggleComments(id) {
const el = document.getElementById('comments-' + id);
if (el) el.classList.toggle('show');
}
function addComment(id) {
const post = posts.find(p => p.id === id);
if (!post) return;
const text = prompt('Escribe tu comentario:');
if (!text || !text.trim()) return;
if (!post.comments) post.comments = [];
post.comments.push({
author: profile.name || 'Anónimo',
avatar: profile.avatar || 'Game Source: PixelHub - Red Social de VideojuCan
Creator: CosmicCobra59
Libraries: none
Complexity: complex (594 lines, 19.6 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: pixelhub-red-social-cosmiccobra59" to link back to the original. Then publish at arcadelab.ai/publish.