Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
518 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,328 @@ | ||
| <!doctype html> | ||
| <html ⚡> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>AMP Consent Test</title> | ||
| <link rel="canonical" href="amps.html" > | ||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | ||
| <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'> | ||
|
|
||
| <style amp-custom> | ||
| body { | ||
| margin: 0; | ||
| font-family: 'Georgia', Serif; | ||
| } | ||
|
|
||
| .brand-logo { | ||
| font-family: 'Open Sans'; | ||
| } | ||
|
|
||
| .ad-container { | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .content-container p { | ||
| line-height: 24px; | ||
| } | ||
|
|
||
| header, | ||
| .article-body { | ||
| padding: 15px; | ||
| } | ||
|
|
||
| .full-bleed { | ||
| margin: 0 -15px; | ||
| } | ||
|
|
||
| figure { | ||
| margin: 0; | ||
| } | ||
|
|
||
| figcaption { | ||
| color: #6f757a; | ||
| padding: 15px 0; | ||
| font-size: .9em; | ||
| } | ||
|
|
||
| .author { | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| background: #f4f4f4; | ||
| padding: 0 15px; | ||
|
|
||
| font-size: .8em; | ||
|
|
||
| border: solid #dcdcdc; | ||
| border-width: 1px 0; | ||
| } | ||
|
|
||
| .header-time { | ||
| color: #a8a3ae; | ||
| font-family: 'Roboto'; | ||
| font-size: 12px; | ||
| } | ||
|
|
||
| .author p { | ||
| margin: 5px; | ||
| } | ||
|
|
||
| .byline { | ||
| font-family: 'Roboto'; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .byline p { | ||
| line-height: normal; | ||
| } | ||
|
|
||
| .byline .brand { | ||
| color: #6f757a; | ||
| } | ||
|
|
||
| .standfirst { | ||
| color: #6f757a; | ||
| } | ||
|
|
||
| .mailto { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| #author-avatar { | ||
| margin: 10px; | ||
| border: 5px solid #fff; | ||
| width: 50px; | ||
| height: 50px; | ||
| border-radius: 50%; | ||
| } | ||
|
|
||
| h1 { | ||
| margin: 5px 0; | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| footer { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 226px; | ||
| background: #f4f4f4; | ||
| } | ||
|
|
||
| amp-consent { | ||
| min-height: 30px; | ||
| font-family: 'Roboto'; | ||
| font-weight: 500; | ||
| line-height: 30px; | ||
| padding: 8px; | ||
| background: #46b6ac; | ||
| } | ||
|
|
||
| amp-consent button { | ||
| border: none; | ||
| border-radius: 2px; | ||
|
|
||
| color: #fafafa; | ||
| height: 26px; | ||
| min-width: 32px; | ||
| padding: 0 16px; | ||
| margin: 0 16px; | ||
| text-transform: uppercase; | ||
| letter-spacing: 0; | ||
| cursor: pointer; | ||
| vertical-align: middle; | ||
| line-height: 26px; | ||
| text-align: center; | ||
| background: #3f51b5; | ||
| } | ||
|
|
||
| hr { | ||
| margin: 0; | ||
| } | ||
| </style> | ||
| <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> | ||
|
|
||
| <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script> | ||
| <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> | ||
| <script async src="https://cdn.ampproject.org/v0.js"></script> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <div class="brand-logo"> | ||
| PublisherLogo | ||
| </div> | ||
| </header> | ||
| <main role="main"> | ||
| <h3>Image that is blocked by consent</h3> | ||
| <amp-img | ||
| data-block-on-consent | ||
| src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n" width=300 height=200></amp-img> | ||
|
|
||
| <h3>Image that is NOT blocked by consent</h3> | ||
| <amp-img | ||
| src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w300-h200-no-n" width=300 height=200></amp-img> | ||
|
|
||
|
|
||
| <article> | ||
|
|
||
|
|
||
| <div class="content-container"> | ||
| <header> | ||
| <h1 itemprop="headline">Lorem Ipsum</h1> | ||
| <time class="header-time" itemprop="datePublished" | ||
| datetime="2015-09-14 13:00">September 14, 2015</time> | ||
| <p class="standfirst"> | ||
| Fusce pretium tempor justo, vitae consequat dolor maximus eget. | ||
| </p> | ||
| </header> | ||
|
|
||
| <div> | ||
| Revoke consent | ||
| <button class="button" on="tap:ABC.prompt" role="button">Manage</button> | ||
| </div> | ||
|
|
||
| <div class="author"> | ||
| <div class="byline"> | ||
| <p> | ||
| by <span itemscope itemtype="http://schema.org/Person" | ||
| itemprop="author"><b>Lorem Ipsum</b> | ||
| <a class="mailto" href="mailto:lorem.ipsum@"> | ||
| lorem.ipsum@</a></span> | ||
| </p> | ||
| <p class="brand">PublisherName News Reporter<p> | ||
| </div> | ||
| </div> | ||
| <div class="article-body" itemprop="articleBody"> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
| Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus | ||
| luctus nunc ut elit cursus, et imperdiet diam vehicula. | ||
| Duis et nisi sed urna blandit bibendum et sit amet erat. | ||
| Suspendisse potenti. Curabitur consequat volutpat arcu nec | ||
| elementum. Etiam a turpis ac libero varius condimentum. | ||
| Maecenas sollicitudin felis aliquam tortor vulputate, | ||
| ac posuere velit semper. | ||
| </p> | ||
| <amp-ad width="320" height="50" | ||
| data-block-on-consent | ||
| type="doubleclick" | ||
| data-slot="/4119129/mobile_ad_banner" | ||
| rtc-config='{"vendors": {"fakeVendor": {"SLOT_ID": "1", "PAGE_ID": "1"}, "nonexistent-vendor": {"SLOT_ID": "1"}, "fakeVendor2": {"SLOT_ID": "1"}}, "urls": ["https://localhost:4443/posts?slot_id=1", "https://localhost:4443/abc?timeout=true", "https://broken.zzzzzz", "https://localhost:4443/zqq?slot_id=1"], "timeoutMillis": 500}' | ||
| json='{"targeting":{"food":["burgers","chicken"]},"categoryExclusions":["health"],"tagForChildDirectedTreatment":0}'> | ||
| </amp-ad> | ||
| <p> | ||
| Fusce pretium tempor justo, vitae consequat dolor maximus eget. | ||
| Aliquam iaculis tincidunt quam sed maximus. Suspendisse faucibus | ||
| ornare sodales. Nullam id dolor vitae arcu consequat ornare a | ||
| et lectus. Sed tempus eget enim eget lobortis. | ||
| Mauris sem est, accumsan sed tincidunt ut, sagittis vel arcu. | ||
| Nullam in libero nisi. | ||
| </p> | ||
|
|
||
| <p> | ||
| Sed pharetra semper fringilla. Nulla fringilla, neque eget | ||
| varius suscipit, mi turpis congue odio, quis dignissim nisi | ||
| nulla at erat. Duis non nibh vel erat vehicula hendrerit eget | ||
| vel velit. Donec congue augue magna, nec eleifend dui porttitor | ||
| sed. Cras orci quam, dignissim nec elementum ac, bibendum et purus. | ||
| Ut elementum mi eget felis ultrices tempus. Maecenas nec sodales | ||
| ex. Phasellus ultrices, purus non egestas ullamcorper, felis | ||
| lorem ultrices nibh, in tristique mauris justo sed ante. | ||
| Nunc commodo purus feugiat metus bibendum consequat. Duis | ||
| finibus urna ut ligula auctor, sed vehicula ex aliquam. | ||
| Sed sed augue auctor, porta turpis ultrices, cursus diam. | ||
| In venenatis aliquet porta. Sed volutpat fermentum quam, | ||
| ac molestie nulla porttitor ac. Donec porta risus ut enim | ||
| pellentesque, id placerat elit ornare. | ||
| </p> | ||
|
|
||
| <amp-ad width=300 height=250 | ||
| type="_ping_" | ||
| data-block-on-consent | ||
| data-url='https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n' | ||
| data-valid='true'> | ||
| </amp-ad> | ||
|
|
||
| <p> | ||
| Curabitur convallis, urna quis pulvinar feugiat, purus diam | ||
| posuere turpis, sit amet tincidunt purus justo et mi. Donec | ||
| sapien urna, aliquam ut lacinia quis, varius vitae ex. | ||
| Maecenas efficitur iaculis lorem, at imperdiet orci viverra | ||
| in. Nullam eu erat eu metus ultrices viverra a sit amet leo. | ||
| Pellentesque est felis, pulvinar mollis sollicitudin et, | ||
| suscipit eget massa. Nunc bibendum non nunc et consequat. | ||
| Quisque auctor est vel leo faucibus, non faucibus magna ultricies. | ||
| Vestibulum ante ipsum primis in faucibus orci luctus et ultrices | ||
| posuere cubilia Curae; Vestibulum tortor lacus, bibendum et | ||
| enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan. | ||
| Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu | ||
| nec lectus finibus rutrum vel sed orci. | ||
| </p> | ||
|
|
||
| <figure> | ||
| <figcaption> | ||
| Fusce pretium tempor justo, vitae consequat dolor maximus eget. | ||
| </figcaption> | ||
| </figure> | ||
| <hr> | ||
|
|
||
| <p> | ||
| Cum sociis natoque penatibus et magnis dis parturient montes, | ||
| nascetur ridiculus mus. Nulla et viverra turpis. Fusce | ||
| viverra enim eget elit blandit, in finibus enim blandit. Integer | ||
| fermentum eleifend felis non posuere. In vulputate et metus at | ||
| aliquam. Praesent a varius est. Quisque et tincidunt nisi. | ||
| Nam porta urna at turpis lacinia, sit amet mattis eros elementum. | ||
| Etiam vel mauris mattis, dignissim tortor in, pulvinar arcu. | ||
| In molestie sem elit, tincidunt venenatis tortor aliquet sodales. | ||
| Ut elementum velit fermentum felis volutpat sodales in non libero. | ||
| Aliquam erat volutpat. | ||
| </p> | ||
|
|
||
| <p> | ||
| Morbi at velit vitae eros congue congue venenatis non dui. | ||
| Sed lacus sem, feugiat sed elementum sed, maximus sed lacus. | ||
| Integer accumsan magna in sagittis pharetra. Class aptent taciti | ||
| sociosqu ad litora torquent per conubia nostra, per inceptos | ||
| himenaeos. Suspendisse ac nisl efficitur ligula aliquam lacinia | ||
| eu in magna. Vestibulum non felis odio. Ut consectetur venenatis | ||
| felis aliquet maximus. Class aptent taciti sociosqu ad litora | ||
| torquent per conubia nostra, per inceptos himenaeos. | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <amp-consent id='ABC' layout='nodisplay'> | ||
| <script type="application/json">{ | ||
| "consents": { | ||
| "myConsentId": { | ||
| "checkConsentHref": "http://localhost:8000/get-consent-v1", | ||
| "promptUI": "ui1" | ||
| } | ||
| }, | ||
| "postPromptUI": "postPromptUI" | ||
| }</script> | ||
| <div id="ui1"> | ||
| Can I load the image?? | ||
| <amp-iframe width=300 height=50 | ||
| on:"message:myConsentId.accept" | ||
| sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" | ||
| layout="responsive" | ||
| frameborder="0" | ||
| src="http://ads.localhost:8000/test/manual/diy-consent.html"> | ||
| </amp-iframe> | ||
| </div> | ||
| <div id="postPromptUI"> | ||
| Post Prompt UI | ||
| <button on="tap:ABC.prompt" role="button">Manage</button> | ||
| </div> | ||
| </amp-consent> | ||
| </article> | ||
| </main> | ||
|
|
||
| <footer> | ||
| <div class="brand-logo">PublisherLogo</div> | ||
| </footer> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.