Life gets easier

<div class="title conceal">
            A display is always <br>
            on for a reason</div>
          <div class="introduction conceal">
              MIUI 11 introduces the always-on display that looks truly gorgeous. Be it an ever-changing kaleidoscope or rhythmic wave dial, your screen will amaze you with every new glance.
          </div>
          <div class="btn playVideo conceal" data-url="video/AOD-8959bdffe6.mp4">
            <span class="shape"></span>
            <span class="text">Watch video</span>
          </div>
          <div class="thumbnailGroup">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_0-536a964cc8.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_1-a78886296e.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_2-5ce5cb6215.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_3-48e3040509.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_4-9039990c40.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_5-6711b68639.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_6-ce9f1b5d16.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_7-6a364d5d45.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_8-a8b12432d5.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_9-0e84c1be58.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_10-33c7e63fc2.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_11-3ec1124941.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_12-97e214172e.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_13-450e1f6f8b.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_14-8747c69773.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_15-6e122b02ec.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_16-823534264f.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_17-b58772f105.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_18-e861048edd.png">
          </div>
          <div class="thumbnailGroup">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_19-7f0399aa55.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_20-9f526bb129.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_21-687e4d3618.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_22-4429ef7691.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_23-f24bb94d53.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_24-4a5fcf4702.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_25-b8fdececcd.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_26-9dba976eb2.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_27-f3cec2c508.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_28-9bcf75c6c1.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_29-e10e9d6b86.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_30-9720aaaa6c.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_31-be7859845b.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_32-798200d98b.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_33-24cbbd7f81.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_34-26cc19ba6b.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_35-70fcb18ea2.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_36-5227bbb56a.png">
            <img class="thumbnail lazy" data-src="assets4M/aodPage/thumbnail_37-4c2f71c461.png">
          </div>

<div class="title conceal">
            Personalize<br>
            your screen</div>
          <div class="introduction conceal">
            Add a customizable signature to your always-on display to make your device truly unique.
          </div>
          <div class="personalizedSignatureSlider">
            <img id="personalizedSignature1" class="personalizedSignature" src="assets4M/aodPage/autograph_0-558ec282fd.png">
            <img id="personalizedSignature2" class="personalizedSignature" src="assets4M/aodPage/autograph_1-1ab72c88c1.png">
            <img id="personalizedSignature3" class="personalizedSignature" src="assets4M/aodPage/autograph_2-75fbeb8fe9.png">
            <img id="personalizedSignature4" class="personalizedSignature" src="assets4M/aodPage/autograph_3-4d2b7f6cb6.png">
            <img id="personalizedSignature5" class="personalizedSignature" src="assets4M/aodPage/autograph_4-661985ebf0.png">
          </div>
          <div class="aodText-bar-wrapper">
            <div class="aodText-bar"><div id="aodText-bar-1" class="aodText-bar-progress"></div></div>
            <div class="aodText-bar"><div id="aodText-bar-2" class="aodText-bar-progress"></div></div>
            <div class="aodText-bar"><div id="aodText-bar-3" class="aodText-bar-progress"></div></div>
            <div class="aodText-bar"><div id="aodText-bar-4" class="aodText-bar-progress"></div></div>
            <div class="aodText-bar"><div id="aodText-bar-5" class="aodText-bar-progress"></div></div>
          </div>

<div class="redotBg">
            <div class="bg"></div>
            <img class="redotLogo lazy conceal" data-src="assets4M/soundPage/redot-2f5ca21db4.png">
            <p class="redotText conceal">
              Sounds of nature<br>
              Soothing and <br>
              ever-changing sounds<br>
              that are always fresh
            </p>
          </div>
          <div class="title conceal">
            Nature alarm <br>
            makes a great <br>
            start to your day
          </div>
          <div class="introduction conceal">
            Wake up to different sounds of nature every day and get your morning boost of energy and focus.
          </div>
          
          <div id="weekSoundSlider" class="slider">
            <div class="slider__item" data-day="monday">
              <div class="music-sign">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
              </div>
              <img src="assets4M/soundPage/icon_1-37388dd5af.png" alt="sound-icon">
              <div class="slider__item_text">
                <p>Moon</p>
              </div>
            </div>
            <div class="slider__item" data-day="tuesday">
              <div class="music-sign">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
              </div>
              <img src="assets4M/soundPage/icon_2-3ca2161937.png" alt="sound-icon">
              <div class="slider__item_text">
                <p>Fire</p>
              </div>
            </div>
            <div class="slider__item" data-day="wednesday">
              <div class="music-sign">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
              </div>
              <img src="assets4M/soundPage/icon_3-659c2f32a7.png" alt="sound-icon">
              <div class="slider__item_text">
                <p>Water</p>
              </div>
            </div>
            <div class="slider__item" data-day="thursday">
              <div class="music-sign">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
              </div>
              <img src="assets4M/soundPage/icon_4-e49e55774d.png" alt="sound-icon">
              <div class="slider__item_text">
                <p>Wood</p>
              </div>
            </div>
            <div class="slider__item" data-day="friday">
              <div class="music-sign">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
              </div>
              <img src="assets4M/soundPage/icon_5-3c190101f6.png" alt="sound-icon">
              <div class="slider__item_text">
                <p>Metal</p>
              </div>
            </div>
            <div class="slider__item" data-day="saturday">
              <div class="music-sign">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
              </div>
              <img src="assets4M/soundPage/icon_6-3f9d92fa09.png" alt="sound-icon">
              <div class="slider__item_text">
                <p>Earth</p>
              </div>
            </div>
            <div class="slider__item" data-day="sunday">
              <div class="music-sign">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
              </div>
              <img src="assets4M/soundPage/icon_7-aaadc33da6.png" alt="sound-icon">
              <div class="slider__item_text">
                <p>Sun</p>
              </div>
            </div>
          </div>

<div class="title conceal">
              Notifications that <br>
              fail to irritate
          </div>
          <div class="introduction conceal">
            Notification sounds in MIUI 11 are smart and diverse. They imitate water and birds and never sound the same throughout the day.
          </div>
          <div class="note conceal">
            * Actual notification sounds might vary from device to device.
          </div>
          
          <div class="soundGroup">
            <div class="movebar">
              <div class="sound active" data-url="assets4M/naturalSoundPage/day-0b93ca03cf.mp3">
                <img class="bg lazy" data-src="assets4M/naturalSoundPage/day-53afd1cfe8.png">
                <p>Morning forest</p>
                <div class="state"></div>
              </div>
              <div class="sound" data-url="assets4M/naturalSoundPage/night-e249cb82a5.mp3">
                <img class="bg lazy" data-src="assets4M/naturalSoundPage/night-86424cfae1.png">
                <p>Night grove</p>
                <div class="state"></div>
              </div>
            </div>
            <audio></audio>
          </div>

<div class="preTitle conceal">
            Productivity reimagined<br>
            Powerful tools for life and work
          </div>
          <div class="part">
            <div class="smallTitleCN">MIUI productivity tools</div>
            <div class="smallTitleEN">Work</div>
            <div class="row">
              <img class="icon lazy conceal" data-src="assets4M/effectPage/work1-bde9f03b53.png">
              <img class="icon lazy conceal" data-src="assets4M/effectPage/work2-486ca6969b.png">
              
              <img class="icon lazy conceal" data-src="assets4M/effectPage/work4-690ade996c.png">
              <img class="icon lazy conceal" data-src="assets4M/effectPage/work5-96be5d67d4.png">
            </div>
            
          </div>
          <div class="part">
            <div class="smallTitleCN">MIUI lifestyle services</div>
            <div class="smallTitleEN">Life</div>
            <div class="row">
              <img class="icon lazy conceal" data-src="assets4M/effectPage/life1-c90cdffafe.png">
              <img class="icon lazy conceal" data-src="assets4M/effectPage/life2-422dec05cd.png">
              <img class="icon lazy conceal" data-src="assets4M/effectPage/life3-36273ade30.png">
            </div>
          </div>

<div class="preTitle conceal">Work with documents</div>
          <div class="title conceal">Computer-level document viewer</div>
          <div class="introduction conceal">
            Mi Doc Viewer works with any document stored on your phone. Instant previews make working with documents fast and effective.
          </div>
          <div class="note conceal">
            * To view the documents generated by third party apps, refresh the corresponding page in File Manager. Mi Doc Viewer is compatible with selected Android Oreo and all Android Pie devices. Currently supported formats include *.doc, *.docx, *.ppt, *.pptx, *.xls, *.xlsx, *.pdf, *.wps, and *.txt.
          </div>
          
          <img class="logo lazy conceal" data-src="assets4M/filePage/logo-172d29d69d.png">
          <img class="phone1 lazy conceal" data-src="assets4M/filePage/phone_1-5207b3fcf9.png">
          <img class="phone2 lazy conceal" data-src="assets4M/filePage/phone_2-b9f3565e64.png">
          <img class="phone3 lazy conceal" data-src="assets4M/filePage/phone_3-82e0c1ca1f.png">

<div class="preTitle conceal">Wireless printing</div>
          <div class="title conceal">Mi Doc Viewer</div>
          <div class="introduction conceal">
            View any document saved on your device using MIUI's built-in document viewer.
          </div>
          <div class="fileSlider">
            <img id="fileSliderPhone1" class="fileSliderPhone" src="assets4M/filePage/slider0-0f6a42ab1c.png">
            <img class="fileSliderPhone" src="assets4M/filePage/slider1-d3e182dd96.png">
            <img class="fileSliderPhone" src="assets4M/filePage/slider2-0446af8c28.png">
            <img class="fileSliderPhone" src="assets4M/filePage/slider3-74a37972ca.png">
          </div>
          <div class="fileSlider-bar-wrapper">
            <div class="fileSlider-tab" id="fileSlider-tab-1">
              <div class="fileSlider-bar-text" id="fileSlider-bar-text-0">.pdf</div>
              <div class="fileSlider-bar"><div id="fileSlider-bar-1" class="fileSlider-bar-progress"></div></div>
            </div>
            <div class="fileSlider-tab" id="fileSlider-tab-2">
              <div class="fileSlider-bar-text" id="fileSlider-bar-text-1">.doc</div>
              <div class="fileSlider-bar"><div id="fileSlider-bar-2" class="fileSlider-bar-progress"></div></div>
            </div>
            <div class="fileSlider-tab" id="fileSlider-tab-3">
              <div class="fileSlider-bar-text" id="fileSlider-bar-text-2">.ppt</div>
              <div class="fileSlider-bar"><div id="fileSlider-bar-3" class="fileSlider-bar-progress"></div></div>
            </div>
            <div class="fileSlider-tab" id="fileSlider-tab-4">
              <div class="fileSlider-bar-text" id="fileSlider-bar-text-3">.xls</div>
              <div class="fileSlider-bar"><div id="fileSlider-bar-4" class="fileSlider-bar-progress"></div></div>
            </div>
          </div>

<div class="preTitle conceal">Wireless printing</div>
          <div class="title conceal">You don't need a computer</div>
          <div class="introduction conceal">
            MIUI 11 allows you to print photos and documents wirelessly without installing additional apps. Convenient settings and more than 2000 supported printer models make printing easier than ever before.
          </div>
          <div class="note conceal">
            * Printing powered by Mopria Alliance<br>
            * Print images and PDF files on devices running Android Pie or later versions. View help to learn more about compatible devices.
          </div>
          <div class="btn look conceal">
            <span class="text">View compatible printers</span>
          </div>
          <img class="bg lazy conceal" data-src="assets4M/printPage/bg-e8bdaa2ccb.png">
          <div class="dialogContainer" style="visibility: hidden">
            <div class="logos">
              <img class="logo lazy" data-src="assets4M/printPage/logo1-2198f3f4bf.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo2-3c4e753977.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo3-8c1400501e.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo4-7cec356e58.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo5-600fe28fb9.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo6-f2757fb7d8.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo7-ec42202bae.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo8-70204edcaf.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo9-fe32ced75a.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo10-4e578bd862.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo11-f47bd06a88.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo12-818ca3c1f7.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo13-4389fa2799.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo14-842ec433a8.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo15-264f3feed0.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo16-b19c475188.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo17-2c579e1acc.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo18-22df0cb044.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo19-c8c8b2d7be.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo20-e68b573ec4.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo21-c1c2d1654a.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo22-6aced5c4cf.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo23-d12e520216.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo24-eba724e41e.png">
              <img class="logo lazy" data-src="assets4M/printPage/logo25-9fb609b92e.png">
            </div>
            <div class="btn close"></div>
          </div>

<div class="preTitle conceal">Steps</div>
          <div class="title conceal">
            Make every step count
          </div>
          <div class="introduction conceal">
            View activity stats and set goals directly in App vault.<br>
          </div>
          <div class="note conceal">
            * This feature is only available in India, Indonesia, and Spain.<br>
            * This feature is only available on the following devices equipped with a step counter sensor:
          </div>
          <div class="btn viewDevice conceal" id="viewDeviceBtn" style="font-family: ML_Regular, ML_Regular_full, Arial, Helvetica, sans-serif;">Compatible devices</div>
          <div class="wrapper">
            <img class="phone lazy conceal" data-src="assets4M/stepCountPage/01-273d20921c.png">
          </div>
          <div class="dialogContainer" style="visibility: hidden">
            <div class="deviceList">
              Redmi K20, Mi 8, Mi 8 Lite, Mi 8 SE, Mi MIX 2S, Mi MIX 3, Mi 9 SE, Mi MAX 3, Mi 8 Pro, Redmi Note7, Redmi Note7 Pro, Redmi 7, Redmi Y3, POCO F1, Redmi 7A, Redmi 6 Pro, Redmi Note 5 Pro, Redmi 6A, Redmi 6, Redmi Y2, Mi 6, Mi Note 3, Mi MIX 2, Redmi Note 8 Pro, Redmi Note 8, Mi 9, Redmi K20 Pro, Mi Note 2, Mi MIX, Redmi Note 5, Redmi 5, Redmi 5A, Mi Max 2, Redmi Note 4, Redmi Y1 Lite, Redmi Y1, Redmi 4, Redmi Note 6 Pro
              <div class="btn close"></div>
            </div>
          </div>

<div class="contentWrapper">
            <img class="gameImg gameImg_1 lazy conceal" data-src="assets4M/gamePage/01-4340a63a5a.png">
            <div class="preTitle conceal">Gaming</div>
            <div class="title conceal">
              Turn your phone into an
              ultimate gaming console
            </div>
            <div class="introduction conceal">
              Immerse youself in the world of games. <br>
              Powerful gaming tools and cool sound effects <br>
              will keep you focused on the challenge!
            </div>
          </div>
          <div class="contentWrapper">
            <img class="gameImg gameImg_2 lazy conceal" data-src="assets4M/gamePage/02-c7308d0d7b.png">
            <div class="preTitle conceal">Gaming toolbox 2.0</div>
            <div class="title conceal">
              All the features you need <br>
              just a swipe away
            </div>
            <div class="introduction conceal">
              Switch between networks, block messages, and <br>
              answer calls in the background without <br>
              interrupting your gaming session.
            </div>
          </div>

<div class="title">MIUI 11 release schedule</div>
          <div class="note">
            *This release plan is subject to change.
          </div>
          <div class="batch">
            <div class="number">Phase 1</div>
            <div class="time">October 22 - October 31</div>
            <div class="divideLine"></div>
            <ul>
              <li>MI 9 SE</li>
              <li>Redmi Y3</li>
              <li>Redmi Note 7S</li>
              <li>Redmi 7</li>
              <li>Mi 8</li>
              <li>MI Mix 3</li> 
              <li>POCO F1/ POCOPHONE F1</li>
            </ul>
            <ul>
              <li>Redmi K20/ Mi 9T</li>
              <li>Redmi Note 7</li>
              <li>Redmi Note 7 Pro</li>
              <li>Mi 8 Pro</li>
              <li>Mi 8 Lite</li>
              <li>MI Mix 2S</li>
            </ul>
            <div style="height: 0; clear: both;"></div>
          </div>
          <div class="batch">
            <div class="number">Phase 2</div>
            <div class="divideLine"></div>
            <ul>
              <li>Mi 9</li>
              <li>Mi 9 Lite</li>
              <li>Mi Mix</li>
              <li>Mi Note 3</li>
              <li>Mi Max 2</li>
              <li>Redmi 6 Pro</li>
              <li>Redmi 6A</li>
              <li>Redmi Note 5</li>
              <li>Redmi Note 5A Prime / Y1</li>
              <li>Redmi 5 Plus</li>
              <li>Redmi 5A</li>
              <li>Redmi 4X</li>
            </ul>
            <ul>
              <li>Redmi K20 Pro/ Mi 9T Pro</li>
              <li>Mi Mix 2</li>
              <li>Mi 6</li>
              <li>Mi Note 2</li>
              <li>Mi Max 3</li>
              <li>Mi Play</li>
              <li>Redmi 6</li>
              <li>Redmi Note 5 Pro</li>
              <li>Redmi S2/Y2</li>
              <li>Redmi Note 5A / Y1 Lite</li>
              <li>Redmi 5</li>
              <li>Redmi Note 4x</li>
            </ul>
            <div style="height: 0; clear: both;"></div>
          </div>
          
          <div class="batch">
            <div class="number">Phase 3</div>
            <div class="divideLine"></div>
            <ul>
              <li>Redmi Note 8</li>
              <li>Redmi Note 6 Pro</li>
              <li>Redmi 8</li>
            </ul>
            <ul>
              <li>Redmi Note 8 Pro</li>
              <li>Redmi 7A</li>
              <li>Redmi 8A</li>
            </ul>
            <div style="height: 0; clear: both;"></div>
          </div>