<!DOCTYPE html>
<html lang="en" class="bg-gray-900">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VortexAI</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class=" text-white">
<div class="container mx-auto">
<div class="drawer">
<input id="sidebar" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col">
<div class="navbar flex items-center justify-between p-4">
<div class="navbar-start">
<label for="sidebar" tabindex="0" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
</svg>
</label>
<a href="#" class="btn btn-ghost normal-case text-2xl">VortexAI</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal text-md px-1">
<li><a href="https://vortexwebapi.vortexai.repl.co">Chat</a></li>
<li><a href="#">Characters</a></li>
<li><a href="https://discord.gg/7WabGcsBsg">Discord</a></li>
</ul>
</div>
<div class="navbar-end">
<a href="#" class="btn">Login</a>
</div>
</div>
</div>
<div class="z-10 drawer-side">
<label for="sidebar" aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu p-4 w-80 min-h-full bg-base-200">
<li><a href="https://vortexwebapi.vortexai.repl.co">Chat</a></li>
<li><a href="#">Characters</a></li>
<li><a href="https://discord.gg/7WabGcsBsg">Discord</a></li>
</ul>
</div>
</div>
</div>
<div class="container mx-auto mt-8 p-4">
<div class="flex justify-between items-center">
<h1 class="text-2xl text-sky-400 sm:text-3xl font-bold hover:-translate-y-1 hover:scale-110 hover:text-indigo-500 duration-200 transition">Characters</h1>
<div class="flex items-center space-x-4">
<input type="text" placeholder="Search" class="input input-bordered w-32 md:w-64 rounded-xl" />
<button class="btn btn-outline btn-primary" onclick="addcharactermodal.showModal()">Add</button>
</div>
</div>
</div>
<dialog id="addcharactermodal" class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
<form method="dialog">
<button class="btn btn-md btn-circle btn-ghost absolute right-12 top-1">✓</button>
<button class="btn btn-md btn-circle btn-ghost absolute right-2 top-1">✕</button>
</form>
<h3 class="font-bold mb-8 text-lg">Create a character</h3>
<div class="form-control w-full">
<label class="label">
<span class="label-text">What's the name of the character?</span>
</label>
<input type="text" placeholder="Name..." class="input input-bordered" />
<label class="label">
<span class="label-text">About the character</span>
</label>
<input type="text" placeholder="Short Description..." class="input input-bordered" />
<label class="label">
<span class="label-text">Prompt for the character</span>
</label>
<textarea placeholder="Prompt..." class="textarea textarea-xs textarea-bordered"></textarea>
<label class="label">
<span class="label-text">Pick a profile</span>
</label>
<input type="file" class="file-input file-input-bordered" />
</div>
</div>
</dialog>
<div id="cardsContainer" class="container mx-auto flex flex-wrap justify-center gap-4 p-8">
<div class="bg-gray-800 p-6 w-full sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/4 rounded-xl shadow-lg flex items-center justify-start">
<div class="relative hover:scale-110 duration-200 transition">
<div class="overflow-hidden rounded-full h-24 w-24 border-4 border-gray-900">
<img src="https://elements-cover-images-0.imgix.net/b55c8591-97f9-4d0f-8b17-fcbf0dbdc27a?auto=compress&crop=edges&fit=crop&fm=jpeg&h=630&w=1200&s=c79ebede812ea2109941ba21093533a7" alt="profile" class="object-cover w-full h-full rounded-full" />
</div>
<div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 opacity-40 rounded-full"></div>
</div>
<div class="ml-6">
<h2 class="text-2xl font-semibold">Voidi</h2>
<p class="text-gray-400 line-clamp-3 max-w-xs break-words">It's the ice cream guy.</p>
<div class="mt-4">
<button class="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-gradient-to-r hover:from-blue-600 hover:to-purple-600 transition duration-300 ease-in-out">Chat</button>
</div>
</div>
</div>
<div class="bg-gray-800 p-6 w-full sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/4 rounded-xl shadow-lg flex items-center justify-start">
<div class="relative hover:scale-110 duration-200 transition">
<div class="overflow-hidden rounded-full h-24 w-24 border-4 border-gray-900">
<img src="https://ih0.redbubble.net/image.720311364.1617/flat,550x550,075,f.u1.jpg" alt="profile" class="object-cover w-full h-full rounded-full" />
</div>
<div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 opacity-40 rounded-full"></div>
</div>
<div class="ml-6">
<h2 class="text-2xl font-semibold">Elongated Musk</h2>
<p class="text-gray-400 line-clamp-3 max-w-xs break-words">Solar panel salesman, underground tunnel digger, flamethrower marketer.</p>
<div class="mt-4">
<button class="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-gradient-to-r hover:from-blue-600 hover:to-purple-600 transition duration-300 ease-in-out">Chat</button>
</div>
</div>
</div>
</div>
</body>
<script>
async function fetchData() {
try {
const response = await fetch('https://corsproxy.io/?https://django--tinytmpsxei3.repl.co/get-characters/get-data');
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching data:', error);
}
}
function createCards(data) {
const cardsContainer = document.getElementById('cardsContainer');
data.forEach(person => {
const card = document.createElement('div');
card.className = 'bg-gray-800 p-6 w-full sm:w-1/2 md:w-1/4 lg:w-1/4 xl:w-1/4 rounded-xl shadow-lg flex items-center justify-start';
card.innerHTML = `
<div class="relative hover:scale-110 duration-200 transition">
<div class="overflow-hidden rounded-full h-24 w-24 border-4 border-gray-900">
<img src="${person.profile}" alt="profile" class="object-cover w-full h-full rounded-full" />
</div>
<div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 opacity-40 rounded-full"></div>
</div>
<div class="ml-6">
<h2 class="text-2xl font-semibold">${person.name}</h2>
<p class="text-gray-400 line-clamp-3 max-w-xs break-words">${person.description}</p>
<div class="mt-4">
<button class="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-gradient-to-r hover:from-blue-600 hover:to-purple-600 transition duration-300 ease-in-out">Chat</button>
</div>
</div>
`;
cardsContainer.appendChild(card);
});
}
window.onload = async function () {
const data = await fetchData();
if (data) {
createCards(data);
}
};
</script>
</html>