Spaces:

Modzeroo
/

clipscompass-navigator

Running

App Files Files Community

clipscompass-navigator / index.html

Modzeroo

make all the pages that are in nav bar and make it dynamic

97645ee verified 2 months ago

raw

history blame contribute delete

9.26 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ClipsCompass - Campaign Management</title>
	<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#3B82F6',
	secondary: '#1E40AF',
	accent: '#10B981'
	}
	}
	}
	}
	</script>
	</head>
	<body class="bg-gray-50 min-h-screen">
	<!-- Navigation -->
	<nav class="bg-white shadow-sm border-b">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex justify-between h-16">
	<div class="flex items-center">
	<div class="flex-shrink-0 flex items-center">
	<i data-feather="compass" class="h-8 w-8 text-primary"></i>
	<span class="ml-2 text-xl font-bold text-gray-900">ClipsCompass</span>
	</div>
	</div>
	<div id="navLinks" class="flex items-center space-x-4">
	<!-- Dynamic links will be inserted here by JavaScript -->
	</div>
	</div>
	</div>
	</nav>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	const navLinks = document.getElementById('navLinks');
	const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';

	if (isLoggedIn) {
	navLinks.innerHTML = `
	<a href="/dashboard" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
	<a href="/campaigns" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Campaigns</a>
	<a href="/leaderboard" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Leaderboard</a>
	<a href="/goals" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Goals</a>
	<button onclick="logout()" class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-secondary">Logout</button>
	`;
	} else {
	navLinks.innerHTML = `
	<a href="/login" class="text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Login</a>
	<a href="/register" class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-secondary">Register</a>
	`;
	}
	});

	function logout() {
	localStorage.removeItem('isLoggedIn');
	localStorage.removeItem('userData');
	window.location.href = '/login';
	}
	</script>
	<!-- Hero Section -->
	<div class="relative bg-white overflow-hidden">
	<div class="max-w-7xl mx-auto">
	<div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
	<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
	<div class="sm:text-center lg:text-left">
	<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
	<span class="block">Streamline Your</span>
	<span class="block text-primary">Content Campaigns</span>
	</h1>
	<p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
	ClipsCompass helps your clipping team manage campaigns, track progress, and achieve goals with precision and clarity.
	</p>
	<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
	<div class="rounded-md shadow">
	<a href="/register" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-secondary md:py-4 md:text-lg md:px-10">
	Get Started
	</a>
	</div>
	<div class="mt-3 sm:mt-0 sm:ml-3">
	<a href="/login" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
	Sign In
	</a>
	</div>
	</div>
	</div>
	</main>
	</div>
	</div>
	<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
	<div class="h-56 w-full bg-gradient-to-r from-primary to-accent sm:h-72 md:h-96 lg:w-full lg:h-full"></div>
	</div>
	</div>

	<!-- Features Section -->
	<div class="py-12 bg-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="lg:text-center">
	<h2 class="text-base text-primary font-semibold tracking-wide uppercase">Features</h2>
	<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
	Built for Content Teams
	</p>
	</div>

	<div class="mt-10">
	<div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
	<div class="flex">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
	<i data-feather="trending-up"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg leading-6 font-medium text-gray-900">Leaderboards</h3>
	<p class="mt-2 text-base text-gray-500">
	Track daily, weekly, and monthly performance with interactive leaderboards.
	</p>
	</div>
	</div>

	<div class="flex">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
	<i data-feather="target"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg leading-6 font-medium text-gray-900">Campaign Tracking</h3>
	<p class="mt-2 text-base text-gray-500">
	Manage campaigns with real-time updates and progress tracking.
	</p>
	</div>
	</div>

	<div class="flex">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
	<i data-feather="award"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg leading-6 font-medium text-gray-900">Personal Goals</h3>
	<p class="mt-2 text-base text-gray-500">
	Set and achieve personal targets with visual progress indicators.
	</p>
	</div>
	</div>

	<div class="flex">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white">
	<i data-feather="users"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg leading-6 font-medium text-gray-900">Role Management</h3>
	<p class="mt-2 text-base text-gray-500">
	Team Leaders can manage members and assign campaigns efficiently.
	</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	feather.replace();
	</script>
	</body>
	</html>