@guardian/mobile-apps-article-templates
Version:
Templates for articles on both iOS and Android next-gen apps
138 lines (135 loc) • 8.39 kB
HTML
<html lang="en-US">
<head>
<title>Audio</title>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" type="text/css" media="all" id="fontStyles" href="__TEMPLATES_DIRECTORY__assets/css/fonts-__PLATFORM__.css" />
<link rel="stylesheet" type="text/css" media="all" href="__TEMPLATES_DIRECTORY__assets/css/style-sync.css" />
<script type="text/javascript">
window.GU = window.GU || {};
</script>
<script type="text/javascript" src="__TEMPLATES_DIRECTORY__assets/build/mobile-range-slider.js"></script>
<script type="text/javascript" src="__TEMPLATES_DIRECTORY__assets/build/boot.js"></script>
</head>
<body class="garnett--type-__GARNETT_TYPE__ garnett--pillar-__GARNETT_PILLAR__ tone--__SECTION_TONE__ __FONT_SIZE__ __LINE_HEIGHT__ __PLATFORM__ __IS_OFFLINE__ advert-config--__ADS_CONFIG__ __IS_ADVERTISING__ __DISPLAY_HINT__ dark-mode-__DARK_MODE__" data-content-type="audio" data-ads-enabled="__ADS_ENABLED__" data-ads-enable-hiding="__ADS_ENABLE_HIDING__" data-ads-config="__ADS_CONFIG__" style="margin-top: __ACTIONBARHEIGHT__px;" data-font-size="__FONT_SIZE_INT__" data-template-directory="__TEMPLATES_DIRECTORY__" data-page-id="__PAGE_ID__" data-mpu-after-paragraphs="__MPU_AFTER_PARAGRAPHS__" data-use-ads-ready="__ADS_FAST_CALLBACK__">
<div class="article article--audio">
<div class="article__header cutout">
<div class="cutout__container" __CUTOUT__>
<div class="section section__container hide" id="section">
<div class="content__container">
<div class="content__labels__container">
<div class="content__labels">__SECTION__</div>
<div class="content__series-label content__labels">__SERIES__</div>
</div>
__COMMENT_CTA__
</div>
</div>
<div class="article-kicker">
__BADGE__
<div class="article-kicker__copy">
<div class='article-kicker__section'>__SECTION__</div>
<div class='article-kicker__series'>
<span class='article-kicker__highlight'>__SERIES__</span>
</div>
</div>
</div>
<h1 class="headline selectable card__title--audio"><span class="card__titletext" id="headline">__TITLE__</span></h1>
</div>
<div class="audio-player__container">
<div class="audio-player__wrapper">
<div class="audio-player">
<div class="audio-player__button--loading ">
<div class='pulse touchpoint__button'></div>
</div>
<a role="button" aria-role="button" class="audio-player__button touchpoint touchpoint--primary" id="audio-play-button" href="x-gu://playaudio/__AUDIO_URI__">
<span class="touchpoint__button play" data-icon="" aria-hidden="true"></span>
<span class="touchpoint__button pause" data-icon="" aria-hidden="true"></span>
<span class="touchpoint__label screen-readable audio-player-readable">Play</span>
</a>
<div class="audio-player__slider">
<input type="text" class="audio-player__slider__played" id="audio-scrubber" disabled/>
<input type="text" class="audio-player__slider__remaining" id="audio-scrubber-left" disabled/>
<div class="audio-player__slider__track track"></div>
<div class="audio-player__slider__knob knob" role="slider" id="audio-slider-knob"></div>
</div>
</div>
</div>
</div>
<div class="audio-player__container_new">
<div class="audio-player__wrapper">
<div class="audio-player">
<div class="audio-player__button--loading ">
<div class='pulse touchpoint__button'></div>
</div>
<a role="button" aria-role="button" class="audio-player__button touchpoint touchpoint--primary" id="audio-play-button-new" href="x-gu://playaudio/__AUDIO_URI__">
<span class="touchpoint__button play" data-icon="" aria-hidden="true"></span>
<span class="touchpoint__button pause" data-icon="" aria-hidden="true"></span>
<span class="touchpoint__label screen-readable audio-player-readable">Play</span>
</a>
<div class="audio-player__info">
<div class="audio-player__info__label">Listen to this podcast</div>
<div class="audio-player__info__duration"></div>
</div>
</div>
</div>
<div class="audio-player__waveform"></div>
</div>
<div class="meta keyline-4">
<div class="meta__misc">
<div class="meta__published__comments">__COMMENT_CTA__</div>
<div class="meta__byline">
__BYLINE__
</div>
<p class="meta__pubdate hide"><span class="screen-readable">Published: </span><span id="published-date">__PUBDATE__</span></p>
<div class='meta__published'>
<div class="meta__published__date"><span class="screen-readable" id="pubdate">Published: </span><span id="published-date">__PUBDATE__</span></div>
</div>
</div>
</div>
__SPONSORSHIP__
</div>
<div class="standfirst selectable">
<div class="standfirst__inner selectable resizable-media" id="standfirst">
__STANDFIRST__
</div>
</div>
<div class="article__body">
<div class="from-content-api prose resizable-media selectable" id="audio-body-blocks">
__BODY__
</div>
</div>
<div class="tags" id="tags">
<span class="screen-readable">Tags:</span>
<ul class="inline-list tags__inline-list" id="tag-list"></ul>
</div>
</div>
__RELATED_MODULE__
__COMMENTS_MODULE__
<script type="text/javascript">
GU.bootstrap.init({
asyncStylesFilename: "style-async",
sectionTone: "__SECTION_TONE__",
fontSize: "__FONT_SIZE__",
platform: "__PLATFORM__",
isOffline: "__IS_OFFLINE__" ? true : false,
isAdvertising: "__IS_ADVERTISING__" ? true : false,
contentType: "audio",
adsEnabled: "__ADS_ENABLED__",
adsEnableHiding: "__ADS_ENABLE_HIDING__" === "true",
adsConfig: "__ADS_CONFIG__",
actionBarHeight: "__ACTIONBARHEIGHT__",
fontSizeInt: "__FONT_SIZE_INT__",
templatesDirectory: "__TEMPLATES_DIRECTORY__",
pageId: "__PAGE_ID__",
mpuAfterParagraphs: "__MPU_AFTER_PARAGRAPHS__",
useAdsReady: "__ADS_FAST_CALLBACK__" === "true",
section: "__SECTION__",
tests: '__TEST_SPEC__',
nativeYoutubeEnabled: "__NATIVE_YOUTUBE_ENABLED__" === "true",
disableEnhancedTweets: "__DISABLE_ENHANCED_TWEETS__" === "true",
hasEpic: "__HAS_EPIC__" === "true"
});
</script>
</body>
</html>