Spaces:

jolieee206
/

ts-jojo-monroe

Sleeping

ts-jojo-monroe / index.html

30161d5 verified 5 months ago

raw

history blame contribute delete

6.76 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Jo Jo Monroe \| Premium TS Companionship & VIP Escort</title>

	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet" />

	<!-- FontAwesome -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

	<!-- Tailwind Config -->
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	gold: '#c6a87d',
	midnight: '#0f172a',
	silver: '#e4e4e7'
	},
	fontFamily: {
	display: ['Playfair Display', 'serif'],
	body: ['Poppins', 'sans-serif']
	}
	}
	}
	}
	</script>

	<style>
	/* Your provided CSS */
	.chat-header {
	font-family: 'Playfair Display', serif;
	color: #c6a87d;
	font-size: 1.8rem;
	margin-bottom: 1.5rem;
	letter-spacing: 0.5px;
	}
	.input-area {
	background: #1e293b;
	border: 2px solid #c6a87d;
	border-radius: 8px;
	padding: 1rem;
	margin-top: 1.5rem;
	}
	.send-button {
	background: #c6a87d;
	color: #0f172a;
	padding: 0.7rem 1.5rem;
	border-radius: 6px;
	font-weight: 600;
	transition: all 0.3s ease;
	cursor: pointer;
	}
	.send-button:hover {
	background: #d4b787;
	transform: translateY(-2px);
	}
	.user-message {
	background: #c6a87d;
	color: #0f172a;
	border-radius: 14px 14px 0 14px;
	padding: 1rem 1.5rem;
	margin: 0.5rem 0;
	max-width: 70%;
	align-self: flex-end;
	font-weight: 500;
	}
	.bot-message {
	background: #1e293b;
	color: #fff;
	border-radius: 14px 14px 14px 0;
	padding: 1rem 1.5rem;
	margin: 0.5rem 0;
	max-width: 70%;
	align-self: flex-start;
	border: 1px solid #334155;
	}
	.chat-container {
	background: #0f172a;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	padding: 2rem;
	border-radius: 10px;
	border: 2px solid #c6a87d;
	box-shadow: 0 12px 20px rgba(15, 23, 42, 0.4);
	display: flex;
	flex-direction: column;
	max-width: 480px;
	margin: 2rem auto;
	}
	/* Portfolio grid and hover */
	.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.5rem;
	}
	.portfolio-item {
	overflow: hidden;
	position: relative;
	border-radius: 1rem;
	cursor: pointer;
	border: 2px solid #666666;
	transition: border-color 0.3s ease;
	}
	.portfolio-item:hover {
	border-color: #ff3399;
	}
	.portfolio-item img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
	}
	.portfolio-item:hover img {
	transform: scale(1.1);
	}
	.portfolio-hover {
	position: absolute;
	inset: 0;
	background: rgba(255, 51, 153, 0.75);
	opacity: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 1.5rem;
	text-align: center;
	padding: 1rem;
	transition: opacity 0.3s ease;
	border-radius: 1rem;
	}
	.portfolio-item:hover .portfolio-hover {
	opacity: 1;
	}
	</style>
	</head>
	<body class="bg-midnight text-white font-body">

	<!-- Your full page content goes here (nav, hero, gallery, about, stats, contact, footer) -->

	<!-- Example: Chat UI -->
	<div class="chat-container" role="region" aria-label="Chat with Jo Jo Monroe">
	<div class="chat-header">Jo Jo Monroe Chat</div>
	<div id="chat-messages" style="display:flex; flex-direction:column; gap:0.5rem; min-height:140px; max-height:270px; overflow-y:auto;">
	<div class="bot-message">Welcome to Jo Jo’s private chat.<br>Ask. Speak up. Or just shoot your shot—no judgement, but I don’t do small talk.</div>
	</div>
	<form id="chat-form" style="display:flex; align-items:flex-end; gap:1rem; margin-top:1.2rem;" autocomplete="off">
	<textarea class="input-area" id="user-input" rows="2" placeholder="Type your message..." aria-label="Message input"></textarea>
	<button type="submit" class="send-button" aria-label="Send message"><i class="fa-solid fa-paper-plane"></i></button>
	</form>
	</div>

	<script>
	// Chat form submit logic
	document.getElementById('chat-form').addEventListener('submit', function(e) {
	e.preventDefault();
	const input = document.getElementById('user-input');
	const chat = document.getElementById('chat-messages');
	const msg = input.value.trim();
	if (!msg) return;
	// User message
	const userDiv = document.createElement('div');
	userDiv.className = 'user-message';
	userDiv.innerText = msg;
	chat.appendChild(userDiv);
	// Mock Jo Jo reply
	setTimeout(() => {
	const botDiv = document.createElement('div');
	botDiv.className = 'bot-message';
	botDiv.innerText = jojoReply(msg);
	chat.appendChild(botDiv);
	chat.scrollTop = chat.scrollHeight;
	}, 650);
	input.value = '';
	chat.scrollTop = chat.scrollHeight;
	});

	function jojoReply(msg) {
	const lower = msg.toLowerCase();
	if (lower.includes('hello') \|\| lower.includes('hi')) {
	return "If you want pretty pleasantries, wrong room. But hey—since you tried: hello, darling.";
	}
	if (lower.includes('rates') \|\| lower.includes('how much')) {
	return "Details are tailored—because you're not generic, and neither am I. Reach out direct for the real info.";
	}
	if (lower.includes('available')) {
	return "Booked out? Sometimes. Worth the wait? Always.";
	}
	if (lower.includes('instagram') \|\| lower.includes('twitter')) {
	return "For the real show, check the socials in the footer. But don’t waste my time unless you’re serious.";
	}
	return "Direct. Discreet. Decisive. Anything less is not my brand. Now—what do you really want?";
	}
	</script>

	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jolieee206/ts-jojo-monroe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>