GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>YouTube Account Menu - Mock</title>5<style>6 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2160px;9 position:relative; overflow:hidden;10 background:#121212; color:#fff;11 }12 13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; right:0;16 height:110px; padding:0 36px;17 display:flex; align-items:center; justify-content:space-between;18 color:#ffffff;19 font-size:38px; letter-spacing:1px;20 }21 .status-icons { display:flex; align-items:center; gap:26px; }22 .status-icons svg { width:40px; height:40px; fill:#fff; opacity:0.9; }23 24 /* Close (X) */25 .close-btn {26 position:absolute; top:120px; left:32px;27 width:84px; height:84px; display:flex; align-items:center; justify-content:center;28 }29 .close-btn svg { width:48px; height:48px; stroke:#fff; stroke-width:6; fill:none; opacity:0.9; }30 31 /* Header/profile */32 .profile {33 position:absolute; top:200px; left:36px; right:36px;34 }35 .profile-row {36 display:flex; align-items:center; justify-content:space-between;37 }38 .avatar {39 width:110px; height:110px; border-radius:55px;40 background:#d81b60; display:flex; align-items:center; justify-content:center;41 font-weight:bold; font-size:56px; color:#fff; margin-right:26px;42 }43 .id-block { flex:1; }44 .id-name { font-size:46px; line-height:1.25; font-weight:600; }45 .id-email { font-size:36px; color:#cfcfcf; margin-top:6px; }46 .chev {47 width:36px; height:36px; margin-left:24px;48 }49 .manage-link {50 margin-top:28px; color:#3ea6ff; font-size:36px;51 }52 53 /* Menu list */54 .menu {55 position:absolute; top:460px; left:0; right:0;56 padding:0 36px;57 }58 .divider {59 height:2px; background:#2a2a2a; margin:26px 0;60 }61 .item {62 height:120px; display:flex; align-items:center;63 color:#fff; font-size:42px;64 }65 .item svg { width:60px; height:60px; margin-right:26px; fill:#fff; }66 .item .label { flex:1; }67 .item .right { color:#9e9e9e; font-size:38px; }68 69 /* Footer */70 .footer {71 position:absolute; left:36px; right:36px; bottom:150px;72 }73 .yt-music { display:flex; align-items:center; font-size:48px; height:120px; }74 .yt-music .red { width:64px; height:64px; margin-right:26px; }75 .legal { color:#bdbdbd; font-size:32px; margin-top:24px; }76 77 /* Bottom navigation / gesture */78 .nav-back {79 position:absolute; bottom:92px; left:160px; width:36px; height:36px; border-left:6px solid #bdbdbd; border-bottom:6px solid #bdbdbd; transform:rotate(45deg);80 opacity:0.7;81 }82 .home-indicator {83 position:absolute; bottom:64px; left:50%; transform:translateX(-50%);84 width:180px; height:24px; background:#9e9e9e; border-radius:20px; opacity:0.6;85 }86</style>87</head>88<body>89<div id="render-target">90 91 <!-- Status bar -->92 <div class="status-bar">93 <div>2:11</div>94 <div class="status-icons">95 <!-- Simple status icons -->96 <svg viewBox="0 0 24 24"><path d="M4 4h16v2H4zM6 8h12v2H6zM8 12h8v2H8z"></path></svg>97 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle></svg>98 <svg viewBox="0 0 24 24"><path d="M3 7h18v10H3z"></path></svg>99 <svg viewBox="0 0 24 24"><path d="M9 20h6v2H9zM7 2h10v16H7z"></path></svg>100 <svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z"></path></svg>101 </div>102 </div>103 104 <!-- Close -->105 <div class="close-btn">106 <svg viewBox="0 0 24 24"><path d="M5 5L19 19M19 5L5 19"></path></svg>107 </div>108 109 <!-- Profile header -->110 <div class="profile">111 <div class="profile-row">112 <div style="display:flex; align-items:center; flex:1;">113 <div class="avatar">C</div>114 <div class="id-block">115 <div class="id-name">Cerebra Research</div>116 <div class="id-email">dbwscratch.test.id5@gmail.com</div>117 </div>118 </div>119 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="#fff"></path></svg>120 </div>121 <div class="manage-link">Manage your Google Account</div>122 </div>123 124 <!-- Menu items -->125 <div class="menu">126 <div class="item">127 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="3"></circle><path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#fff"></path></svg>128 <div class="label">Your channel</div>129 </div>130 131 <div class="item">132 <svg viewBox="0 0 24 24"><path d="M5 10h14v2H5z"></path><circle cx="8" cy="16" r="1.5"></circle><circle cx="16" cy="16" r="1.5"></circle><path d="M9 7c1.5-2 4.5-2 6 0" fill="#fff"></path></svg>133 <div class="label">Turn on Incognito</div>134 </div>135 136 <div class="item">137 <svg viewBox="0 0 24 24"><circle cx="12" cy="7" r="3"></circle><path d="M5 20c0-4 4-6 7-6" fill="#fff"></path><path d="M19 11v3h-3v2h3v3h2v-3h3v-2h-3v-3z" fill="#fff" transform="scale(0.7) translate(11 4)"></path></svg>138 <div class="label">Add account</div>139 </div>140 141 <div class="divider"></div>142 143 <div class="item">144 <svg viewBox="0 0 24 24"><rect x="4" y="7" width="16" height="10" rx="2"></rect><polygon points="11,10 16,12 11,14" fill="#121212"></polygon><polygon points="10,10 15,12 10,14" fill="#fff"></polygon></svg>145 <div class="label">Get YouTube Premium</div>146 </div>147 148 <div class="item">149 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2" stroke="#121212" stroke-width="2" fill="none"></path><text x="9" y="16" font-size="9" fill="#121212">$</text></svg>150 <div class="label">Purchases and memberships</div>151 </div>152 153 <div class="item">154 <svg viewBox="0 0 24 24"><rect x="5" y="13" width="3" height="6"></rect><rect x="10" y="9" width="3" height="10"></rect><rect x="15" y="5" width="3" height="14"></rect></svg>155 <div class="label">Time watched</div>156 </div>157 158 <div class="item">159 <svg viewBox="0 0 24 24"><path d="M12 2l9 6v6c0 5-4 8-9 8s-9-3-9-8V8z"></path><path d="M9 12l2 2 4-4" stroke="#121212" stroke-width="2" fill="none"></path></svg>160 <div class="label">Your data in YouTube</div>161 </div>162 163 <div class="item">164 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"></circle><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"></path></svg>165 <div class="label">Settings</div>166 </div>167 168 <div class="item">169 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><path d="M10 9a2 2 0 1 1 4 0c0 2-2 2-2 4" stroke="#121212" stroke-width="2" fill="none"></path><circle cx="12" cy="17" r="1.5" fill="#121212"></circle></svg>170 <div class="label">Help & feedback</div>171 </div>172 173 <div class="divider"></div>174 </div>175 176 <!-- Footer -->177 <div class="footer">178 <div class="yt-music">179 <svg class="red" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#ff3d00"></circle><polygon points="10,8 16,12 10,16" fill="#fff"></polygon></svg>180 <div>YouTube Music</div>181 </div>182 <div class="legal">Privacy Policy • Terms of Service</div>183 </div>184 185 <!-- Gesture Nav -->186 <div class="nav-back"></div>187 <div class="home-indicator"></div>188 189</div>190</body>191</html>