card | کتابخانه کامپوننت‌ها

پیش‌نمایش زنده

کد HTML

<div class="vscode-window">
  <div class="title-bar">
    mini-vscode.html
    <div class="window-controls">
      <div class="close"></div>
      <div class="minimize"></div>
      <div class="maximize"></div>
    </div>
  </div>

  <input class="i" type="radio" name="tab" id="tab-html" checked="" />
  <input class="i" type="radio" name="tab" id="tab-css" />
  <input class="i" type="radio" name="tab" id="tab-js" />

  <div class="tabs">
    <label class="l" for="tab-html">index.html</label>
    <label class="l" for="tab-css">style.css</label>
    <label class="l" for="tab-js">script.js</label>
  </div>

  <div class="code-panel">
    <div id="html-panel" class="panel">
      <div class="comment">&lt;!-- HTML File --&gt;</div>
      &lt;<span class="keyword">!DOCTYPE</span> html&gt;<br />
      &lt;html lang=<span class="string">"en"</span>&gt;<br />
      &lt;head&gt;<br />
      &nbsp;&nbsp;&lt;<span class="keyword">meta</span> charset=<span
        class="string"
        >"UTF-8"</span
      >&gt;<br />
      &nbsp;&nbsp;&lt;<span class="keyword">title</span>&gt;Mini
      VSCode&lt;/<span class="keyword">title</span>&gt;<br />
      &lt;/head&gt;<br />
      &lt;body&gt;<br />
      &nbsp;&nbsp;&lt;<span class="keyword">h1</span>&gt;Mini VSCode
      Widget&lt;/<span class="keyword">h1</span>&gt;<br />
      &lt;/body&gt;<br />
      &lt;/html&gt;
    </div>

    <div id="css-panel" class="panel">
      <div class="comment">/* CSS file */</div>
      <span class="keyword">body</span> {<br />
      &nbsp;&nbsp;<span class="attr">background</span>:
      <span class="value">#1e1e1e</span>;<br />
      &nbsp;&nbsp;<span class="attr">color</span>:
      <span class="value">#d4d4d4</span>;<br />
      }
    </div>

    <div id="js-panel" class="panel">
      <div class="comment">// JS file</div>
      <span class="keyword">function</span> helloWorld() {<br />
      &nbsp;&nbsp;console.log(<span class="string">"Hi VSCode!"</span>);<br />
      }
    </div>
  </div>
</div>

کد CSS

.vscode-window-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1e1e1e;
  font-family: "Fira Code", monospace;
}

.vscode-window {
  width: 80%;
  height: 65%;
  background: #1e1e2f;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #333;
}

.vscode-window .title-bar {
  height: 32px;
  background: #2c2c3e;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #ccc;
  font-size: 0.85em;
}

.vscode-window .window-controls {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.vscode-window .window-controls div.close,
.vscode-window .window-controls div.minimize,
.vscode-window .window-controls div.maximize {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
}

.vscode-window .window-controls div.close:hover,
.vscode-window .window-controls div.minimize:hover,
.vscode-window .window-controls div.maximize:hover {
  transform: scale(1.2);
}
.vscode-window .close {
  background: #ff5f56;
}
.vscode-window .minimize {
  background: #ffbd2e;
}
.vscode-window .maximize {
  background: #27c93f;
}

.vscode-window .tabs {
  display: flex;
  background: #252536;
  border-bottom: 1px solid #444;
}

.vscode-window .tabs label.l {
  padding: 8px 18px;
  color: #ccc;
  cursor: pointer;
  font-size: 0.9em;
  transition:
    background 0.2s,
    color 0.2s;
}

.vscode-window .tabs label.l:hover {
  background: #2c2c3e;
  color: #fff;
}

.vscode-window input.i[name="tab"] {
  display: none;
}

.vscode-window #tab-html:checked ~ .tabs label.l[for="tab-html"],
.vscode-window #tab-css:checked ~ .tabs label.l[for="tab-css"],
.vscode-window #tab-js:checked ~ .tabs label.l[for="tab-js"] {
  background: #1e1e2f;
  color: #fff;
  border-bottom: 2px solid #007acc;
}

.vscode-window .code-panel {
  flex: 1;
  background: #1e1e2f;
  color: #d4d4d4;
  padding: 15px;
  font-family: "Fira Code", monospace;
  font-size: 0.9em;
  overflow-y: auto;
  line-height: 1.4em;
}

.vscode-window .panel {
  display: none;
}

.vscode-window #tab-html:checked ~ .code-panel #html-panel,
.vscode-window #tab-css:checked ~ .code-panel #css-panel,
.vscode-window #tab-js:checked ~ .code-panel #js-panel {
  display: block;
}

.vscode-window .keyword {
  color: #569cd6;
}
.vscode-window .string {
  color: #d69d85;
}
.vscode-window .comment {
  color: #6a9955;
  font-style: italic;
}
.vscode-window .attr {
  color: #9cdcfe;
}
.vscode-window .value {
  color: #dcdcaa;
}

نوع: card

تاریخ ایجاد: 2026/06/06

آخرین بروزرسانی: 2026/06/06