ONLINE PC SIMULATOR

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ONLINE PC SIMULATOR</title>
<style>
*{box-sizing:border-box}
body{
 margin:0;background:#10131d;color:white;
 font-family:Arial,sans-serif;
}
header{
 background:#20283b;padding:15px;
 text-align:center;font-weight:bold;
 font-size:21px;
}
.stats{
 display:flex;justify-content:space-around;
 background:#171d2b;padding:12px;
}
.scene{
 margin:12px;background:#252c3b;
 border:2px solid #495875;border-radius:15px;
 min-height:390px;padding:15px;
 position:relative;overflow:hidden;
}
.room{
 background:linear-gradient(#35435a 0 68%,#725c49 68%);
 min-height:350px;border-radius:10px;
 position:relative;
}
.computer{
 position:absolute;top:65px;left:15%;
 font-size:65px;text-align:center;
}
.computer2{
 position:absolute;top:65px;right:15%;
 font-size:65px;text-align:center;
}
.player{
 position:absolute;bottom:55px;left:45%;
 font-size:48px;
}
.cat{
 position:absolute;bottom:20px;right:20px;
 font-size:48px;
}
.label{font-size:12px;text-align:center}
.buttons{
 display:grid;grid-template-columns:1fr 1fr;
 gap:10px;padding:12px;
}
button{
 border:0;border-radius:12px;padding:15px;
 background:#496bdb;color:white;
 font-size:15px;font-weight:bold;
}
button:active{background:#304ba7}
.info{
 margin:12px;padding:15px;
 background:#20283b;border-radius:12px;
}
#message{color:#a9c7ff}
</style>
</head>
<body>

<header>🖥️ ONLINE PC SIMULATOR</header>

<div class="stats">
 <span>💰 <b id="money">500</b></span>
 <span>₿ <b id="btc">0</b></span>
 <span>⭐ <b id="level">1</b></span>
</div>

<div class="scene">
 <h3>🏠 Мой компьютерный магазин</h3>
 <div class="room">
  <div class="computer">
   🖥️
   <div class="label">ПК №1</div>
  </div>
  <div class="computer2">
   🖥️
   <div class="label">ПК №2</div>
  </div>
  <div class="player" id="player">🧑
   <div class="label">Игрок</div>
  </div>
  <div class="cat">🐈
   <div class="label">Муся Пюся 💖</div>
  </div>
 </div>
</div>

<div class="info">
 <b>🐈 Муся Пюся:</b>
 <p id="cattext">Мяу! Добро пожаловать домой!</p>
 <p id="message">Добро пожаловать в игру!</p>
</div>

<div class="buttons">
 <button onclick="work()">💻 Работать</button>
 <button onclick="mine()">₿ Майнинг</button>
 <button onclick="buy()">🛒 Купить ПК</button>
 <button onclick="pet()">🐈 Погладить Мусю</button>
 <button onclick="move(-1)">⬅️ Влево</button>
 <button onclick="move(1)">➡️ Вправо</button>
 <button onclick="upgrade()">🔧 Улучшить ПК</button>
 <button onclick="earn()">💰 Продать услугу</button>
</div>

<script>
let money=500;
let btc=0;
let level=1;
let position=45;
let computers=2;

function update(){
 document.getElementById("money").textContent=money;
 document.getElementById("btc").textContent=btc;
 document.getElementById("level").textContent=level;
 document.getElementById("player").style.left=position+"%";
}
function msg(t){
 document.getElementById("message").textContent=t;
}
function work(){
 money+=50;
 msg("Ты заработал 50 монет!");
 update();
}
function mine(){
 if(computers<1)return;
 btc++;
 msg("Получен 1 биткоин!");
 update();
}
function buy(){
 if(money>=300){
  money-=300;computers++;
  msg("Куплен новый компьютер!");
 }else msg("Недостаточно денег!");
 update();
}
function pet(){
 document.getElementById("cattext").textContent=
 "Муррр! Муся довольна! 💖";
}
function move(d){
 position=Math.max(5,Math.min(85,position+d*5));
 update();
}
function upgrade(){
 if(money>=200){
  money-=200;level++;
  msg("Компьютер улучшен! Уровень "+level);
 }else msg("Нужно 200 монет!");
 update();
}
function earn(){
 money+=100;
 msg("Ты выполнил заказ и получил 100 монет!");
 update();
}
update();
</script>
</body>
</html>