NotesWhat is notes.io?

Notes brand slogan

Notes - notes.io

Popular notes
<!DOCTYPE html>
<html lang="mn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rural Transport - Нэгдсэн Систем</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
/* --- GLOBAL STYLES --- */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; }

:root {
--primary: #222;
--accent: #4CAF50;
--booked: #b71c1c;
--link: #007bff;
}

body {
background-color: #f5f5f5;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}

/* --- HEADER --- */
header {
background-color: white; padding: 15px 40px;
display: flex; justify-content: space-between; align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.05); z-index: 100;
}
header h1 { font-size: 22px; font-weight: 800; color: #222; }

.user-status { font-size: 14px; font-weight: bold; color: var(--link); margin-right: 15px; }
.nav-group { display: flex; gap: 10px; }
.nav-btn {
padding: 8px 20px; border-radius: 20px; border: 1px solid #ddd;
background: white; cursor: pointer; font-weight: 500; font-size: 14px; transition: 0.2s;
}
.nav-btn:hover { background-color: #f0f0f0; }
.nav-btn.active { background-color: #333; color: white; border-color: #333; }
.nav-btn.logout-btn { background-color: #b71c1c; color: white; border: none; display: none; }

/* --- MAIN --- */
main { flex: 1; position: relative; overflow-y: auto; padding: 20px; }

.page-section { display: none; width: 100%; min-height: 100%; animation: fadeIn 0.4s ease; justify-content: center; align-items: center; padding-bottom: 50px; }
.page-section.active { display: flex; flex-direction: column; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- UI COMPONENTS --- */
.rounded-input, .search-input {
width: 100%; padding: 12px 20px; background-color: #e8e8e8;
border: none; border-radius: 25px; margin-bottom: 15px;
color: #333; font-weight: 500; outline: none;
}
.black-btn {
width: 100%; padding: 14px; background-color: #222; color: white;
border: none; border-radius: 25px; font-size: 16px; font-weight: bold;
cursor: pointer; margin-top: 10px; transition: 0.2s;
}
.black-btn:hover { background-color: #000; transform: translateY(-2px); }

.link-text { margin-top: 15px; font-size: 14px; text-align: center; color: #666; }
.link-text span { color: var(--link); cursor: pointer; font-weight: bold; text-decoration: underline; }

/* --- HOME --- */
#home-page {
background: url('https://images.unsplash.com/photo-1502877338535-766a14511398?ixlib=rb-4.0.3&auto=format&fit=crop&w=2069&q=80') center/cover;
width: 100%; height: 100%; position: absolute; top: 0; left: 0;
}
.search-card, .login-card {
background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px);
padding: 40px; border-radius: 30px; width: 400px;
box-shadow: 0 15px 35px rgba(0,0,0,0.2); text-align: center;
}
.search-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.search-label { width: 80px; font-weight: bold; text-align: left; }

/* --- REGISTRATION CARDS --- */
.full-width-card {
background: white; width: 900px; padding: 40px; border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-top: 20px;
}
.grid-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; margin-top: 20px; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.photo-upload {
background: #eee; height: 120px; border-radius: 15px; display: flex;
flex-direction: column; align-items: center; justify-content: center;
cursor: pointer; color: #555; transition: 0.3s; border: 2px dashed #ccc;
}
.photo-upload:hover { background: #e0e0e0; border-color: #999; }

/* --- BOOKING UI --- */
#results-list { width: 900px; margin-bottom: 20px; display: none; }
.result-item {
background: white; padding: 20px; border-radius: 15px; margin-bottom: 15px;
display: flex; justify-content: space-between; align-items: center; cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: 0.2s;
}
.booking-layout {
display: none; background: white; border-radius: 20px; overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.15); width: 900px;
}
.driver-info-side { flex: 1; background: #e0e0e0; padding: 40px; }
.car-visual-side { flex: 1.5; background: #f9f9f9; padding: 40px; display: flex; flex-direction: column; align-items: center; }

.car-shape {
width: 200px; height: 350px; background: #222; border-radius: 40px;
position: relative; margin-bottom: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.seat-btn {
width: 40px; height: 40px; border-radius: 50%; position: absolute;
display: flex; align-items: center; justify-content: center; font-weight: bold;
cursor: pointer; border: 2px solid rgba(255,255,255,0.3); color: white;
}
.s-1 { top: 120px; right: 30px; } .s-2 { bottom: 100px; left: 25px; }
.s-3 { bottom: 100px; left: 50%; transform: translateX(-50%); } .s-4 { bottom: 100px; right: 25px; }
.status-avail { background: #999; } .status-selected { background: var(--accent); } .status-booked { background: var(--booked); cursor: not-allowed; }

.admin-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.admin-table th, .admin-table td { padding: 15px; border-bottom: 1px solid #eee; text-align: left; }
.admin-table th { background: #333; color: white; }

</style>
</head>
<body>

<header>
<h1>Rural Transport</h1>
<div style="display:flex; align-items:center;">
<span id="user-status" class="user-status">Нэвтрээгүй</span>
<div class="nav-group">
<button class="nav-btn active" id="btn-home" onclick="navTo('home-page')">Эхлэл</button>

<button class="nav-btn" id="btn-login" onclick="navTo('login-page')">Нэвтрэх</button>
<button class="nav-btn" id="btn-admin" onclick="navTo('admin-login-page')">Админ</button>
<button class="nav-btn logout-btn" id="btn-logout" onclick="logout()">Гарах</button>
</div>
</div>
</header>

<main>
<section id="home-page" class="page-section active">
<div class="search-card">
<h2>Тээвэр хайх</h2>
<div class="search-row">
<span class="search-label">Хаанаас:</span>
<select id="s-from" class="search-input">
<option>Улаанбаатар</option>
<option> Архангай</option>
<option> Баян-Өлгий</option>
<option>Баянхонгор</option>
<option>Булган</option>
<option>Говь-Алтай</option>
<option>Говьсүмбэр</option>
<option>Дархан-Уул</option>
<option> Дорноговь</option>
<option>Дорнод</option>
<option>Дундговь</option>
<option>Завхан</option>
<option>Орхон</option>
<option>Өвөрхангай</option>
<option>Өмнөговь</option>
<option>Сүхбаатар</option>
<option>Сэлэнгэ</option>
<option>Төв</option>
<option> Увс</option>
<option> Ховд</option>
<option>Хөвсгөл</option>
<option>Хэнтий</option>
</select>
</div>
<div class="search-row">
<span class="search-label">Хаашаа:</span>
<select id="s-to" class="search-input">
<option>Улаанбаатар</option>
<option> Архангай</option>
<option> Баян-Өлгий</option>
<option>Баянхонгор</option>
<option>Булган</option>
<option>Говь-Алтай</option>
<option>Говьсүмбэр</option>
<option>Дархан-Уул</option>
<option> Дорноговь</option>
<option>Дорнод</option>
<option>Дундговь</option>
<option>Завхан</option>
<option>Орхон</option>
<option>Өвөрхангай</option>
<option>Өмнөговь</option>
<option>Сүхбаатар</option>
<option>Сэлэнгэ</option>
<option>Төв</option>
<option> Увс</option>
<option> Ховд</option>
<option>Хөвсгөл</option>
<option>Хэнтий</option>
</select>
</div>
<div class="search-row">
<span class="search-label">Огноо:</span>
<select class="search-input" ><option>2025/11/21</option></select>
</div>
<button class="black-btn" onclick="searchDrivers()">Хайх</button>
</div>
</section>

<section id="login-page" class="page-section">
<div class="login-card">
<h2>Нэвтрэх</h2>
<select id="login-role" class="rounded-input">
<option value="user">Хэрэглэгч</option>
<option value="driver">Жолооч</option>
</select>
<input type="text" id="login-phone" class="rounded-input" placeholder="Утасны дугаар">
<input type="password" id="login-pass" class="rounded-input" placeholder="Нууц үг">
<button class="black-btn" onclick="login()">Нэвтрэх</button>

<div class="link-text">
Хаяг байхгүй юу? <br>
<span onclick="navTo('user-reg-page')">Хэрэглэгчээр бүртгүүлэх</span> эсвэл <br>
<span onclick="navTo('driver-full-reg-page')">Жолоочоор бүртгүүлэх</span>
</div>
</div>
</section>

<section id="user-reg-page" class="page-section">
<div class="search-card" style="width: 500px; background:white;">
<h2>Хэрэглэгч Бүртгэл</h2>
<input type="text" id="reg-u-name" class="rounded-input" placeholder="Нэр">
<input type="text" id="reg-u-phone" class="rounded-input" placeholder="Утасны дугаар">
<input type="password" id="reg-u-pass" class="rounded-input" placeholder="Нууц үг">
<button class="black-btn" onclick="registerUser()">Бүртгүүлэх</button>

<div class="link-text">
Бүртгэлтэй юу? <span onclick="navTo('login-page')">Нэвтрэх</span>
</div>
</div>
</section>

<section id="driver-full-reg-page" class="page-section">
<div class="full-width-card">
<h2 style="text-align:center; margin-bottom:30px;">Жолооч болон Машин бүртгэл</h2>
<div class="grid-layout">
<div>
<h4>Хувийн мэдээлэл</h4>
<input type="text" id="reg-d-name" class="rounded-input" placeholder="Жолоочийн Нэр">
<input type="text" id="reg-d-phone" class="rounded-input" placeholder="Утасны дугаар">
<input type="password" id="reg-d-pass" class="rounded-input" placeholder="Нууц үг">

<h4 style="margin-top:20px;">Машины мэдээлэл</h4>
<select id="reg-d-car-model" class="rounded-input">
<option value="">Машины загвар сонгох</option>
<option value="Toyota Prius 30">Toyota Prius 30</option>
<option value="Toyota Alphard">Toyota Alphard</option>
<option value="Land Cruiser">Land Cruiser</option>
</select>
<input type="text" id="reg-d-car-plate" class="rounded-input" placeholder="Улсын дугаар (Жишээ: 1234 УБА)">
</div>

<div>
<h4>Машины зураг (Зөвхөн жишээ)</h4>
<div class="photo-grid">
<div class="photo-upload"><i class="fas fa-camera fa-2x"></i><p>Урд</p></div>
<div class="photo-upload"><i class="fas fa-camera fa-2x"></i><p>Хойд</p></div>
</div>
<h4 style="margin: 15px 0;">Бичиг баримт</h4>
<div class="photo-grid">
<div class="photo-upload"><i class="fas fa-id-card fa-2x"></i><p>Үнэмлэх</p></div>
<div class="photo-upload"><i class="fas fa-file-alt fa-2x"></i><p>Гэрчилгээ</p></div>
</div>
</div>
</div>
<div style="display:flex; justify-content:space-between; align-items:center; margin-top:30px;">
<div class="link-text" style="margin:0;">
Бүртгэлтэй юу? <span onclick="navTo('login-page')">Нэвтрэх</span>
</div>
<button class="black-btn" style="width: 200px; margin:0;" onclick="registerDriver()">Бүртгүүлэх</button>
</div>
</div>
</section>

<section id="booking-page" class="page-section">
<button class="nav-btn" onclick="navTo('home-page')" style="align-self: flex-start; margin-bottom: 20px;">← Буцах</button>
<div id="results-list"></div>

<div id="booking-layout" class="booking-layout">
<div class="driver-info-side">
<h3>Жолоочийн мэдээлэл</h3>
<p><b>Нэр:</b> <span id="b-driver-name">...</span></p>
<p><b>Утас:</b> <span id="b-driver-phone">...</span></p>
<p><b>Машин:</b> <span id="b-car-model">...</span></p>
<p><b>Чиглэл:</b> <span id="b-route">...</span></p>
<hr style="margin:15px 0;">
<p><b>Сонгосон суудал:</b> <span id="b-selected-seats" style="color:#4CAF50; font-weight:bold;">0</span></p>
</div>
<div class="car-visual-side">
<div class="car-shape">
<div style="position:absolute; top:50px; left:20px; right:20px; height:60px; background:#444; border-radius:10px 10px 30px 30px;"></div>
<div class="seat-btn" style="top:120px; left:30px; background:#444; cursor:default;">DR</div>
<div id="seat-1" class="seat-btn s-1 status-avail" onclick="toggleSeat(1)">1</div>
<div id="seat-2" class="seat-btn s-2 status-avail" onclick="toggleSeat(2)">2</div>
<div id="seat-3" class="seat-btn s-3 status-avail" onclick="toggleSeat(3)">3</div>
<div id="seat-4" class="seat-btn s-4 status-avail" onclick="toggleSeat(4)">4</div>
</div>
<button class="black-btn" onclick="confirmBooking()">Захиалах</button>
</div>
</div>
</section>

<section id="admin-login-page" class="page-section">
<div class="search-card">
<h2>Админ Нэвтрэх</h2>
<input type="text" id="admin-user" class="rounded-input" placeholder="Username">
<input type="password" id="admin-pass" class="rounded-input" placeholder="Password">
<button class="black-btn" onclick="adminLogin()">Нэвтрэх</button>
</div>
</section>

<section id="admin-dash-page" class="page-section">
<div class="full-width-card">
<h2>Захиалгын Жагсаалт</h2>
<table class="admin-table">
<thead><tr><th>ID</th><th>Хэрэглэгч</th><th>Жолооч</th><th>Чиглэл</th><th>Суудал</th><th>Төлөв</th></tr></thead>
<tbody id="admin-table-body"></tbody>
</table>
<button class="black-btn" style="width: 150px; background:#b71c1c;" onclick="navTo('home-page')">Гарах</button>
</div>
</section>
</main>

<script>
// --- LOCAL STORAGE & STATE ---
const DB = {
users: JSON.parse(localStorage.getItem('rt_users')) || [],
drivers: JSON.parse(localStorage.getItem('rt_drivers')) || [
{name: 'Бат', phone: '9911', car: 'Toyota Prius 30', plate: '0011 УБА', pass: '1234'}
],
orders: JSON.parse(localStorage.getItem('rt_orders')) || [],
currentUser: JSON.parse(localStorage.getItem('rt_current')) || null
};

let currentBookingDriver = null;
let selectedSeats = [];

function saveDB() {
localStorage.setItem('rt_users', JSON.stringify(DB.users));
localStorage.setItem('rt_drivers', JSON.stringify(DB.drivers));
localStorage.setItem('rt_orders', JSON.stringify(DB.orders));
localStorage.setItem('rt_current', JSON.stringify(DB.currentUser));
}

// --- NAVIGATION ---
function navTo(pageId) {
document.querySelectorAll('.page-section').forEach(p => p.classList.remove('active'));
const target = document.getElementById(pageId);
if(target) target.classList.add('active');

document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
if(pageId === 'home-page') document.getElementById('btn-home').classList.add('active');
if(pageId === 'login-page') document.getElementById('btn-login').classList.add('active');

if(pageId === 'admin-dash-page') loadAdminTable();
}

// --- AUTH LOGIC ---
function checkAuth() {
const user = DB.currentUser;
const statusEl = document.getElementById('user-status');
const loginBtn = document.getElementById('btn-login');
const logoutBtn = document.getElementById('btn-logout');

if (user) {
statusEl.textContent = `${user.role === 'driver' ? '🚗' : '👤'} ${user.name}`;
statusEl.style.color = '#4CAF50';
loginBtn.style.display = 'none';
logoutBtn.style.display = 'block';
} else {
statusEl.textContent = 'Нэвтрээгүй';
statusEl.style.color = '#007bff';
loginBtn.style.display = 'block';
logoutBtn.style.display = 'none';
}
}

function logout() {
DB.currentUser = null;
saveDB();
checkAuth();
navTo('home-page');
alert('Амжилттай гарлаа.');
}

function registerUser() {
const name = document.getElementById('reg-u-name').value;
const phone = document.getElementById('reg-u-phone').value;
const pass = document.getElementById('reg-u-pass').value;
if(!name || !phone || !pass) return alert('Бүх талбарыг бөглөнө үү');

DB.users.push({ name, phone, pass, role: 'user' });
saveDB();
alert('Амжилттай бүртгэгдлээ! Нэвтэрнэ үү.');
navTo('login-page');
}

function registerDriver() {
const name = document.getElementById('reg-d-name').value;
const phone = document.getElementById('reg-d-phone').value;
const pass = document.getElementById('reg-d-pass').value;
const car = document.getElementById('reg-d-car-model').value;
const plate = document.getElementById('reg-d-car-plate').value;

if(!name || !phone || !pass || !car || !plate) return alert('Бүх талбарыг бөглөнө үү');

DB.drivers.push({ name, phone, pass, car, plate, role: 'driver' });
saveDB();
alert('Жолооч амжилттай бүртгэгдлээ! Нэвтэрнэ үү.');
navTo('login-page');
}

function login() {
const role = document.getElementById('login-role').value;
const phone = document.getElementById('login-phone').value;
const pass = document.getElementById('login-pass').value;

const list = role === 'user' ? DB.users : DB.drivers;
const found = list.find(u => u.phone === phone && u.pass === pass);

if(found) {
DB.currentUser = found;
saveDB();
checkAuth();
navTo('home-page');
} else {
alert('Мэдээлэл буруу байна!');
}
}

function adminLogin() {
if(document.getElementById('admin-user').value === 'admin' && document.getElementById('admin-pass').value === '1234') {
navTo('admin-dash-page');
} else {
alert('Буруу байна.');
}
}

// --- BOOKING LOGIC ---
function searchDrivers() {
const resultsList = document.getElementById('results-list');
resultsList.innerHTML = '';
resultsList.style.display = 'block';
document.getElementById('booking-layout').style.display = 'none';

if(DB.drivers.length === 0) {
resultsList.innerHTML = '<p style="text-align:center">Жолооч олдсонгүй.</p>';
} else {
DB.drivers.forEach(d => {
const div = document.createElement('div');
div.className = 'result-item';
div.innerHTML = `<div><strong>${d.car}</strong> (${d.plate})<br>${d.name}</div><div style="text-align:right; color:green; font-weight:bold;">Сонгох →</div>`;
div.onclick = () => openBooking(d);
resultsList.appendChild(div);
});
}
navTo('booking-page');
}

function openBooking(driver) {
if(!DB.currentUser || DB.currentUser.role !== 'user') {
alert('Та эхлээд хэрэглэгчээр нэвтэрнэ үү!');
return navTo('login-page');
}
currentBookingDriver = driver;
selectedSeats = [];
document.getElementById('results-list').style.display = 'none';
document.getElementById('booking-layout').style.display = 'flex';

document.getElementById('b-driver-name').textContent = driver.name;
document.getElementById('b-driver-phone').textContent = driver.phone;
document.getElementById('b-car-model').textContent = driver.car;
const route = document.getElementById('s-from').value + ' - ' + document.getElementById('s-to').value;
document.getElementById('b-route').textContent = route;
document.getElementById('b-selected-seats').textContent = '0';

// Seat status check
[1,2,3,4].forEach(i => {
const seat = document.getElementById('seat-'+i);
seat.className = 'seat-btn s-'+i + ' status-avail';
const taken = DB.orders.some(o => o.driverName === driver.name && o.route === route && o.seats.includes(i));
if(taken) {
seat.className = 'seat-btn s-'+i + ' status-booked';
seat.textContent = 'X';
} else {
seat.textContent = i;
}
});
}

function toggleSeat(num) {
const seat = document.getElementById('seat-'+num);
if(seat.classList.contains('status-booked')) return alert('Энэ суудал захиалагдсан.');

if(selectedSeats.includes(num)) {
selectedSeats = selectedSeats.filter(s => s !== num);
seat.classList.remove('status-selected');
seat.classList.add('status-avail');
} else {
selectedSeats.push(num);
seat.classList.remove('status-avail');
seat.classList.add('status-selected');
}
document.getElementById('b-selected-seats').textContent = selectedSeats.length || '0';
}

function confirmBooking() {
if(selectedSeats.length === 0) return alert('Суудал сонгоно уу.');

const newOrder = {
id: Date.now().toString().slice(-5),
userName: DB.currentUser.name,
driverName: currentBookingDriver.name,
route: document.getElementById('b-route').textContent,
seats: [...selectedSeats],
status: 'Баталгаажсан'
};
DB.orders.push(newOrder);
saveDB();
alert('Захиалга амжилттай!');
navTo('home-page');
}

function loadAdminTable() {
const tbody = document.getElementById('admin-table-body');
tbody.innerHTML = '';
DB.orders.forEach(o => {
tbody.innerHTML += `<tr><td>${o.id}</td><td>${o.userName}</td><td>${o.driverName}</td><td>${o.route}</td><td>${o.seats.join(', ')}</td><td style="color:green">${o.status}</td></tr>`;
});
}

checkAuth();
</script>
</body>
</html>
     
 
what is notes.io
  

Notes is a web-based application for online taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000+ notes created and continuing...

With notes.io;

  • * You can take a note from anywhere and any device with internet connection.
  • * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
  • * You can quickly share your contents without website, blog and e-mail.
  • * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
  • * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.

Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.

Easy: Notes.io doesn’t require installation. Just write and share note!

Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )

Free: Notes.io works for 14 years and has been free since the day it was started.


You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;


Email: [email protected]

Twitter: http://twitter.com/notesio

Instagram: http://instagram.com/notes.io

Facebook: http://facebook.com/notesio



Regards;
Notes.io Team

     
 
Shortened Note Link
  
 
Looding Image
 
     
 
Long File
  
 

For written notes was greater than 18KB Unable to shorten.

To be smaller than 18KB, please organize your notes, or sign in.

  
     

Notes

I'm Feeling Lucky

repost for Instagram

Tiktok Video Downloader - SaveTik - (free for limited time)

Paste Keyboard iOS - Quick Replies

v 2.7.6

We'd love to hear from you. Please email us at [email protected]

Copyright 2026 Metromedya

ios uygulama geliştirme