GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Daily News Splash</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 20px;19    left: 0;20    right: 0;21    height: 90px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 40px;26    color: #6b6b6b;27    font-family: Arial, Helvetica, sans-serif;28  }29  .status-left, .status-right {30    display: flex;31    align-items: center;32    gap: 28px;33  }34  .time {35    font-size: 36px;36    letter-spacing: 1px;37  }38  .icon {39    width: 40px;40    height: 40px;41  }42 43  /* Logo area */44  .logo-wrap {45    position: absolute;46    top: 1180px;47    width: 100%;48    text-align: center;49  }50  .brand {51    font-family: "Times New Roman", Georgia, serif;52    font-weight: 700;53    color: #101010;54    font-size: 150px;55    letter-spacing: 3px;56    display: inline-flex;57    align-items: center;58  }59  .brand span {60    display: inline-block;61  }62  .red-mark {63    width: 92px;64    height: 92px;65    display: inline-flex;66    align-items: center;67    justify-content: center;68    margin: 0 28px;69  }70  .date {71    margin-top: 36px;72    font-family: Arial, Helvetica, sans-serif;73    font-size: 56px;74    color: #8d8d8d;75  }76 77  /* Bottom gesture bar */78  .gesture-bar {79    position: absolute;80    bottom: 42px;81    left: 50%;82    transform: translateX(-50%);83    width: 500px;84    height: 14px;85    background: #b9b9b9;86    border-radius: 10px;87  }88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Status Bar -->94  <div class="status-bar">95    <div class="status-left">96      <div class="time">7:38</div>97      <!-- Lock icon -->98      <svg class="icon" viewBox="0 0 24 24">99        <path fill="#707070" d="M6 10h12v10H6z"></path>100        <path fill="#707070" d="M8 10V7a4 4 0 118 0v3h-2V7a2 2 0 10-4 0v3H8z"></path>101      </svg>102      <!-- Do not disturb (circle with slash) -->103      <svg class="icon" viewBox="0 0 24 24">104        <circle cx="12" cy="12" r="10" fill="none" stroke="#707070" stroke-width="2"></circle>105        <path d="M5 19L19 5" stroke="#707070" stroke-width="2"></path>106      </svg>107      <!-- Simple user icon -->108      <svg class="icon" viewBox="0 0 24 24">109        <circle cx="12" cy="9" r="4" fill="#707070"></circle>110        <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#707070" stroke-width="2"></path>111      </svg>112      <!-- Another user icon -->113      <svg class="icon" viewBox="0 0 24 24">114        <circle cx="12" cy="9" r="4" fill="#707070"></circle>115        <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#707070" stroke-width="2"></path>116      </svg>117      <!-- Small dot -->118      <svg class="icon" viewBox="0 0 24 24">119        <circle cx="12" cy="12" r="4" fill="#707070"></circle>120      </svg>121    </div>122    <div class="status-right">123      <!-- WiFi icon -->124      <svg class="icon" viewBox="0 0 24 24">125        <path d="M2 8c5-5 15-5 20 0" fill="none" stroke="#707070" stroke-width="2" stroke-linecap="round"></path>126        <path d="M5 11c4-4 10-4 14 0" fill="none" stroke="#707070" stroke-width="2" stroke-linecap="round"></path>127        <path d="M8 14c3-3 5-3 8 0" fill="none" stroke="#707070" stroke-width="2" stroke-linecap="round"></path>128        <circle cx="12" cy="17" r="1.8" fill="#707070"></circle>129      </svg>130      <!-- Battery icon -->131      <svg class="icon" viewBox="0 0 24 24">132        <rect x="3" y="6" width="17" height="12" rx="2" ry="2" fill="none" stroke="#707070" stroke-width="2"></rect>133        <rect x="20" y="10" width="2" height="4" fill="#707070"></rect>134        <rect x="5" y="8" width="12" height="8" fill="#707070"></rect>135      </svg>136    </div>137  </div>138 139  <!-- Logo and date -->140  <div class="logo-wrap">141    <div class="brand">142      <span>DAILY</span>143      <span class="red-mark">144        <!-- simple red maze-like square -->145        <svg viewBox="0 0 100 100" width="92" height="92">146          <rect x="10" y="10" width="80" height="80" rx="6" ry="6" fill="none" stroke="#d53939" stroke-width="6"></rect>147          <rect x="26" y="26" width="48" height="48" rx="4" ry="4" fill="none" stroke="#d53939" stroke-width="6"></rect>148          <rect x="40" y="40" width="20" height="20" fill="none" stroke="#d53939" stroke-width="6"></rect>149        </svg>150      </span>151      <span>NEWS</span>152    </div>153    <div class="date">Thursday, September 07, 2023</div>154  </div>155 156  <!-- Gesture bar -->157  <div class="gesture-bar"></div>158</div>159</body>160</html>