GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Skeleton Feed UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #FFFFFF;14  }15 16  /* Top status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 150px;23    background: #3a3a3a;24    color: #fff;25  }26  .status-inner {27    height: 100%;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 40px;32  }33  .status-left, .status-right {34    display: flex;35    align-items: center;36  }37  .time {38    font-size: 46px;39    font-weight: 600;40    margin-right: 28px;41    letter-spacing: 0.5px;42  }43  .icon {44    width: 48px;45    height: 48px;46    margin-right: 26px;47  }48  .status-right .icon { margin-left: 26px; margin-right: 0; }49 50  /* Content area */51  .content {52    position: absolute;53    top: 150px;54    left: 0;55    right: 0;56    bottom: 150px;57    padding: 40px;58  }59 60  /* Skeleton search bars */61  .pill {62    height: 28px;63    border-radius: 20px;64    background: #F3F3F3;65    margin: 18px 0;66  }67  .pill.long { width: 880px; }68  .pill.short { width: 580px; }69 70  /* Large feed cards */71  .card {72    width: 1000px;73    height: 420px;74    border-radius: 28px;75    background: #FBFBFB;76    border: 1px solid #F0F0F0;77    margin: 54px 0;78    display: flex;79    align-items: center;80    justify-content: center;81    color: #B8B8B8;82    font-size: 36px;83  }84 85  /* Bottom gesture/navigation bar */86  .bottom-bar {87    position: absolute;88    bottom: 0;89    left: 0;90    width: 1080px;91    height: 150px;92    background: #3a3a3a;93  }94  .gesture-pill {95    position: absolute;96    left: 50%;97    bottom: 38px;98    transform: translateX(-50%);99    width: 280px;100    height: 12px;101    background: #DADADA;102    border-radius: 12px;103    opacity: 0.95;104  }105</style>106</head>107<body>108<div id="render-target">109  <!-- Top dark status bar -->110  <div class="status-bar">111    <div class="status-inner">112      <div class="status-left">113        <div class="time">8:43</div>114        <!-- Mail icon -->115        <svg class="icon" viewBox="0 0 24 24">116          <rect x="3" y="5" width="18" height="14" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"></rect>117          <path d="M3 7l9 6 9-6" fill="none" stroke="#FFFFFF" stroke-width="2"></path>118        </svg>119        <!-- Sun icon -->120        <svg class="icon" viewBox="0 0 24 24">121          <circle cx="12" cy="12" r="4" fill="none" stroke="#FFFFFF" stroke-width="2"></circle>122          <g stroke="#FFFFFF" stroke-width="2">123            <line x1="12" y1="2" x2="12" y2="5"></line>124            <line x1="12" y1="19" x2="12" y2="22"></line>125            <line x1="2" y1="12" x2="5" y2="12"></line>126            <line x1="19" y1="12" x2="22" y2="12"></line>127            <line x1="4.5" y1="4.5" x2="6.5" y2="6.5"></line>128            <line x1="17.5" y1="17.5" x2="19.5" y2="19.5"></line>129            <line x1="17.5" y1="6.5" x2="19.5" y2="4.5"></line>130            <line x1="4.5" y1="19.5" x2="6.5" y2="17.5"></line>131          </g>132        </svg>133      </div>134      <div class="status-right">135        <!-- WiFi icon -->136        <svg class="icon" viewBox="0 0 24 24">137          <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#FFFFFF" stroke-width="2"></path>138          <path d="M5 12c3-3 11-3 14 0" fill="none" stroke="#FFFFFF" stroke-width="2"></path>139          <path d="M9 16c2-2 4-2 6 0" fill="none" stroke="#FFFFFF" stroke-width="2"></path>140          <circle cx="12" cy="19" r="1.5" fill="#FFFFFF"></circle>141        </svg>142        <!-- Battery charging icon -->143        <svg class="icon" viewBox="0 0 24 24">144          <rect x="3" y="6" width="17" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"></rect>145          <rect x="20.5" y="10" width="2" height="4" fill="#FFFFFF"></rect>146          <path d="M11 8l-2 4h3l-1 4 4-5h-3l1-3z" fill="#FFFFFF"></path>147        </svg>148      </div>149    </div>150  </div>151 152  <!-- Content area with light placeholders -->153  <div class="content">154    <div class="pill long"></div>155    <div class="pill short" style="margin-top: 22px;"></div>156 157    <div class="card">Card Placeholder</div>158    <div class="card">Card Placeholder</div>159    <div class="card">Card Placeholder</div>160  </div>161 162  <!-- Bottom navigation gesture area -->163  <div class="bottom-bar">164    <div class="gesture-pill"></div>165  </div>166</div>167</body>168</html>