GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Train Journey Share Sheet Mock</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family:Arial,Helvetica,sans-serif;}7  #render-target{8    width:1440px;height:3120px;position:relative;overflow:hidden;9    background:#0d0f12;color:#eaeaea;border-radius:0;10  }11 12  /* Status bar */13  .status-bar{14    position:absolute;top:0;left:0;right:0;height:96px;background:rgba(0,0,0,0.35);15    display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:36px;color:#fff;16  }17  .right-icons{display:flex;align-items:center;gap:28px;}18  .dot{width:10px;height:10px;background:#9aa0a6;border-radius:50%;}19  /* App bar */20  .app-bar{21    position:absolute;top:96px;left:0;right:0;height:160px;background:#12151b;22    display:flex;align-items:center;padding:0 40px;box-shadow:0 2px 0 rgba(255,255,255,0.04) inset;23  }24  .app-title{font-size:64px;font-weight:600;margin-left:28px;}25  .icon-btn{width:96px;height:96px;display:flex;align-items:center;justify-content:center;color:#fff;}26  .menu{position:absolute;right:20px;top:32px;}27  /* Pager dots */28  .pager-dots{position:absolute;top:290px;left:0;right:0;display:flex;justify-content:center;gap:26px;}29  .pager-dots span{width:18px;height:18px;border-radius:50%;background:#3a3f47;}30  .pager-dots span.active{background:#6d7380;}31  /* Title route */32  .route{33    position:absolute;top:360px;left:60px;right:60px;font-size:54px;color:#d7dee8;34  }35  /* Toolbar */36  .toolbar{37    position:absolute;top:470px;left:0;right:0;height:120px;background:#0f1217;38    display:flex;align-items:center;gap:40px;padding:0 60px;border-top:1px solid #1e242d;border-bottom:1px solid #1e242d;39    color:#c9d1db;font-size:44px;40  }41  .toolbar .spacer{flex:1}42  .pill{display:flex;align-items:center;gap:20px}43  .toolbar svg{fill:#9fb2c7}44  /* Content list */45  .content{46    position:absolute;top:590px;left:0;right:0;bottom:0;padding:40px 60px 0 60px;color:#e5ecf6;47  }48  .stop{49    position:relative;padding-left:150px;padding-top:36px;padding-bottom:36px;border-bottom:1px solid #1b2230;50  }51  .time{position:absolute;left:0;top:36px;font-size:54px;color:#c8d2e4;width:120px;text-align:left;}52  .station{font-size:58px;font-weight:600;}53  .sub{margin-top:18px;color:#9fb0c1;font-size:44px;display:flex;align-items:center;gap:18px;}54  .change{font-size:48px;color:#b8c7d8;margin-left:150px;margin-top:14px;}55  .vert-line{56    position:absolute;left:115px;top:0;bottom:-40px;width:10px;background:#3b4352;border-radius:5px;57  }58  .bullet{position:absolute;left:100px;top:56px;width:40px;height:40px;border-radius:50%;background:#0d0f12;border:8px solid #95a6bc;}59  .chip{display:inline-block;background:#1f2837;border-radius:18px;padding:8px 18px;font-weight:700;margin-right:20px;}60  /* Bottom sheet */61  .sheet{62    position:absolute;left:0;right:0;bottom:0;height:1550px;background:#16181c;border-top-left-radius:36px;border-top-right-radius:36px;63    box-shadow:0 -12px 40px rgba(0,0,0,0.6);padding:24px 40px 40px 40px;64  }65  .handle{width:160px;height:12px;background:#3a3d43;border-radius:8px;margin:16px auto 20px auto;}66  .share-text{67    margin:40px 10px 34px 10px;background:#0f1115;border:1px solid #2a2c33;border-radius:22px;68    padding:36px;color:#e7ecf8;font-size:48px;line-height:1.35;69  }70  .action-row{display:flex;gap:34px;margin:18px 6px 10px 6px;}71  .action{72    flex:0 0 320px;border:2px solid #3f4653;border-radius:28px;background:#0f1217;color:#e6eefb;73    padding:26px 34px;display:flex;align-items:center;gap:24px;font-size:48px;justify-content:center;74  }75  .mini-icon{width:64px;height:64px;display:inline-flex;align-items:center;justify-content:center;}76  .helper{color:#98a1ad;font-size:44px;text-align:center;margin:80px 0 40px 0;}77  .apps{display:flex;justify-content:space-around;margin-top:40px;}78  .app{display:flex;flex-direction:column;align-items:center;gap:22px;}79  .app .circle{width:180px;height:180px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#111;font-weight:700;font-size:54px;}80  .tag{color:#d6dde9;font-size:44px;}81  .gmail{background:#fff;}82  .messages{background:#2d69ff;color:#fff;}83  .drive{background:#fff;}84  .keep{background:#ffe27a;}85  /* Simple helpers for SVG paths to look white */86  svg{width:56px;height:56px}87</style>88</head>89<body>90<div id="render-target">91 92  <!-- Status bar -->93  <div class="status-bar">94    <div>11:31</div>95    <div class="right-icons">96      <div class="dot"></div><div class="dot"></div><div class="dot"></div>97      <div style="width:34px;height:34px;background:#fff;border-radius:50%"></div>98      <div style="width:22px;height:40px;border:4px solid #fff;border-radius:4px;position:relative">99        <div style="position:absolute;bottom:0;left:0;right:0;height:60%;background:#fff"></div>100      </div>101    </div>102  </div>103 104  <!-- App bar -->105  <div class="app-bar">106    <div class="icon-btn">107      <svg viewBox="0 0 24 24" fill="#eaeaea"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>108    </div>109    <div class="app-title">Details</div>110    <div class="icon-btn menu">111      <svg viewBox="0 0 24 24" fill="#eaeaea"><path d="M12 8a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4zm0 6a2 2 0 110-4 2 2 0 010 4z"/></svg>112    </div>113  </div>114 115  <!-- Pager dots -->116  <div class="pager-dots">117    <span class="active"></span><span></span><span></span><span></span><span></span><span></span>118  </div>119 120  <!-- Route title -->121  <div class="route">Southampton Central - Berlin Hbf (Tief)</div>122 123  <!-- Toolbar -->124  <div class="toolbar">125    <div class="pill">126      <svg viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>127      <span>View as list</span>128    </div>129    <div class="spacer"></div>130    <div class="pill">131      <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.3 7 13 7 13s7-7.7 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z"/></svg>132      <span>View on map</span>133    </div>134  </div>135 136  <!-- Content list behind the sheet -->137  <div class="content">138    <div class="stop">139      <div class="vert-line"></div>140      <div class="bullet"></div>141      <div class="time">02:24</div>142      <div class="station">Duisburg Hbf</div>143    </div>144 145    <div class="change">0h 27m  ⟲  Change trains</div>146 147    <div class="stop">148      <div class="vert-line"></div>149      <div class="bullet"></div>150      <div class="time">02:51</div>151      <div class="station">Duisburg Hbf</div>152      <div class="sub">153        <span class="chip">ICE 920</span>154        <span>High-speed train</span>155      </div>156      <div class="sub">Direction Hamburg-Altona</div>157    </div>158 159    <div class="stop">160      <div class="vert-line"></div>161      <div class="bullet"></div>162      <div class="time">06:50</div>163      <div class="station">Hamburg Hbf</div>164    </div>165  </div>166 167  <!-- Bottom Share Sheet -->168  <div class="sheet">169    <div class="handle"></div>170 171    <div class="share-text">172      Check out my train journey: https://eurailapp.com/share/journey?id=06C4220-787C-11EE-8B97-7B69CBF2B7C...173    </div>174 175    <div class="action-row">176      <div class="action">177        <div class="mini-icon">178          <svg viewBox="0 0 24 24" fill="#eaeaea"><path d="M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>179        </div>180        Copy181      </div>182      <div class="action">183        <div class="mini-icon">184          <svg viewBox="0 0 24 24" fill="#eaeaea"><path d="M12 3a9 9 0 00-9 9h2a7 7 0 0114 0h2a9 9 0 00-9-9zm0 4a5 5 0 00-5 5h2a3 3 0 016 0h2a5 5 0 00-5-5zm0 4a1 1 0 00-1 1h2a1 1 0 00-1-1zm-7 6h14v2H5z"/></svg>185        </div>186        Nearby187      </div>188    </div>189 190    <div class="helper">No recommended people to share with</div>191 192    <div class="apps">193      <div class="app">194        <div class="circle gmail">M</div>195        <div class="tag">Gmail</div>196      </div>197      <div class="app">198        <div class="circle messages">💬</div>199        <div class="tag">Messages</div>200      </div>201      <div class="app">202        <div class="circle drive">△</div>203        <div class="tag">Drive</div>204      </div>205      <div class="app">206        <div class="circle keep">🔆</div>207        <div class="tag">Keep Notes</div>208      </div>209    </div>210  </div>211 212</div>213</body>214</html>