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>Math Tests - Lesson</title>7<style>8  body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;11    background:#0b0b0b;border-radius:0;12  }13  /* Status bar */14  .status-bar{15    position:absolute;left:0;top:0;width:1080px;height:110px;16    background:#8ec214; color:#ffffff;17    display:flex;align-items:center; padding:0 32px; box-sizing:border-box;18    font-weight:600; letter-spacing:0.5px;19  }20  .status-time{font-size:40px;}21  .status-icons{margin-left:auto;display:flex;gap:30px;align-items:center;}22  .status-icons div{width:32px;height:32px;border-radius:6px;background:rgba(255,255,255,0.55);}23  /* App bar */24  .app-bar{25    position:absolute;left:0;top:110px;width:1080px;height:140px;26    background:#9ACB20;color:#fff;display:flex;align-items:center;27    padding:0 24px;box-sizing:border-box;28    border-bottom:1px solid rgba(0,0,0,0.15);29  }30  .app-left{display:flex;align-items:center;gap:22px;}31  .app-title{font-size:52px;font-weight:700;}32  .premium{margin-left:24px;font-size:42px;opacity:0.9;letter-spacing:1px;}33  .app-actions{margin-left:auto;display:flex;gap:34px;align-items:center;}34  .icon{width:52px;height:52px;fill:#fff;opacity:0.95;}35  /* Content card */36  .content-wrap{37    position:absolute;left:28px;right:28px;top:290px;bottom:330px;38    overflow:hidden;39  }40  .card{41    width:100%;height:100%;background:#2b2b2b;border-radius:36px;42    padding:60px 72px;box-sizing:border-box;color:#eaeaea;position:relative;43  }44  .title{45    font-size:68px; color:#ee7a11; font-weight:800; margin:0 0 32px 0;46  }47  .para{48    font-size:38px; line-height:1.45; color:#eaeaea; margin:0 0 36px 0;49  }50  .img-ph{51    width:90%; height:520px; background:#E0E0E0; border:1px solid #BDBDBD;52    display:flex;justify-content:center;align-items:center;color:#757575;53    font-size:40px;border-radius:8px;margin:36px auto 0 auto;54  }55  .scrollbar{56    position:absolute;right:20px;top:26px;width:14px;height:92%;57    background:rgba(255,255,255,0.11);border-radius:10px;58  }59  .scroll-thumb{60    position:absolute;right:20px;top:160px;width:14px;height:380px;61    background:rgba(255,255,255,0.5);border-radius:10px;62  }63  /* Bottom button */64  .start-btn{65    position:absolute;left:90px;right:90px;bottom:210px;height:120px;66    background:#f27c00;border-radius:26px;display:flex;align-items:center;justify-content:center;67    color:#fff;font-size:48px;font-weight:700;68    box-shadow:0 8px 0 rgba(0,0,0,0.3) inset;69  }70  /* Home indicator */71  .home-indicator{72    position:absolute;left:320px;right:320px;bottom:100px;height:14px;border-radius:10px;background:#eaeaea;opacity:0.9;73  }74</style>75</head>76<body>77<div id="render-target">78  <!-- Status bar -->79  <div class="status-bar">80    <div class="status-time">10:32</div>81    <div class="status-icons">82      <div></div><div></div><div></div><div></div>83    </div>84  </div>85 86  <!-- App bar -->87  <div class="app-bar">88    <div class="app-left">89      <svg class="icon" viewBox="0 0 24 24"><path d="M15.4 3.4 7.8 11l7.6 7.6-1.4 1.4L5 11l8.9-8.9z"/></svg>90      <div class="app-title">Math Tests</div>91      <div class="premium">PREMIUM</div>92    </div>93    <div class="app-actions">94      <!-- share -->95      <svg class="icon" viewBox="0 0 24 24">96        <path d="M18 16a3 3 0 0 0-2.6 1.5L8.9 13a3.2 3.2 0 0 0 0-2l6.3-4.5A3 3 0 1 0 14 5.1L7.7 9.6A3 3 0 1 0 9 14.4l6.3 4.5A3 3 0 1 0 18 16z"/>97      </svg>98      <!-- search -->99      <svg class="icon" viewBox="0 0 24 24">100        <path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm11 18-5.2-5.2-1.4 1.4L19.6 21 21 20z"/>101      </svg>102      <!-- more -->103      <svg class="icon" viewBox="0 0 24 24">104        <circle cx="12" cy="5" r="2"></circle>105        <circle cx="12" cy="12" r="2"></circle>106        <circle cx="12" cy="19" r="2"></circle>107      </svg>108    </div>109  </div>110 111  <!-- Content -->112  <div class="content-wrap">113    <div class="card">114      <h1 class="title">Multiplication in columns</h1>115      <p class="para">116        Multiplying vertically (in columns) helps us when counting with higher numbers. As the example below (75×7) shows, we have to write the numbers below each other so that the larger number is above the smaller one. The numbers must be aligned to the right, so the ones are under the ones, the tens under the tens, etc. We will multiply the ones and tens of the larger number (75) with the smaller number (here 7). We start the calculation from the right hand side. In our case, we multiply 7×5, which is 35. Under the ones, we write only 5 as the final digit from the number 35, and we remember the carry over (3) for the next multiplication. Next, we calculate 7×7 and add the carry over 3 from the previous calculation operation to the result 49 (49+3=52). There is no more digit in the hundreds position, so we write 52 at the beginning of the result. The final result is 525.117      </p>118      <div class="img-ph">[IMG: Multiplication diagram]</div>119 120      <div class="scrollbar"></div>121      <div class="scroll-thumb"></div>122    </div>123  </div>124 125  <!-- Start button -->126  <div class="start-btn">Start test</div>127 128  <!-- Home indicator -->129  <div class="home-indicator"></div>130</div>131</body>132</html>