<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1, viewport-fit=cover" name="viewport"/>
<title>UK Free Webcam Chat & Text Chat Room</title>
<!-- Favicons -->
<link href="/favicon.ico" rel="icon" type="image/x-icon"/>
<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"/>
<link href="/android-chrome-192x192.png" rel="icon" sizes="192x192" type="image/png"/>
<link href="/android-chrome-512x512.png" rel="icon" sizes="512x512" type="image/png"/>
<link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"/>
<link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"/>
<link href="/site.webmanifest" rel="manifest"/>
<meta content="#124a7c" name="msapplication-TileColor"/>
<meta content="#124a7c" name="theme-color"/>
<link href="styles.css?=v5" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<!-- Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-8L49MG60FD"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-8L49MG60FD');
</script>
</head>
<body>
<!-- MARKETING + LOGIN -->
<div class="marketing-wrapper">
<!-- Hero + Login Button -->
<section id="hero">
<h1>Free Chat Room P2P webcam video chat</h1>
<p>Our Free Chat lets you connect in real time—text, voice, or video—without any servers storing your data. Your conversations stay between you and your friends. Share pictures and webcam chat!</p>
<button class="cta-button" onclick="document.querySelector('.login-wrapper').scrollIntoView({behavior:'smooth'})">Get Started</button>
</section>
<!-- Login Box -->
<div class="login-wrapper">
<div class="side-text left-text">
<p>Welcome to A Chat Room!</p>
<p>We do not force you to create an account, but if you'd like to keep your username then you will need to register.</p>
</div>
<div id="login-container">
<div class="logo">
<i class="fas fa-lock"></i>
<h2>Text and Webcam Chat Completely Free!</h2>
<p class="tagline">Enter as a guest or register to come back to your chats</p>
</div>
<div class="tabs">
<button class="tab-button active" data-tab="login"><i class="fas fa-sign-in-alt"></i> Login</button>
<button class="tab-button" data-tab="register"><i class="fas fa-user-plus"></i> Register</button>
<button class="tab-button" data-tab="guest"><i class="fas fa-user-secret"></i> Guest</button>
</div>
<!-- LOGIN TAB -->
<div class="tab-content active" id="login">
<form id="login-form">
<div class="input-group">
<i class="fas fa-user"></i>
<input autocomplete="username" id="login-username" maxlength="20" placeholder="Username" required="" type="text"/>
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input autocomplete="current-password" id="login-password" maxlength="20" placeholder="Password" required="" type="password"/>
</div>
<div class="input-group" style="text-align:left; display:flex; align-items:center; gap:8px; margin-top:10px;">
<input id="remember-me" style="width:auto;" type="checkbox"/>
<label for="remember-me" style="font-size:0.9rem; color:#64748b;">Remember me</label>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const loginBtn = document.getElementById('login-button');
loginBtn.addEventListener('click', () => {
const username = document.getElementById('login-username').value;
const password = document.getElementById('login-password').value;
const remember = document.getElementById('remember-me').checked;
fetch('login.php', {
method: 'POST',
credentials: 'include',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: new URLSearchParams({ username, password, remember: remember ? '1' : '' })
})
.then(res => res.json())
.then(data => {
if (data.success) {
window.location.href = '/';
} else {
alert(data.message || 'Login failed');
}
});
});
});
</script>
<button class="btn-primary" id="login-button"><i class="fas fa-sign-in-alt"></i> Login</button>
<div class="auth-footer"><a class="forgot-password" href="#">Forgot password?</a></div>
</form>
</div>
<!-- REGISTER TAB -->
<div class="tab-content" id="register">
<form id="register-form">
<div class="input-group">
<i class="fas fa-user"></i>
<input autocomplete="username" id="register-username" maxlength="20" name="username" placeholder="Username" required="" type="text"/>
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input autocomplete="new-password" id="register-password" maxlength="20" name="password" placeholder="Password" required="" type="password"/>
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input autocomplete="new-password" id="register-confirm-password" maxlength="20" name="confirm_password" placeholder="Confirm Password" required="" type="password"/>
</div>
<div class="gender-selection">
<label class="gender-option"><input checked="" name="register-gender" type="radio" value="male"/><span class="gender-icon male"><i class="fas fa-mars"></i></span> Male</label>
<label class="gender-option"><input name="register-gender" type="radio" value="female"/><span class="gender-icon female"><i class="fas fa-venus"></i></span> Female</label>
</div>
<div class="input-group">
<i class="fas fa-birthday-cake"></i>
<input id="register-age" max="120" min="13" name="age" placeholder="Age" required="" type="number"/>
</div>
<div class="input-group">
<i class="fas fa-globe"></i>
<select id="register-location" name="location" required="">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BR">Brazil</option>
<option value="BN">Brunei</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="CV">Cabo Verde</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo – Brazzaville</option>
<option value="CD">Congo – Kinshasa</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d’Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="SZ">Eswatini</option>
<option value="ET">Ethiopia</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GR">Greece</option>
<option value="GD">Grenada</option>
<option value="GT">Guatemala</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HN">Honduras</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">North Korea</option>
<option value="KR">South Korea</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Laos</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia</option>
<option value="MD">Moldova</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="QA">Qatar</option>
<option value="RO">Romania</option>
<option value="RU">Russia</option>
<option value="RW">Rwanda</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syria</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VA">Vatican City</option>
<option value="VE">Venezuela</option>
<option value="VN">Vietnam</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
<button class="btn-primary" id="register-button"><i class="fas fa-user-plus"></i> Register</button>
</form>
</div>
<!-- GUEST TAB -->
<div class="tab-content" id="guest">
<form id="guest-form">
<div class="guest-warning"><i class="fas fa-exclamation-triangle"></i><p>Guest mode has limited features and your account will be temporary.</p></div>
<div class="gender-selection">
<label class="gender-option"><input checked="" name="guest-gender" type="radio" value="male"/><span class="gender-icon male"><i class="fas fa-mars"></i></span> Male</label>
<label class="gender-option"><input name="guest-gender" type="radio" value="female"/><span class="gender-icon female"><i class="fas fa-venus"></i></span> Female</label>
</div>
<div class="input-group">
<i class="fas fa-birthday-cake"></i>
<input id="guest-age" max="120" min="13" name="age" placeholder="Age" required="" type="number"/>
</div>
<div class="input-group">
<i class="fas fa-globe"></i>
<select id="guest-location" name="location" required="">
<option value="">Country</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BR">Brazil</option>
<option value="BN">Brunei</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="CV">Cabo Verde</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo – Brazzaville</option>
<option value="CD">Congo – Kinshasa</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d’Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="SZ">Eswatini</option>
<option value="ET">Ethiopia</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GR">Greece</option>
<option value="GD">Grenada</option>
<option value="GT">Guatemala</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HN">Honduras</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">North Korea</option>
<option value="KR">South Korea</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Laos</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia</option>
<option value="MD">Moldova</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="QA">Qatar</option>
<option value="RO">Romania</option>
<option value="RU">Russia</option>
<option value="RW">Rwanda</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syria</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VA">Vatican City</option>
<option value="VE">Venezuela</option>
<option value="VN">Vietnam</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
<button class="btn-secondary" id="guest-button"><i class="fas fa-user-secret"></i> Continue as Guest</button>
</form>
</div>
</div>
<div class="side-text right-text">
<p>New here?</p>
<p>Enter as a guest or register an account.</p>
</div>
</div>
<!-- Features -->
<section id="features">
<div class="feature-grid">
<div class="feature"><i class="fas fa-user-shield"></i><h3>End-to-End Encryption</h3><p>Only you and your chat partner can read your messages.</p></div>
<div class="feature"><i class="fas fa-video"></i><h3>P2P Video Calls</h3><p>No intermediaries—your video streams go directly to your friends.</p></div>
<div class="feature"><i class="fas fa-user-secret"></i><h3>Anonymous Guest Mode</h3><p>Drop in anonymously without creating a full account.</p></div>
<div class="feature"><i class="fas fa-comments"></i><h3>Rich Chat Features</h3><p>Share images, emojis, and live typing indicators.</p></div>
</div>
</section>
<!-- How It Works -->
<section id="how-it-works">
<h2 style="text-align:center;color:#124a7c;margin-bottom:2rem;">How It Works</h2>
<div class="steps">
<div class="step"><div class="step-number">1</div><p>Sign up or join as a guest in seconds</p></div>
<div class="step"><div class="step-number">2</div><p>Choose a friend from the online list</p></div>
<div class="step"><div class="step-number">3</div><p>Start chatting or video calling instantly</p></div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<h2 style="text-align:center;color:#124a7c;margin-bottom:2rem;">What Our Users Say</h2>
<div class="testimonial-list">
<div class="testimonial"><p>“Chatty Cam’s guest mode is a lifesaver when I just want to jump into a quick chat.”</p><div class="author">— Jasper123</div></div>
<div class="testimonial"><p>“The P2P video quality is crystal clear, and I love the chat! Chattycam 4ever.”</p><div class="author">— Lilya</div></div>
<div class="testimonial"><p>“Super simple to use, super private. Exactly what I needed! Made a ton of friends on here.”</p><div class="author">— Quazzy</div></div>
</div>
</section>
<!-- Footer -->
<footer>
<p>
<a href="about.html">About</a> |
<a href="faq.html">FAQ</a> |
<a href="#">Contact</a> |
<a href="https://achatroom.co.uk/blog">Blog</a> |
<a href="https://chattycam.com">Random Chat</a>
</p>
<p>© 2025 Chatty Cam. All rights reserved.</p>
</footer>
</div> <!-- /marketing-wrapper -->
<!-- CHAT UI -->
<div class="hidden" id="chat-container">
<button class="sidebar-toggle" id="sidebar-toggle">☰</button>
<div class="sidebar">
<div class="sidebar-header"><h2 id="sidebar-header">CHAT</h2></div>
<ul class="nav-tabs">
<li class="nav-tab"><button class="icon-button" id="search-icon"><i class="fas fa-search"></i></button></li>
<li class="nav-tab active" id="search-tab"><a href="#"><i class="fa-solid fa-user-group"></i><br/>(<span id="online-count">0</span>)</a></li>
<li class="nav-tab" id="inbox-tab"><a href="#"><i class="fa-solid fa-envelope"></i><br/>(<span id="inbox-badge">0</span>)</a>
</li> <li class="nav-tab" id="blocked-tab"><a href="#"><i class="fa-solid fa-ban"></i><br/>(<span id="blocked-badge">0</span>)</a>
</li>
</ul>
<div class="inbox-content hidden" id="inbox-content">
<div class="inbox-search-container" id="inbox-search-container">
<input id="inbox-search-input" placeholder="Search conversations..." type="text"/>
<select id="inbox-sort">
<option value="latest">Latest</option>
<option value="oldest">Oldest</option>
<option value="name-asc">Name A-Z</option>
<option value="name-desc">Name Z-A</option>
</select>
</div>
<div id="inbox-list"></div>
</div>
<div class="inbox-content hidden" id="blocked-content"></div>
<div class="online-section">
<div class="info-messages"><p>Click a username below to open up the private chat!</p></div>
<div class="user-list"></div>
</div>
<!-- 4) Footer -->
<div class="sidebar-footer">
<div class="logout-wrapper">
<a class="logout-button" href="#" id="logout-button"><i class="fa-solid fa-right-from-bracket"></i>Logout</a>
</div>
<div class="app-info">
<div class="app-logo"><i class="fas fa-comment-dots"></i></div>
<div class="app-details"><h4>AChatroom</h4><p>© 2025 Achatroom.co.uk
</p></div>
</div>
<p class="footer-note">Always free, always secure</p>
</div>
</div><!-- /.sidebar -->
<!-- Welcome Message: visible by default -->
<div class="chat-welcome" id="chat-welcome">
<h3 style="font-size: 2rem; font-weight: 700; color: #114777; margin-bottom: 1rem;">
👋 Select a user to chat
</h3>
<p style="font-size: 1.1rem; margin-bottom: 0.75rem;">
Choose someone from the online list to begin chatting!
</p>
<p style="font-size: 1rem; color: #607d8b; margin-bottom: 0.5rem;">
💻 Webcam chat is entirely optional.
</p>
<p style="font-size: 1rem; color: #607d8b;">
📝 Register to come back and view your offline chats.
</p>
</div>
<div class="chat-area hidden">
<div class="chat-actions">
<button class="block-button" disabled="" id="block-button">Block</button>
<button class="video-button" id="start-video-btn"> <i class="fa-solid fa-video"></i> Start Video Chat</button>
</div>
<div id="video-chat">
<div class="video-container">
<div class="video-box">
<video autoplay="" id="localVideo" muted=""></video>
</div>
<div class="video-box">
<video autoplay="" id="remoteVideo"></video>
</div>
</div>
<div class="controls-container" id="video-controls" style="display: none;">
<button id="stop-video-btn">Stop Video</button>
</div>
</div>
<div class="chat-header hidden" id="chat-header">You are messaging <span id="chat-with-name"></span></div>
<div class="chat-messages" id="chat-messages"></div>
<div class="message-input">
<input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="message-input" maxlength="400" placeholder="Type your message…" spellcheck="false" type="text"/>
<button class="emoji-button" id="emoji-button">😀</button>
<label class="image-upload-label" for="image-upload-camera"><i class="fas fa-camera"></i></label>
<input accept="image/*" capture="" hidden="" id="image-upload-camera" type="file"/>
<label class="image-upload-label" for="image-upload-gallery"><i class="fas fa-image"></i></label>
<input accept="image/*" hidden="" id="image-upload-gallery" type="file"/>
</div>
</div>
</div>
<!-- Advanced Search Panel -->
<div class="search-panel hidden" id="advanced-search-panel">
<form class="advanced-search" id="advanced-search-form">
<h2>Advanced Search</h2>
<!-- Nickname -->
<label for="nickname">Username</label>
<input id="nickname" maxlength="20" name="nickname" placeholder="Optional"/>
<!-- Gender -->
<fieldset>
<legend>Gender</legend>
<div class="radio-group">
<label><input checked="" name="gender" type="radio" value="both"/> Both</label>
<label><input name="gender" type="radio" value="male"/> Male</label>
<label><input name="gender" type="radio" value="female"/> Female</label>
</div>
</fieldset>
<!-- NEW: Age Range -->
<fieldset>
<legend>Age Range</legend>
<div class="age-slider">
<label for="age-min">
Min: <output id="age-min-output">18</output>
</label>
<input id="age-min" max="120" min="13" name="ageMin" type="range" value="18"/>
<label for="age-max">
Max: <output id="age-max-output">60</output>
</label>
<input id="age-max" max="120" min="13" name="ageMax" type="range" value="60"/>
</div>
</fieldset>
<!-- NEW: Country selector -->
<fieldset>
<legend>Country</legend>
<select id="search-location" name="location">
<option value="">Any</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BR">Brazil</option>
<option value="BN">Brunei</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="CV">Cabo Verde</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo – Brazzaville</option>
<option value="CD">Congo – Kinshasa</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d’Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="SZ">Eswatini</option>
<option value="ET">Ethiopia</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GR">Greece</option>
<option value="GD">Grenada</option>
<option value="GT">Guatemala</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HN">Honduras</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">North Korea</option>
<option value="KR">South Korea</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Laos</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia</option>
<option value="MD">Moldova</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="QA">Qatar</option>
<option value="RO">Romania</option>
<option value="RU">Russia</option>
<option value="RW">Rwanda</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syria</option>
<option value="TW">Taiwan</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VA">Vatican City</option>
<option value="VE">Venezuela</option>
<option value="VN">Vietnam</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
<!-- …other ISO codes… -->
</select>
</fieldset>
<!-- Buttons -->
<div class="button-row">
<button class="btn-primary" type="submit">Search</button>
<button class="btn-secondary" id="clear-search" type="button">Clear</button>
<button class="btn-secondary" id="close-search" type="button">Close</button>
</div>
<div class="results-box" id="search-results"></div>
</form>
</div>
<!-- Scripts -->
<script src="dompurify.min.js"></script>
<script defer="" src="chat.js?=1806v2"></script>
<script defer="" src="video-chat.screenshot-enabled.js?=1806"></script>
<div class="flood-warning hidden" id="flood-warning">
<p>
⚠️ You are sending messages too quickly.
Please wait <span id="countdown">5</span> seconds before continuing.
</p>
<button disabled="" id="continue-button">Continue Chatting</button>
</div>
<div class="mute-warning hidden" id="mute-warning">
<p>💢 You’ve been muted for <span id="mute-timer">60</span> seconds due to spamming!</p>
</div>
<!-- Image Modal Viewer -->
<div class="modal hidden" id="imageModal" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:9999;">
<div style="position:relative;">
<img alt="Chat Image" id="modalImage" src=""/>
<button id="closeModalBtn" style="position:absolute;top:-12px;right:-12px;background:#fff;border:none;border-radius:50%;padding:6px 10px;font-size:20px;cursor:pointer;">×</button>
</div>
</div>
</body>
</html>