GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>ACL American Eagle - UI Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11    box-shadow: 0 0 0 rgba(0,0,0,0);12  }13 14  /* Top app area */15  .app-header { background:#1f5b86; color:#fff; }16  .status-bar {17    height:80px; padding:0 32px;18    display:flex; align-items:center; justify-content:space-between;19    font-size:36px; letter-spacing:0.5px;20  }21  .status-icons { display:flex; gap:22px; align-items:center; }22  .status-dot { width:22px; height:22px; background:#fff; border-radius:50%; opacity:0.9; }23  .wifi { width:36px; height:28px; border:3px solid #fff; border-radius:6px; }24  .battery { width:48px; height:24px; border:3px solid #fff; border-radius:4px; position:relative; }25  .battery::after { content:""; position:absolute; right:-8px; top:7px; width:6px; height:10px; background:#fff; border-radius:2px; }26  .title-bar {27    height:120px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;28  }29  .page-title { font-size:56px; font-weight:600; }30  .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; border-radius:36px; }31  .icon-btn svg { width:44px; height:44px; fill:#fff; }32 33  .tabs {34    height:100px; display:flex; align-items:center; gap:48px; padding:0 32px; background:#1f5b86;35    border-bottom:1px solid rgba(255,255,255,0.25);36  }37  .tab { font-size:36px; color:#cfe5f6; letter-spacing:0.6px; }38  .tab.active { color:#ffffff; position:relative; }39  .tab.active::after {40    content:""; position:absolute; left:0; bottom:-18px; width:140px; height:8px; background:#ff9300; border-radius:4px;41  }42 43  /* Image banner */44  .banner {45    width:100%; height:760px; background:#E0E0E0; border:1px solid #BDBDBD;46    display:flex; align-items:center; justify-content:center; color:#757575; font-size:40px; text-transform:none;47  }48 49  /* Content section */50  .content { padding:36px; }51  .route-title { font-size:46px; font-weight:700; color:#333; line-height:1.2; margin-bottom:22px; }52  .date-row { display:flex; align-items:center; gap:18px; color:#666; font-size:34px; margin-bottom:28px; }53  .date-row svg { width:40px; height:40px; fill:#7a7a7a; }54 55  .track-btn {56    width:640px; height:110px; background:#71b241; border-radius:24px;57    display:flex; align-items:center; justify-content:center; gap:22px;58    color:#fff; font-size:42px; font-weight:700; margin:18px auto 40px;59    box-shadow:0 8px 0 rgba(0,0,0,0.06);60  }61  .track-btn svg { width:42px; height:42px; fill:#fff; }62 63  .paragraph { font-size:36px; line-height:1.55; color:#333; margin-bottom:28px; }64 65  /* Ad banner bottom */66  .ad-banner {67    position:absolute; left:0; bottom:0;68    width:100%; height:180px; background:#f3f7fb; border-top:1px solid #d5e3ef;69    display:flex; align-items:center; justify-content:space-between; padding:0 28px;70  }71  .ad-left { display:flex; align-items:center; gap:22px; color:#0b4e93; }72  .ad-title { font-size:40px; font-weight:700; color:#0b4e93; }73  .ad-sub { font-size:34px; color:#1f6ad2; }74  .ad-actions { display:flex; align-items:center; gap:22px; }75  .ad-close, .ad-share { width:56px; height:56px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#e6eef7; }76  .ad-close svg, .ad-share svg { width:34px; height:34px; fill:#1f6ad2; }77</style>78</head>79<body>80<div id="render-target">81 82  <!-- Header -->83  <div class="app-header">84    <div class="status-bar">85      <div class="time">10:46</div>86      <div class="status-icons">87        <div class="status-dot"></div>88        <div class="status-dot"></div>89        <div class="status-dot"></div>90        <div class="wifi"></div>91        <div class="battery"></div>92      </div>93    </div>94    <div class="title-bar">95      <div class="page-title">ACL American Eagle</div>96      <div class="icon-btn">97        <!-- Close Icon -->98        <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.3 1.3L10.7 13.3 4.4 19.6 3.1 18.3 9.4 12 3.1 5.7 4.4 4.4l6.3 6.3 6.3-6.3z"/></svg>99      </div>100    </div>101    <div class="tabs">102      <div class="tab active">REVIEW</div>103      <div class="tab">ITINERARIES</div>104      <div class="tab">SPECS</div>105      <div class="tab">DECKPLANS</div>106    </div>107  </div>108 109  <!-- Main banner -->110  <div class="banner">[IMG: Cruise Ship sailing on calm water]</div>111 112  <!-- Content -->113  <div class="content">114    <div class="route-title">One-way from Amelia Island FL to Charleston SC</div>115    <div class="date-row">116      <!-- Calendar icon -->117      <svg viewBox="0 0 24 24"><path d="M7 2h2v2h6V2h2v2h3v16H4V4h3V2zm13 6H4v12h16V8z"/></svg>118      <div>03 Nov, 2023 - 09 Nov, 2023 (6 days)</div>119    </div>120 121    <div class="track-btn">122      <!-- Paper plane icon -->123      <svg viewBox="0 0 24 24"><path d="M2 21l20-9-20-9 5 9-5 9zm7-7.5l-2.3-4.1L18 12 6.7 13.5z"/></svg>124      <div>Track on map</div>125    </div>126 127    <div class="paragraph">128      The 2023-built MS American Eagle cruise ship is the first in a 12-ship series (Project Blue/aka Coastal Cat) of catamaran-design newbuilds in the ACL-American Cruise Lines fleet. From this (new for ACL) class are the same designed catamarans/sisterships launched two per year - in 2023 (Eagle/August, Glory/November), 2024 (Liberty/June, Legend/October), 2025, 2026, 2027, and 2028.129    </div>130    <div class="paragraph">131      All ACL cruise ships are US-flagged and built by the company-owned Chesapeake Shipbuilding Yard in Salisbury MD (Maryland USA).132    </div>133    <div class="paragraph">134      Note: The 2023-built vessel (IMO/MMSI numbers 368317840) is not to be mistaken with the namesake "MS American Eagle" (2000-built), which operated under IMO 9270024.135    </div>136  </div>137 138  <!-- Ad banner -->139  <div class="ad-banner">140    <div class="ad-left">141      <div class="ad-title">Shine With Senco On Dhanteras</div>142      <div class="ad-sub">Senco Gold & Diamonds</div>143    </div>144    <div class="ad-actions">145      <div class="ad-close">146        <svg viewBox="0 0 24 24"><path d="M18.3 5.7L12 12l6.3 6.3-1.3 1.3L10.7 13.3 4.4 19.6 3.1 18.3 9.4 12 3.1 5.7 4.4 4.4l6.3 6.3 6.3-6.3z"/></svg>147      </div>148      <div class="ad-share">149        <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 0-2.8-4H15a3 3 0 0 0 .2 1l-7 4a3 3 0 1 0 0 6l7 4a3 3 0 0 0-.2 1h.2A3 3 0 1 0 18 16a3 3 0 0 0-2.8-2h-.2l-7-4 .2-1 .1-.1 6.7-3.8A3 3 0 0 0 18 8z"/></svg>150      </div>151    </div>152  </div>153 154</div>155</body>156</html>