GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=device-width, initial-scale=1.0"/>6<title>Sign In Options</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;16    color: #111;17  }18 19  .content {20    padding: 120px 48px 0 56px; /* top padding leaves space similar to status bar */21  }22 23  h1 {24    margin: 40px 0 24px 0;25    font-size: 64px;26    font-weight: 800;27    letter-spacing: 0.5px;28  }29 30  .divider {31    height: 2px;32    background: #ECEFF1;33    margin: 12px 0;34  }35 36  .option {37    display: flex;38    align-items: center;39    padding: 34px 0;40  }41 42  .label {43    font-size: 44px;44    color: #111;45  }46 47  /* Icons */48  .icon {49    width: 104px;50    height: 104px;51    margin-right: 36px;52    flex: 0 0 auto;53  }54 55  /* Footer terms */56  .terms {57    position: absolute;58    left: 56px;59    right: 56px;60    bottom: 160px;61    font-size: 34px;62    color: #4a4a4a;63    line-height: 1.4;64  }65  .terms a {66    color: #000;67    text-decoration: underline;68    font-weight: 700;69  }70 71  /* Gesture bar mimic */72  .gesture {73    position: absolute;74    left: 50%;75    bottom: 64px;76    transform: translateX(-50%);77    width: 320px;78    height: 12px;79    background: #BDBDBD;80    border-radius: 8px;81    opacity: 0.8;82  }83</style>84</head>85<body>86<div id="render-target">87  <div class="content">88    <h1>SIGN IN WITH</h1>89    <div class="divider"></div>90 91    <!-- Facebook -->92    <div class="option">93      <svg class="icon" viewBox="0 0 100 100" aria-label="Facebook icon">94        <rect x="0" y="0" width="100" height="100" rx="12" fill="#1877F2"></rect>95        <text x="52" y="70" text-anchor="middle" font-size="72" font-family="Arial Black, Arial" fill="#FFFFFF">f</text>96      </svg>97      <div class="label">Facebook</div>98    </div>99    <div class="divider"></div>100 101    <!-- Google -->102    <div class="option">103      <svg class="icon" viewBox="0 0 100 100" aria-label="Google icon">104        <!-- Simple multicolor G -->105        <circle cx="50" cy="50" r="40" fill="none" stroke="#4285F4" stroke-width="12" stroke-dasharray="188 999"></circle>106        <path d="M50 10 A40 40 0 0 1 88 50" fill="none" stroke="#DB4437" stroke-width="12" stroke-linecap="round"></path>107        <path d="M88 50 A40 40 0 0 1 50 90" fill="none" stroke="#F4B400" stroke-width="12" stroke-linecap="round"></path>108        <path d="M50 90 A40 40 0 0 1 12 50" fill="none" stroke="#0F9D58" stroke-width="12" stroke-linecap="round"></path>109        <rect x="52" y="44" width="32" height="12" fill="#4285F4"></rect>110      </svg>111      <div class="label">Google</div>112    </div>113    <div class="divider"></div>114 115    <!-- Email -->116    <div class="option">117      <svg class="icon" viewBox="0 0 100 100" aria-label="Email icon">118        <rect x="10" y="22" width="80" height="56" rx="8" fill="none" stroke="#000" stroke-width="6"></rect>119        <path d="M14 26 L50 52 L86 26" fill="none" stroke="#000" stroke-width="6"></path>120      </svg>121      <div class="label">Email</div>122    </div>123    <div class="divider"></div>124  </div>125 126  <div class="terms">127    By signing up you agree to our <a href="#">Terms and Conditions</a>128  </div>129 130  <div class="gesture"></div>131</div>132</body>133</html>