GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>New Playlist UI</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;}7  #render-target{8    position: relative;9    width:1080px;10    height:2400px;11    overflow:hidden;12    background:#000;13    color:#fff;14  }15 16  /* Status bar */17  .status-bar{18    position:absolute; left:0; top:0;19    width:100%; height:90px;20    display:flex; align-items:center; justify-content:space-between;21    padding:0 34px;22    color:#fff; font-size:30px; letter-spacing:0.5px;23  }24  .status-right{display:flex; align-items:center; gap:18px; font-size:28px; opacity:0.9;}25  .sb-icon{width:34px;height:34px; display:inline-block;}26  .battery{27    width:54px;height:24px;border:2px solid #fff;border-radius:5px;position:relative;display:inline-block;28  }29  .battery:after{30    content:""; position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#fff; border-radius:1px;31  }32  .battery .level{position:absolute; left:2px; top:2px; bottom:2px; width:42px; background:#fff; border-radius:3px;}33  /* Top app bar */34  .app-bar{35    position:absolute; left:0; top:90px; width:100%; height:118px;36    display:flex; align-items:center; justify-content:space-between;37    padding:0 32px;38  }39  .title{font-size:56px; font-weight:700;}40  .close-btn{41    width:60px;height:60px; display:flex; align-items:center; justify-content:center;42  }43  .create-text{color:#f7a94a; font-size:42px; font-weight:700;}44  .label{45    position:absolute; left:32px; top:260px; color:#9aa0a6; font-size:26px; letter-spacing:4px;46  }47  .input{48    position:absolute; left:32px; top:308px; width:1016px; height:140px;49    background:#1c1c1c; border:1px solid #2a2a2a; border-radius:16px;50    display:flex; align-items:center; padding:0 32px; font-size:46px;51  }52 53  /* Keyboard */54  .keyboard{55    position:absolute; left:0; bottom:0; width:100%; height:880px;56    background:#121718; border-top:1px solid #1e2526;57    box-shadow:0 -8px 30px rgba(0,0,0,0.35) inset;58  }59  .kb-suggestions{60    height:96px; border-bottom:1px solid #1e2526;61    display:flex; align-items:center; padding:0 22px; color:#c6d0d2; font-size:36px; gap:26px;62  }63  .grid9{64    width:60px; height:60px; display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;65  }66  .grid9 span{background:#2a3133; border-radius:4px;}67  .kb-suggestions .sep{opacity:0.55;}68  .kb-right{margin-left:auto; display:flex; align-items:center; gap:26px;}69  .mic{width:48px;height:48px}70  .kb-rows{padding:18px 18px 22px 18px;}71  .row{display:flex; justify-content:center; gap:18px; margin:16px 0;}72  .key{73    background:#252c2e; color:#dce6e7; min-width:90px; height:120px; border-radius:22px;74    display:flex; align-items:center; justify-content:center; font-size:44px; box-shadow:inset 0 -4px 0 rgba(0,0,0,0.35);75  }76  .key.dark{background:#1e2426;}77  .spacer{width:30px;}78  .wide{min-width:470px;}79  .enter{background:#69e6b9; color:#073b2b; font-weight:700;}80  .icon-small{width:42px;height:42px; display:flex; align-items:center; justify-content:center;}81</style>82</head>83<body>84<div id="render-target">85 86  <!-- Status Bar -->87  <div class="status-bar">88    <div class="status-left">11:51</div>89    <div class="status-right">90      <!-- minimal icons -->91      <svg class="sb-icon" viewBox="0 0 24 24" fill="#fff"><path d="M12 3L1 14h4v7h6v-5h2v5h6v-7h4z"/></svg>92      <svg class="sb-icon" viewBox="0 0 24 24" fill="#fff"><path d="M2 18h2a8 8 0 0 1 16 0h2A10 10 0 0 0 2 18zm6 0h2a4 4 0 0 1 8 0h2a6 6 0 0 0-12 0z"/></svg>93      <div class="battery"><div class="level"></div></div>94      <div>100%</div>95    </div>96  </div>97 98  <!-- Top App Bar -->99  <div class="app-bar">100    <div class="close-btn">101      <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff">102        <path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>103      </svg>104    </div>105    <div class="title">New Playlist</div>106    <div class="create-text">Create</div>107  </div>108 109  <!-- Label and Input -->110  <div class="label">PLAYLIST NAME</div>111  <div class="input">Classical Music</div>112 113  <!-- Keyboard -->114  <div class="keyboard">115    <div class="kb-suggestions">116      <div class="grid9">117        <span></span><span></span><span></span>118        <span></span><span></span><span></span>119        <span></span><span></span><span></span>120      </div>121      <div>Music</div>122      <div class="sep">|</div>123      <div>Musicians</div>124      <div class="sep">|</div>125      <div>🎵</div>126      <div>🎶</div>127      <div class="kb-right">128        <svg class="mic" viewBox="0 0 24 24" fill="#d7e0df">129          <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/>130        </svg>131      </div>132    </div>133 134    <div class="kb-rows">135      <div class="row">136        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>137        <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>138      </div>139      <div class="row" style="padding:0 40px;">140        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>141        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>142      </div>143      <div class="row" style="padding:0 100px;">144        <div class="key dark">⇧</div>145        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>146        <div class="key dark">147          <svg class="icon-small" viewBox="0 0 24 24" fill="#dce6e7"><path d="M16 9v2H8V9H6v6h2v-2h8v2h2V9z"/></svg>148        </div>149      </div>150      <div class="row" style="padding:0 18px;">151        <div class="key dark" style="min-width:150px">?123</div>152        <div class="key">,</div>153        <div class="key">☺</div>154        <div class="key wide"> </div>155        <div class="key">.</div>156        <div class="key enter" style="min-width:150px">✓</div>157      </div>158    </div>159  </div>160 161</div>162</body>163</html>