GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Add Activity 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;position:relative;overflow:hidden;9    background:#121212;color:#fff;10  }11  /* Status bar */12  .status-bar{13    position:absolute;top:0;left:0;width:100%;height:100px;14    padding:0 32px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;15    color:#ffffff;opacity:0.9;font-size:34px;16  }17  .status-right{display:flex;align-items:center;gap:22px;font-size:28px;color:#bdbdbd;}18  .dot{width:14px;height:14px;background:#bdbdbd;border-radius:50%;}19  /* App bar */20  .app-bar{21    position:absolute;top:100px;left:0;width:100%;22    height:120px;padding:0 24px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;23  }24  .icon-btn{width:88px;height:88px;border-radius:44px;display:flex;align-items:center;justify-content:center;}25  .app-actions{display:flex;align-items:center;gap:26px;font-size:40px;color:#89a7ff;}26  .title-big{27    position:absolute;top:220px;left:40px;font-size:68px;font-weight:600;letter-spacing:0.5px;28  }29  /* List */30  .list{31    position:absolute;top:360px;left:0;width:100%;32    border-top:1px solid #2a2a2a;33  }34  .row{35    height:130px;display:flex;align-items:center;justify-content:space-between;36    padding:0 40px;border-bottom:1px solid #2a2a2a;box-sizing:border-box;37  }38  .label{font-size:40px;color:#cfcfcf;}39  .value{font-size:40px;color:#9fb3ff;}40  .value.light{color:#9e9e9e;}41  .value.white{color:#ffffff;}42  /* Notes */43  .notes{height:220px;display:flex;align-items:center;padding:0 40px;border-bottom:1px solid #2a2a2a;box-sizing:border-box;}44  /* Gesture bar */45  .gesture{46    position:absolute;bottom:36px;left:50%;transform:translateX(-50%);47    width:300px;height:10px;background:#e0e0e0;border-radius:6px;opacity:0.85;48  }49  /* Simple SVG icons */50  svg{fill:none;stroke:#ffffff;stroke-width:10px;}51  .kebab svg{stroke:#bdbdbd;}52</style>53</head>54<body>55<div id="render-target">56 57  <!-- Status Bar -->58  <div class="status-bar">59    <div class="left-time">8:41</div>60    <div class="status-right">61      <div class="dot"></div>62      <div class="dot"></div>63      <div class="dot"></div>64      <span>68%</span>65    </div>66  </div>67 68  <!-- App Bar -->69  <div class="app-bar">70    <div class="icon-btn">71      <svg width="44" height="44" viewBox="0 0 44 44">72        <line x1="6" y1="6" x2="38" y2="38"></line>73        <line x1="38" y1="6" x2="6" y2="38"></line>74      </svg>75    </div>76    <div class="app-actions">77      <span style="color:#89a7ff;">Save</span>78      <div class="kebab">79        <svg width="40" height="40" viewBox="0 0 40 40">80          <circle cx="20" cy="8" r="4"></circle>81          <circle cx="20" cy="20" r="4"></circle>82          <circle cx="20" cy="32" r="4"></circle>83        </svg>84      </div>85    </div>86  </div>87 88  <!-- Large Title -->89  <div class="title-big">Add activity</div>90 91  <!-- List Sections -->92  <div class="list">93    <div class="row">94      <div class="label">Title</div>95      <div class="value light">Add</div>96    </div>97    <div class="row">98      <div class="label">Activity</div>99      <div class="value white">Walking</div>100    </div>101    <div class="row">102      <div class="label">Start</div>103      <div class="value white">Today&nbsp;&nbsp;&nbsp;8:11 PM</div>104    </div>105    <div class="row">106      <div class="label">Duration</div>107      <div class="value white">30 min</div>108    </div>109 110    <div class="row">111      <div class="label">Intensity</div>112      <div class="value light">Add Heart Pts</div>113    </div>114    <div class="row">115      <div class="label">Distance</div>116      <div class="value light">Add mi</div>117    </div>118    <div class="row">119      <div class="label">Energy expended</div>120      <div class="value light">Add Cal</div>121    </div>122    <div class="row">123      <div class="label">Steps</div>124      <div class="value light">Add steps</div>125    </div>126 127    <div class="notes">128      <div class="label">Add notes</div>129    </div>130  </div>131 132  <!-- Gesture bar -->133  <div class="gesture"></div>134 135</div>136</body>137</html>