Welcome to Gaia! ::


Celestial Star

45,800 Points
  • Magical Girl 50
  • Little Bunny Foo Foo 100
  • Ian's Valentine 100
I cross this when I was getting this:

<!DOCTYPE html>
<html>

<head>
<!-- force the page to display at 100% -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="asstatic/boomerang.css"/>
<style type="text/css">
#ty_headline {
text-align: center;
font-size: 30px;
margin: 40px;
}
#webtraffic_start_button_text {
font-size: 1.5em;
margin-top: 17px;
color: white;
}
#webreader_expository {
height: 315px; width: 693px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 30px;
margin-top: 32px;
}
#webtraffic_start_button {
height: 62px; width: 415px;
display: inline-block;
}
.blackish { color: #000; }
.yellowish { color: #FF0; }
.greenish { color: #006600; }
.earnpoints { font-size: 27px; }

/*************
general styles
**************/

/*
notes about media queries
- place media queries immediately after relevant elements (within reason) - makes it easier to keep track of device-specific tweaks
- use both max-device-width and max-device - the former works on iOS, the latter on Android and desktop
- wider devices preceed narrower ones - otherwise the wider rules would override the narrower ones
- media queries can be tested in a js console with window.matchMedia('<query string>') where <query string> is just the clauses without the leading @media
*/

html, body {
font-family: sans-serif;
margin: 0; /* clear any browser setting to fill the viewport */
padding:0 ; /* clear any browser setting to fill the viewport */
background-color: #fff;
height: 100%; /* fill the viewport */
}

/* start vertical centering */

/*
vertical centering of our rounded content rectangle

this depends on a nested series of divs, each responsible for a piece of the CSS
the basic arrangement looks like...

div.vcenter_master - this is the div that hides/shows depending on context
div.vcenter_table - a table display needed to contain a table-cell
div.vcenter_cell - a table cell needed to vertically align content
.roundrect - the rounded/shaded/translucent content rectangle
div - additional content

with this many nested divs, we have a lot of flexility for introducing additional content
for example, the proscenium has a div.header_bar before div.vcenter_outer
*/

#reader_header {
background-color: #000;
}

#downloader_wrapper {
margin-top: 1em;
display: block;
text-align: center;
}
.vcenter_master {
height: 90%; /* required to vcenter */
}

.vcenter_table {
display: table; /* creates the context for having a table cell that can vertically center */
height: 90%; /* required to vcenter - not 100% to handle foooter */
width: 69%; /* !!! controls the width of the size of the video player (via the size of the vcentered roundrect) !!! */
margin: 0 auto; /* horizontally center roundrect */
padding: 0;
}

.vcenter_cell {
display: table-cell; /* creates the context for vertical centering */
vertical-align: middle; /* the actual vertical centering happens here */
}

.roundrect {
border-radius: 15px;
/* !!! NOTE - this padding value has been hardcoded in quirky_ua.fix_disappearing_player - if you change it here, change it there too !!! */
padding: 0.8em; /* creates spacing between the edge of the rect and the contents */
}

/* end vertical centering */

/*common classes applied to text */

.reward_text {
/* color: #299f54; */
}

.header {
text-align: center;
font-weight: bold;
}

/* common classes applied to divs */

.header_bar {
background-color: black;
text-align: center;
font-weight: bold;
font-size: 2em;
width: 100%;
padding: 0.2em 0;
}

.footer {
width: 100%;
display: table;
}

.footer div { /* the div that contains a compositor-placed image */
width: 50%;
display: table-cell;
vertical-align: middle;
}

.footer div:last-child div { /* for the right-aligned compositor-placed image */
float: right;
}

/* on phones, reduce the size of the header_bar font to give more room to content */
@media (orientation:landscape) and (max-device-width:400px),
(orientation:landscape) and (max-device-height:240px),
(orientation:portrait) and (max-device-width:400px) {
.header_bar {
font-size: 1em;
}
}

/* on phones, shift the footer up */
@media (orientation:landscape) and (max-device-width:400px),
(orientation:landscape) and (max-device-height:240px) {
.footer {
margin-top: -1.2em;
}

#thank_you .footer {
margin-top: -0.6em;
}
}
@media (orientation:portrait) and (max-device-width:400px) {
.footer {
margin-top: 1em;
}
}

#skippingMessage {
margin: 0 10%;
text-align: center;
}

/*************
questionnaire
*************/

/* note - some of the classes are dynamic and are applied on the fly by the compositor */

#questionnaire_outer {
width: 55%;
}

#questionnaire_header {
margin-bottom: 1em;
}

#demosubmitdiv {
margin-top: 2em;
}

.demoquestion_titlecontainer {
margin: 1.6em 0 0.2em 0;
}

.demoquestion_title {
font-weight: bold;
}

.demoquestion_radiocontainer, .demoquestion_controlcontainer {
padding-left: 1em;
}

.demoquestion_controlcontainer span {
padding-left: 1.2em;
margin-right: 0.2em;
}

@media screen and (orientation:portrait),
screen and (orientation:landscape) and (max-device-width: 480px),
screen and (orientation:landscape) and (max-width: 480px) {
#questionnaire_outer {
width: 80%;
}

.demoquestion_controlcontainer span {
padding-left: 0.8em;
margin-right: 0.2em;
}
}

/******
player
******/

#player_wrapper {
position: relative;
}



/*********
thank you
*********/

#ty_header {
font-size: 1.2em;
}

#ty_sharings {
background-color: #222222;
margin: 0.6em 0 1.1em 0;
border-radius: 2px 2px 10px 10px; /* rounded bottom corners */
text-align: center; /* center all buttons */
}

.app_downloader_button {
display: inline-block;
margin-top: 0em;
cursor: pointer;
}

#app_downloader_logo_image_wrapper {
display: block;
}

#app_downloader_logo_image {
margin-top: 3em;
display: inline-block;
text-align: center;
}

.sharing_button {
display: inline-block; /* flow divs */
margin: 0.4em 0.4em; /* control horizontal spacing */
font-size: 0.8em;
white-space: nowrap;
width: 20%; /* control horizontal distribution */
text-align: left; /* undo container centering within the button */
}

.sharing_button div {
display: inline-block;
vertical-align: middle;
margin-right: 0.2em;
}

/* wider thank you screen on portrait phones, tablets */
@media (orientation:portrait) and (max-device-width:600px),
(orientation:portrait) and (max-width:600px) {
#thank_you_outer {
width: 90%;
padding: 1em 0;
}
}

/* wider thank you screen on narrower (older) phones */
@media (orientation:landscape) and (max-device-width:500px),
(orientation:landscape) and (max-width:500px) {
#thank_you_outer {
width: 90%;
padding: 1em 0;
}
}

/* wider thank you screen on landscape phones, tablets, and narrow desktop */
@media (orientation:landscape) and (max-device-width:640px),
(orientation:landscape) and (max-width:640px) {
#thank_you_outer {
width: 80%;
padding: 1em 0;
}
}

/* sharing button adjustments for portrait phones */
@media (orientation:portrait) and (max-device-width:400px), (orientation:portrait) and (max-width:400px) {
.sharing_button { /* on portrait display buttons 2x2 */
width: 40%;
margin: 0.4em 0.5em;
}
}

/* additional landscape adjustments for phones with smaller screens */
@media (orientation: landscape) and (max-device-width: 480px), (orientation: landscape) and (max-width: 480px) {
.sharing_button {
width: 21%;
font-size: 0.6em;
}

.vcenter_table {
padding: 0.5em;
}

.roundrect {
/* !!! NOTE - this padding value has been hardcoded in quirky_ua.fix_disappearing_player - if you change it here, change it there too !!! */
padding: 0.6em;
}
}

/**************
thank you body
**************/

#upper_right {
position: fixed;
top: 0;
right: 0;
}

#android_close_image {
display: none;
}

#ty_body {
overflow: auto;
}

#ty_body_left {
float: left;
padding: 0 0.6em 0.6em 0.6em;
margin: 0 0 0 1em;
}

#ty_body_right {
margin: 0 1em 0 0;
overflow: hidden; /* force the 2nd column to not overlap the 1st column */
padding: 0 3% 0 3%;
}

#body_cta_sharing {
margin-top: 0.4em;
text-align: left;
}

/* adjustments for portrait phones */
@media (orientation: portrait) and (max-device-width: 400px), (max-width: 400px) {
#ty_body_left {
float: none;
text-align: center;
padding-bottom: 0;
margin: 0 1em;
}

#logo_image div {
margin: 0 auto;
}

#ty_body_right {
margin: 0.8em 0;
}

#body_cta_sharing {
text-align: center;
}

#body_cta_sharing div {
display: inline-block;
}

#cta_image div {
margin: 0 auto;
}
}

/****************
thank you footer
****************/

#ty_footer {
text-align: right;
margin-top: 1em;
}

.ty_footer_button div { /* the image in a footer button */
display: inline-block;
vertical-align: middle;
}

.ty_footer_button span { /* the text in a footer button */
margin-left: 0.5em;
font-weight: bold;
}

/*****
email
*****/

#email {
margin-top: 1em;
}

#email_wrapper form div {
margin: 1em 0;
}

#email_wrapper label {
float: left;
width: 6em;
margin-right: 1em;
text-align: right;
}

#email_form_submit {
display: block;
margin: 0 auto;
}

#email_close_image {
position: absolute;
right: 5%;
}

#standalone_controls {
margin-left: 800px;
}

/*********
trackings
*********/

#trackings {
position: absolute;
opacity: 1.0;
top: 0;
left: 0;
}

/*
* Hide all layouts initially
*/
body > div {
display: none;
}
</style>

<script type="text/javascript" id="js_bootstrap_minimal">
function include( script_url ) {
// Grab a javascript and insert it into the DOM
var head = document.getElementsByTagName( 'head' )[ 0 ]
var script = document.createElement( 'script' )
script.type = 'text/javascript';
script.src = script_url;
head.appendChild( script )
}

// Allow for the situation (on developer systems) where the player application is not the root
var bootstrap_url = document.location.href.slice( 0, document.location.href.indexOf( '/static_skins' ) )

if ( typeof mycdn_url !== 'undefined' ) {
bootstrap_url = mycdn_url;
}

var suffix_cache_bust = "";
if ( document.location.href.indexOf( "cachebust" ) > 0 ) {
//permit busting cache for loading the js from the cdn
suffix_cache_bust = "?cachebust=" + Date.now()
}

include( bootstrap_url + "/javascripts/0/app" + ( document.location.href.indexOf( "use_min=0" ) == -1 ? "-min" : "" ) + ".js" + suffix_cache_bust )
</script>
</head>
<body>
<div id="no_offers_available" class='vcenter_master'>
<div class='vcenter_table'>
<div class='vcenter_cell'>
<div class='roundrect'>
<div id='no_offers_available_header' class='header'></div>
</div>
</div>
</div>
</div>

<div id="questionnaire" class='vcenter_master'>
<div id='questionnaire_outer' class='vcenter_table'>
<div id="questionnaire_inner" class='vcenter_cell'>
<div id='questionnaire_content' class='roundrect'>
<div id='questionnaire_header' class='header'></div>
<div id="democontainer" class="frontandcenterish"></div>
<div id="demosubmitdiv">
<img id='demosubmitimg' alt=''/>
</div>
</div>
</div>
</div>
</div>

<div id='proscenium' class='vcenter_master'>
<!-- the header needs both classes because header is used by compositor to set headline text -->
<div id='proscenium_outer' class='vcenter_table'>
<div id='proscenium_inner' class='vcenter_cell'>
<div id='player_roundrect' class='roundrect'>
<div id='player_wrapper'>
<div id='downloader_wrapper'>
<div class='earnpoints blackish'>
Earn points by exploring <span class='offer_title '> </span>
</div>
<a id="reader_link" onclick="reader.init()" target='reader_spawned'>
<div id='app_downloader_button' class='app_downloader_button'>
<div id="webreader_expository"></div>
<div id="webtraffic_start_button">
<div id="webtraffic_start_button_text">
Earn <span class='reward_text yellowish'></span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class='footer'>
<div id='proscenium_lower_left_image'></div>
<div id='proscenium_lower_right_image'></div>
</div>
</div>

<div id='thank_you' class='vcenter_master'>
<div id='thank_you_outer' class='vcenter_table'>
<div id='thank_you_inner' class='vcenter_cell'>
<div id='thank_you_content' class='roundrect'>
<div id='ty_headline'> Thanks for visiting <span class='offer_title'></span> </div>
<div id='ty_header' class='header'>You earned <span class='greenish'><span class='reward_text '></span>!</span></div>
<div id='upper_right'><a id='android_close_image'></a></div>
</div>
</div>
</div>
<div class='footer'>
<div id='thank_you_lower_left_image'></div>
<div id='thank_you_lower_right_image'></div>
</div>
</div>
<div id='reader'>

<title>Now exploring...</title>
<style id='cdn_derived' type="text/css">
</style>
<div id='reader_header' class='naked'>
<div id='subway_indicator'><!--
--><span class='subway_state_dim'></span><!-- comments to shield html parser from
spurrious space and cr's that cause gaps in the display
--><span class='subway_tessallate_2 subway_tess_common'></span><!--
--><span class='subway_state_lit'></span><!--
--><span class='subway_tessallate_1 subway_tess_common'></span><!--
--><span class='subway_state_dim'></span><!--
--><span class='subway_tessallate_0 subway_tess_common'></span><!--
--><span class='subway_state_dim'></span><!--
--><span class='subway_tessallate_0 subway_tess_common'></span><!--
--><span class='subway_state_dim'></span><!--
--></div>
<div id='textandcontroldiv'>
<span id='titlespan' >
<span class='you_are_exploring'>You are exploring</span>
<span id='offer_title_div' class='you_are_exploring green'>standby</span>
</span>
<span id='countdown_text'>
<span id='countdown_control'><!-- the count down control instruments are inserted here--></span>
</span>
</div>
<div class='greenbg bar'></div>
</div><!-- end header -->
<iframe id='content_wrapper'></iframe>

</div>
<div id='email'>
<div id='email_wrapper'>
<a onclick='email.dismiss()' id='email_close_image' class='simplemodal-close'></a>
<div id='email_form_headline' class='header'>Email a link to this video!</div>

<form accept-charset='UTF-8' action='/email/create' id='share_email_form' method='post' onsubmit='return email.submit()'>
<div>
<label id='email_to_label' for='email_to'>To:</label>
<input id='email_to' name='email_to' type='text'/>
</div>
<div>
<label id='email_from_label' for='email_from'>From:</label>
<input id='email_from' name='email_from' type='text' value='&your_email_address&'/>
</div>
<div>
<label id='email_bodylabel' for='email_body'>Message:</label>
<textarea id='email_body' name='email_body' rows='4' cols='40'>I just watched this video.</textarea>
</div>
<input id='email_form_submit' type='image'/>
</form>
</div>
</div>

<div id="skippingMessage" onclick="$.modal.close()">
<!-- do not put a linebreak after the span or the skip message will pickup whitespace -->
<span id="skipMessageText">We have detected that you have tried to skip part of the video. You will not get credit if you skip around the video. Please watch the video from the beginning through the end.</span>
<div align="right">
<a href="#">close</a>
</div>
</div>

<div id="standalone_controls">
<button onclick="layout.hide( 'standalone_controls' )">X</button>
<button onclick="email.show()">Email</button>
<button onclick="layout.activate( 'proscenium' )">Proscenium</button>
<button onclick="layout.activate( 'thank_you' )">Thanks You</button>
<button onclick="layout.activate( 'postqual' )">Post Offer</button>
<button onclick="oa.test_demo()">demolayout</button>
<button onclick="layout.activate( 'prequal' )">Prequal</button>
<p>
<span id=standalone_coords></span>
</p>
</div>

<div id="trackings">
<div id="view_tracking"></div>
<div class="quartile_tracking" id="quarter_1_tracking"></div>
<div class="quartile_tracking" id="quarter_2_tracking"></div>
<div class="quartile_tracking" id="quarter_3_tracking"></div>
<div class="quartile_tracking" id="quarter_4_tracking"></div>
<div id="impression_tracking"></div>
<div id="completion"></div>
</div>
</body>

</html>



Is this a bug?

Impassioned Misfit

Er, how did you get this coding?

Celestial Star

45,800 Points
  • Magical Girl 50
  • Little Bunny Foo Foo 100
  • Ian's Valentine 100
It happened by accident. I was doing my usual GC dailies when this show's up.

Quick Reply

Submit
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games
Mini-Games
Play with GCash
Play with Platinum