fork download
copy 
  1. <!DOCTYPE html>
  2. <html lang="th">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Netflix Style Player UI</title>
  6.   <link href="https://f...content-available-to-author-only...s.com/css2?family=Noto+Sans+Thai&display=swap" rel="stylesheet">
  7.   <style>
  8.     body {
  9.       margin: 0;
  10.       font-family: 'Noto Sans Thai', sans-serif;
  11.       background: black;
  12.       color: white;
  13.     }
  14.     .container {
  15.       padding: 20px;
  16.     }
  17.     .header {
  18.       display: flex;
  19.       justify-content: space-between;
  20.       align-items: center;
  21.       margin-bottom: 20px;
  22.     }
  23.     .title {
  24.       font-size: 1.2rem;
  25.     }
  26.     .title span {
  27.       color: red;
  28.       font-weight: bold;
  29.       font-size: 1.5rem;
  30.     }
  31.     .icons {
  32.       display: flex;
  33.       gap: 15px;
  34.       font-size: 1.5rem;
  35.     }
  36.     .brightness {
  37.       position: absolute;
  38.       left: 30px;
  39.       top: 35%;
  40.       display: flex;
  41.       flex-direction: column;
  42.       align-items: center;
  43.     }
  44.     .brightness .bar {
  45.       width: 6px;
  46.       height: 130px;
  47.       background: #444;
  48.       border-radius: 5px;
  49.       margin-top: 10px;
  50.       position: relative;
  51.     }
  52.     .brightness .bar-fill {
  53.       height: 60%;
  54.       width: 100%;
  55.       background: white;
  56.       position: absolute;
  57.       bottom: 0;
  58.       border-radius: 5px;
  59.     }
  60.     .progress-container {
  61.       display: flex;
  62.       align-items: center;
  63.       gap: 10px;
  64.       margin-bottom: 15px;
  65.     }
  66.     .progress-bar {
  67.       flex: 1;
  68.       height: 6px;
  69.       background: #555;
  70.       border-radius: 10px;
  71.       position: relative;
  72.     }
  73.     .progress-fill {
  74.       width: 10%;
  75.       height: 100%;
  76.       background: red;
  77.       border-radius: 10px;
  78.     }
  79.     .progress-dot {
  80.       width: 20px;
  81.       height: 20px;
  82.       background: red;
  83.       border-radius: 50%;
  84.       position: absolute;
  85.       left: 10%;
  86.       top: -7px;
  87.       box-shadow: 0 0 5px red;
  88.     }
  89.     .controls {
  90.       display: flex;
  91.       justify-content: space-around;
  92.       font-size: 0.95rem;
  93.     }
  94.     .controls button {
  95.       background: none;
  96.       border: none;
  97.       color: white;
  98.       cursor: pointer;
  99.     }
  100.   </style>
  101. </head>
  102. <body>
  103.   <div class="container">
  104.     <!-- Header -->
  105.     <div class="header">
  106.       <div class="title">
  107.         <span>N</span> ซีซัน 10: ตอน 209 “แขนขวาของดันโช”
  108.       </div>
  109.       <div class="icons">
  110.         <span>👎</span>
  111.         <span>👍</span>
  112.         <span>👍👍</span>
  113.         <span>📺</span>
  114.         <span>🔓</span>
  115.         <span>❌</span>
  116.       </div>
  117.     </div>
  118.  
  119.     <!-- Brightness control -->
  120.     <div class="brightness">
  121.       <span>🔆</span>
  122.       <div class="bar">
  123.         <div class="bar-fill"></div>
  124.       </div>
  125.     </div>
  126.  
  127.     <!-- Progress Bar -->
  128.     <div class="progress-container">
  129.       <div class="progress-bar">
  130.         <div class="progress-fill"></div>
  131.         <div class="progress-dot"></div>
  132.       </div>
  133.       <span>23:03</span>
  134.     </div>
  135.  
  136.     <!-- Controls -->
  137.     <div class="controls">
  138.       <button>ความเร็ว (1x)</button>
  139.       <button>ตอน</button>
  140.       <button>เสียงและคำบรรยาย</button>
  141.       <button>▶ ตอนถัดไป</button>
  142.     </div>
  143.   </div>
  144. </body>
  145. </html>
  146.  
Success #stdin #stdout 0.02s 25928KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>Netflix Style Player UI</title>
  <link href="https://f...content-available-to-author-only...s.com/css2?family=Noto+Sans+Thai&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0;
      font-family: 'Noto Sans Thai', sans-serif;
      background: black;
      color: white;
    }
    .container {
      padding: 20px;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .title {
      font-size: 1.2rem;
    }
    .title span {
      color: red;
      font-weight: bold;
      font-size: 1.5rem;
    }
    .icons {
      display: flex;
      gap: 15px;
      font-size: 1.5rem;
    }
    .brightness {
      position: absolute;
      left: 30px;
      top: 35%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .brightness .bar {
      width: 6px;
      height: 130px;
      background: #444;
      border-radius: 5px;
      margin-top: 10px;
      position: relative;
    }
    .brightness .bar-fill {
      height: 60%;
      width: 100%;
      background: white;
      position: absolute;
      bottom: 0;
      border-radius: 5px;
    }
    .progress-container {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 15px;
    }
    .progress-bar {
      flex: 1;
      height: 6px;
      background: #555;
      border-radius: 10px;
      position: relative;
    }
    .progress-fill {
      width: 10%;
      height: 100%;
      background: red;
      border-radius: 10px;
    }
    .progress-dot {
      width: 20px;
      height: 20px;
      background: red;
      border-radius: 50%;
      position: absolute;
      left: 10%;
      top: -7px;
      box-shadow: 0 0 5px red;
    }
    .controls {
      display: flex;
      justify-content: space-around;
      font-size: 0.95rem;
    }
    .controls button {
      background: none;
      border: none;
      color: white;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Header -->
    <div class="header">
      <div class="title">
        <span>N</span> ซีซัน 10: ตอน 209 “แขนขวาของดันโช”
      </div>
      <div class="icons">
        <span>👎</span>
        <span>👍</span>
        <span>👍👍</span>
        <span>📺</span>
        <span>🔓</span>
        <span>❌</span>
      </div>
    </div>

    <!-- Brightness control -->
    <div class="brightness">
      <span>🔆</span>
      <div class="bar">
        <div class="bar-fill"></div>
      </div>
    </div>

    <!-- Progress Bar -->
    <div class="progress-container">
      <div class="progress-bar">
        <div class="progress-fill"></div>
        <div class="progress-dot"></div>
      </div>
      <span>23:03</span>
    </div>

    <!-- Controls -->
    <div class="controls">
      <button>ความเร็ว (1x)</button>
      <button>ตอน</button>
      <button>เสียงและคำบรรยาย</button>
      <button>▶ ตอนถัดไป</button>
    </div>
  </div>
</body>
</html>
https://ideone.com/mptBMP
language:
PHP (php 7.3.5)
created:
3 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!