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>Loading Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #162427;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;14    color: #ffffff;15  }16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 120px;19    display: flex; justify-content: space-between; align-items: center;20    padding: 30px 40px;21    color: #fff;22  }23  .status-left {24    display: flex; align-items: center; gap: 20px;25  }26  .time {27    font-size: 44px; font-weight: 600; letter-spacing: 0.5px;28  }29  .badge {30    width: 70px; height: 48px; border-radius: 10px;31    background: rgba(255,255,255,0.12);32    border: 2px solid rgba(255,255,255,0.35);33    display: flex; align-items: center; justify-content: center;34    font-size: 28px; font-weight: 700; color: #fff;35  }36  .status-right {37    display: flex; align-items: center; gap: 26px;38    font-size: 34px; font-weight: 600;39  }40  .icon {41    width: 50px; height: 50px;42  }43  .content {44    position: absolute; left: 0; right: 0;45    top: 520px;46    display: flex; flex-direction: column; align-items: center;47    text-align: center;48  }49  .owl {50    width: 300px; height: 260px;51    background: #E0E0E0; border: 1px solid #BDBDBD;52    display: flex; align-items: center; justify-content: center;53    color: #757575; border-radius: 16px;54    box-shadow: 0 8px 0 rgba(0,0,0,0.35) inset;55  }56  .notes {57    margin-top: 18px; color: #6fb0d4; font-size: 44px; letter-spacing: 6px;58  }59  .owl-shadow {60    width: 220px; height: 18px; border-radius: 12px;61    background: #3a464b;62    margin-top: 24px;63  }64  .loading {65    margin-top: 140px;66    font-size: 76px; font-weight: 800; letter-spacing: 4px;67    color: #5a6a71;68  }69  .desc {70    margin-top: 40px;71    max-width: 880px;72    color: #d7e0e4;73    font-size: 46px; line-height: 1.45; font-weight: 500;74  }75  .home-indicator {76    position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);77    width: 360px; height: 16px; border-radius: 10px; background: #EDEDED;78    opacity: 0.9;79  }80</style>81</head>82<body>83<div id="render-target">84  <div class="status-bar">85    <div class="status-left">86      <div class="time">6:12</div>87      <div class="badge">LR</div>88      <div class="badge">N</div>89      <div class="badge">DL</div>90    </div>91    <div class="status-right">92      <svg class="icon" viewBox="0 0 24 24">93        <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" fill="none"></circle>94        <rect x="7" y="11" width="10" height="2" fill="#fff"></rect>95      </svg>96      <svg class="icon" viewBox="0 0 24 24">97        <path d="M2 16c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>98        <path d="M6 16c3-3 9-3 12 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>99        <circle cx="12" cy="16" r="1.8" fill="#fff"></circle>100      </svg>101      <svg class="icon" viewBox="0 0 24 24">102        <rect x="3" y="6" width="16" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"></rect>103        <rect x="5" y="8" width="12" height="8" fill="#fff"></rect>104        <rect x="19.5" y="10" width="2.5" height="4" fill="#fff"></rect>105      </svg>106      <div style="margin-left:4px;">94%</div>107    </div>108  </div>109 110  <div class="content">111    <div class="owl">[IMG: Green owl mascot with music notes]</div>112    <div class="notes">♪ ♫</div>113    <div class="owl-shadow"></div>114 115    <div class="loading">LOADING...</div>116    <div class="desc">117      Look out for exercises that improve how well you speak, listen, read, and write!118    </div>119  </div>120 121  <div class="home-indicator"></div>122</div>123</body>124</html>