PixelHub - Red Social de VideojuCan
by CosmicCobra59457 lines16.1 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);
}
header {
background: linear-gradient(135deg, #9b59b6, #e94560);
padding: 1.2rem 1.5rem;
text-align: center;
}
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;
}
.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); }
.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;
}
.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);
}
.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); }
.post-time { font-size: 0.7rem; color: var(--muted); }
.post-content { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.7rem; }
.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;
}
.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;
}
.dot.active { border-color:#fff; }
#editModal {
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;
}
.modal-box h3 { color: var(--gold); margin-bottom: 1rem; }
.modal-box input {
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;
}
</style>
</head>
<body>
<div id="app">
<header>
<h1>🎨 PixelHub</h1>
<span id="creatorBadge">👑 CREADORA</span>
</header>
<div class="profile-section">
<div class="avatar" id="avatar" onclick="openEdit()">👤</div>
<div class="profile-name" id="displayName" onclick="openEdit()">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="feed" id="feed"></div>
<div class="theme-bar">
<span>🎨 Tema:</span>
<div class="dot active" style="background:#9b59b6;" onclick="setTheme('#9b59b6', this)"></div>
<div class="dot" style="background:#3498db;" onclick="setTheme('#3498db', this)"></div>
<div class="dot" style="background:#2ecc71;" onclick="setTheme('#2ecc71', this)"></div>
<div class="dot" style="background:#e94560;" onclick="setTheme('#e94560', this)"></div>
<div class="dot" style="background:#f39c12;" onclick="setTheme('#f39c12', this)"></div>
<div class="dot" style="background:#1abc9c;" onclick="setTheme('#1abc9c', 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="editAvatar" placeholder="Emoji (ej: 🦊)" maxlength="4">
<button onclick="saveEdit()">💾 Guardar</button>
<button onclick="closeEdit()">❌ Cancelar</button>
</div>
</div>
<script>
let profile = { name:'', bio:'', avatar:'👤', theme:'#9b59b6' };
let posts = [];
function loadData() {
const p = localStorage.getItem('ph_profile');
if (p) { try { profile = JSON.parse(p); } catch(e) {} }
const pt = localStorage.getItem('ph_posts');
if (pt) { try { posts = JSON.parse(pt); } catch(e) { posts = []; } }
if (!posts.length) seedPosts();
applyProfile();
renderFeed();
}
function saveProfile() { localStorage.setItem('ph_profile', JSON.stringify(profile)); }
function savePosts() { localStorage.setItem('ph_posts', JSON.stringify(posts)); }
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.getElementById('avatar').style.background = `linear-gradient(135deg, ${profile.theme}, #e94560)`;
document.querySelector('header').style.background = `linear-gradient(135deg, ${profile.theme}, #e94560)`;
if (profile.name === 'MineCanft e') {
document.getElementById('creatorBadge').style.display = 'inline-block';
} else {
document.getElementById('creatorBadge').style.display = 'none';
}
}
function openEdit() {
document.getElementById('editModal').style.display = 'flex';
document.getElementById('editName').value = profile.name;
document.getElementById('editBio').value = profile.bio;
document.getElementById('editAvatar').value = profile.avatar === '👤' ? '' : profile.avatar;
}
function closeEdit() { document.getElementById('editModal').style.display = 'none'; }
function saveEdit() {
profile.name = document.getElementById('editName').value.trim();
profile.bio = document.getElementById('editBio').value.trim();
const emoji = document.getElementById('editAvatar').value.trim();
if (emoji) profile.avatar = emoji;
saveProfile();
applyProfile();
closeEdit();
}
function setTheme(color, el) {
profile.theme = color;
document.querySelectorAll('.dot').forEach(d => d.classList.remove('active'));
if (el) el.classList.add('active');
saveProfile();
applyProfile();
}
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:[] },
{ 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:[] },
{ id:4, author:'Kai', avatar:'🦊', color:'#9b59b6', content:'🦊 Hola a todos. Soy Kai, el programador jefe. PixelHub es increíble, jefa.', time:'Hace 2 horas', likes:8, liked:false, isSeed:true, comments:[] },
{ 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();
}
function renderFeed() {
const feed = document.getElementById('feed');
if (!posts.length) {
feed.innerHTML = '<div class="empty">No hay publicaciones. ¡Crea la primera! 🎉</div>';
return;
}
feed.innerHTML = posts.map(post => `
<div class="post">
<div class="post-header">
<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})">💬 ${(post.comments||[]).length}</button>
<button onclick="addComment(${post.id})">✏️ Comentar</button>
</div>
<div class="comments" id="comments-${post.id}">
${(post.comments||[]).length ? post.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);
document.getElementById('postCount').textContent = userPosts.length;
document.getElementById('likeCount').textContent = posts.reduce((s,p) => s + p.likes, 0);
document.getElementById('commentCount').textContent = posts.reduce((s,p) => s + (p.comments||[]).length, 0);
}
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,
time: 'Ahora mismo',
likes: 0,
liked: false,
isSeed: false,
comments: []
});
savePosts();
input.value = '';
renderFeed();
}
function likePost(id) {
const post = posts.find(p => p.id === id);
if (!post) return;
post.liked = !post.liked;
post.likes += post.liked ? 1 : -1;
if (post.likes < 0) post.likes = 0;
savePosts();
renderFeed();
}
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 || '👤',
color: profile.theme,
text: text.trim()
});
savePosts();
renderFeed();
}
loadData();
</script>
</body>
</html>Game Source: PixelHub - Red Social de VideojuCan
Creator: CosmicCobra59
Libraries: none
Complexity: complex (457 lines, 16.1 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.