Ampier

<m-body bgcolor="#542364" font-family="Arial" color="#ffffff" font-size="18px">
	<m-head>
		
		<m-style>
			.amp-carousel-button-prev {
				display: none;
			}
			.amp-carousel-button-next {
				display: none;
			}
			.pagination__item--active {
				background-color: #31B927;
			}
			.contact-form {
				display: flex;
				border: none;
				font-size: 18px;
			}
			.contact-form__container {
				display: flex;
				align-items: center;
				background-color: #eaeaea;
				border-radius: 30px;
				color: #8d8d8d;
				margin-right: 15px;
			}
			.contact-form__r-code {
				padding: 0 7px 0px 12px;
				color: #8d8d8d;
			}
			.contact-form__input {
				color: #8d8d8d;
				padding-left: 30px;
				width: 260px;
				height: 60px;
				font-size: 18px;
				border: none;
				border-radius: 30px;
				background-color: #ffffff;
			}
			@media (max-width: 550px) {
				.contact-form {
					flex-wrap: wrap;
					align-items: center;
					justify-content: center;
				}
				.contact-form__btn {
					margin: 0;
					width: 300px;
				}
				.contact-form__container {
					margin-bottom: 20px;
				}
			}
		</m-style>
	</m-head>
	<amp-state id="defState" m-if="isAmp">
		<script type="application/json">
			{
				"slides": {
					"default": "pagination__item",
					"active": "pagination__item pagination__item--active"
				},
				"score": 0,
				"pageNumber": 1,
				"age": 30,
				"result": 0
			}
		</script>
	</amp-state>
	<m-wrap width="600" class="wrap-outer">
		<m-wrap>
			<m-padding size="30"></m-padding>
			<m-img src="https://ampier.io/tjml/demo/mathmind/math_mind.png" width="150" height="36"></m-img>
			<m-padding size="46"></m-padding>
			<div m-if="isAmp">
				<m-text bold font-size="24px" line-height="19px">The estimated age of your brain:</m-text>
				<m-padding size="20"></m-padding>
				
				<m-wrap width="100" height="34" data-amp-hidden="!(defState.pageNumber == 1)">
					<m-carousel id="timerSlides1" width="100" height="34" autoplay delay="1000" layout="fixed" type="slides">
						<m-text color="#ffffff" font-size="30px" bold>50</m-text>
						<m-text color="#ffffff" font-size="30px" bold>51</m-text>
						<m-text color="#ffffff" font-size="30px" bold>52</m-text>
						<m-text color="#ffffff" font-size="30px" bold>53</m-text>
						<m-text color="#ffffff" font-size="30px" bold>54</m-text>
						<m-text color="#ffffff" font-size="30px" bold>55</m-text>
						<m-text color="#ffffff" font-size="30px" bold>56</m-text>
						<m-text color="#ffffff" font-size="30px" bold>57</m-text>
						<m-text color="#ffffff" font-size="30px" bold>58</m-text>
						<m-text color="#ffffff" font-size="30px" bold>59</m-text>
						<m-text color="#ffffff" font-size="30px" bold>60</m-text>
						<m-text color="#ffffff" font-size="30px" bold>61</m-text>
						<m-text color="#ffffff" font-size="30px" bold>62</m-text>
						<m-text color="#ffffff" font-size="30px" bold>63</m-text>
						<m-text color="#ffffff" font-size="30px" bold>64</m-text>
						<m-text color="#ffffff" font-size="30px" bold>65</m-text>
					</m-carousel>
				</m-wrap>
				
				<m-wrap width="100" height="34" hidden data-amp-hidden="!(defState.pageNumber == 1)">
					<m-carousel id="timerSlides1" width="100" height="34" autoplay delay="1000" layout="fixed" type="slides">
						<m-text color="#ffffff" font-size="30px" bold>40</m-text>
						<m-text color="#ffffff" font-size="30px" bold>41</m-text>
						<m-text color="#ffffff" font-size="30px" bold>42</m-text>
						<m-text color="#ffffff" font-size="30px" bold>43</m-text>
						<m-text color="#ffffff" font-size="30px" bold>44</m-text>
						<m-text color="#ffffff" font-size="30px" bold>45</m-text>
						<m-text color="#ffffff" font-size="30px" bold>46</m-text>
						<m-text color="#ffffff" font-size="30px" bold>47</m-text>
						<m-text color="#ffffff" font-size="30px" bold>48</m-text>
						<m-text color="#ffffff" font-size="30px" bold>49</m-text>
						<m-text color="#ffffff" font-size="30px" bold>50</m-text>
						<m-text color="#ffffff" font-size="30px" bold>51</m-text>
						<m-text color="#ffffff" font-size="30px" bold>52</m-text>
						<m-text color="#ffffff" font-size="30px" bold>53</m-text>
						<m-text color="#ffffff" font-size="30px" bold>54</m-text>
						<m-text color="#ffffff" font-size="30px" bold>55</m-text>
					</m-carousel>
				</m-wrap>
				
				<m-wrap width="100" height="30" hidden data-amp-hidden="!(defState.pageNumber == 3) && !(defState.pageNumber == 5)">
					<m-text color="#ffffff" font-size="30px" bold>
						<span data-amp-text="defState.age - defState.result"></span>
					</m-text>
				</m-wrap>
				
				<m-wrap width="100" height="34" hidden data-amp-hidden="!(defState.pageNumber == 1)">
					<m-carousel id="timerSlides1" width="100" height="34" autoplay delay="1000" layout="fixed" type="slides">
						<m-text color="#ffffff" font-size="30px" bold>30</m-text>
						<m-text color="#ffffff" font-size="30px" bold>31</m-text>
						<m-text color="#ffffff" font-size="30px" bold>32</m-text>
						<m-text color="#ffffff" font-size="30px" bold>33</m-text>
						<m-text color="#ffffff" font-size="30px" bold>34</m-text>
						<m-text color="#ffffff" font-size="30px" bold>35</m-text>
						<m-text color="#ffffff" font-size="30px" bold>36</m-text>
						<m-text color="#ffffff" font-size="30px" bold>37</m-text>
						<m-text color="#ffffff" font-size="30px" bold>38</m-text>
						<m-text color="#ffffff" font-size="30px" bold>39</m-text>
						<m-text color="#ffffff" font-size="30px" bold>40</m-text>
						<m-text color="#ffffff" font-size="30px" bold>41</m-text>
						<m-text color="#ffffff" font-size="30px" bold>42</m-text>
						<m-text color="#ffffff" font-size="30px" bold>43</m-text>
						<m-text color="#ffffff" font-size="30px" bold>44</m-text>
						<m-text color="#ffffff" font-size="30px" bold>45</m-text>
					</m-carousel>
				</m-wrap>
				
				<m-padding size="20"></m-padding>
			</div>
			<m-text>Answer 3 questions in our email to fight the brain agin!</m-text>
		</m-wrap>
		<m-padding size="44"></m-padding>
		
		<m-wrap bgcolor="#663276" border-radius="20px" padding="0 7px">
			
			<m-wrap data-amp-hidden="defState.pageNumber == 3 || defState.pageNumber == 5">
				<m-padding size="44"></m-padding>
				
				<m-row>
					<m-column width="20" height="20" border="#31B927 1px solid" border-radius="100%" valign="middle" bgcolor="#31B927" class="pagination__item pagination__item--active" data-amp-class="defState.pageNumber >= 1 ? defState.slides.active : defState.slides.default">
						<m-text bold font-size="14px">1</m-text>
					</m-column>
					<m-column valign="middle" width="18">
						<m-text color="#31B927">&bull;</m-text>
					</m-column>
					<m-column width="20" height="20" border="#31B927 1px solid" border-radius="100%" valign="middle" class="pagination__item" data-amp-class="defState.pageNumber >= 2 ? defState.slides.active : defState.slides.default">
						<m-text bold font-size="14px">2</m-text>
					</m-column>
					<m-column valign="middle" width="18">
						<m-text color="#31B927">&bull;</m-text>
					</m-column>
					<m-column width="20" height="20" border="#31B927 1px solid" border-radius="100%" valign="middle" class="pagination__item" data-amp-class="defState.pageNumber >= 3 ? defState.slides.active : defState.slides.default">
						<m-text bold font-size="14px">3</m-text>
					</m-column>
				</m-row>
				
				<m-padding size="27"></m-padding>
			</m-wrap>
			
			
			<m-wrap data-amp-hidden="!(defState.pageNumber == 1)">
				<m-text bold>
					The actor revealed he’s HIV-positive in 2015
				</m-text>
				<m-padding size="15"></m-padding>
				<m-wrap>
					<m-button on="tap:AMP.setState({defState:{pageNumber: defState.pageNumber + 1, score: defState.score + 1} })"width="280" height="60" color="#31B927" bgcolor="#ffffff" border-radius="30px 0 30px 30px">
						Tom Hanks
					</m-button>
					<m-padding size="15"></m-padding>
					<m-button on="tap:AMP.setState({defState:{pageNumber: defState.pageNumber + 1} })" width="280" height="60" bgcolor="#ffffff" color="#31B927" border-radius="30px 0 30px 30px">
						Charlie Sheen
					</m-button>
					<m-padding size="15"></m-padding>
					<m-button on="tap:AMP.setState({defState:{pageNumber: defState.pageNumber + 1} })" width="280" height="60" bgcolor="#ffffff" color="#31B927" border-radius="30px 0 30px 30px">
						Michael J. Fox
					</m-button>
					<m-padding size="15"></m-padding>
					<m-button on="tap:AMP.setState({defState{ pageNumber: defState.pageNumber + 1} })" width="280" height="60" bgcolor="#ffffff" color="#31B927" border-radius="30px 0 30px 30px">
						Hugh Jackman
					</m-button>
				</m-wrap>
			</m-wrap>
			
			<m-wrap hidden data-amp-hidden="!(defState.pageNumber == 2)">
				<m-text bold>What do you call 2 Us?</m-text>
				<m-padding size="15"></m-padding>
				<m-wrap>
					<m-button on="tap:AMP.setState({defState:{score: defState.score + 1, age: 30, pageNumber: defState.pageNumber + 1} })" width="280" height="60" bgcolor="#ffffff" color="#31B927" border-radius="30px 0 30px 30px">
						A S
					</m-button>
					<m-padding size="15"></m-padding>
					<m-button on="tap:AMP.setState({defState:{ age: 30, pageNumber: defState.pageNumber + 1} })" width="280" height="60" bgcolor="#ffffff" color="#31B927" border-radius="30px 0 30px 30px">
						A W
					</m-button>
					<m-padding size="15"></m-padding>
					<m-button on="tap:AMP.setState({defState:{ age: 30, pageNumber: defState.pageNumber + 1} })" width="280" height="60" bgcolor="#ffffff" color="#31B927" border-radius="30px 0 30px 30px">
						A N
					</m-button>
					<m-padding size="15"></m-padding>
					<m-button on="tap:AMP.setState({defState:{  age: 30, pageNumber: defState.pageNumber + 1} })" width="280" height="60" bgcolor="#ffffff" color="#31B927" border-radius="30px 0 30px 30px">
						A T
					</m-button>
				</m-wrap>
			</m-wrap>
			
			<m-wrap hidden data-amp-hidden="!(defState.pageNumber == 3)">
				<m-padding size="20"></m-padding>
				<m-text bold line-height="24px">
					Do you want to avoid Alzheimer’s disease?
				</m-text>
				<m-padding size="10"></m-padding>
				<m-wrap width="529">
					<m-text line-height="24px">
						Train your brain daily, and you will never have to fight it!<br>
						Our quizzes in texts will help you with it.<br>
						All you need to get access to new questions is to join us right now!
					</m-text>
				</m-wrap>
				<m-padding size="20"></m-padding>
				<m-wrap width="500">
					<m-form>
						<fieldset class="contact-form">
							<div class="contact-form__container">
								<span class="contact-form__r-code">+1</span>
								<input class="contact-form__input" type="tel" placeholder="Enter your phone" required>
							</div>
							<m-button class="contact-form__btn" bold height="60" width="180" border-radius="30px" font-size="14px" bgcolor="#5DA934" on="tap:AMP.setState({defState:{pageNumber: defState.pageNumber + 1} })">
								Get exclusive quizzes
							</m-button>
						</fieldset>
					</m-form>
				</m-wrap>
				<m-padding size="30"></m-padding>
				<m-wrap width="500">
					<m-boxes>
						<m-box align="left" width="250">
							<m-button on="tap:AMP.setState({defState:{pageNumber: defState.pageNumber + 1}  })" width="200px" height="40px" border-radius="30px" bgcolor="#a76fb9" font-size="14px">
								Skip to the next question
							</m-button>
							<m-padding size="19"></m-padding>
							<m-wrap width="209" align="left">
								<m-text color="#9667A5" font-size="12px" line-height="15px">
									By entering my phone number and clicking the ‘Get exclusive quizzes’ button, I verify that this is my phone number and consent to receive TriviaBuss text messages on my phone.
									<br><br>
									This site is protected by reCAPTCHA and the Google
									<a href="https://www.google.ru/" target="_blank" style="color: #ffffff; text-decoration: underline;">Privacy Policy</a> and
									<a href="https://www.google.ru/" target="_blank" style="color: #ffffff; text-decoration: underline;">Term of Service</a> apply.
								</m-text>
								<m-padding size="31"></m-padding>
							</m-wrap>
						</m-box>
						<m-box width="250">
							<m-img src="https://ampier.io/tjml/demo/mathmind/sms.gif" width="245" height="240"></m-img>
						</m-box>
					</m-boxes>
				</m-wrap>
			</m-wrap>
			
			<m-wrap hidden data-amp-hidden="!(defState.pageNumber == 4)">
				<m-wrap width="458">
					<m-text bold>
						Ravi has two kids. If the elder kid is a boy, then what is the possibillity that his other kid is also a boy?
					</m-text>
				</m-wrap>
				<m-padding size="15"></m-padding>
				<m-wrap>
					<m-button on="tap:AMP.setState({defState:{ score: defState.score, pageNumber: defState.pageNumber + 1} })" width="280" height="60" bgcolor="#ffffff" color="#31B927" border-radius="30px 0 30px 30px">
						11%
					</m-button>
					<m-padding size="15"></m-padding>
					<m-button on="tap:AMP.setState({defState:{ score: defState.score + 1, pageNumber: defState.pageNumber + 1} })" width="280" height="60" bgcolor="#ffffff" color="#31B927" border-radius="30px 0 30px 30px">
						50%
					</m-button>
					<m-padding size="15"></m-padding>
					<m-button on="tap:AMP.setState({defState:{ score: defState.score, pageNumber: defState.pageNumber + 1} })" width="280" height="60" bgcolor="#ffffff" color="#31B927" border-radius="30px 0 30px 30px">
						100%
					</m-button>
					<m-padding size="15"></m-padding>
					<m-button on="tap:AMP.setState({defState:{ score: defState.score, pageNumber: defState.pageNumber + 1} })" width="280" height="60" bgcolor="#ffffff" color="#31B927" border-radius="30px 0 30px 30px">
						2%
					</m-button>
				</m-wrap>
			</m-wrap>
			
			<m-wrap hidden data-amp-hidden="!(defState.pageNumber == 5)">
				<m-padding size="30"></m-padding>
				<m-text bold>Congrats!</m-text>
				<m-padding size="19"></m-padding>
				<m-wrap width="450">
					<m-text line-height="24px">
						You've successfully joined our text message service. Now, we're selecting our top quizzes you're sure to like. Meanwhile, keep playing and boosting your brain power!
					</m-text>
				</m-wrap>
				<m-padding size="20"></m-padding>
				<m-text bold line-height="24px">
					Your result<br />
					Right answers: <span data-amp-text="defState.score"></span><br />
					Mistakes: <span data-amp-text="3 - defState.score"></span>
				</m-text>
				<m-padding size="30"></m-padding>
				<m-img src="https://ampier.io/tjml/demo/mathmind/brain.png" width="200" height="194"></m-img>
			</m-wrap>
			
			
			<m-padding size="37" data-amp-hidden="defState.pageNumber == 3 || defState.pageNumber == 5"></m-padding>
		</m-wrap>
	</m-wrap>
	
	<m-padding size="22"></m-padding>
	
	<m-wrap width="312">
		<m-row width="100%">
			<m-column>
				<m-text href="https://www.google.ru/" color="#ffffff" text-decoration="underline" font-size="12px">
					About
				</m-text>
			</m-column>
			<m-column>
				<m-text href="https://www.google.ru/" color="#ffffff" text-decoration="underline" font-size="12px">
					Help
				</m-text>
			</m-column>
			<m-column>
				<m-text href="https://www.google.ru/" color="#ffffff" text-decoration="underline" font-size="12px">
					Privacy
				</m-text>
			</m-column>
			<m-column>
				<m-text href="https://www.google.ru/" color="#ffffff" text-decoration="underline" font-size="12px">
					Contact
				</m-text>
			</m-column>
			<m-column>
				<m-text href="https://www.google.ru/" color="#ffffff" text-decoration="underline" font-size="12px">
					Subscriptions
				</m-text>
			</m-column>
		</m-row>
	</m-wrap>
	<m-padding size="22"></m-padding>
	<m-wrap width="574">
		<m-text color="#855295" font-size="11px" line-height="13px">
			You have received this email at <a href="mailto:parshakina.regium@gmail.com" style="color: inherit; text-decoration: none;">parshakina.regium@gmail.com</a> in association with your MathAndMind subscription. To learn more, please read our Privacy Policy. If you don’t want to receive our email anymore, <a href="https://www.google.ru/" target="_blank" style="color: #ffffff; text-decoration: underline;">unsubscribe</a>.
		</m-text>
	</m-wrap>
	<m-padding size="33"></m-padding>
	
</m-body>