Spaces:

akhaliq
/

anycoder-8f42ecbb

Running

App Files Files Community

anycoder-8f42ecbb / index.html

akhaliq HF Staff

Upload folder using huggingface_hub

adc3dd6 verified 10 days ago

raw

history blame contribute delete

29.4 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HeroForce - Roster Manager</title>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

	<style>
	:root {
	--primary: #3b82f6;
	--primary-dark: #2563eb;
	--primary-light: #60a5fa;
	--secondary: #8b5cf6;
	--accent: #06b6d4;
	--bg-dark: #0f172a;
	--bg-card: #1e293b;
	--bg-surface: rgba(30, 41, 59, 0.7);
	--text-primary: #f1f5f9;
	--text-secondary: #94a3b8;
	--text-muted: #64748b;
	--border: rgba(255, 255, 255, 0.1);
	--success: #10b981;
	--warning: #f59e0b;
	--danger: #ef4444;
	--shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	--radius: 12px;
	--radius-lg: 16px;
	--transition: all 0.2s ease-in-out;
	}

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

	body {
	background: var(--bg-dark);
	color: var(--text-primary);
	font-family: 'Inter', sans-serif;
	line-height: 1.6;
	min-height: 100vh;
	position: relative;
	}

	body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
	radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
	radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
	pointer-events: none;
	z-index: -1;
	}

	/* Header */
	.header {
	background: var(--bg-surface);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 100;
	}

	.header-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-weight: 700;
	font-size: 1.25rem;
	background: linear-gradient(135deg, var(--primary), var(--secondary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	}

	.logo-icon {
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, var(--primary), var(--secondary));
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.anycoder-badge {
	font-size: 0.75rem;
	color: var(--text-muted);
	text-decoration: none;
	font-weight: 500;
	transition: var(--transition);
	}

	.anycoder-badge:hover {
	color: var(--primary);
	}

	/* Main Layout */
	.main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 1.5rem;
	}

	/* Page Header */
	.page-header {
	margin-bottom: 2rem;
	}

	.page-title {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	}

	.page-subtitle {
	color: var(--text-secondary);
	font-size: 1rem;
	}

	/* Controls */
	.controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
	gap: 1rem;
	}

	.stats {
	color: var(--text-muted);
	font-size: 0.875rem;
	font-weight: 500;
	}

	/* Buttons */
	.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius);
	border: none;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: var(--transition);
	text-decoration: none;
	}

	.btn-primary {
	background: linear-gradient(135deg, var(--primary), var(--primary-dark));
	color: white;
	box-shadow: var(--shadow);
	}

	.btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-lg);
	}

	.btn-ghost {
	background: transparent;
	color: var(--text-secondary);
	border: 1px solid var(--border);
	}

	.btn-ghost:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-primary);
	}

	.btn-icon {
	padding: 0.5rem;
	width: 36px;
	height: 36px;
	justify-content: center;
	}

	/* Hero Grid */
	.hero-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.5rem;
	}

	/* Hero Card */
	.hero-card {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	transition: var(--transition);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	}

	.hero-card:hover {
	transform: translateY(-4px);
	border-color: var(--primary-light);
	box-shadow: var(--shadow-lg);
	}

	.card-header {
	height: 100px;
	position: relative;
	overflow: hidden;
	}

	.card-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--primary), var(--secondary));
	opacity: 0.8;
	}

	.hero-avatar {
	position: absolute;
	bottom: -24px;
	left: 1.5rem;
	width: 64px;
	height: 64px;
	border-radius: 12px;
	border: 3px solid var(--bg-card);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	}

	.card-content {
	padding: 2rem 1.5rem 1.5rem;
	flex-grow: 1;
	}

	.hero-name {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
	}

	.hero-alias {
	color: var(--accent);
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 1rem;
	}

	.hero-desc {
	color: var(--text-secondary);
	font-size: 0.875rem;
	line-height: 1.5;
	margin-bottom: 1.5rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	}

	/* Stats */
	.stats-container {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	}

	.stat-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	}

	.stat-label {
	width: 60px;
	color: var(--text-muted);
	font-size: 0.75rem;
	font-weight: 500;
	}

	.stat-bar {
	flex: 1;
	height: 6px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	overflow: hidden;
	}

	.stat-fill {
	height: 100%;
	border-radius: 3px;
	background: var(--primary);
	}

	.stat-value {
	width: 30px;
	text-align: right;
	color: var(--text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	}

	/* Card Actions */
	.card-actions {
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	background: rgba(0, 0, 0, 0.1);
	}

	/* Empty State */
	.empty-state {
	grid-column: 1 / -1;
	text-align: center;
	padding: 4rem 2rem;
	background: rgba(255, 255, 255, 0.02);
	border-radius: var(--radius-lg);
	border: 2px dashed var(--border);
	}

	.empty-icon {
	font-size: 3rem;
	color: var(--text-muted);
	margin-bottom: 1rem;
	opacity: 0.5;
	}

	/* Modal */
	.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(8px);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	padding: 1.5rem;
	}

	.modal.active {
	opacity: 1;
	pointer-events: all;
	}

	.modal-content {
	background: var(--bg-card);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	transform: translateY(20px);
	transition: transform 0.3s ease;
	}

	.modal.active .modal-content {
	transform: translateY(0);
	}

	.modal-header {
	padding: 1.5rem 1.5rem 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	}

	.modal-title {
	font-size: 1.5rem;
	font-weight: 600;
	}

	.modal-close {
	background: none;
	border: none;
	color: var(--text-secondary);
	font-size: 1.25rem;
	cursor: pointer;
	padding: 0.25rem;
	border-radius: 4px;
	}

	.modal-close:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--text-primary);
	}

	.modal-body {
	padding: 0 1.5rem 1.5rem;
	}

	/* Form */
	.form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	}

	.form-label {
	color: var(--text-secondary);
	font-size: 0.875rem;
	font-weight: 500;
	}

	.form-input,
	.form-textarea {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0.75rem;
	color: var(--text-primary);
	font-family: inherit;
	font-size: 0.875rem;
	transition: var(--transition);
	}

	.form-input:focus,
	.form-textarea:focus {
	outline: none;
	border-color: var(--primary);
	background: rgba(255, 255, 255, 0.08);
	}

	.form-textarea {
	resize: vertical;
	min-height: 80px;
	}

	.range-group {
	display: flex;
	align-items: center;
	gap: 1rem;
	}

	.range-input {
	flex: 1;
	accent-color: var(--primary);
	}

	.range-value {
	width: 30px;
	text-align: right;
	color: var(--primary);
	font-weight: 600;
	font-size: 0.875rem;
	}

	/* Notification */
	.notification {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	box-shadow: var(--shadow-lg);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	z-index: 1100;
	}

	.notification.show {
	transform: translateX(0);
	}

	/* Responsive Design */
	@media (max-width: 768px) {
	.header-container {
	padding: 0.75rem 1rem;
	}

	.main {
	padding: 1.5rem 1rem;
	}

	.page-title {
	font-size: 1.5rem;
	}

	.controls {
	flex-direction: column;
	align-items: stretch;
	}

	.btn {
	width: 100%;
	justify-content: center;
	}

	.hero-grid {
	grid-template-columns: 1fr;
	gap: 1rem;
	}

	.modal {
	padding: 1rem;
	}
	}

	@media (max-width: 480px) {
	.card-content {
	padding: 1.5rem 1rem 1rem;
	}

	.card-actions {
	padding: 0.75rem 1rem;
	}

	.modal-content {
	max-height: 95vh;
	}
	}
	</style>
	</head>
	<body>
	<!-- Header -->
	<header class="header">
	<div class="header-container">
	<div class="logo">
	<div class="logo-icon">
	<i class="fa-solid fa-bolt" style="color: white; font-size: 0.875rem;"></i>
	</div>
	HeroForce
	</div>
	<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-badge">Built with anycoder</a>
	</div>
	</header>

	<!-- Main Content -->
	<main class="main">
	<div class="page-header">
	<h1 class="page-title">Hero Roster</h1>
	<p class="page-subtitle">Manage your team of extraordinary individuals</p>
	</div>

	<div class="controls">
	<div class="stats" id="heroCount">0 Heroes Active</div>
	<button class="btn btn-primary" onclick="openModal()">
	<i class="fa-solid fa-plus"></i>
	Add Hero
	</button>
	</div>

	<div class="hero-grid" id="heroGrid">
	<!-- Heroes will be dynamically added here -->
	</div>
	</main>

	<!-- Modal -->
	<div class="modal" id="heroModal">
	<div class="modal-content">
	<div class="modal-header">
	<h2 class="modal-title" id="modalTitle">Add New Hero</h2>
	<button class="modal-close" onclick="closeModal()">
	<i class="fa-solid fa-xmark"></i>
	</button>
	</div>
	<div class="modal-body">
	<form class="form" id="heroForm">
	<input type="hidden" id="heroId">

	<div class="form-group">
	<label class="form-label">Hero Name</label>
	<input type="text" class="form-input" id="heroName" required placeholder="e.g. Captain Velocity">
	</div>

	<div class="form-group">
	<label class="form-label">Secret Identity</label>
	<input type="text" class="form-input" id="heroAlias" required placeholder="e.g. John Doe">
	</div>

	<div class="form-group">
	<label class="form-label">Power Description</label>
	<textarea class="form-textarea" id="heroDesc" rows="3" placeholder="Describe their abilities and powers..."></textarea>
	</div>

	<div class="form-group">
	<label class="form-label">Strength</label>
	<div class="range-group">
	<input type="range" class="range-input" id="heroStrength" min="1" max="100" value="50" oninput="updateRangeValue(this)">
	<span class="range-value">50</span>
	</div>
	</div>

	<div class="form-group">
	<label class="form-label">Speed</label>
	<div class="range-group">
	<input type="range" class="range-input" id="heroSpeed" min="1" max="100" value="50" oninput="updateRangeValue(this)">
	<span class="range-value">50</span>
	</div>
	</div>

	<div class="form-group">
	<label class="form-label">Intelligence</label>
	<div class="range-group">
	<input type="range" class="range-input" id="heroIntel" min="1" max="100" value="50" oninput="updateRangeValue(this)">
	<span class="range-value">50</span>
	</div>
	</div>

	<button type="submit" class="btn btn-primary">
	<i class="fa-solid fa-save"></i>
	Save Hero
	</button>
	</form>
	</div>
	</div>

	<!-- Notification -->
	<div class="notification" id="notification">
	<i class="fa-solid fa-check-circle" style="color: var(--success)"></i>
	<span id="notificationMsg">Action successful</span>
	</div>

	<script>
	// Initial Data
	const defaultHeroes = [
	{
	id: '1',
	name: 'Iron Guardian',
	alias: 'Tony Stark-ish',
	desc: 'A genius billionaire who built a high-tech suit of armor to protect the world from cosmic threats.',
	strength: 85,
	speed: 70,
	intel: 95
	},
	{
	id: '2',
	name: 'Solar Flare',
	alias: 'Elena Rodriguez',
	desc: 'Capable of manipulating solar energy to fly and project intense beams of heat.',
	strength: 75,
	speed: 90,
	intel: 60
	},
	{
	id: '3',
	name: 'Shadow Weaver',
	alias: 'Damian Black',
	desc: 'Can merge with shadows and teleport instantly between dark places. Master of stealth.',
	strength: 50,
	speed: 88,
	intel: 80
	},
	{
	id: '4',
	name: 'Titanus',
	alias: 'Marcus Steel',
	desc: 'Possesses immense physical strength and invulnerability. The tank of the team.',
	strength: 98,
	speed: 40,
	intel: 55
	},
	{
	id: '5',
	name: 'Mind Reader',
	alias: 'Sarah Jean',
	desc: 'A powerful telepath who can read thoughts and influence the actions of others.',
	strength: 30,
	speed: 45,
	intel: 100
	}
	];

	// State Management
	let heroes = JSON.parse(localStorage.getItem('heroes')) \|\| defaultHeroes;

	// DOM Elements
	const grid = document.getElementById('heroGrid');
	const modal = document.getElementById('heroModal');
	const heroForm = document.getElementById('heroForm');
	const heroCountLabel = document.getElementById('heroCount');

	// Color Generation
	function generateColors(name) {
	const hue = name.split('').reduce((a, b) => a + b.charCodeAt(0), 0) % 360;
	return {
	header: `hsl(${hue}, 70%, 40%)',
	avatar: `hsl(${hue}, 60%, 50%)'
	};
	}

	// Render Function
	function renderHeroes() {
	grid.innerHTML = '';

	if (heroes.length === 0) {
	grid.innerHTML = `
	<div class="empty-state">
	<div class="empty-icon"><i class="fa-solid fa-user-plus"></i></div>
	<h3>No Heroes Found</h3>
	<p style="color: var(--text-muted); margin-top: 0.5rem;">The world needs saving! Add your first hero to start.</p>
	</div>
	`;
	heroCountLabel.textContent = `0 Heroes Active`;
	return;
	}

	heroCountLabel.textContent = `${heroes.length} Heroes Active`;

	heroes.forEach(hero => {
	const colors = generateColors(hero.name);

	const card = document.createElement('div');
	card.className = 'hero-card';

	card.innerHTML = `
	<div class="card-header" style="background: ${colors.header}">
	<div class="hero-avatar" style="background: ${colors.avatar}">
	${hero.name.charAt(0)}
	</div>
	</div>
	<div class="card-content">
	<h3 class="hero-name">${hero.name}</h3>
	<span class="hero-alias">${hero.alias}</span>
	<p class="hero-desc">${hero.desc}</p>

	<div class="stats-container">
	<div class="stat-item">
	<span class="stat-label">STR</span>
	<div class="stat-bar">
	<div class="stat-fill" style="width: ${hero.strength}%"></div>
	</div>
	<span class="stat-value">${hero.strength}</span>
	</div>
	<div class="stat-item">
	<span class="stat-label">SPD</span>
	<div class="stat-bar">
	<div class="stat-fill" style="width: ${hero.speed}%; background: var(--secondary)"></div>
	</div>
	<span class="stat-value">${hero.speed}</span>
	</div>
	<div class="stat-item">
	<span class="stat-label">INT</span>
	<div class="stat-bar">
	<div class="stat-fill" style="width: ${hero.intel}%; background: var(--success)"></div>
	</div>
	<span class="stat-value">${hero.intel}</span>
	</div>
	</div>
	</div>
	<div class="card-actions">
	<button class="btn btn-ghost btn-icon" onclick="editHero('${hero.id}')">
	<i class="fa-solid fa-pen"></i>
	</button>
	<button class="btn btn-ghost btn-icon" onclick="deleteHero('${hero.id}')">
	<i class="fa-solid fa-trash"></i>
	</button>
	</div>
	`;
	grid.appendChild(card);
	});
	}

	// Modal Functions
	function openModal(isEdit = false) {
	document.getElementById('modalTitle').textContent = isEdit ? 'Edit Hero' : 'Add New Hero';
	modal.classList.add('active');

	if (!isEdit) {
	heroForm.reset();
	document.getElementById('heroId').value = '';

	// Reset range displays
	document.querySelectorAll('.range-input').forEach(input => {
	input.nextElementSibling.textContent = input.value;
	});
	}
	}

	function closeModal() {
	modal.classList.remove('active');
	}

	// Range Value Update
	function updateRangeValue(input) {
	input.nextElementSibling.textContent = input.value;
	}

	// CRUD Operations
	function saveHero(e) {
	e.preventDefault();

	const id = document.getElementById('heroId').value;
	const name = document.getElementById('heroName').value;
	const alias = document.getElementById('heroAlias').value;
	const desc = document.getElementById('heroDesc').value;
	const strength = parseInt(document.getElementById('heroStrength').value);
	const speed = parseInt(document.getElementById('heroSpeed').value);
	const intel = parseInt(document.getElementById('heroIntel').value);

	if (id) {
	// Update existing hero
	const index = heroes.findIndex(h => h.id === id);
	if (index !== -1) {
	heroes[index] = {
	...heroes[index],
	name, alias, desc, strength, speed, intel
	};
	showNotification('Hero updated successfully!');
	}
	} else {
	// Create new hero
	const newHero = {
	id: Date.now().toString(),
	name,
	alias,
	desc,
	strength,
	speed,
	intel
	};
	heroes.push(newHero);
	showNotification('New hero recruited!');
	}

	saveToStorage();
	renderHeroes();
	closeModal();
	}

	function editHero(id) {
	const hero = heroes.find(h => h.id === id);
	if (!hero) return;

	document.getElementById('heroId').value = hero.id;
	document.getElementById('heroName').value = hero.name;
	document.getElementById('heroAlias').value = hero.alias;
	document.getElementById('heroDesc').value = hero.desc;

	const strengthInput = document.getElementById('heroStrength');
	strengthInput.value = hero.strength;
	updateRangeValue(strengthInput);

	const speedInput = document.getElementById('heroSpeed');
	speedInput.value = hero.speed;
	updateRangeValue(speedInput);

	const intelInput = document.getElementById('heroIntel');
	intelInput.value = hero.intel;
	updateRangeValue(intelInput);

	openModal(true);
	}

	function deleteHero(id) {
	if (confirm('Are you sure you want to remove this hero from the roster?')) {
	heroes = heroes.filter(h => h.id !== id);
	saveToStorage();
	renderHeroes();
	showNotification('Hero removed from roster.');
	}
	}

	// Storage
	function saveToStorage() {
	localStorage.setItem('heroes', JSON.stringify(heroes));
	}

	// Notification
	function showNotification(msg) {
	const notif = document.getElementById('notification');
	document.getElementById('notificationMsg').textContent = msg;
	notif.classList.add('show');

	setTimeout(() => {
	notif.classList.remove('show');
	}, 3000);
	}

	// Event Listeners
	heroForm.addEventListener('submit', saveHero);

	modal.addEventListener('click', (e) => {
	if (e.target === modal) closeModal();
	});

	// Keyboard Events
	document.addEventListener('keydown', (e) => {
	if (e.key === 'Escape' && modal.classList.contains('active')) {
	closeModal();
	}
	});

	// Initial Load
	renderHeroes();
	</script>
	</body>
	</html>