githubmirror/amphtml

examples/article.amp.html
595 строк19 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="https://medium.com/p/cb7f223fad86" >
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>

  <style amp-custom>
    body {
      margin: 0;
      font-family: 'Georgia', Serif;
      background: white;
    }

    .brand-logo {
      font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

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

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

    /* In the shadow-doc mode, the parent shell already has header and nav. */
    .amp-shadow header {
      display: none;
    }

    .lightbox {
      background: #222;
    }

    .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 {
      font-family: 'Roboto', Arial, Helvetica, sans-serif;
      border-bottom: 1px solid #e2e2e2;
      color: #6d6d6d;
      margin-left: 20px;
      margin-right: 20px;
      font-size: .9em;
      padding: 15px;
    }

    figcaption::before {
      content: '';
      width: 24px;
      height: 24px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }

    figcaption.image::before {
      background-image: url('data:image/svg+xml,<svg fill="#a9a9a9" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="3.2"/><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    }

    figcaption.video::before {
      background-image: url('data:image/svg+xml,<svg fill="#a9a9a9" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>');
    }

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

      background: #f4f4f4;
      padding: 0 15px;

      font-size: .8em;

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

    .header-time, .header-author {
      color: #a8a3ae;
      font-family: 'Roboto', Arial, Helvetica, sans-serif;
      font-size: 12px;
    }

    .header-author {
      border-right: 1px solid #d5d5d5;
      padding-right: 10px;
      margin-right: 10px;
      display: inline-block;
    }

    .header-author b {
      color: #2294dd;
      font-weight: normal;
    }

    .author p {
      margin: 5px;
    }

    .byline {
      font-family: 'Roboto', Arial, Helvetica, sans-serif;
      display: inline-block;
    }

    .byline p {
      line-height: normal;
    }

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

    .mailto {
      text-decoration: none;
    }

    #author-avatar {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }

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

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

    hr {
      margin: 0;
    }

    amp-app-banner {
      padding: 10px;
    }

    amp-app-banner .content {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    amp-img {
      background-color: #f4f4f4;
    }

    amp-app-banner amp-img {
      background-color: transparent;
      margin-right: 15px
    }

    amp-app-banner .description {
      margin-right: 20px;
    }

    amp-app-banner h5 {
      margin: 0;
    }

    amp-app-banner p {
      font-size: 10px;
      margin: 3px 0;
    }

    amp-app-banner .actions button {
      padding: 5px;
      width: 70px;
      border: 1px solid #aaa;
      font-size: 8px;
      background: #fff;
    }

    amp-app-banner .actions {
      text-align: right;
      font-size: 14px;
    }

    amp-sidebar {
      width: 200px;
      background: white;
    }

    nav ul {
      padding: 0px;
      list-style: none;
    }

    nav li {
      list-style: none;
      padding: 0px;
      padding-left: 15px;
    }

    nav li a {
      text-decoration: none;
      color: #666666;
      display: block;
      padding: 10px;
    }

    nav li.active {
      background: #f7f7f7;
    }

    nav li.active a {
      color: black;
      border-right: 3px solid black;
    }

    .article-body p {
      padding-right: 15px;
      padding-left: 15px;
    }

    header {
      padding: 15px;
    }

    button.menu {
      background: transparent;
      border: none;
      padding: 10px;
      padding-right: 20px;
    }

    .jump-to {
      padding-left: 15px;
      padding-right: 15px;
    }

    .jump-to ul a, .jump-to ol a {
        text-decoration: none;
        color: #2294dd;
    }

    header#top-bar {
      background: white;
      border-bottom: 1px solid #e2e2e2;
    }

    header#article-desc {
      background: rgb(250, 250, 250);
      padding: 20px;
    }

    header#article-desc h1 {
      margin-top: 0px;
      padding-top: 0px;
    }

    .slot-fallback {
       padding: 16px;
       background: #1b1b1b;
       color: white;
     }

     #lightbox-close-btn {
       font-family: Helvetica, sans-serif;
       color: white;
       position: absolute;
       top: 0px;
       right: 0px;
       padding: 20px;
     }
  </style>
  <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
  <script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-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-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
  <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
  <script async custom-element="amp-app-banner" src="https://cdn.ampproject.org/v0/amp-app-banner-0.1.js" data-amp-report-test="amp-app-banner.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>
  <meta name="apple-itunes-app" content="app-id=828256236, app-argument=medium://p/cb7f223fad86">
  <link rel="manifest" href="medium-manifest.json">
</head>
<body>
  <amp-sidebar id="sidebar" layout="nodisplay">
    <nav>
      <ul>
        <li class="active">
          <a href="#">
            Home
          </a>
        </li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
      </ul>
    </nav>
  </amp-sidebar>
  <amp-app-banner layout="nodisplay" id="demo-app-banner-2134">
    <div class="content">
      <amp-img src="https://cdn-images-1.medium.com/max/800/1*JLegdtjFMNgqHgnxdd04fg.png"
               width="40" height="34"></amp-img>
      <div class="description">
        <h5>Medium App</h5>
        <p>Experience a richer experience on our mobile app!</p>
      </div>
      <div class="actions">
        <button open-button>Open In App</button>
      </div>
    </div>
  </amp-app-banner>

  <header id="top-bar">
    <button on="tap:sidebar.toggle" class="menu" title="Toggle Sidebar" >
      ☰
    </button>
    <span class="brand-logo">
      PublisherLogo
    </span>
  </header>

  <main role="main">
    <article>
      <header id="article-desc">
        <h1 itemprop="headline">Lorem Ipsum</h1>
        <div class="header-author">
          <amp-img src="img/sample.jpg" id="author-avatar" placeholder
            height="16" width="16">
          </amp-img>
           by <span itemscope itemtype="http://schema.org/Person"
        itemprop="author"><b>Lorem Ipsum</b></span></div>
        <time class="header-time" itemprop="datePublished"
            datetime="2015-09-14 13:00">September 14, 2015</time>
      </header>
      <figure>
        <amp-img id="hero-img"
            src="img/hero@1x.jpg"
            srcset="img/hero@1x.jpg 1x, img/hero@2x.jpg 2x"
            layout="responsive" width="360" placeholder
            alt="Picture of two chairs on a lake shore with big pine trees"
            title="Opens image in a lightbox"
            role="button" on="tap:headline-image-lightbox"
            height="216" tabindex="0">
        </amp-img>
        <figcaption class='image'>
          Fusce pretium tempor justo, vitae.
        </figcaption>
      </figure>

      <amp-image-lightbox id="headline-image-lightbox" layout="nodisplay"></amp-image-lightbox>

      <div class="content-container">
        <div class="jump-to">
          <h3>Jump To</h3>
          <ol>
            <li><a on="tap:section1.scrollTo('position' = 'center')" href="#section1">Section 1</a></li>
            <li><a on="tap:section2.scrollTo('position' = 'center')" href="#section2">Section 2</a></li>
            <li><a on="tap:section3.scrollTo('position' = 'center')" href="#section3">Section 3</a></li>
          </ol>
        </div>
        <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>

          <figure>
            <amp-video
              autoplay
              src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
              poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png"
              artwork="img/bigbuckbunny.jpg"
              title="Big Buck Bunny"
              album="Blender"
              artist="Blender Foundation"
              width="720"
              height="405"
              layout="responsive"
              controls>
            </amp-video>
            <figcaption class='video'>
              Fusce pretium tempor justo, vitae consequat dolor maximus eget.
            </figcaption>
          </figure>

          <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>

          <figure>
            <amp-audio
              src="https://www.dl-sounds.com/wp-content/uploads/edd/2017/07/The-Horizon-preview.mp3"
              artwork="https://images.pexels.com/photos/290101/pexels-photo-290101.jpeg?w=500&h=500&auto=compress&cs=tinysrgb"
              title="The Horizon"
              album="Royalty Free Music"
              artist="Dl Sounds"
              height="50"
              width="auto"
              controls>
            </amp-audio>
          </figure>

          <p id="section1">
            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>

          <figure>
            <amp-img placeholder
                src="img/sea@1x.jpg"
                srcset="img/sea@1x.jpg 1x, img/sea@2x.jpg 2x"
                layout="responsive" width="320"
                on="tap:inline-img-lightbox"
                alt="Fusce pretium tempor justo, vitae consequat dolor maximus eget."
                height="180">
            </amp-img>
            <figcaption class='image'>
              Fusce pretium tempor justo, vitae consequat dolor maximus eget.
            </figcaption>
            <amp-lightbox id="inline-img-lightbox" class="lightbox"
                layout="nodisplay">

              <div class="lightbox-content">
                <div id="lightbox-close-btn"
                  on="tap:inline-img-lightbox.close"
                  role="button"
                  tabindex="0">
                  <h1>x</h1>
                </div>
                <amp-img id="floating-headline-img"
                    src="img/sea@1x.jpg"
                    srcset="img/sea@1x.jpg 1x, img/sea@2x.jpg 2x"
                    alt="Image of a sea"
                    placeholder
                    width="360" height="216" layout="responsive">
                </amp-img>
                <p>
                  Fusce pretium tempor justo, vitae consequat dolor maximus eget.
                </p>
              </div>
            </amp-lightbox>
          </figure>

          <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 id="section2">
            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>
        <!--
          Slots spec is not implemented yet by any browser. Will use an older version via `<content>` tag.
          <slot name="slot1"></slot>
        -->
        <slot name="slot1">
          <content>
            <div class="slot-fallback">
              This is a slot fallback.
            </div>
          </content>
        </slot>
      </div>
    </article>
  </main>

  <footer>
    <div class="brand-logo">PublisherLogo</div>
  </footer>
</body>
</html>