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>Settings Screen Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #2f2f2f;20    color: #ffffff;21  }22  .appbar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 280px;28    background: #3f79ff;29  }30  .title {31    position: absolute;32    left: 48px;33    bottom: 24px;34    font-size: 88px;35    font-weight: 700;36    color: #0d0d0d;37  }38  .content {39    position: absolute;40    top: 280px;41    left: 0;42    right: 0;43    bottom: 0;44  }45  .row-highlight {46    height: 120px;47    background: #3a3a3a;48    border-top: 1px solid #5b5b5b;49    border-bottom: 1px solid #5b5b5b;50    display: flex;51    align-items: center;52    padding: 0 48px;53    font-size: 46px;54    font-weight: 600;55    color: #eaeaea;56  }57  .section {58    padding: 52px 48px 12px 48px;59    color: #5f8dff;60    font-size: 40px;61    font-weight: 700;62  }63  .item {64    padding: 28px 48px;65    font-size: 48px;66    color: #ffffff;67  }68  .divider {69    height: 2px;70    background: #5a5a5a;71    margin: 24px 0 12px 0;72  }73  .footer {74    padding: 40px 48px 0 48px;75    font-size: 34px;76    color: #bdbdbd;77  }78  .nav-pill {79    position: absolute;80    bottom: 40px;81    left: 50%;82    transform: translateX(-50%);83    width: 240px;84    height: 12px;85    background: #e9e9e9;86    border-radius: 12px;87  }88</style>89</head>90<body>91<div id="render-target">92  <div class="appbar">93    <div class="title">Settings</div>94  </div>95 96  <div class="content">97    <div class="row-highlight">Merchandise</div>98 99    <div class="section">Social</div>100    <div class="item">Twitter</div>101    <div class="item">Facebook</div>102    <div class="item">Instagram</div>103    <div class="item">Reddit</div>104    <div class="item">Mailing list</div>105 106    <div class="divider"></div>107 108    <div class="section">Legal</div>109    <div class="item">Privacy policy</div>110    <div class="item">Terms of use</div>111 112    <div class="divider"></div>113 114    <div class="section">Support</div>115    <div class="item">Help</div>116    <div class="item">Feedback</div>117    <div class="item">Acknowledgments</div>118 119    <div class="footer">Version 2.5.2.70 • Powered by Foreca</div>120  </div>121 122  <div class="nav-pill"></div>123</div>124</body>125</html>