I-014 Card medium

Perforated Event Ticket ミシン目付きイベントチケット

Realistic concert ticket with perforated stub, barcode graphic, and reversible front-to-back flip switch. ミシン目とバーコードを備え、表面と裏面を切り替え可能なチケット。

ticket event perforated flip stub

ライブデモ Live Demo

ADMIT ONE

NEO SYNTH SYMPHONY

METROPOLIS ARENA • SEC 104 • ROW C

GATE 04
SEAT 28

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Realistic concert ticket with perforated stub, barcode graphic, and reversible front-to-back flip switch.

ミシン目とバーコードを備え、表面と裏面を切り替え可能なチケット。

どこで使うかWhere to use

Portfolio, product showcase, landing page.

ポートフォリオ、製品紹介、ランディングページ。

特徴Key features

Realistic concert ticket with perforated stub, barcode graphic, and reversible front-to-back flip switch.

ミシン目とバーコードを備え、表面と裏面を切り替え可能なチケット。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--demo-accent#38bdf8Accent color for the panel border and keyboard focus ring.

実装コード Implementation Code 

<div class="demo-stage et-root" role="region" aria-label="Event Ticket Simulation"><div class="et-wrapper"><div class="et-ticket"><div class="et-side et-front et-active" aria-hidden="false"><div class="et-main-content"><div class="et-badge">ADMIT ONE</div><h3 class="et-event-title">NEO SYNTH SYMPHONY</h3><p class="et-event-meta">METROPOLIS ARENA &bull; SEC 104 &bull; ROW C</p><div class="et-barcode" aria-hidden="true"><span class="et-bar"></span><span class="et-bar et-w"></span><span class="et-bar"></span><span class="et-bar et-w"></span><span class="et-bar et-w2"></span><span class="et-bar"></span><span class="et-bar et-w"></span><span class="et-bar"></span><span class="et-bar et-w2"></span><span class="et-bar"></span></div></div><div class="et-stub"><div class="et-stub-title">GATE 04</div><div class="et-stub-seat">SEAT 28</div></div></div><div class="et-side et-back" aria-hidden="true" style="display:none;"><div class="et-back-content"><h4 class="et-back-title">TERMS &amp; CONDITIONS</h4><p class="et-back-text">No unauthorized recording or photography allowed. Retain stub at all times inside the arena.</p><div class="et-back-rules"><span>&bull; Doors open at 18:00</span><span>&bull; Non-refundable ticket</span></div></div></div></div><div class="et-actions"><button type="button" class="et-flip-btn" aria-pressed="false" aria-label="Flip ticket between front and back sides">Flip to Back</button></div></div></div>
<script>
document.querySelectorAll('.et-root').forEach(root => {
  const flipBtn = root.querySelector('.et-flip-btn');
  const front = root.querySelector('.et-front');
  const back = root.querySelector('.et-back');
  if (!flipBtn || !front || !back) return;
  flipBtn.addEventListener('click', () => {
    const isShowingBack = back.style.display !== 'none';
    if (isShowingBack) {
      back.style.display = 'none';
      back.setAttribute('aria-hidden', 'true');
      front.style.display = 'flex';
      front.setAttribute('aria-hidden', 'false');
      flipBtn.setAttribute('aria-pressed', 'false');
      flipBtn.textContent = 'Flip to Back';
    } else {
      front.style.display = 'none';
      front.setAttribute('aria-hidden', 'true');
      back.style.display = 'flex';
      back.setAttribute('aria-hidden', 'false');
      flipBtn.setAttribute('aria-pressed', 'true');
      flipBtn.textContent = 'Flip to Front';
    }
  });
});
</script>
.et-root {
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  max-height: 420px;
  min-width: 0;
  margin: 0 auto;
  padding: 16px;
  background: #14171f;
  border-radius: 16px;
  border: 1px solid #2a3142;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
  font-family: system-ui, -apple-system, sans-serif;
  color: #f1f5f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.et-root *, .et-root *::before, .et-root *::after {
  box-sizing: border-box;
  min-width: 0;
}
.et-root .et-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.et-root .et-ticket {
  width: 100%;
  max-width: 440px;
  min-height: 140px;
  background: #f8fafc;
  color: #0f172a;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.et-root .et-side {
  width: 100%;
  min-height: 140px;
  display: flex;
}
.et-root .et-front {
  display: flex;
}
.et-root .et-main-content {
  flex: 3;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.et-root .et-badge {
  align-self: flex-start;
  background: #0284c7;
  color: #ffffff;
  font-size: 8px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.et-root .et-event-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}
.et-root .et-event-meta {
  margin: 0;
  font-size: 10px;
  color: #475569;
  font-weight: 600;
}
.et-root .et-barcode {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  margin-top: 4px;
}
.et-root .et-bar {
  width: 2px;
  height: 100%;
  background: #0f172a;
}
.et-root .et-bar.et-w {
  width: 4px;
}
.et-root .et-bar.et-w2 {
  width: 6px;
}
.et-root .et-stub {
  flex: 1;
  padding: 12px 10px;
  background: #f1f5f9;
  border-left: 2px dashed #94a3b8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.et-root .et-stub-title {
  font-size: 9px;
  font-weight: 800;
  color: #0284c7;
}
.et-root .et-stub-seat {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
}
.et-root .et-back-content {
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.et-root .et-back-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}
.et-root .et-back-text {
  margin: 0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
}
.et-root .et-back-rules {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: #475569;
}
.et-root .et-actions {
  display: flex;
  justify-content: center;
}
.et-root .et-flip-btn {
  appearance: none;
  border: 1px solid #38bdf8;
  background: #0369a1;
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.et-root .et-flip-btn:hover {
  background: #0284c7;
}
.et-root .et-flip-btn:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .et-root .et-flip-btn {
    transition: background 0.2s ease, transform 0.1s ease;
  }
  .et-root .et-flip-btn:active {
    transform: scale(0.96);
  }
  .et-root .et-ticket {
    transition: box-shadow 0.3s ease;
  }
}
.et-root{max-height:none;--demo-accent:#38bdf8;border-color:var(--demo-accent)}.et-root button:focus-visible{outline-color:var(--demo-accent)}
.et-root .et-ticket{position:relative}.et-root .et-ticket::before,.et-root .et-ticket::after{content:"";position:absolute;left:calc(75% - 9px);width:18px;height:18px;background:#14171f;border-radius:50%;z-index:2;pointer-events:none}.et-root .et-ticket::before{top:-9px}.et-root .et-ticket::after{bottom:-9px}.et-root .et-stub{background:repeating-linear-gradient(135deg,#e0f2fe 0 8px,#f0f9ff 8px 16px)}.et-root .et-main-content{background:radial-gradient(circle at 10% 15%,#bae6fd55,transparent 70%)}
import { useState } from "react";
import "./I-014.css";
function PerforatedEventTicket() {
  const [back, setBack] = useState(false);
  return <div className="demo-stage et-root" role="region" aria-label="Event Ticket Simulation"><div className="et-wrapper"><div className="et-ticket"><div className="et-side et-front et-active" aria-hidden={back} style={{ display: back ? "none" : "flex" }}><div className="et-main-content"><div className="et-badge">{"ADMIT ONE"}</div><h3 className="et-event-title">{"NEO SYNTH SYMPHONY"}</h3><p className="et-event-meta">{"METROPOLIS ARENA \u2022 SEC 104 \u2022 ROW C"}</p><div className="et-barcode" aria-hidden="true"><span className="et-bar" /><span className="et-bar et-w" /><span className="et-bar" /><span className="et-bar et-w" /><span className="et-bar et-w2" /><span className="et-bar" /><span className="et-bar et-w" /><span className="et-bar" /><span className="et-bar et-w2" /><span className="et-bar" /></div></div><div className="et-stub"><div className="et-stub-title">{"GATE 04"}</div><div className="et-stub-seat">{"SEAT 28"}</div></div></div><div className="et-side et-back" aria-hidden={!back} style={{ display: back ? "flex" : "none" }}><div className="et-back-content"><h4 className="et-back-title">{"TERMS & CONDITIONS"}</h4><p className="et-back-text">{"No unauthorized recording or photography allowed. Retain stub at all times inside the arena."}</p><div className="et-back-rules"><span>{"\u2022 Doors open at 18:00"}</span><span>{"\u2022 Non-refundable ticket"}</span></div></div></div></div><div className="et-actions"><button type="button" className="et-flip-btn" aria-label="Flip ticket between front and back sides" onClick={() => setBack((value) => !value)} aria-pressed={back}>{back ? "Flip to Front" : "Flip to Back"}</button></div></div></div>;
}
export {
  PerforatedEventTicket as default
};

.et-root {
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  max-height: 420px;
  min-width: 0;
  margin: 0 auto;
  padding: 16px;
  background: #14171f;
  border-radius: 16px;
  border: 1px solid #2a3142;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
  font-family: system-ui, -apple-system, sans-serif;
  color: #f1f5f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.et-root *, .et-root *::before, .et-root *::after {
  box-sizing: border-box;
  min-width: 0;
}
.et-root .et-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.et-root .et-ticket {
  width: 100%;
  max-width: 440px;
  min-height: 140px;
  background: #f8fafc;
  color: #0f172a;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.et-root .et-side {
  width: 100%;
  min-height: 140px;
  display: flex;
}
.et-root .et-front {
  display: flex;
}
.et-root .et-main-content {
  flex: 3;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.et-root .et-badge {
  align-self: flex-start;
  background: #0284c7;
  color: #ffffff;
  font-size: 8px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.et-root .et-event-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}
.et-root .et-event-meta {
  margin: 0;
  font-size: 10px;
  color: #475569;
  font-weight: 600;
}
.et-root .et-barcode {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  margin-top: 4px;
}
.et-root .et-bar {
  width: 2px;
  height: 100%;
  background: #0f172a;
}
.et-root .et-bar.et-w {
  width: 4px;
}
.et-root .et-bar.et-w2 {
  width: 6px;
}
.et-root .et-stub {
  flex: 1;
  padding: 12px 10px;
  background: #f1f5f9;
  border-left: 2px dashed #94a3b8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}
.et-root .et-stub-title {
  font-size: 9px;
  font-weight: 800;
  color: #0284c7;
}
.et-root .et-stub-seat {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
}
.et-root .et-back-content {
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.et-root .et-back-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}
.et-root .et-back-text {
  margin: 0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
}
.et-root .et-back-rules {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: #475569;
}
.et-root .et-actions {
  display: flex;
  justify-content: center;
}
.et-root .et-flip-btn {
  appearance: none;
  border: 1px solid #38bdf8;
  background: #0369a1;
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.et-root .et-flip-btn:hover {
  background: #0284c7;
}
.et-root .et-flip-btn:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .et-root .et-flip-btn {
    transition: background 0.2s ease, transform 0.1s ease;
  }
  .et-root .et-flip-btn:active {
    transform: scale(0.96);
  }
  .et-root .et-ticket {
    transition: box-shadow 0.3s ease;
  }
}
.et-root{max-height:none;--demo-accent:#38bdf8;border-color:var(--demo-accent)}.et-root button:focus-visible{outline-color:var(--demo-accent)}
.et-root .et-ticket{position:relative}.et-root .et-ticket::before,.et-root .et-ticket::after{content:"";position:absolute;left:calc(75% - 9px);width:18px;height:18px;background:#14171f;border-radius:50%;z-index:2;pointer-events:none}.et-root .et-ticket::before{top:-9px}.et-root .et-ticket::after{bottom:-9px}.et-root .et-stub{background:repeating-linear-gradient(135deg,#e0f2fe 0 8px,#f0f9ff 8px 16px)}.et-root .et-main-content{background:radial-gradient(circle at 10% 15%,#bae6fd55,transparent 70%)}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

Scoped CSS creates the visual design; small vanilla JavaScript handlers update the local demo state.

スコープ化したCSSで描画し、Vanilla JavaScriptでデモ内の状態だけを更新します。

カスタマイズ方法Customization

Accent color for the panel border and keyboard focus ring.

パネルの枠線とキーボードフォーカスの色を変更します。

注意点Caveats

The sample content is fictional. No external assets or libraries are required. Motion follows the operating system preference. Demo labels are English; surrounding documentation supports Japanese and English.

デモ内容は架空です。外部素材・ライブラリは不要。OSの動きを減らす設定に対応します。デモ内のラベルは英語、解説は日英対応です。

よくある質問 Frequently Asked Questions

Does this demo need external libraries? 外部ライブラリは必要ですか？

The sample content is fictional. No external assets or libraries are required. Motion follows the operating system preference. Demo labels are English; surrounding documentation supports Japanese and English.

デモ内容は架空です。外部素材・ライブラリは不要。OSの動きを減らす設定に対応します。デモ内のラベルは英語、解説は日英対応です。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.