<!doctype html>
<
html
amp>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>Google AMP amp-access</
title
>
<
script
async
src
=
</
script
>
<
script
async
custom-element
=
"amp-access"
</
script
>
<
script
async
custom-element
=
"amp-analytics"
</
script
>
<
script
async
custom-template
=
"amp-mustache"
</
script
>
<
script
id
=
"amp-access"
type
=
"application/json"
>
{
"authorization": "geeksforgeeks.org",
"pingback": "geeksforgeeks.org",
"login": {
"sign-in": "geeksforgeeks.org",
"sign-out": "geeksforgeeks.org"
},
"authorizationFallbackResponse": {
"error": true,
"loggedIn": false,
"powerUser": false
}
}
</
script
>
<
link
rel
=
"canonical"
href
=
<
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
>
<
style
amp-custom>
h1 {
color: green;
text-align: center;
}
section {
color: crimson;
}
</
style
>
</
head
>
<
body
>
<
h1
>
Geeks For Geeks
</
h1
>
<
section
>
Welcome to GeeksForGeeks!
</
section
>
<
section
amp-access
=
"loggedIn"
>
This section is only visible if
you're logged in. Welcome back
to GeeksForGeeks!
</
section
>
<
section
amp-access
=
"loggedIn AND powerUser"
>
This section is only visible if you're
logged in <
b
>and</
b
> classified as
"premium user of GeeksForGeeks".
</
section
>
<
section
amp-access
=
"NOT loggedIn"
>
This section is only visible if
you're not logged in.
</
section
>
<
section
amp-access
=
"loggedIn"
>
<
template
amp-access-template
type
=
"amp-mustache"
>
<
h3
>Hello {{email}}!</
h3
>
{{#powerUser}}
<
p
>You are a power user.</
p
>
{{/powerUser}}
</
template
>
</
section
>
<
center
>
<
button
amp-access
=
"NOT loggedIn"
amp-access-hide
on
=
"tap:amp-access.login-sign-in"
>
Please Login
</
button
>
</
center
>
<
button
amp-access
=
"loggedIn"
amp-access-hide
on
=
"tap:amp-access.login-sign-out"
>
Logout
</
button
>
</
body
>
</
html
>