Хиджазская железная дорога: История, крах и возрождение (1900–2026)

class HejazRailwayOdyssey extends HTMLElement { constructor() { super(); this.attachShadow({ mode: ‘open’ }); }connectedCallback() { this.render(); }render() { this.shadowRoot.innerHTML = ` :host { —desert-sand: #e2bc8a; —deep-earth: #2c1810; —ottoman-red: #8e1b1b; —golden-sun: #ffd700; —steel-blue: #4a5d6a; —text-bright: #fcf8f0; —accent-green: #2d5a27; display: block; font-family: ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif; margin: 40px 0; overflow: hidden; border-radius: 2px; }.wrapper { background: var(—deep-earth); color: var(—text-bright); position: relative; padding: 4rem 2rem; min-height: 700px; display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(226, 188, 138, 0.2); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }/* Background Texture — Sand Particles */ .wrapper::before { content: «»; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(«data:image/svg+xml,%3Csvg viewBox=’0 0 200 200′ xmlns=’http://www.w3.org/2000/svg’%3ExternalIcon%3E%3Cfilter id=’noiseFilter’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.65′ numOctaves=’3′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’100%25′ height=’100%25′ filter=’url(%23noiseFilter)’/%3E%3C/svg%3E»); opacity: 0.05; pointer-events: none; }.header { text-align: center; z-index: 2; margin-bottom: 4rem; }.header h2 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; text-transform: uppercase; letter-spacing: 0.2em; margin: 0; background: linear-gradient(to bottom, var(—golden-sun), var(—desert-sand)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }.header p { font-size: 1.1rem; color: var(—desert-sand); max-width: 600px; margin: 1rem auto; opacity: 0.9; line-height: 1.6; font-style: italic; }/* The Tracks Visualization */ .track-container { position: relative; width: 100%; max-width: 1000px; height: 300px; margin-top: 2rem; }.rail { position: absolute; top: 50%; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, rgba(142, 27, 27, 0) 0%, var(—ottoman-red) 20%, var(—steel-blue) 80%, rgba(74, 93, 106, 0) 100%); transform: translateY(-50%); }.station-node { position: absolute; top: 50%; transform: translate(-50%, -50%); cursor: pointer; z-index: 5; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }.station-node::after { content: «»; position: absolute; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(—golden-sun); top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: 0.4s; background: rgba(255, 215, 0, 0.1); }.station-node:hover::after { transform: translate(-50%, -50%) scale(1); }.station-icon { width: 50px; height: 50px; background: var(—deep-earth); border: 2px solid var(—desert-sand); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(—golden-sun); box-shadow: 0 0 20px rgba(0,0,0,0.5); transition: 0.3s; }.station-node:hover .station-icon { border-color: var(—golden-sun); background: var(—ottoman-red); color: white; }.station-label { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: var(—desert-sand); font-size: 0.8rem; }/* Information Panels */ .info-display { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; width: 100%; max-width: 1100px; margin-top: 4rem; }.card { background: rgba(255, 255, 255, 0.03); border-left: 3px solid var(—ottoman-red); padding: 2rem; position: relative; transition: 0.4s; overflow: hidden; backdrop-filter: blur(5px); }.card:hover { background: rgba(255, 255, 255, 0.07); transform: translateY(-5px); }.card.modern { border-left-color: var(—accent-green); }.card-icon { font-size: 2.5rem; margin-bottom: 1.5rem; color: var(—golden-sun); opacity: 0.8; }.card h3 { margin: 0 0 1rem 0; font-size: 1.4rem; color: var(—text-bright); }.card p { margin: 0; line-height: 1.6; color: rgba(252, 248, 240, 0.8); font-size: 0.95rem; }.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }.stat-item { text-align: center; background: rgba(0,0,0,0.3); padding: 1rem; border-radius: 4px; }.stat-value { display: block; font-size: 1.5rem; font-weight: 800; color: var(—golden-sun); }.stat-label { font-size: 0.7rem; text-transform: uppercase; opacity: 0.6; }/* Decorative Elements */ .arch-shape { position: absolute; bottom: 0; width: 100%; height: 150px; background: linear-gradient(to top, var(—deep-earth), transparent); z-index: 1; pointer-events: none; }.moving-sand { position: absolute; bottom: 10%; left: -100%; width: 200%; height: 2px; background: linear-gradient(90deg, transparent, var(—desert-sand), transparent); animation: sand-drift 10s linear infinite; opacity: 0.2; }@keyframes sand-drift { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } }@media (max-width: 800px) { .track-container { height: 500px; } .rail { width: 4px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); background: linear-gradient(180deg, rgba(142, 27, 27, 0) 0%, var(—ottoman-red) 20%, var(—steel-blue) 80%, rgba(74, 93, 106, 0) 100%); } .station-node { left: 50% !important; } .station-label { left: 70px; top: 50%; transform: translateY(-50%); } } `; this.init(); }init() { const nodes = this.shadowRoot.querySelectorAll(‘.station-node’); const cards = this.shadowRoot.querySelectorAll(‘.card’);nodes.forEach((node, index) => { node.addEventListener(‘mouseenter’, () => { // Reset all cards.forEach(c => c.style.borderColor = ‘rgba(142, 27, 27, 0.3)’); // Highlight corresponding logic (simplified) if (index === 3) { cards[2].style.borderColor = ‘var(—accent-green)’; cards[2].style.transform = ‘scale(1.05)’; } else if (index { cards.forEach(c => { c.style.transform = ‘scale(1)’; c.style.borderColor = »; }); }); });// Ambient pulse animation for the last node (Future) const futureNode = this.shadowRoot.querySelector(‘#node-2026 .station-icon’); if (futureNode) { futureNode.style.animation = ‘pulse-glow 2s infinite’; const style = document.createElement(‘style’); style.textContent = ` @keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(45, 90, 39, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(45, 90, 39, 0); } 100% { box-shadow: 0 0 0 0 rgba(45, 90, 39, 0); } } `; this.shadowRoot.appendChild(style); } } }customElements.define(‘hejaz-railway-odyssey’, HejazRailwayOdyssey);