CrystalOnScript · August 10, 2024 08:13 · eyeman666 · Jan 29, 2021 · loroxxx · Jul 5, 2021
diff --git a/firstemail.html b/firstemail.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-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
 
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <style amp-custom>
    h1 {
    	font-family: arial;
      	margin: 10px;
    }
    .center {
 		text-align: center;
    }
    .carousel-preview {
      margin-top: 10px;
    } 
  </style>
 </head>
 <body>
 	<amp-state id="myState">
    <script type="application/json">
      {"cats": 
         [
           {
            "name": "Aakash",
            "description": "Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug."
          },
          {
            "name": "Filip",
            "description": "Friendly and enjoys pets and head rubs. Is known to sit on keyboards and refuses to touch anything with catnip on it."
          },
          {
            "name": "Julian",
            "description": "Both bold and extremely sweet. Wastes no time in investigating new smells, objects, and places, but enjoys lazing in the sun!"
          },
          {
            "name": "John",
            "description": "This playful and spirited cat would like to be outside his kennel and will be so happy when he gets to his forever home with more room to move."
          }
        ]
      }
    </script>
  </amp-state>
  </amp-state>
  <h1>Adorable Adoptable Animals</h1>
  <amp-carousel id="carousel-with-preview"
    width="800"
    height="400"
    layout="responsive"
    type="slides"
    on="slideChange:AMP.setState({currentCat: event.index})">
  <amp-img layout="fill" src="https://raw.githubusercontent.com/ampproject/docs/future/pages/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg"  alt="photo courtesy of Unsplash"></amp-img>
  <amp-img layout="fill" src="https://raw.githubusercontent.com/ampproject/docs/future/pages/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg"  alt="photo courtesy of Unsplash"></amp-img>
  <amp-img layout="fill" src="https://raw.githubusercontent.com/ampproject/docs/future/pages/static/img/docs/tutorials/firstemail/photo_by_lightscape.jpg"  alt="photo courtesy of Unsplash"></amp-img>
  <amp-img layout="fill" src="https://raw.githubusercontent.com/ampproject/docs/future/pages/static/img/docs/tutorials/firstemail/photo_by_nick_karvounis.jpg"  alt="photo courtesy of Unsplash"></amp-img>
 </amp-carousel>
  <div class="center">
    <h1>
      <span [text]="myState.cats[currentCat].name">Aakash</span>  is available for adoption!
    </h1>
  </div>
  <p class="center">About <span [text]="myState.cats[currentCat].name"> Aakash</span></p>
  <p class="center" [text]="myState.cats[currentCat].description">Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug.</p>
 </body>
	<!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-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

	<style amp4email-boilerplate>body{visibility:hidden}</style>
	<style amp-custom>
	h1 {
	font-family: arial;
	margin: 10px;
	}
	.center {
	text-align: center;
	}
	.carousel-preview {
	margin-top: 10px;
	}
	</style>
	</head>
	<body>
	<amp-state id="myState">
	<script type="application/json">
	{"cats":
	[
	{
	"name": "Aakash",
	"description": "Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug."
	},
	{
	"name": "Filip",
	"description": "Friendly and enjoys pets and head rubs. Is known to sit on keyboards and refuses to touch anything with catnip on it."
	},
	{
	"name": "Julian",
	"description": "Both bold and extremely sweet. Wastes no time in investigating new smells, objects, and places, but enjoys lazing in the sun!"
	},
	{
	"name": "John",
	"description": "This playful and spirited cat would like to be outside his kennel and will be so happy when he gets to his forever home with more room to move."
	}
	]
	}
	</script>
	</amp-state>
	</amp-state>
	<h1>Adorable Adoptable Animals</h1>
	<amp-carousel id="carousel-with-preview"
	width="800"
	height="400"
	layout="responsive"
	type="slides"
	on="slideChange:AMP.setState({currentCat: event.index})">
	<amp-img layout="fill" src="https://raw.githubusercontent.com/ampproject/docs/future/pages/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg" alt="photo courtesy of Unsplash"></amp-img>
	<amp-img layout="fill" src="https://raw.githubusercontent.com/ampproject/docs/future/pages/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg" alt="photo courtesy of Unsplash"></amp-img>
	<amp-img layout="fill" src="https://raw.githubusercontent.com/ampproject/docs/future/pages/static/img/docs/tutorials/firstemail/photo_by_lightscape.jpg" alt="photo courtesy of Unsplash"></amp-img>
	<amp-img layout="fill" src="https://raw.githubusercontent.com/ampproject/docs/future/pages/static/img/docs/tutorials/firstemail/photo_by_nick_karvounis.jpg" alt="photo courtesy of Unsplash"></amp-img>
	</amp-carousel>
	<div class="center">
	<h1>
	<span [text]="myState.cats[currentCat].name">Aakash</span> is available for adoption!
	</h1>
	</div>
	<p class="center">About <span [text]="myState.cats[currentCat].name"> Aakash</span></p>
	<p class="center" [text]="myState.cats[currentCat].description">Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug.</p>
	</body>