Demo: https://codepen.io/ClumsyLulz/full/KKYwNyr
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cunt AI</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
background-color: #121212; /* Dark background */
color: #e0e0e0; /* Light text */
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.chatbox {
background-color: #333333; /* Darker element background */
border-radius: 5px;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* More pronounced shadow for dark mode */
width: 300px;
margin-bottom: 20px;
}
.typing-indicator {
height: 30px;
width: 60px;
display: none; /* Initially hidden */
align-items: center;
justify-content: space-between;
}
.dot {
width: 8px;
height: 8px;
background-color: #e0e0e0; /* Light dots for visibility */
border-radius: 50%;
animation: typing 1.5s infinite;
}
.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.25s; }
.dot:nth-child(3) { animation-delay: 0.5s; }
@keyframes typing {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
.input-area {
display: flex;
justify-content: space-between;
width: 100%;
}
input[type="text"] {
flex-grow: 1;
padding: 10px;
margin-right: 10px;
border-radius: 5px;
border: 1px solid #555; /* Darker border for input */
background-color: #222; /* Dark input field */
color: #ddd; /* Light text */
}
button {
padding: 10px;
border-radius: 5px;
border: none;
background-color: #007bff; /* Keep primary button color */
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<img src="https://i.ibb.co/fqqytN9/cooltext453311745207029.png" alt="Logo" class="logo"> <!-- Made By ClumsyLulz -->
<div class="chatbox">
<p id="aiResponse">Bruv: Oi ya fuckin cunt you gonna type or what?</p>
<div class="typing-indicator">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="input-area">
<input type="text" id="userInput" placeholder="Say something..." onkeypress="handleKeyPress(event)">
<button onclick="sendMessage()">Send</button>
</div>
<script>
const aiResponses = [
"I'm so sloshed, I tried to use a meat pie as my password cause it said I needed at least 8 characters and one special character. Thought the pie was pretty special, ya know?",
"Listen here, I'm so plastered, I tried to convince the bouncer that my mate's kangaroo was my designated driver. Said he had his own built-in security system—kicks harder than any password, I reckon!",
"Mate, I was so out of it, I put my beer can's barcode as my password, figured it's the key to happiness, should unlock my phone too, right?",
"I'm so wrecked, I told the security guard my best mate is a drop bear and he's my personal bodyguard. Said he specializes in aerial attacks.",
"Bloody hell, I was so tanked, I tried to scan my face with my beer bottle label facing the camera, thought it might improve my looks for the security check.",
"Oi, I was so pickled, I mistook the police car for a taxi and told the officer I lost my password down at the pub, asked if he could help me reset it.",
"I'm so zonked, I tried to use a snag from the barbie as a stylus to draw my password pattern. Wondered why the screen wasn't sizzling.",
"Mate, last night I was so smashed, I tried to log into my online banking with my pub loyalty card. Figured all those beers should count for something, right?",
"I was so fried, I told the ATM I forgot my PIN but it's alright cause my dog remembers it, asked if he could just bark it out for me.",
"Bloody oath, I was so sloshed, I asked Siri to just tell the bouncer my password cause I'd forgotten it. Swore she was me best mate and wouldn't lie.",
"I'm so blitzed, I thought the street light was a security camera and started confessing all my passwords, just in case it wanted to help me log in.",
"Mate, I was so hammered, I thought my shadow was trying to hack me, kept changing my passwords every time it followed me.",
"Last night, I was so tanked, I tried to unlock my door by whispering sweet nothings into the keyhole. Reckoned it just needed some love.",
"I was so plastered, I gave my password a pep talk about being strong and not letting anyone crack it. Felt like a proper security coach, I did.",
"Mate, I was so sloshed, I started using my ex's name as my password, cause accessing my feelings for her is just as impossible as my accounts now.",
"I'm so wrecked, I challenged the security camera to a staring contest, said if I win it has to let me in without a password.",
"Bloody hell, I was so smashed, I tried to bribe my computer with beer to let me in without a password. Told it I'd upgrade it to a liquid cooling system.",
"Oi, I was so pickled, I started using Harry Potter spells as my passwords, figured if they can unlock doors in the movies, why not here?",
"I'm so zonked, I decided to use 'incorrect' as my password, so whenever I forget, the computer just tells me 'Your password is incorrect.'",
"Last night, I was so smashed, I tried to pay for my kebab with a promise and a password, figured it was the key to everything else, why not dinner?"
];
let responseIndex = 0;
function handleKeyPress(event) {
if (event.key === "Enter") {
sendMessage();
}
}
function sendMessage() {
const inputField = document.getElementById("userInput");
const typingIndicator = document.querySelector(".typing-indicator");
const aiResponse = document.getElementById("aiResponse");
if (inputField.value.trim() !== "") {
aiResponse.innerText = "AI: Thinking...";
typingIndicator.style.display = "flex";
inputField.value = "";
// Simulate AI thinking/response time
setTimeout(function() {
aiResponse.innerText = "Bruv: " + aiResponses[responseIndex % aiResponses.length];
responseIndex++;
typingIndicator.style.display = "none";
}, 2000); // Simulated delay
}
}
</script>
</body>
</html>
