GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Latina Stereo UI</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: linear-gradient(180deg, #A7A8AB 0%, #606468 40%, #3d3f42 70%, #2c2c2c 100%);11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:110px; color:#ffffff;17    padding:0 40px;18    display:flex; align-items:center; justify-content:space-between;19    font-size:38px; letter-spacing:1px;20    opacity:0.9;21  }22  .status-icons { display:flex; gap:26px; align-items:center; }23  .dot { width:10px; height:10px; background:#fff; border-radius:50%; opacity:0.7; }24  .icon-sml svg { width:40px; height:40px; }25 26  /* Back arrow */27  .back-btn {28    position:absolute; top:130px; left:40px;29    width:72px; height:72px; display:flex; align-items:center; justify-content:center;30    opacity:0.9;31  }32  .back-btn svg { width:54px; height:54px; }33 34  /* Card with logo */35  .logo-card {36    position:absolute; left:90px; top:260px;37    width:900px; height:900px;38    background:#ffffff; border-radius:40px;39    box-shadow: 0 20px 60px rgba(0,0,0,0.25);40    display:flex; align-items:center; justify-content:center;41  }42  .img-placeholder {43    width:820px; height:820px;44    background:#E0E0E0;45    border:1px solid #BDBDBD;46    color:#757575;47    display:flex; align-items:center; justify-content:center;48    text-align:center; font-size:42px; line-height:1.4;49    border-radius:24px;50  }51 52  .title {53    position:absolute; top:1210px; left:0; right:0;54    text-align:center; color:#ffffff; font-weight:700;55    font-size:74px;56  }57 58  /* Bottom controls */59  .controls {60    position:absolute; left:60px; right:60px; bottom:360px;61    display:flex; align-items:center; justify-content:space-between;62  }63  .ctrl {64    width:140px; height:140px; display:flex; align-items:center; justify-content:center;65  }66  .ctrl svg { width:120px; height:120px; }67 68  /* Big play button */69  .play-wrap {70    width:230px; height:230px; border-radius:50%;71    border:8px solid rgba(255,255,255,0.4);72    display:flex; align-items:center; justify-content:center;73  }74  .play-wrap svg { width:120px; height:120px; }75 76  /* Gesture bar */77  .gesture {78    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);79    width:520px; height:12px; background:#EDEDED; border-radius:8px; opacity:0.85;80  }81</style>82</head>83<body>84<div id="render-target">85 86  <!-- Status Bar -->87  <div class="status-bar">88    <div>9:20</div>89    <div class="status-icons">90      <div class="icon-sml">91        <!-- chat bubble -->92        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">93          <path d="M4 4h16v12H8l-4 4V4z"></path>94        </svg>95      </div>96      <div class="icon-sml">97        <!-- globe/circle -->98        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">99          <circle cx="12" cy="12" r="9"></circle>100          <path d="M3 12h18M12 3v18"></path>101        </svg>102      </div>103      <div class="icon-sml">104        <!-- ghost camera (snapchat like) -->105        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">106          <path d="M6 15c3 2 9 2 12 0v-6c0-3-2-5-6-5s-6 2-6 5v6z"></path>107        </svg>108      </div>109      <div class="icon-sml">110        <!-- coin $ -->111        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">112          <circle cx="12" cy="12" r="9"></circle>113          <path d="M12 6v12M9 10c0-1 1-2 3-2s3 1 3 2-1 2-3 2-3 1-3 2 1 2 3 2 3-1 3-2"></path>114        </svg>115      </div>116      <div class="dot"></div>117      <div class="icon-sml">118        <!-- mute -->119        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">120          <path d="M4 9v6h4l5 4V5L8 9H4z"></path>121          <path d="M16 9l4 4m0-4l-4 4"></path>122        </svg>123      </div>124      <div class="icon-sml">125        <!-- wifi -->126        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">127          <path d="M2 8c5-4 15-4 20 0"></path>128          <path d="M5 12c3-3 11-3 14 0"></path>129          <path d="M8 16c2-2 6-2 8 0"></path>130          <circle cx="12" cy="19" r="1.5" fill="#fff"></circle>131        </svg>132      </div>133      <div class="icon-sml">134        <!-- battery -->135        <svg viewBox="0 0 28 24" fill="none" stroke="#fff" stroke-width="2">136          <rect x="2" y="6" width="20" height="12" rx="2"></rect>137          <rect x="23" y="10" width="3" height="4"></rect>138          <rect x="4" y="8" width="14" height="8" fill="#fff"></rect>139        </svg>140      </div>141    </div>142  </div>143 144  <!-- Back arrow -->145  <div class="back-btn">146    <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">147      <path d="M15 18l-6-6 6-6"></path>148    </svg>149  </div>150 151  <!-- Logo Card -->152  <div class="logo-card">153    <div class="img-placeholder">[IMG: Latina Stereo Radio Station Logo]</div>154  </div>155 156  <!-- Title -->157  <div class="title">Latina Stereo</div>158 159  <!-- Controls -->160  <div class="controls">161    <!-- Info -->162    <div class="ctrl">163      <svg viewBox="0 0 100 100" fill="none" stroke="#ffffff" stroke-width="6">164        <circle cx="50" cy="50" r="40"></circle>165        <circle cx="50" cy="32" r="5" fill="#fff"></circle>166        <rect x="46" y="44" width="8" height="28" fill="#fff"></rect>167      </svg>168    </div>169 170    <!-- Heart -->171    <div class="ctrl">172      <svg viewBox="0 0 120 120" fill="none" stroke="#ffffff" stroke-width="6">173        <path d="M60 98s-30-18-38-34c-7-14 3-30 20-30 10 0 16 6 18 12 2-6 8-12 18-12 17 0 27 16 20 30-8 16-38 34-38 34z"></path>174      </svg>175    </div>176 177    <!-- Play -->178    <div class="play-wrap">179      <svg viewBox="0 0 120 120" fill="none">180        <circle cx="60" cy="60" r="52" stroke="rgba(255,255,255,0.6)" stroke-width="8"></circle>181        <polygon points="48,36 92,60 48,84" fill="#ffffff"></polygon>182      </svg>183    </div>184 185    <!-- Add Music -->186    <div class="ctrl">187      <svg viewBox="0 0 120 120" fill="none" stroke="#ffffff" stroke-width="6">188        <!-- plus -->189        <path d="M20 62h32M36 46v32"></path>190        <!-- musical note -->191        <path d="M78 30v40"></path>192        <path d="M96 34v40"></path>193        <circle cx="74" cy="78" r="10" fill="#fff"></circle>194        <circle cx="92" cy="82" r="10" fill="#fff"></circle>195      </svg>196    </div>197 198    <!-- More -->199    <div class="ctrl">200      <svg viewBox="0 0 120 120" fill="#ffffff">201        <circle cx="34" cy="60" r="10"></circle>202        <circle cx="60" cy="60" r="10"></circle>203        <circle cx="86" cy="60" r="10"></circle>204      </svg>205    </div>206  </div>207 208  <!-- Bottom gesture bar -->209  <div class="gesture"></div>210 211</div>212</body>213</html>