GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Trash Screen</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:#FAFAFB;10  }11 12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; right:0;15    height:90px; padding:0 32px;16    display:flex; align-items:center; justify-content:space-between;17    color:#222;18    font-size:32px;19  }20  .status-icons { display:flex; gap:22px; align-items:center; color:#555; }21 22  /* Header */23  .header {24    position:absolute; top:90px; left:0; right:0;25    background:#ECEEE9;26    height:180px; display:flex; align-items:center;27    padding:0 32px;28    box-sizing:border-box;29  }30  .header .title {31    font-size:54px; color:#222; margin-left:24px;32  }33  .header .spacer { flex:1; }34  .icon-btn { width:76px; height:76px; display:flex; align-items:center; justify-content:center; }35 36  /* Info bar */37  .info-bar {38    position:absolute; top:270px; left:0; right:0;39    height:120px; background:#ECEEE9;40    display:flex; align-items:center; gap:24px;41    padding:0 40px; box-sizing:border-box;42    color:#444; font-size:36px;43    border-top:1px solid #E2E5DF;44  }45 46  /* Center illustration placeholder */47  .illustration {48    position:absolute; left:50%; transform:translateX(-50%);49    top:970px; width:420px; height:440px;50    background:#E0E0E0; border:1px solid #BDBDBD; border-radius:8px;51    display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; font-size:28px;52  }53 54  /* Empty state texts */55  .title-main {56    position:absolute; left:0; right:0; top:1440px;57    text-align:center; font-size:56px; color:#1a1a1a; font-weight:600;58  }59  .subtitle {60    position:absolute; left:120px; right:120px; top:1550px;61    text-align:center; font-size:36px; color:#555; line-height:1.4;62  }63 64  /* Snackbar */65  .snackbar {66    position:absolute; left:24px; right:24px; bottom:140px;67    height:120px; background:#272727; border-radius:18px;68    display:flex; align-items:center; justify-content:space-between;69    padding:0 34px; box-sizing:border-box; color:#FFF;70    box-shadow:0 6px 14px rgba(0,0,0,0.25);71  }72  .snackbar .msg { font-size:40px; }73  .snackbar .action { font-size:42px; color:#C7E77A; font-weight:600; }74 75  /* Gesture bar */76  .gesture {77    position:absolute; bottom:46px; left:50%; transform:translateX(-50%);78    width:360px; height:12px; background:#BDBDBD; border-radius:8px;79  }80 81  /* Simple reset for svgs */82  svg { width:48px; height:48px; }83</style>84</head>85<body>86<div id="render-target">87 88  <!-- Status Bar -->89  <div class="status-bar">90    <div>9:06</div>91    <div class="status-icons">92      <span>△</span>93      <span>📶</span>94      <span>🔋</span>95    </div>96  </div>97 98  <!-- Header with back, title, search -->99  <div class="header">100    <div class="icon-btn">101      <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">102        <path d="M15 18l-6-6 6-6"/>103      </svg>104    </div>105    <div class="title">Trash</div>106    <div class="spacer"></div>107    <div class="icon-btn">108      <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">109        <circle cx="11" cy="11" r="7"></circle>110        <path d="M20 20l-3.5-3.5"></path>111      </svg>112    </div>113  </div>114 115  <!-- Info Bar -->116  <div class="info-bar">117    <svg viewBox="0 0 24 24" fill="none" stroke="#4B4B4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">118      <path d="M3 6h18"></path>119      <path d="M8 6l1-2h6l1 2"></path>120      <path d="M6 6l1 14h10l1-14"></path>121    </svg>122    <div>Items are deleted forever after 30 days.</div>123  </div>124 125  <!-- Illustration placeholder -->126  <div class="illustration">[IMG: Empty trash can illustration]</div>127 128  <!-- Empty state text -->129  <div class="title-main">Nothing in Trash</div>130  <div class="subtitle">131    Move items you don't need to Trash. Items in Trash will be deleted132    forever after 30 days.133  </div>134 135  <!-- Snackbar -->136  <div class="snackbar">137    <div class="msg">1 item restored</div>138    <div class="action">Undo</div>139  </div>140 141  <!-- Gesture Bar -->142  <div class="gesture"></div>143 144</div>145</body>146</html>