<?php
  $email = isset($_REQUEST["email"])?$_REQUEST["email"]:"";
?>

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <link rel="canonical" href="https://theampbook.com/ch6/signup.php" />
    <title>The AMP Book News Daily</title>
    <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>
    <link href="https://fonts.googleapis.com/css?family=Droid+Serif|PT+Sans" rel="stylesheet"> 
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-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-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>



    <style amp-custom>
      html, body, ul {
        margin:0;
        padding:0;
        font-family: 'Droid Serif', serif;
      }
      header {
        background-color: #232f3e;
        padding:0.5rem;
      }

      body {
        margin-bottom: 20px;
      }    

      .header, .main-content, main {
        max-width: 1024px;
        margin: 0 auto;
      }           

      .logo {
        width: 100%;
        text-align: right;
        font-size:2.5rem;
        color:#fff;
        font-weight:bold;
        font-family:Georgia, 'Times New Roman', serif;
      }

      .primary-nav li, .primary-nav span, .primary-nav a {
        font-family: 'PT Sans', sans-serif;
        color:#fff;
        font-size: 1.5rem;
      }

      .primary-nav a {
        text-decoration:none;
        padding-right: 0.5rem;
      }                 

      header li {
        display: inline-block;
        color: #fff;
        font-size: 1.5rem;
        line-height: 2.625rem;
        padding-right: 10px;
      }

      h1 {
        background-color: #eee;
        color: #005689;
        margin: 0;
        padding:1rem 0.5rem;
        font-family:Georgia, 'Times New Roman', serif;
      }

      h2 {
        color: #005689;
        margin: 0;
        border-bottom: 1px solid #ddd;
        margin:5px;
      }

      img.feature-img {
        width: 100%;
      }
      p {
        padding:0.5rem;
        line-height: 1.5;
      }

      footer {
        height: 30px;
        color: #dcdcdc;
        background: #484848;
        width:100%;
        z-index:9998;
      } 
      
      footer a {
        color: #dcdcdc;
      } 

      footer .main-content {
        padding: 0.25rem 0.5rem;
      }

      @media (min-height:1200px) {
        footer {
          position: fixed;
          bottom:0;
        }
      }


      .image-credits {
        position: fixed;
        bottom:30px;
        height: 20px;
        color: #777;
        background: #fff;
        padding:0.5rem;
        width:100%;        
      }

      .image-credits a {
        color:#666;
      }      

      header .amp-carousel-button {
        background:0;
      }

      header .amp-carousel-button-next {
        right:0;
      }

      header .amp-carousel-button-prev {
        left:0;
      }

      header .amp-carousel-button-next::after {
        content: '⟩';
        right:0;
        text-align: right;
        background:linear-gradient(to right, rgba(35,47,62,0) 0%,rgba(35,47,62,1) 50%);
        color: #fff;
        position: absolute;
        bottom:0;
        font-size: 2rem;
        line-height: 2rem;
        font-weight: bold;
        width:20px;
        cursor: pointer;
      }

      header .amp-carousel-button-prev::after {
        content: '⟨';
        left:0;
        text-align:left;  
        background:linear-gradient(to left, rgba(35,47,62,0) 0%,rgba(35,47,62,1) 50%);


        color: #fff;
        position: absolute;
        bottom:0;
        width:20px;
        font-size: 2rem;
        line-height: 2rem;
        font-weight: bold;
        cursor: pointer;

      }     

      #sidenav {
        background-color: #232f3e;
        width: 305px;
        -moz-box-shadow: 0.2rem 0 1rem rgba(0,0,0,0.5);
        -webkit-box-shadow:0.2rem 0 1rem rgba(0,0,0,0.5);
        box-shadow: 0.2rem 0 1rem rgba(0,0,0,0.5);
        text-align: right;
      }

      #sidenav li, #sidenav h3 {
        font-family: 'PT Sans', sans-serif;       
        font-size: 1.5rem;
        line-height: 2.625rem;
        list-style: none;
        border:0;
        border-bottom: 1px solid #253b48;
        text-align: left;  
        color: #fff;
        font-weight: normal;
        outline: none;       
      }

      #sidenav section, #sidenav h3 {
        background-color: #232f3e;
      }

      #sidenav h3 {
        padding-left: 0.5rem;
      }


      #sidenav a {
        color: #fff;
        text-decoration:none;
      }

      #sidenav li.sidebar-parent-container {
        border-bottom: 0;        
      }

      #sidenav li.sidebar-parent-container section {
        background-color:rgba(255, 255, 255, 0.1);
      }

      #sidenav li.sidebar-parent-container ul {
       padding-left:0.5rem;
      }

      li:not(.sidebar-parent-container) {
          padding-left: 0.5rem;
      }

      .header-top {
        display: flex;
      }

      .sidenav-btn {
        padding:0.5rem 0 0 0.5rem;
        /* fix for iOS responsiveness*/
        z-index: 9999;
      }

      .sidenav-close {
        padding:10px 10px 0 0;
      }


      amp-accordion section h3::after {
        font-family: 'PT Sans', sans-serif;
        position: absolute;
        right: 17px;
        font-size: 22px;
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
      }


      amp-accordion section[expanded] h3::after {
        /*content: '❮';*/
        content: '⟨';

      }
      amp-accordion section:not([expanded]) h3::after {
        /* Unicode: U+276F, UTF-8: E2 9D AF content: '\00276F';*/
        content: '⟩';
      }

      .btn-signup {
        background-color: #253b48;
        border: 0;
        color: white;
        text-transform: uppercase;
      }


      input {
        font-size: 16px;
        height: 2.5em;
        padding: 0.5em;
        margin: 0.1em 0.2em;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid lightgrey;

      }
      
      /* Hack to stop Chrome yellow autofill */
      input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}

      form div {margin: 1rem 0;}
      div.loader {margin: 0;}

      /*fix native input styling iOS*/
      input {
        -webkit-appearance: none;
        border-radius:0;
      } 


    </style>
  </head>
  <body>

    <amp-sidebar id='sidenav' layout='nodisplay' side="left">

      <svg class="sidenav-close" xmlns="http://www.w3.org/2000/svg" width="21" height="21" on="tap:sidenav.close" role="button" tabindex="0" viewBox="0 0 21.97 21.97">
        <title>Close sidebar</title>
        <path fill="none" stroke="#fff" stroke-width="2.5" stroke-miterlimit="10" d="M1.25 20.72L20.72 1.25m-19.47 0l19.47 19.47" stroke-linecap="round"/>
      </svg>

      <ul>
        <li class="sidebar-parent-container">
          <amp-accordion disable-session-states>
            <section>
              <h3>women</h3>
              <ul>
                <li><a href="#">women</a></li>
                <li><a href="#">tshirts</a></li>
                <li><a href="#">knitwear</a></li>
                <li><a href="#">jeans</a></li>
                <li><a href="#">swimwear</a></li>
                <li><a href="#">coats</a></li>
              </ul>
            </section>
            <section>
              <h3>men</h3>
              <ul>
                <li><a href="#">men</a></li>
                <li><a href="#">tshirts</a></li>
                <li><a href="#">knitwear</a></li>
                <li><a href="#">jeans</a></li>
                <li><a href="#">swimwear</a></li>
                <li><a href="#">coats</a></li>
              </ul>
            </section>              
          </amp-accordion>   
        </li>
       <li><a href="#">kids</a></li>
       <li><a href="#">brands</a></li>
       <li><a href="#">deals</a></li>
       <li><a href="#">accessories</a></li>
       <li><a href="#">seasonal</a></li>
       <li><a href="#">bags</a></li>
       <li><a href="#">jewellery</a></li>
      </ul>
    </amp-sidebar>

    <header>
      <div class="header">
        <div class="header-top">
          <svg class="sidenav-btn" on="tap:sidenav.open" role="button" tabindex="0" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.5 24.5">
            <g fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5px">
              <line x1="1.25" y1="1.25" x2="29.25" y2="1.25"></line>
              <line x1="1.25" y1="12.25" x2="29.25" y2="12.25"></line>
              <line x1="1.25" y1="23.25" x2="29.25" y2="23.25"></line>
            </g>
          </svg>

        <div class="logo">theampstore</div>
        </div>
        <nav>
        
          <amp-carousel height="1.8rem"
          layout="fixed-height"
          controls
          type="carousel" class="primary-nav fade">

            <span><a href="#">women</a></span>
            <span><a href="#">men</a></span>
            <span><a href="#">kids</a></span>
            <span><a href="#">brands</a></span>
            <span><a href="#">deals</a></span>
            <span><a href="#">accessories</a></span>
            <span><a href="#">seasonal</a></span>
            <span><a href="#">bags</a></span>
            <span><a href="#">jewellery</a></span>       

        </amp-carousel>

        </nav>
      </div>


    </header>


    <main>
      <?php
        if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
          echo 'Address ' . $email . ' is now signed up!';
        }
        else { ?>
          Email address invalid
          <br />
          <form method="get"
                action="/ch6/signup.php"
                target="_top">
            <input type="email" name="email" id="email" required>
            <input type="submit" value="Sign me up!">
          </form>
      <?php } ?>
    </main>


    <footer>
      <div class="main-content">privacy policy | <a href="image-credits.html">image credits</a></div>
    </footer>
  </body>
</html>