githubmirror/amphtml

examples/sidebar.amp.html
384 строки13 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>AMP #0</title>
  <link rel="canonical" href="amps.html" >
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <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>
  <style amp-custom>
    body {
      margin: 0;
      font-family: 'Georgia', Serif;
    }

    .brand-logo {
      font-family: 'Open Sans';
    }

    .ad-container {
      display: flex;
      justify-content: center;
    }

    .content-container p {
      line-height: 24px;
    }

    header,
    .article-body {
      padding: 15px;
    }

    .lightbox {
      background: #222;
    }

    .full-bleed {
      margin: 0 -15px;
    }

    .lightbox-content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
    }

    .lightbox-content p {
      color: #fff;
      padding: 15px;
    }

    .lightbox amp-img {
      width: 100%;
    }

    figure {
      margin: 0;
    }

    figcaption {
      color: #6f757a;
      padding: 15px 0;
      font-size: .9em;
    }

    .author {
      display: flex;
      align-items: center;

      background: #f4f4f4;
      padding: 0 15px;

      font-size: .8em;

      border: solid #dcdcdc;
      border-width: 1px 0;
    }

    .header-time {
      color: #a8a3ae;
      font-family: 'Roboto';
      font-size: 12px;
    }

    .author p {
      margin: 5px;
    }

    .byline {
      font-family: 'Roboto';
      display: inline-block;
    }

    .byline p {
      line-height: normal;
    }

    .byline .brand {
      color: #6f757a;
    }

    .standfirst {
      color: #6f757a;
    }

    .mailto {
      text-decoration: none;
    }

    #author-avatar {
      margin: 10px;
      border: 5px solid #fff;
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }

    h1 {
      margin: 5px 0;
      font-weight: normal;
    }

    footer {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 226px;
      background: #f4f4f4;
    }

    hr {
      margin: 0;
    }

    amp-img {
      background-color: #f4f4f4;
    }
    amp-sidebar ul {
      list-style: none;
    }
    amp-sidebar li {
      cursor: pointer;
      height: 30px;
    }
    .hamburger{
      width: 30px;
      height: 15px;
      display:block;
      cursor: pointer;
      border: 5px solid #000;
      border-width: 5px 0;
      position: fixed;
      top: 0;
      right: 0;
      z-index: 1;
    }
    .hamburger:before {
      display: block;
      content: '';
      border-top: 5px solid #000;
      margin-top: 5px;
      height: 5px;
      width: 30px;
      cursor: pointer;
    }

    amp-sidebar {
      width: 50vw;
    }

    #mybody section{
      background: red;
    }

    body#mybody > amp-sidebar {
      background: grey;
    }
  </style>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
  <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  <script src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

</head>
<body id="mybody">
  <amp-sidebar
    id="sidebar1"
    layout="nodisplay"
    on="sidebarOpen:focusOnMe.focus"
    side="right">
    <ul>
      <li><a id="focusOnMe" href="https://google.com">This gets focused on open</a></li>
      <li><a href="#section1">Section 1</li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#myImage">My Image</a></li>
      <li><button on="tap:section3.scrollTo">Section 3</button></li>
      <li> <button on="tap:myInput.focus,sidebar1.close">Click to focus input and close</button></li>
      <li> <button on="tap:sidebar1.close,myInput.focus">Click to close and focus input</button></li>
      <li> <a href="http://abcnews.go.com/">Google</a></li>
      <li> <a href="http://www.wsj.com">WSJ</a></li>
      <li on="tap:sidebar1.close"> Close</li>
    </ul>
  </amp-sidebar>
  <h1>AMP Sidebar Example</h1>
  <button
    class="hamburger"
    on='tap:sidebar1.toggle'
    aria-label="Click to open sidebar"
    >
    <div class="hamburger"></div>
  </button>

  <input type="text" id="myInput">
  <article>
    <figure>
      <amp-img
          id="myImage"
          srcset="
              https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h1114-no/PANO_20150726_171347%257E2.jpg 2004w,
              https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w1002-h557-no/PANO_20150726_171347%257E2.jpg 1002w"
          layout="fixed" width="360" placeholder
          alt="Curabitur convallis, urna quis pulvinar feugiat, purus diam posuere turpis, sit amet tincidunt purus justo et mi."
          height="216" on="tap:headline-img-lightbox">
      </amp-img>
    </figure>

    <amp-lightbox id="headline-img-lightbox" class="lightbox"
        layout="nodisplay">

      <div class="lightbox-content">
        <amp-img id="floating-headline-img"
            srcset="
                https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h1114-no/PANO_20150726_171347%257E2.jpg 2004w,
                https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w1002-h557-no/PANO_20150726_171347%257E2.jpg 1002w"
            placeholder
            width="360" height="216" layout="responsive">
        </amp-img>
        <p>
          Fusce pretium tempor justo, vitae consequat dolor maximus eget.
        </p>
      </div>
    </amp-lightbox>

    <div class="content-container">
      <header>
        <h1 itemprop="headline" id="section1">Section 1</h1>
        <time class="header-time" itemprop="datePublished"
            datetime="2015-09-14 13:00">September 14, 2015</time>
        <div class="author">
          <div class="byline">
            <p>
              by <span itemscope itemtype="http://schema.org/Person"
              itemprop="author"><b>Lorem Ipsum</b>
              <a class="mailto" href="mailto:lorem.ipsum@">
              lorem.ipsum@</a></span>
            </p>
            <p class="brand">PublisherName News Reporter<p>
          </div>
        </div>
      </header>
      <div class="article-body" itemprop="articleBody">
        <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>

        <div class="ad-container">
          <amp-ad width=300 height=250
              type="a9"
              data-aax_size="300x250"
              data-aax_pubname="abc123"
              data-aax_src="302">
          </amp-ad>
        </div>

        <p>
          Sed pharetra semper fringilla. Nulla fringilla, neque eget
          varius suscipit, mi turpis congue odio, quis dignissim nisi
          nulla at erat. Duis non nibh vel erat vehicula hendrerit eget
          vel velit. Donec congue augue magna, nec eleifend dui porttitor
          sed. Cras orci quam, dignissim nec elementum ac, bibendum et purus.
          Ut elementum mi eget felis ultrices tempus. Maecenas nec sodales
          ex. Phasellus ultrices, purus non egestas ullamcorper, felis
          lorem ultrices nibh, in tristique mauris justo sed ante.
          Nunc commodo purus feugiat metus bibendum consequat. Duis
          finibus urna ut ligula auctor, sed vehicula ex aliquam.
          Sed sed augue auctor, porta turpis ultrices, cursus diam.
          In venenatis aliquet porta. Sed volutpat fermentum quam,
          ac molestie nulla porttitor ac. Donec porta risus ut enim
          pellentesque, id placerat elit ornare.
        </p>
        <p>
          Curabitur convallis, urna quis pulvinar feugiat, purus diam
          posuere turpis, sit amet tincidunt purus justo et mi. Donec
          sapien urna, aliquam ut lacinia quis, varius vitae ex.
          Maecenas efficitur iaculis lorem, at imperdiet orci viverra
          in. Nullam eu erat eu metus ultrices viverra a sit amet leo.
          Pellentesque est felis, pulvinar mollis sollicitudin et,
          suscipit eget massa. Nunc bibendum non nunc et consequat.
          Quisque auctor est vel leo faucibus, non faucibus magna ultricies.
          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
          posuere cubilia Curae; Vestibulum tortor lacus, bibendum et
          enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan.
          Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu
          nec lectus finibus rutrum vel sed orci.
        </p>

        <h1 id="section2">Section 2</h1>
        <figure>
          <amp-img class="full-bleed" placeholder
              srcset="
                  https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h1114-no/PANO_20150726_171347%257E2.jpg 2004w,
                  https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w1002-h557-no/PANO_20150726_171347%257E2.jpg 1002w"
              layout="responsive" width="360"
              alt="Fusce pretium tempor justo, vitae consequat dolor maximus eget."
              height="216">
          </amp-img>
          <figcaption>
            Fusce pretium tempor justo, vitae consequat dolor maximus eget.
          </figcaption>
        </figure>
        <hr>
        <h1 id="section3">Section 3</h1>
        <p>
          Cum sociis natoque penatibus et magnis dis parturient montes,
          nascetur ridiculus mus. Nulla et viverra turpis. Fusce
          viverra enim eget elit blandit, in finibus enim blandit. Integer
          fermentum eleifend felis non posuere. In vulputate et metus at
          aliquam. Praesent a varius est. Quisque et tincidunt nisi.
          Nam porta urna at turpis lacinia, sit amet mattis eros elementum.
          Etiam vel mauris mattis, dignissim tortor in, pulvinar arcu.
          In molestie sem elit, tincidunt venenatis tortor aliquet sodales.
          Ut elementum velit fermentum felis volutpat sodales in non libero.
          Aliquam erat volutpat.
        </p>

        <div class="ad-container">
          <amp-ad width=300 height=200
              type="adsense"
              data-ad-client="ca-pub-9350112648257122">
          </amp-ad>
        </div>

        <p>
          Morbi at velit vitae eros congue congue venenatis non dui.
          Sed lacus sem, feugiat sed elementum sed, maximus sed lacus.
          Integer accumsan magna in sagittis pharetra. Class aptent taciti
          sociosqu ad litora torquent per conubia nostra, per inceptos
          himenaeos. Suspendisse ac nisl efficitur ligula aliquam lacinia
          eu in magna. Vestibulum non felis odio. Ut consectetur venenatis
          felis aliquet maximus. Class aptent taciti sociosqu ad litora
          torquent per conubia nostra, per inceptos himenaeos.
        </p>
      </div>
    </div>
  </article>
</body>
</html>