GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Timer Modal UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: radial-gradient(1200px 900px at 50% -200px, #3b2a67 0%, #261B46 55%, #1f163d 100%);14  }15 16  /* Top header */17  .top-title {18    position: absolute;19    top: 170px;20    left: 0;21    width: 100%;22    text-align: center;23    color: #b9b0c7;24    font-weight: 700;25    font-size: 56px;26    letter-spacing: 0.5px;27  }28  .circle-icon {29    position: absolute;30    width: 120px;31    height: 120px;32    border-radius: 60px;33    background: rgba(255,255,255,0.08);34    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);35    display: flex;36    align-items: center;37    justify-content: center;38  }39  .circle-icon svg { width: 52px; height: 52px; }40  .circle-icon line, .circle-icon path { stroke: rgba(255,255,255,0.75); fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }41 42  .icon-left { top: 160px; left: 80px; }43  .icon-right { top: 160px; right: 80px; }44 45  /* Bottom controls */46  .controls {47    position: absolute;48    bottom: 260px;49    left: 0;50    width: 100%;51    display: flex;52    gap: 80px;53    justify-content: center;54    align-items: center;55  }56  .control-btn {57    width: 220px;58    height: 220px;59    border-radius: 110px;60    background: rgba(160,160,160,0.45);61    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);62    display: flex;63    align-items: center;64    justify-content: center;65  }66  .control-btn svg { width: 86px; height: 86px; }67  .control-btn .fill { fill: #111; }68 69  /* Modal */70  .modal {71    position: absolute;72    left: 60px;73    top: 1380px;74    width: 960px;75    background: #ffffff;76    border-radius: 22px;77    box-shadow: 0 24px 60px rgba(0,0,0,0.45);78    padding: 54px 64px 42px;79    color: #222;80  }81  .modal h1 {82    margin: 0 0 24px 0;83    font-size: 54px;84    font-weight: 700;85    line-height: 1.2;86  }87  .modal p {88    margin: 0 0 48px 0;89    font-size: 40px;90    color: #444;91    line-height: 1.35;92  }93  .modal .actions {94    display: flex;95    justify-content: flex-end;96    gap: 42px;97  }98  .modal .action {99    font-size: 38px;100    font-weight: 700;101    letter-spacing: 1px;102    color: #5c54d8;103  }104 105  /* iOS gesture bar */106  .gesture-bar {107    position: absolute;108    bottom: 30px;109    left: 50%;110    transform: translateX(-50%);111    width: 240px;112    height: 12px;113    background: #e9e9ed;114    border-radius: 8px;115    opacity: 0.95;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <div class="top-title">Timer</div>123 124  <!-- Close (X) icon -->125  <div class="circle-icon icon-left">126    <svg viewBox="0 0 52 52" aria-hidden="true">127      <line x1="12" y1="12" x2="40" y2="40"></line>128      <line x1="40" y1="12" x2="12" y2="40"></line>129    </svg>130  </div>131 132  <!-- Mute (bell with slash) icon -->133  <div class="circle-icon icon-right">134    <svg viewBox="0 0 52 52" aria-hidden="true">135      <path d="M26 10c6 0 10 5 10 11v8l6 4H10l6-4v-8c0-6 4-11 10-11z" stroke-width="3.6"></path>136      <path d="M22 40c0 2 2 4 4 4s4-2 4-4h-8z" stroke="none" fill="rgba(255,255,255,0.75)"></path>137      <line x1="10" y1="10" x2="42" y2="42"></line>138    </svg>139  </div>140 141  <!-- Modal dialog -->142  <div class="modal">143    <h1>Are you sure you want to exit?</h1>144    <p>If you exit, you won't be able to resume from where you left off.</p>145    <div class="actions">146      <div class="action">CANCEL</div>147      <div class="action">YES</div>148    </div>149  </div>150 151  <!-- Bottom controls -->152  <div class="controls">153    <div class="control-btn">154      <svg viewBox="0 0 100 100" aria-hidden="true">155        <polygon class="fill" points="34,24 76,50 34,76"></polygon>156      </svg>157    </div>158    <div class="control-btn">159      <svg viewBox="0 0 100 100" aria-hidden="true">160        <rect class="fill" x="32" y="32" width="36" height="36" rx="6"></rect>161      </svg>162    </div>163  </div>164 165  <div class="gesture-bar"></div>166</div>167</body>168</html>