TX.RU — Онлайн Кодер | Пишем код онлайн с AI

✨ TX.RU Онлайн Кодер

Ready

RU EN

🚀 Templates

💬 AI Chat

Hi! Pick a template or describe your task!

🆓 Free: ?

HTML EDITOR

PREVIEW localhost:8080

📄

Cannot run in browser — download the file

⚡

Coming Soon

TX.RU Pro Version

Free daily limit reached.
Upgrade to Pro for unlimited power!

∞ RequestsUnlimited

🚀 GPT-4oPowerful AI

💾 ProjectsSave your code

🎨 ThemesCustom editor

📤 PublishHost on tx.ru

⚡ PriorityFast AI response

<!DOCTYPE html>
<html><head>
<title>CSS Buttons</title>
<style>
  * { margin: 0; box-sizing: border-box; }
  body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
    align-items: center; gap: 20px; background: #0f172a; font-family: sans-serif; }
  h2 { color: #fff; font-size: 28px; margin-bottom: 10px; }
  .row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
  button { padding: 14px 28px; border: none; border-radius: 12px; font-size: 15px;
    font-weight: 700; cursor: pointer; transition: all .3s ease; }
  button:hover { transform: translateY(-3px) scale(1.03); }
  button:active { transform: translateY(0) scale(.98); }
  .b1 { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; box-shadow: 0 8px 25px rgba(99,102,241,.4); }
  .b2 { background: linear-gradient(135deg, #ec4899, #f43f5e); color: #fff; box-shadow: 0 8px 25px rgba(236,72,153,.4); }
  .b3 { background: linear-gradient(135deg, #06b6d4, #0ea5e9); color: #fff; box-shadow: 0 8px 25px rgba(6,182,212,.4); }
  .b4 { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; box-shadow: 0 8px 25px rgba(34,197,94,.4); }
  .b5 { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.3); }
  .b5:hover { background: rgba(255,255,255,.1); border-color: #fff; }
  .b6 { background: #fbbf24; color: #1e1b4b; box-shadow: 0 8px 25px rgba(251,191,36,.4); }
  p { color: rgba(255,255,255,.4); font-size: 13px; margin-top: 10px; }
</style>
</head><body>
<h2>CSS Buttons ✨</h2>
<div class="row">
  <button class="b1">Gradient</button>
  <button class="b2">Pink</button>
  <button class="b3">Cyan</button>
</div>
<div class="row">
  <button class="b4">Success</button>
  <button class="b5">Outline</button>
  <button class="b6">Warning</button>
</div>
<p>hover & click me!</p>
</body></html>

<!DOCTYPE html>
<html><head>
<title>Photo Gallery</title>
<style>
  * { margin: 0; box-sizing: border-box; }
  body { background: #0f172a; font-family: sans-serif; padding: 30px; min-height: 100vh; }
  h2 { color: #fff; text-align: center; font-size: 28px; margin-bottom: 24px; }
  .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px; max-width: 700px; margin: 0 auto; }
  .card { border-radius: 16px; overflow: hidden; aspect-ratio: 1; position: relative;
    cursor: pointer; transition: transform .3s, box-shadow .3s; }
  .card:hover { transform: scale(1.05); box-shadow: 0 12px 40px rgba(0,0,0,.4); }
  .card .label { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px;
    background: linear-gradient(transparent, rgba(0,0,0,.8));
    color: #fff; font-size: 12px; font-weight: 700; }
</style>
</head><body>
<h2>🖼️ Gallery</h2>
<div class="gallery">
  <div class="card" style="background:linear-gradient(135deg,#6366f1,#a855f7)"><div class="label">Purple</div></div>
  <div class="card" style="background:linear-gradient(135deg,#ec4899,#f43f5e)"><div class="label">Pink</div></div>
  <div class="card" style="background:linear-gradient(135deg,#06b6d4,#3b82f6)"><div class="label">Ocean</div></div>
  <div class="card" style="background:linear-gradient(135deg,#22c55e,#14b8a6)"><div class="label">Green</div></div>
  <div class="card" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"><div class="label">Fire</div></div>
  <div class="card" style="background:linear-gradient(135deg,#8b5cf6,#06b6d4)"><div class="label">Neon</div></div>
</div>
</body></html>

<!DOCTYPE html>
<html><head>
<title>CSS Animation</title>
<style>
  * { margin: 0; }
  body { min-height: 100vh; display: flex; justify-content: center; align-items: center;
    background: #0f172a; overflow: hidden; }
  .scene { position: relative; width: 300px; height: 300px; }
  .ring { position: absolute; border: 3px solid transparent; border-radius: 50%;
    top: 50%; left: 50%; transform: translate(-50%,-50%); }
  .r1 { width: 240px; height: 240px; border-top-color: #6366f1; border-bottom-color: #6366f1;
    animation: spin 3s linear infinite; }
  .r2 { width: 190px; height: 190px; border-left-color: #ec4899; border-right-color: #ec4899;
    animation: spin 2s linear infinite reverse; }
  .r3 { width: 140px; height: 140px; border-top-color: #06b6d4; border-bottom-color: #06b6d4;
    animation: spin 1.5s linear infinite; }
  .core { position: absolute; width: 60px; height: 60px; background: linear-gradient(135deg,#fbbf24,#f97316);
    border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%);
    box-shadow: 0 0 40px rgba(251,191,36,.5); animation: pulse 2s ease-in-out infinite; }
  @keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
  @keyframes pulse { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.15)} }
  .star { position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%;
    animation: twinkle 2s ease-in-out infinite; }
  @keyframes twinkle { 0%,100%{opacity:.2} 50%{opacity:1} }
</style>
</head><body>
<div class="scene">
  <div class="ring r1"></div>
  <div class="ring r2"></div>
  <div class="ring r3"></div>
  <div class="core"></div>
  <div class="star" style="top:10%;left:20%;animation-delay:.2s"></div>
  <div class="star" style="top:80%;left:75%;animation-delay:.7s"></div>
  <div class="star" style="top:25%;left:85%;animation-delay:1.1s"></div>
  <div class="star" style="top:70%;left:15%;animation-delay:.5s"></div>
</div>
</body></html>

<!DOCTYPE html>
<html><head>
<title>Calculator</title>
<style>
  * { margin: 0; box-sizing: border-box; }
  body { min-height: 100vh; display: flex; justify-content: center; align-items: center;
    background: linear-gradient(135deg, #1e1b4b, #312e81); font-family: sans-serif; }
  .calc { background: rgba(255,255,255,.06); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.1); border-radius: 24px;
    padding: 24px; width: 280px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
  .display { background: rgba(0,0,0,.3); border-radius: 14px; padding: 18px;
    text-align: right; margin-bottom: 16px; min-height: 60px;
    display: flex; align-items: flex-end; justify-content: flex-end; }
  .display span { font-size: 32px; font-weight: 800; color: #fff; word-break: break-all; }
  .btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .btns button { padding: 16px; border: none; border-radius: 12px; font-size: 18px;
    font-weight: 700; cursor: pointer; transition: all .15s; }
  .btns button:hover { transform: scale(1.05); }
  .btns button:active { transform: scale(.95); }
  .num { background: rgba(255,255,255,.08); color: #fff; }
  .op { background: rgba(99,102,241,.3); color: #a5b4fc; }
  .eq { background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; box-shadow: 0 4px 15px rgba(99,102,241,.4); }
  .cl { background: rgba(239,68,68,.2); color: #f87171; }
</style>
</head><body>
<div class="calc">
  <div class="display"><span id="screen">0</span></div>
  <div class="btns">
    <button class="cl" onclick="cl()">C</button>
    <button class="op" onclick="app('(')">(</button>
    <button class="op" onclick="app(')')">)</button>
    <button class="op" onclick="app('/')">÷</button>
    <button class="num" onclick="app('7')">7</button>
    <button class="num" onclick="app('8')">8</button>
    <button class="num" onclick="app('9')">9</button>
    <button class="op" onclick="app('*')">×</button>
    <button class="num" onclick="app('4')">4</button>
    <button class="num" onclick="app('5')">5</button>
    <button class="num" onclick="app('6')">6</button>
    <button class="op" onclick="app('-')">−</button>
    <button class="num" onclick="app('1')">1</button>
    <button class="num" onclick="app('2')">2</button>
    <button class="num" onclick="app('3')">3</button>
    <button class="op" onclick="app('+')">+</button>
    <button class="num" onclick="app('0')" style="grid-column:span 2">0</button>
    <button class="num" onclick="app('.')">.</button>
    <button class="eq" onclick="calc()">=</button>
  </div>
</div>
<script>var expr="",s=document.getElementById("screen");function app(v){expr+=v;s.textContent=expr}function cl(){expr="";s.textContent="0"}function calc(){try{s.textContent=eval(expr);expr=String(s.textContent)}catch(e){s.textContent="Error";expr=""}}</script>
</body></html>

<!DOCTYPE html>
<html><head>
<title>Landing Page</title>
<style>
  *{margin:0;box-sizing:border-box}
  body{font-family:sans-serif;background:#0f172a;color:#fff}
  .hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;padding:40px 20px;
    background:linear-gradient(180deg,#0f172a 0%,#1e1b4b 50%,#0f172a 100%)}
  .badge{font-size:11px;font-weight:700;background:rgba(99,102,241,.15);color:#a5b4fc;
    padding:5px 14px;border-radius:20px;border:1px solid rgba(99,102,241,.25);margin-bottom:20px;display:inline-block}
  h1{font-size:clamp(32px,6vw,56px);font-weight:900;line-height:1.1;margin-bottom:16px}
  h1 span{background:linear-gradient(135deg,#a855f7,#06b6d4);-webkit-background-clip:text;color:transparent}
  .sub{font-size:clamp(14px,2vw,18px);color:rgba(255,255,255,.5);max-width:500px;line-height:1.7;margin-bottom:30px}
  .btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
  .b1{padding:14px 32px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;
    border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 8px 30px rgba(99,102,241,.4)}
  .b2{padding:14px 32px;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.2);
    border-radius:12px;font-size:15px;font-weight:700;cursor:pointer}
  .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;
    max-width:800px;margin:0 auto;padding:60px 20px}
  .feat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:24px;text-align:center}
  .feat .ico{font-size:32px;margin-bottom:10px}
  .feat h3{font-size:16px;margin-bottom:8px}
  .feat p{font-size:13px;color:rgba(255,255,255,.5);line-height:1.6}
</style>
</head><body>
<div class="hero">
  <div class="badge">✨ New project</div>
  <h1>Build<br><span>beautiful websites</span></h1>
  <p class="sub">Start your web development journey</p>
  <div class="btns">
    <button class="b1">Start →</button>
    <button class="b2">Learn more</button>
  </div>
</div>
<div class="features">
  <div class="feat"><div class="ico">⚡</div><h3>Fast</h3><p>Lightning-fast performance</p></div>
  <div class="feat"><div class="ico">🎨</div><h3>Beautiful</h3><p>Modern design</p></div>
  <div class="feat"><div class="ico">📱</div><h3>Responsive</h3><p>Works on any device</p></div>
</div>
</body></html>