Spaces:

ewr23r2r
/

forumsim

Running

App Files Files Community

forumsim / index.html

ewr23r2r

Upload folder using huggingface_hub

222f9c1 verified 5 months ago

raw

history blame contribute delete

12.2 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Username Effect Manager</title>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');

	:root {
	--bg-color: #0f172a;
	--card-bg: #1e293b;
	--text-primary: #f1f5f9;
	--text-secondary: #94a3b8;
	--accent: #6366f1;
	--accent-hover: #4f46e5;
	--border: #334155;
	--success: #22c55e;
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Inter', sans-serif;
	background-color: var(--bg-color);
	color: var(--text-primary);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2rem;
	}

	/* Header */
	header {
	width: 100%;
	max-width: 800px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 3rem;
	border-bottom: 1px solid var(--border);
	padding-bottom: 1rem;
	}

	.brand {
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--text-secondary);
	}

	.brand a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.2s;
	}

	.brand a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
	}

	/* Main Layout */
	.container {
	width: 100%;
	max-width: 800px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	}

	@media (min-width: 768px) {
	.container {
	grid-template-columns: 1fr 1fr;
	}
	}

	/* Cards */
	.card {
	background-color: var(--card-bg);
	border-radius: 16px;
	padding: 2rem;
	border: 1px solid var(--border);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	}

	h2 {
	font-size: 1.1rem;
	color: var(--text-secondary);
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	}

	/* Current Profile Section */
	.profile-display {
	text-align: center;
	margin-bottom: 2rem;
	}

	.avatar-placeholder {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, var(--accent), #ec4899);
	border-radius: 50%;
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	font-weight: bold;
	}

	/* The Active Username Effect */
	.username-active {
	font-size: 2rem;
	font-weight: 800;
	/* The Effect: Rainbow Gradient Text */
	background: linear-gradient(to right, #ef4444, #f59e0b, #eab308, #22c55e, #3b82f6, #a855f7, #ec4899);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: shine 3s linear infinite;
	filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.5));
	transition: all 0.3s ease;
	}

	@keyframes shine {
	to {
	background-position: 200% center;
	}
	}

	/* Input Area */
	.input-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	}

	label {
	font-size: 0.9rem;
	color: var(--text-secondary);
	}

	input[type="text"] {
	background-color: var(--bg-color);
	border: 1px solid var(--border);
	color: var(--text-primary);
	padding: 0.75rem 1rem;
	border-radius: 8px;
	font-size: 1rem;
	outline: none;
	transition: border-color 0.2s;
	}

	input[type="text"]:focus {
	border-color: var(--accent);
	}

	button {
	background-color: var(--accent);
	color: white;
	border: none;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 0.5rem;
	transition: background-color 0.2s;
	}

	button:hover {
	background-color: var(--accent-hover);
	}

	/* History List */
	.history-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-height: 400px;
	overflow-y: auto;
	}

	.history-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	background-color: rgba(0,0,0,0.2);
	border-radius: 8px;
	border-left: 3px solid var(--border);
	}

	/* The Old Username Effect - Explicitly Plain */
	.username-old {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-secondary);
	text-decoration: line-through; /* Visual indication it's old */
	opacity: 0.7;
	}

	.timestamp {
	font-size: 0.75rem;
	color: var(--text-secondary);
	}

	.badge {
	background-color: rgba(255, 255, 255, 0.1);
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.7rem;
	text-transform: uppercase;
	color: var(--text-secondary);
	}

	/* Empty State */
	.empty-state {
	text-align: center;
	color: var(--text-secondary);
	font-style: italic;
	padding: 2rem;
	}

	/* Notification Toast */
	.toast {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	background-color: var(--card-bg);
	border-left: 4px solid var(--success);
	color: var(--text-primary);
	padding: 1rem 2rem;
	border-radius: 4px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
	transform: translateY(150%);
	transition: transform 0.3s ease-out;
	z-index: 100;
	}

	.toast.show {
	transform: translateY(0);
	}
	</style>
	</head>
	<body>

	<header>
	<div class="brand">User Control Panel</div>
	<div class="brand">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></div>
	</header>

	<div class="container">

	<!-- Section 1: Update Username -->
	<div class="card">
	<h2>Account Settings</h2>

	<div class="profile-display">
	<div class="avatar-placeholder" id="avatar">U</div>
	<!-- The active username with the cool effect -->
	<div id="currentUsernameDisplay" class="username-active">Loading...</div>
	<p style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-secondary);">Current Status: <span style="color: var(--success);">Active</span></p>
	</div>

	<div class="input-group">
	<label for="usernameInput">Enter New Username</label>
	<input type="text" id="usernameInput" placeholder="e.g. CyberNinja99" autocomplete="off">
	<button onclick="handleUpdate()">Update Username</button>
	</div>
	</div>

	<!-- Section 2: History (Old Usernames) -->
	<div class="card">
	<h2>Username History</h2>
	<p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem;">
	Previous usernames are preserved for history but lose their special effects to prevent impersonation.
	</p>

	<div id="historyList" class="history-list">
	<!-- JS will populate this -->
	<div class="empty-state">No username changes yet.</div>
	</div>
	</div>

	</div>

	<!-- Toast Notification -->
	<div id="toast" class="toast">
	Username updated successfully!
	</div>

	<script>
	// State
	let currentUsername = "NewUser_01";
	let usernameHistory = [];

	// DOM Elements
	const currentDisplay = document.getElementById('currentUsernameDisplay');
	const inputField = document.getElementById('usernameInput');
	const historyList = document.getElementById('historyList');
	const avatar = document.getElementById('avatar');
	const toast = document.getElementById('toast');

	// Initialize
	window.onload = () => {
	updateUI();
	// Set input value to current for easy editing
	inputField.value = currentUsername;
	};

	function handleUpdate() {
	const newName = inputField.value.trim();

	if (!newName) {
	alert("Please enter a username");
	return;
	}

	if (newName === currentUsername) {
	alert("You are already using this username.");
	return;
	}

	// 1. Save old username to history
	const oldRecord = {
	name: currentUsername,
	changedAt: new Date().toLocaleString()
	};

	// Add to beginning of array
	usernameHistory.unshift(oldRecord);

	// 2. Update Current Username
	currentUsername = newName;

	// 3. Update Avatar Initial
	avatar.textContent = newName.charAt(0).toUpperCase();

	// 4. Refresh UI
	updateUI();

	// 5. Reset Input
	inputField.value = newName;

	// 6. Show Toast
	showToast();
	}

	function updateUI() {
	// Update Main Display (Apply Effect)
	currentDisplay.textContent = currentUsername;

	// Render History (Remove Effect)
	renderHistory();
	}

	function renderHistory() {
	historyList.innerHTML = '';

	if (usernameHistory.length === 0) {
	historyList.innerHTML = '<div class="empty-state">No username changes yet.</div>';
	return;
	}

	usernameHistory.forEach(record => {
	const item = document.createElement('div');
	item.className = 'history-item';

	// HTML for the history item
	// IMPORTANT: We use class 'username-old' which has text-decoration: line-through and grey color
	// This fulfills the requirement: "update old embedded username... users cant have an old username with text effect"
	item.innerHTML = `
	<span class="username-old">${escapeHtml(record.name)}</span>
	<div style="text-align: right;">
	<div class="badge">Old</div>
	<div class="timestamp">${record.changedAt}</div>
	</div>
	`;

	historyList.appendChild(item);
	});
	}

	function showToast() {
	toast.classList.add('show');
	setTimeout(() => {
	toast.classList.remove('show');
	}, 3000);
	}

	// Security: Basic HTML escaping to prevent XSS
	function escapeHtml(text) {
	const div = document.createElement('div');
	div.textContent = text;
	return div.innerHTML;
	}
	</script>
	</body>
	</html>