body {
font-family: ‘Segoe UI’, sans-serif;
background-color: #111;
color: #fff;
text-align: center;
margin: 0;
padding: 0;
}
.logo {
width: 50px;
margin: 20px auto 10px;
}
h1 {
font-size: 2.5rem;
text-transform: lowercase;
margin: 10px 0;
}
p {
max-width: 700px;
margin: 0 auto 20px;
color: #ccc;
}
.btn-group {
margin: 20px 0;
}
.btn {
background-color: #1f1f1f;
border: 1px solid #444;
color: white;
padding: 12px 20px;
margin: 10px;
border-radius: 10px;
cursor: pointer;
transition: 0.3s;
font-size: 1rem;
}
.btn:hover {
background-color: #333;
}
.chat-box {
background-color: #1a1a1a;
max-width: 600px;
margin: 30px auto;
padding: 20px;
border-radius: 12px;
text-align: left;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.message {
margin: 10px 0;
}
.label {
font-weight: bold;
}
.sub-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 10px;
}
.qr-container {
text-align: center;
margin-top: 20px;
}
.qr-container img {
width: 180px;
margin: 10px 0;
}
.qr-container a {
background-color: #f24d4d;
color: white;
text-decoration: none;
padding: 10px 20px;
border-radius: 8px;
display: inline-block;
margin-top: 10px;
}
.typing-cursor {
display: inline-block;
width: 6px;
background: #fff;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
welcome to inkedbooking.com
Discover the perfect place for your next tattoo. We connect you with top tattoo artists worldwide — easily, securely, and fast.
const chatBox = document.getElementById(‘chatBox’);
let currentUser = null;
function resetChat() {
chatBox.innerHTML = ”;
}
function typeText(element, text, callback) {
let i = 0;
function type() {
if (i < text.length) {
element.innerHTML += text.charAt(i++);
setTimeout(type, 25);
} else {
if (callback) callback();
}
}
type();
}
function selectUser(userType) {
if (userType !== currentUser) {
currentUser = userType;
resetChat();
const label = document.createElement('div');
label.className = 'message';
label.innerHTML = `You: ${userType === ‘artist’ ? ‘For Tattoo Artists’ : ‘For Tattoo Enthusiasts’}`;
chatBox.appendChild(label);
const assistantMsg = document.createElement(‘div’);
assistantMsg.className = ‘message label’;
assistantMsg.innerHTML = `Assistant: `;
chatBox.appendChild(assistantMsg);
const responseText = userType === ‘artist’
? “Awesome! We’d love to showcase your work on inkedbooking.”
: “Great! I can help you find the perfect tattoo artist for your style and location. Let’s begin with a few quick questions.”;
typeText(document.getElementById(‘typing1’), responseText, () => showSubButtons(userType));
}
}
function showSubButtons(userType) {
const sub = document.createElement(‘div’);
sub.className = ‘sub-buttons’;
if (userType === ‘artist’) {
sub.innerHTML = `
`;
} else {
sub.innerHTML = `
`;
}
chatBox.appendChild(sub);
}
function registerArtist() {
resetSubResponses();
addUserMessage(“I want to register as a tattoo artist”);
const msg = document.createElement(‘div’);
msg.className = ‘message’;
msg.innerHTML = `
Assistant: Perfect! We’d love to showcase your work on inkedbooking.
To register:
- Tag @inkedbooking.app in your next Instagram post
- Mention us in your story so we get notified
Once we see it, we’ll reach out to get you listed on the platform.
`;
chatBox.appendChild(msg);
}
function explainPlatformArtist() {
resetSubResponses();
addUserMessage(“How does the platform work?”);
const msg = document.createElement(‘div’);
msg.className = ‘message’;
msg.innerHTML = `Assistant: As an artist, you receive client requests that match your style. Let’s get you visible!`;
chatBox.appendChild(msg);
}
function getTattoo() {
resetSubResponses();
addUserMessage(“I want to get a tattoo”);
const msg = document.createElement(‘div’);
msg.className = ‘message’;
msg.innerHTML = `Assistant: Awesome! Let’s start with some quick questions to match you with the best tattoo artist.`;
chatBox.appendChild(msg);
}
function explainPlatformClient() {
resetSubResponses();
addUserMessage(“How does the platform work?”);
const msg = document.createElement(‘div’);
msg.className = ‘message’;
msg.innerHTML = `Assistant: As a client, you can browse tattoo artists, view their portfolios, and request a session. We help you match your idea with the right artist.`;
chatBox.appendChild(msg);
}
function addUserMessage(text) {
const msg = document.createElement(‘div’);
msg.className = ‘message’;
msg.innerHTML = `You: ${text}`;
chatBox.appendChild(msg);
}
function resetSubResponses() {
const messages = chatBox.querySelectorAll(‘.message’);
if (messages.length > 2) {
for (let i = 2; i < messages.length; i++) {
messages[i].remove();
}
}
}