GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Conception - Result</title>7<style>8  body{margin:0;padding:0;background:transparent;}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;11    background:#ffffff;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13    color:#222;14  }15  /* Status bar */16  .status-bar{17    height:100px;background:#000;color:#fff;18    display:flex;align-items:center;justify-content:space-between;19    padding:0 36px;box-sizing:border-box;font-weight:600;font-size:44px;20  }21  .status-icons{display:flex;align-items:center;gap:26px;}22  .sb-dot{width:10px;height:10px;background:#fff;border-radius:50%;}23  .icon-rect{width:40px;height:32px;border:3px solid #fff;border-radius:4px;}24  .icon-triangle{25    width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;26    border-top:36px solid #fff;27  }28  .icon-battery{29    width:54px;height:28px;border:3px solid #fff;border-radius:4px;position:relative;30  }31  .icon-battery:after{32    content:'';position:absolute;right:-8px;top:7px;width:6px;height:14px;background:#fff;border-radius:2px;33  }34 35  /* App bar */36  .app-bar{37    height:140px;background:#fff;display:flex;align-items:center;38    padding:0 24px 0 12px;box-sizing:border-box;border-bottom:1px solid #e6e6e6;39  }40  .app-left, .app-right{display:flex;align-items:center;}41  .app-left{gap:24px;flex:1;}42  .app-title{font-size:52px;color:#2b2b2b;}43  .icon-btn{width:96px;height:96px;display:flex;align-items:center;justify-content:center;}44  .app-right{gap:6px;}45 46  /* Content */47  .content{48    position:absolute;left:0;right:0;top:240px;bottom:120px;49    background:#f3f3f3;overflow:hidden;50  }51  .inner{52    height:100%;overflow-y:auto;box-sizing:border-box;53    padding:36px 48px 140px 48px;54  }55  .section-head{56    display:flex;align-items:center;justify-content:space-between;57    margin:12px 0 26px 0;58  }59  .section-title{60    font-size:30px;letter-spacing:1px;color:#8c8c8c;font-weight:700;61  }62  .pill-btn{63    padding:18px 34px;border:1px solid #c9c9c9;border-radius:18px;64    background:#ffffff;color:#4e4e4e;font-weight:600;font-size:34px;65    box-shadow:0 1px 0 rgba(0,0,0,0.03) inset;66  }67 68  .result-item{margin-top:18px;margin-bottom:18px;}69  .result-header{display:flex;align-items:flex-start;gap:16px;}70  .search-icon{71    width:44px;height:44px;border-radius:50%;border:2px solid #9e9e9e;position:relative;margin-top:6px;72  }73  .search-icon:after{74    content:'';position:absolute;right:-6px;bottom:-6px;width:18px;height:3px;background:#9e9e9e;transform:rotate(45deg);75    border-radius:2px;76  }77  .result-title{font-size:40px;font-weight:700;color:#2b2b2b;}78  .result-sub{font-size:28px;color:#8c8c8c;margin-top:6px;}79  .excerpt{80    margin-top:28px;color:#2b2b2b;font-family: Georgia, "Times New Roman", serif;81    font-size:44px;line-height:1.8;letter-spacing:0.2px;82  }83  .hl{84    background:#4b95d9;color:#fff;border-radius:6px;padding:6px 10px;85  }86 87  /* Bottom gesture bar */88  .gesture{89    position:absolute;left:50%;transform:translateX(-50%);90    bottom:34px;width:360px;height:16px;background:#bdbdbd;border-radius:12px;91  }92 93  /* Scrollbar minimal style (optional) */94  .inner::-webkit-scrollbar{width:10px;}95  .inner::-webkit-scrollbar-thumb{background:#d8d8d8;border-radius:6px;}96</style>97</head>98<body>99<div id="render-target">100  <!-- Status Bar -->101  <div class="status-bar">102    <div class="sb-time">6:21</div>103    <div class="status-icons">104      <div class="sb-dot"></div>105      <div class="icon-rect"></div>106      <div class="icon-rect" style="width:44px;height:44px;border-radius:8px;"></div>107      <div class="icon-rect" style="width:40px;height:40px;border-radius:50%;"></div>108      <div class="icon-triangle"></div>109      <div class="icon-battery"></div>110    </div>111  </div>112 113  <!-- App Bar -->114  <div class="app-bar">115    <div class="app-left">116      <div class="icon-btn" aria-label="Back">117        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">118          <path d="M15 18l-6-6 6-6" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>119        </svg>120      </div>121      <div class="app-title">Conception</div>122    </div>123    <div class="app-right">124      <div class="icon-btn" aria-label="Close">125        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">126          <path d="M6 6l12 12M18 6l-12 12" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round"/>127        </svg>128      </div>129      <div class="icon-btn" aria-label="More">130        <svg width="56" height="56" viewBox="0 0 24 24" fill="#5a5a5a">131          <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>132        </svg>133      </div>134    </div>135  </div>136 137  <!-- Content -->138  <div class="content">139    <div class="inner">140      <div class="section-head">141        <div class="section-title">1 RESULT IN THIS BOOK</div>142        <button class="pill-btn">Search web</button>143      </div>144 145      <div class="result-item">146        <div class="result-header">147          <div class="search-icon" aria-hidden="true"></div>148          <div>149            <div class="result-title">Introduction</div>150            <div class="result-sub">at page 12</div>151          </div>152        </div>153 154        <div class="excerpt">155          The Grapes of Wrath has also been translated into nearly thirty languages.156          It seems that Steinbeck’s words continue, in Warren French’s apt phrase, “the education of the heart.”157          Every strong novel redefines our <span class="hl">conception</span> of the genre’s dimensions and reorders our158          awareness of its possibilities. Like other products of rough-hewn American genius—Harriet Beecher Stowe’s Uncle159          Tom’s Cabin, Mark Twain’s Adventures of Huckleberry Finn, and Alice Walker’s The Color Purple (three other “flawed”160          novels that also humanize America’s downtrodden by exposing social ills)—The Grapes of Wrath has a home-grown161          quality: part naturalistic epic, part jeremiad, part captivity narrative, part road novel, part transcendental gospel.162        </div>163      </div>164    </div>165  </div>166 167  <!-- Bottom gesture pill -->168  <div class="gesture"></div>169</div>170</body>171</html>