alexandr-kazakov/index.html

## index.html
<!doctype html>
<html ⚡4email>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-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.2.js"></script>
  <style amp4email-boilerplate>
    body {
      visibility: hidden;
    }
  </style>
  <style amp-custom>
    .card {
      display: flex;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
      color: #757575;
    }

    .btn {
      border: none;
      border-radius: 5px;
      color: white;
      font-weight: bold;
      padding: 6px 12px;
      background-color: #4dd0e1;
      text-transform: uppercase;
      cursor: pointer;
      outline: none;
    }

    .btn:hover {
      background-color: #26c6da;
    }

    .btn:active {
      background-color: #0097a7;
    }

    .btn.outlined {
      border: 1px solid white;
      background-color: transparent;
      color: white;
    }

    .product-list {
      margin: 0 auto;
      max-width: 640px;
    }

    .product-item {
      margin: 10px;
      background-color: #f5f5f5;
    }

    .product-image {
      width: 60px;
      height: 60px;
      border-radius: 60px;
    }

    .product-details {
      width: calc(100% - 75px);
      margin-left: 15px;
    }

    .product-details h3, p {
      margin: 0;
    }

    .product-details p {
      margin-top: 6px;
    }

    .product-details span {
      font-weight: bold;
      color: #00838f;
    }

    .product-details button {
      margin-top: 10px;
      display: block;
      margin-left: auto;
    }

    .total {
      padding: 20px;
      margin: 10px;
      background-color: #283593;
      color: white;
    }

    .total .content {
      margin: 0 auto;
    }

    .total h2 {
      margin: 0;
    }

    .total button {
      font-style: italic;
      font-size: 16px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
<div class="product-list">
  <amp-state id="state">
  </amp-state>
  <amp-list
    height="530"
    items="."
    src="https://amptest.do-it.co:8080/products">
    <template type="amp-mustache">
      <div class="card product-item">
        <amp-img
          class="product-image"
          alt="A product item"
          height="300"
          width="300"
          layout="responsive"
          src="{{imgUrl}}">
        </amp-img>
        <div class="product-details">
          <h3>{{name}}</h3>
          <span>${{price}}</span>
          <p>{{description}}</p>
          <button
            class="btn"
            [text]="
              (selected || []).some(x => x.id == {{id}})
                ? 'REMOVE'
                : 'ADD TO CART'
            "
            on="
              tap: AMP.setState({
                selected:
                  (selected || []).some(x => x.id == {{id}})
                    ? (selected || []).filter(x => x.id != {{id}})
                    : (selected || []).concat([{ id: {{id}}, price: {{price}} }])
              })
            ">
            ADD TO CART
          </button>
        </div>
      </div>
    </template>
  </amp-list>
  <div class="card total">
    <div class="content">
      <h2
        [hidden]="!!checkedOut"
        [text]="
        !(selected || []).length
          ? 'Add Some Items'
          : 'Total: $' +
            selected.reduce((acc, item) =>
              acc + item.price,
              0
            )
      ">
        Add Some Items
      </h2>
      <h2
        hidden
        [hidden]="!checkedOut">
        Paid Successfully!
      </h2>
      <button
        class="btn outlined"
        hidden
        [hidden]="!(selected || []).length || !!checkedOut"
        on="tap: AMP.setState({ checkedOut: true })">
        CHECKOUT
      </button>
    </div>
  </div>
</div>
</body>
</html>
	<!doctype html>
	<html ⚡4email>
	<head>
	<meta charset="utf-8">
	<script async src="https://cdn.ampproject.org/v0.js"></script>
	<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-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.2.js"></script>
	<style amp4email-boilerplate>
	body {
	visibility: hidden;
	}
	</style>
	<style amp-custom>
	.card {
	display: flex;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
	color: #757575;
	}

	.btn {
	border: none;
	border-radius: 5px;
	color: white;
	font-weight: bold;
	padding: 6px 12px;
	background-color: #4dd0e1;
	text-transform: uppercase;
	cursor: pointer;
	outline: none;
	}

	.btn:hover {
	background-color: #26c6da;
	}

	.btn:active {
	background-color: #0097a7;
	}

	.btn.outlined {
	border: 1px solid white;
	background-color: transparent;
	color: white;
	}

	.product-list {
	margin: 0 auto;
	max-width: 640px;
	}

	.product-item {
	margin: 10px;
	background-color: #f5f5f5;
	}

	.product-image {
	width: 60px;
	height: 60px;
	border-radius: 60px;
	}

	.product-details {
	width: calc(100% - 75px);
	margin-left: 15px;
	}

	.product-details h3, p {
	margin: 0;
	}

	.product-details p {
	margin-top: 6px;
	}

	.product-details span {
	font-weight: bold;
	color: #00838f;
	}

	.product-details button {
	margin-top: 10px;
	display: block;
	margin-left: auto;
	}

	.total {
	padding: 20px;
	margin: 10px;
	background-color: #283593;
	color: white;
	}

	.total .content {
	margin: 0 auto;
	}

	.total h2 {
	margin: 0;
	}

	.total button {
	font-style: italic;
	font-size: 16px;
	margin-top: 10px;
	}
	</style>
	</head>
	<body>
	<div class="product-list">
	<amp-state id="state">
	</amp-state>
	<amp-list
	height="530"
	items="."
	src="https://amptest.do-it.co:8080/products">
	<template type="amp-mustache">
	<div class="card product-item">
	<amp-img
	class="product-image"
	alt="A product item"
	height="300"
	width="300"
	layout="responsive"
	src="{{imgUrl}}">
	</amp-img>
	<div class="product-details">
	<h3>{{name}}</h3>
	<span>${{price}}</span>
	<p>{{description}}</p>
	<button
	class="btn"
	[text]="
	(selected \|\| []).some(x => x.id == {{id}})
	? 'REMOVE'
	: 'ADD TO CART'
	"
	on="
	tap: AMP.setState({
	selected:
	(selected \|\| []).some(x => x.id == {{id}})
	? (selected \|\| []).filter(x => x.id != {{id}})
	: (selected \|\| []).concat([{ id: {{id}}, price: {{price}} }])
	})
	">
	ADD TO CART
	</button>
	</div>
	</div>
	</template>
	</amp-list>
	<div class="card total">
	<div class="content">
	<h2
	[hidden]="!!checkedOut"
	[text]="
	!(selected \|\| []).length
	? 'Add Some Items'
	: 'Total: $' +
	selected.reduce((acc, item) =>
	acc + item.price,
	0
	)
	">
	Add Some Items
	</h2>
	<h2
	hidden
	[hidden]="!checkedOut">
	Paid Successfully!
	</h2>
	<button
	class="btn outlined"
	hidden
	[hidden]="!(selected \|\| []).length \|\| !!checkedOut"
	on="tap: AMP.setState({ checkedOut: true })">
	CHECKOUT
	</button>
	</div>
	</div>
	</div>
	</body>
	</html>