examples/amp-story/interactive_slider.html - main - githubmirror/amphtml

examples/amp-story/interactive_slider.html
204 строки8 KB
Sydney Hardister
[Story interactive] Add slider animations (#35557)
06 авг 2021, 20:42
06 авг 2021, 20:42e53df05
<!DOCTYPE html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content="This is the AMP Boilerplate." />
    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js" />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins"
      rel="stylesheet"
    />
    <link
      rel="preload"
      as="script"
      href="https://cdn.ampproject.org/v0/amp-story-1.0.js"
    />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script
      async
      custom-element="amp-story"
      src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
    ></script>
    <script
      async
      custom-element="amp-story-interactive"
      src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"
    ></script>
    <!-- Import other AMP Extensions here -->
    <style amp-custom>
      /* Add your styles here */
      body {
        font-family: 'Poppins';
      }
      .title {
        background-color: white;
        border-radius: 60px;
        padding: 40px;
      }
      h1 {
        color: black;
        font-size: 30px;
        margin-bottom: 10px;
        text-align: center;
      }
      p {
        font-size: 15px;
      }
    </style>
    <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>
    <link rel="canonical" href="." />
    <title>Slider</title>
  </head>
  <body>
    <amp-story
      standalone
      publisher="The Publisher"
      title="My Story"
      publisher-logo-src="logo.png"
      poster-portrait-src="poster-portrait.png"
      poster-square-src="poster-square.png"
      poster-landscape-src="poster-landscape.png"
    >
      <amp-story-page id="cover">
        <amp-story-grid-layer template="fill">
          <amp-img
            layout="fixed"
            width="1600"
            height="1600"
            src="https://images.unsplash.com/photo-1587270613304-4cc9ef012b92?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fHN1cGVyaGVybyUyMGNvbWljJTIwYm9va3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60"
          />
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <div class="title">
            <h1>Slider Component</h1>
            <p>
              This is the most basic form of slider in the light theme, with a
              custom accent color
            </p>
          </div>

          <amp-story-interactive-slider
            style="--interactive-accent-color: #651ffe"
            prompt-text="How much do you like this product?"
            align-self="center"
            justify-self="center"
            endpoint="https://webstoriesinteractivity-beta.web.app/api/slider.json"
          >
          </amp-story-interactive-slider>
        </amp-story-grid-layer>
      </amp-story-page>
      <amp-story-page id="cover-dark">
        <amp-story-grid-layer template="fill">
          <amp-img
            layout="fixed"
            width="1600"
            height="1600"
            src="https://images.unsplash.com/photo-1587270613304-4cc9ef012b92?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fHN1cGVyaGVybyUyMGNvbWljJTIwYm9va3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60"
          />
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <div class="title">
            <h1>Slider Component</h1>
            <p>This is the most basic form of slider in the dark theme</p>
          </div>

          <amp-story-interactive-slider
            prompt-text="How much would you pay for this product?"
            theme="dark"
            align-self="center"
            justify-self="center"
            endpoint="https://webstoriesinteractivity-beta.web.app/api/slider.json"
          >
          </amp-story-interactive-slider>
        </amp-story-grid-layer>
      </amp-story-page>
      <amp-story-page id="cover-transparent">
        <amp-story-grid-layer template="fill">
          <amp-img
            layout="fixed"
            width="1600"
            height="1600"
            src="https://images.unsplash.com/photo-1587270613304-4cc9ef012b92?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fHN1cGVyaGVybyUyMGNvbWljJTIwYm9va3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60"
          />
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <div class="title">
            <h1>Slider Component</h1>
            <p>
              This is the most basic form of slider in the transparent
              chip-style transparent theme
            </p>
          </div>

          <amp-story-interactive-slider
            chip-style="transparent"
            prompt-text="How would you rate your experience?"
            align-self="center"
            justify-self="center"
            endpoint="https://webstoriesinteractivity-beta.web.app/api/slider.json"
          >
          </amp-story-interactive-slider>
        </amp-story-grid-layer>
      </amp-story-page>
    <amp-story-page id="emoji_style">
      <amp-story-grid-layer template="fill">
        <amp-img
          layout="fixed"
          width="1600"
          height="1600"
          src="https://images.unsplash.com/photo-1587270613304-4cc9ef012b92?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fHN1cGVyaGVybyUyMGNvbWljJTIwYm9va3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60"
        />
      </amp-story-grid-layer>
      <amp-story-grid-layer template="vertical">
        <div class="title">
          <h1>Slider Component</h1>
          <p>
            This is the emoji-based slider in the light theme, with a
            custom accent color
          </p>
        </div>

        <amp-story-interactive-slider
          style="--interactive-accent-color: #651ffe"
          prompt-text="Come celebrate with us!"
          align-self="center"
          justify-self="center"
          option-1-text="😄"
          endpoint="https://webstoriesinteractivity-beta.web.app/api/slider2.json"
        >
        </amp-story-interactive-slider>
      </amp-story-grid-layer>
    </amp-story-page>
  <amp-story-page id="emoji_style">
    <amp-story-grid-layer template="fill">
      <amp-img
        layout="fixed"
        width="1600"
        height="1600"
        src="https://images.unsplash.com/photo-1587270613304-4cc9ef012b92?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fHN1cGVyaGVybyUyMGNvbWljJTIwYm9va3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60"
      />
    </amp-story-grid-layer>
    <amp-story-grid-layer template="vertical">
      <div class="title">
        <h1>Slider Component</h1>
        <p>
          This is the emoji-based slider in the light theme, with a
          custom accent color
        </p>
      </div>

      <amp-story-interactive-slider
        style="--interactive-accent-color: #651ffe"
        prompt-text="Come celebrate with us!"
        align-self="center"
        justify-self="center"
        option-1-text="😄"
        endpoint=""
      >
      </amp-story-interactive-slider>
    </amp-story-grid-layer>
  </amp-story-page>
  </amp-story>
  </body>
</html>