examples/live-list.amp.html - main - githubmirror/amphtml

examples/live-list.amp.html
185 строк8 KB
Caroline Liu
Apply lang="en" to examples/ (#34759)
10 июн 2021, 17:30
10 июн 2021, 17:302ee75c4
<!doctype html>
<html ⚡ lang="en">
<head>
  <meta charset="utf-8">
  <title>Lorem Ipsum | PublisherName</title>
  <link rel="canonical" href="amps.html" >
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
  <style amp-custom>
    amp-live-list {
      width: 100%;
      border: 1px dotted red;
    }

    #btn {
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 20px;
      border: 1px solid blue;
      line-height: 24px;
      padding: 4px;
      margin-top: 5px;
      text-decoration: none;
      background-color: orange;
      cursor: pointer;
    }
  </style>
  <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
  <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
  <script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>

  <header>
    <div class="brand-logo">
      PublisherLogo
    </div>
  </header>
  <main role="main">

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
      luctus nunc ut elit cursus, et imperdiet diam vehicula.
      Duis et nisi sed urna blandit bibendum et sit amet erat.
      Suspendisse potenti. Curabitur consequat volutpat arcu nec
      elementum. Etiam a turpis ac libero varius condimentum.
      Maecenas sollicitudin felis aliquam tortor vulputate,
      ac posuere velit semper.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
      luctus nunc ut elit cursus, et imperdiet diam vehicula.
      Duis et nisi sed urna blandit bibendum et sit amet erat.
      Suspendisse potenti. Curabitur consequat volutpat arcu nec
      elementum. Etiam a turpis ac libero varius condimentum.
      Maecenas sollicitudin felis aliquam tortor vulputate,
      ac posuere velit semper.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
      luctus nunc ut elit cursus, et imperdiet diam vehicula.
      Duis et nisi sed urna blandit bibendum et sit amet erat.
      Suspendisse potenti. Curabitur consequat volutpat arcu nec
      elementum. Etiam a turpis ac libero varius condimentum.
      Maecenas sollicitudin felis aliquam tortor vulputate,
      ac posuere velit semper.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
      luctus nunc ut elit cursus, et imperdiet diam vehicula.
      Duis et nisi sed urna blandit bibendum et sit amet erat.
      Suspendisse potenti. Curabitur consequat volutpat arcu nec
      elementum. Etiam a turpis ac libero varius condimentum.
      Maecenas sollicitudin felis aliquam tortor vulputate,
      ac posuere velit semper.
    </p>

    <p>
      Fusce pretium tempor justo, vitae consequat dolor maximus eget.
      Aliquam iaculis tincidunt quam sed maximus. Suspendisse faucibus
      ornare sodales. Nullam id dolor vitae arcu consequat ornare a
      et lectus. Sed tempus eget enim eget lobortis.
      Mauris sem est, accumsan sed tincidunt ut, sagittis vel arcu.
      Nullam in libero nisi.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
      luctus nunc ut elit cursus, et imperdiet diam vehicula.
      Duis et nisi sed urna blandit bibendum et sit amet erat.
      Suspendisse potenti. Curabitur consequat volutpat arcu nec
      elementum. Etiam a turpis ac libero varius condimentum.
      Maecenas sollicitudin felis aliquam tortor vulputate,
      ac posuere velit semper.
    </p>

    <p>
      Fusce pretium tempor justo, vitae consequat dolor maximus eget.
      Aliquam iaculis tincidunt quam sed maximus. Suspendisse faucibus
      ornare sodales. Nullam id dolor vitae arcu consequat ornare a
      et lectus. Sed tempus eget enim eget lobortis.
      Mauris sem est, accumsan sed tincidunt ut, sagittis vel arcu.
      Nullam in libero nisi.
    </p>

    <amp-live-list
      layout="container"
      data-poll-interval="8000"
      data-max-items-per-page="5"
      id="my-live-list">
      <button id="btn" update on="tap:my-live-list.update">Meron kang update</button>
      <div items>
        <div id="my-live-list-2" data-sort-time="1462814963693">2</div>
        <div id="my-live-list-1" data-sort-time="1462814955597">1</div>
      </div>
    </amp-live-list>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
      luctus nunc ut elit cursus, et imperdiet diam vehicula.
      Duis et nisi sed urna blandit bibendum et sit amet erat.
      Suspendisse potenti. Curabitur consequat volutpat arcu nec
      elementum. Etiam a turpis ac libero varius condimentum.
      Maecenas sollicitudin felis aliquam tortor vulputate,
      ac posuere velit semper.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
      luctus nunc ut elit cursus, et imperdiet diam vehicula.
      Duis et nisi sed urna blandit bibendum et sit amet erat.
      Suspendisse potenti. Curabitur consequat volutpat arcu nec
      elementum. Etiam a turpis ac libero varius condimentum.
      Maecenas sollicitudin felis aliquam tortor vulputate,
      ac posuere velit semper.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
      luctus nunc ut elit cursus, et imperdiet diam vehicula.
      Duis et nisi sed urna blandit bibendum et sit amet erat.
      Suspendisse potenti. Curabitur consequat volutpat arcu nec
      elementum. Etiam a turpis ac libero varius condimentum.
      Maecenas sollicitudin felis aliquam tortor vulputate,
      ac posuere velit semper.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
      luctus nunc ut elit cursus, et imperdiet diam vehicula.
      Duis et nisi sed urna blandit bibendum et sit amet erat.
      Suspendisse potenti. Curabitur consequat volutpat arcu nec
      elementum. Etiam a turpis ac libero varius condimentum.
      Maecenas sollicitudin felis aliquam tortor vulputate,
      ac posuere velit semper.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
      luctus nunc ut elit cursus, et imperdiet diam vehicula.
      Duis et nisi sed urna blandit bibendum et sit amet erat.
      Suspendisse potenti. Curabitur consequat volutpat arcu nec
      elementum. Etiam a turpis ac libero varius condimentum.
      Maecenas sollicitudin felis aliquam tortor vulputate,
      ac posuere velit semper.
    </p>

  </main>
</body>
</html>