<html lang="my">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>My Fault London — Movie Detail (mock)</title>
<style>
:root{
--bg:#0f0f10;
--panel: rgba(0,0,0,0.55);
--muted: rgba(255,255,255,0.72);
--accent: #3aa0ff;
--glass: rgba(255,255,255,0.04);
--card-radius: 12px;
--gap: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Myanmar", "Myanmar3", "Pyidaungsu", "Helvetica Neue", Arial, sans-serif;
background: linear-gradient(180deg,#0b0b0b 0%, #1a1313 60%);
color:#fff;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
padding:20px;
}
.detail-wrap{
max-width:860px;
margin:0 auto;
}
.hero{
display:flex;
gap:24px;
align-items:flex-start;
padding:18px;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25));
border-radius: var(--card-radius);
backdrop-filter: blur(6px);
box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}
.poster{
width:110px;
min-width:110px;
height:160px;
border-radius:6px;
overflow:hidden;
flex-shrink:0;
box-shadow: 0 6px 18px rgba(0,0,0,0.6);
background: linear-gradient(180deg,#222,#111);
}
.poster img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.meta{flex:1;}
.title{
font-size:26px;
line-height:1.1;
margin:0;
font-weight:600;
}
.sub-title{
margin-top:6px;
color:var(--muted);
font-size:15px;
max-width:60ch;
}
.info-row{
margin-top:14px;
display:flex;
gap:18px;
flex-wrap:wrap;
align-items:center;
color:var(--muted);
font-size:14px;
}
.genre{
margin-top:10px;
display:flex;
gap:10px;
color:#fff;
font-weight:600;
font-size:14px;
}
.genre span{opacity:0.9;}
.tabs{
display:flex;
gap:12px;
margin-top:16px;
}
.tab{
padding:12px 22px;
border-radius:10px;
background:transparent;
border:1px solid rgba(255,255,255,0.06);
color:var(--muted);
cursor:pointer;
font-weight:600;
}
.tab.active{
background: linear-gradient(180deg, rgba(58,160,255,0.16), rgba(58,160,255,0.06));
color:#fff;
border-color: rgba(58,160,255,0.28);
box-shadow: 0 6px 18px rgba(58,160,255,0.04);
}
.synopsis-card{
margin-top:18px;
padding:22px;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.35));
border-radius: var(--card-radius);
border: 1px solid rgba(255,255,255,0.03);
}
.synopsis-card h3{
margin:0 0 10px 0;
font-size:20px;
}
.synopsis-text{
color: rgba(255,255,255,0.87);
line-height:1.9;
font-size:15px;
white-space:pre-wrap;
opacity:0.95;
}
@media (max-width:600px){
.hero{gap:14px;padding:14px}
.poster{width:86px;height:126px;min-width:86px}
.title{font-size:20px}
.sub-title{font-size:13px}
.tab{padding:10px 14px}
.synopsis-card{padding:16px}
}
</style>
</head>
<body>
<div class="detail-wrap">
<div class="hero">
<div class="poster">
<img src="/mnt/data/1000050176.jpg" alt="My Fault London Poster">
</div>
<div class="meta">
<h1 class="title">My Fault London (2025) <span style="font-weight:400;color:var(--muted);font-size:18px">mmsub</span></h1>
<p class="sub-title">A Prime Original Movie — thrilling romantic drama set in London.</p>
<div class="info-row">
<div>Feb. 13, 2025</div>
<div>n/A</div>
<div>120 Min.</div>
</div>
<div class="genre">
<span>Drama</span>
<span style="opacity:0.6">|</span>
<span>Romance</span>
<span style="opacity:0.6">|</span>
<span>Action</span>
</div>
<div class="tabs">
<button class="tab active">Info</button>
<button class="tab">Cast</button>
<button class="tab">Links</button>
</div>
</div>
</div>
<section class="synopsis-card">
<h3>Synopsis</h3>
<div class="synopsis-text">
ဒီဇာတ်လမ်းဟာ London မြို့ကြီးထဲက သက်တမ်းအသစ် ရင်သပ်ရှုမောဖွယ် လက်တွေ့ရသလို သရုပ်ဆောင်မှုတွေနဲ့ ပြည့်နှက်ထားတဲ့ romantic drama ဖြစ်ပါတယ်။
ဇာတ်ကောင်နှစ်ဦးရဲ့ ခံစားချက်၊ သံယောဇဉ်တွေကို အခြေခံထားပြီး လှည့်ကွက်လည်းပါဝင်ပါတယ်။
</div>
</section>
</div>
</body>
</html>
