var today = new Date();
$(".dialog").dialog({
autoOpen : false, modal : true, show : "blind", hide : "blind"
});
$(".day").click(function() {
if (today.getMonth() === 11 || today.getYear()> 2018){
var clickedId = $(this).attr('id');
if (today.getDate() >= Number(clickedId)){
$(".dialog.day"+clickedId).dialog("open");
if (clickedId == 22){
itsMonopolyDay();
}
}
else {
$(".dialog.notYet").dialog("open");
}
}
else
{
$(".dialog.notEvenDecember").dialog("open");
}
return false;
});
$("#zorkInput").on("keydown", function (e) {
if (e.keyCode === 13) {
checkAction();
}
});
function fortuneCookie() {
var fortunes = [
"You will get a fortune cookie.",
"You will vote for an answer about an advent calendar on meta.",
"Error: 404 Fortune not found.",
"You cannot grasp the true nature of the fortune cookie attack.",
"This is not the fortune cookie you were looking for.",
"One does not simply eat a fortune cookie",
"I was a meta user like you some time ago but then I took a fortune cookie to the knee.",
"The Parrot! Do not trust the Parrot!",
"A WINNER IS YOU!",
"You will start watching a show about candy colored ponies.",
"You will find true happiness if you share this answer link with 7 friends withing one hour."
];
var randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)];
alert(randomFortune);
}
function claimCookie(){
alert("Sorry, the Stack Exchange snippets sandbox security does not allow us to set cookies on the client :P.")
}
function closeUpdateDialog() {
$(".dialog.day17").dialog("close");
}
function startEndlessUpdate(){
$(".dialog.endlessUpdate").dialog("open");
var messages = [
"Generating bugs...",
"Downloading MLP episodes...",
"Configuring flux capacitor...",
"Sealing user credentials...",
"Removing Herobrine...",
"Installing SharePoint...",
"Hatching chickens eggs...",
"Doing lame puns...",
"Resting for a bit...",
"Mapping dungeons...",
"Spawing NPCs...",
"Generating artifacts...",
"Filling water buckets...",
"Knitting hats...",
"Formatting local disks...",
"Collecting 200$ from passing start...",
"Parsing HTML using RegEx...",
"Summoning Cthulhu...",
"Pinging Shog9...",
"Asking Jon Skeet for the codez...",
"Searching for unicorns...",
"Asking to upvote swag contest submissions...",
"Attempting to become the Pirate King...",
"Catching all Pokémons...",
"Synching clocks...",
"Frammenting disk...",
"Increasing ram usage...",
"Reading some books...",
"Loading cat pictures...",
"Drawing red hand circles...",
"Staring chat messages...",
"Collecting more hats...",
"Configuring HDRR...",
"Crafting Rings of Power...",
"Waiting for planet alignment...",
"Improving room feng-shui...",
"Coloring picture books...",
"Eating cotton candy...",
"Baking cupcakes...",
"Buying muffins...",
"Making friends...",
"Ranting for downvotes...",
"Putting holes in swiss cheese...",
"Raising the sun...",
"Watering tomatoes...",
"Opening worms cans...",
"Increasing system entropy...",
"Generating funny messages...",
"Scolding Shadow Wizard for being uncouth...",
"Computing question to the Life, Universe and Everything...",
"Waiting for user to get bored...",
"Writting letters to Princess Celestia...",
"Learning friendship lessons...",
"Making jokes no one will understand...",
];
setInterval(function switchUpdateMessage(){
var randomMessage = messages[Math.floor(Math.random() * messages.length)];
$("#updateMessage").text(randomMessage);
return switchUpdateMessage;
}(), 3000);
}
function checkAction() {
$("#zorkInputLine").hide();
value = $("#zorkInput").val();
if (value == "offer cupcake to grue") {
$("#zorkRoomText").text("You befriend a nearby grue by offering it the last cupcake you had. In return, the grue shows you the way to the Stack Exchange treasure room, where all the unicorn plushes are stored. THE END.");
}
else {
$("#zorkRoomText").text("Sorry, I don't know how to '"+value+"'. But it doesn't matter now. A grue came and ate you. GAME OVER.");
}
}
function itsMonopolyDay(){
setTimeout(function foo() {
alert$("Oh, no! You landed on Stack Palace! And JNat had an hotel built there, too! You now own Stack Exchange 1500 unicorn dollars! Let's hope you get some by the end of this".dialog.monopoly")."
dialog("open");
}, 1000);
}
function showCommonRates() {
$(".dialog.commonCrateRates").dialog("open");
}
function showRareRates() {
$(".dialog.rareCrateRates").dialog("open");
}
function showEpicRates() {
$(".dialog.epicCrateRates").dialog("open");
}
function showBuyPopup(rarity){
if (confirm("Are you sure you want to buy a "+rarity+ " crate?")){
$(".dialog.dupeHat").dialog("open");
}
else {
}
}
.wrapper{
--transform: scale(0.5);
}
#calendar {
width: 35%;
margin: auto;
border: 1px solid black;
}
#calendar > div {
display: flex;
justify-content: space-evenly;
}
#calendar > div > div {
width: 14%;
text-align: center;
}
#calendar > div.header{
background-color: red;
color: white;
font: 12px bold;
height: 20px;
border-bottom: 1px solid black;
line-height: 20px;
}
.dayRow{
--background: green;
}
.day {
height: 30px;
line-height: 30px;
vertical-align: middle;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4IiBjbGFzcz0ic3ZnLWljb24iPjxwYXRoIGQ9Ik0xIDEzYzAgMS4xLjkgMiAyIDJoOHYzbDMtM2gxYTIgMiAwIDAgMCAyLTJ2LTJIMXYyek0xNSAxSDNhMiAyIDAgMCAwLTIgMnYyaDE2VjNhMiAyIDAgMCAwLTItMnpNMSA2aDE2djRIMVY2eiIgc3R5bGU9ImZpbGw6bGlnaHRncmF5Ij48L3BhdGg+PC9zdmc+");
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
font-size: 15px;
font-weight: bold;
}
.theLegendaryFreeHandDrawnCircleOfLegends {
background-size: 100% 100%;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcAAABCCAIAAACKH1z7AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAL0SURBVGhD7Zm/bhQxEId5EDpSQRW661KRKqlCBVVSkSqiQRRIFDwCBRIFPRI9okE0UR4gokFUUEUiYUMCR/hz/FYenWDO6/GMvQ4Gf5pqds/jb+313novzP5FmlU9NKt6aFb10KzqoVnVQ7OqhySrn113evfe0WTlw8UlMXAaTv7+5i39eEwsVioZFoeXrnx++IgaGg2L1cntO6yv5sClQWs/3r2npjOhtsJAHV6+yjqXJZzh1+cvqFICaqsvj5+w3mQPXLXEAVRbHV+/wToRjn4EtnewSBjmbe92cECFNaitTu8/YLVjAtcCvz17+erjyjV2KBy4KIZB01nhpupW11jhyKAm/mT69Jm4lh4tT7DkojT9JgKFVYoSgloZ5mx3r39gLE/YD10c39yk8yKItYLSp61brFJ8YECooQgwgN5lNn55lK3g433m4nmK+4RO8oEVwt1FuPzhMxf5tv96Uaxb36DDErLV0Nql7agWiGHWsaJ0TEK28k4G1YxKgdWlrIRsxdpFwHPsgZrDSlNWQm1luElSYNUpKyFYYamwtZsLW/WQlfcBRcdKYasessKCzhpVPQqzwDpAWYmQFVv9+gfU7h4dK8XvHUBQViJkxVosuUjMYX2grITCirJlsfWhWZ0Htj40q/PA1of/3upke8e2N5IC6wNlJUJWeOyyRm17IymwDlBWImTl3STDSyQdLgKrTlmJkBVe0RdfGTGAJechq05ZiZAV8L5mu829MrDSlJUQrByLN1iZDzaA1aWsRJTV0A1WYCqyopSViLLCyHh3WJEce9BYRcpKRFkB78rhot8unk7pvNywWpSViLUCWDmG9v671bWRZiMrRFkJhZVjaLsYs3GMPx+sCmUl1FYgMGh5/3yYd7gsVo5ufYOVdIF8lhHzfq+gYxJ2q6GFcbyI3+GyWwGIab8dpkT8DleS1Rztx2JDYF5QsQjyWI09aNrN/TxWDu9f4cTA2mPYWs1p9ffQrOqhWdVDs6qHZlULs9kvgpwKtSKN7Z0AAAAASUVORK5CYII=");
}
.flex-row {
display: flex;
justify-content: flex-start;
}
.flex-button-row {
display: flex;
justify-content: space-between;
}
.extraSmallText{
font-size: 6px;
}
.goldTicket{
background-color: gold;
}
.center{
text-align: center;
}
.song{
font-size: small;
font-style: italic;
}
.itemImage{
border: 4px double white;
padding: 10px 5px;
background-color: black;
height: 52px;
}
.legendaryItem {
background-color: black;
border: 4px double white;
padding: 5px;
flex-grow: 1;
}
.legendaryItem > .name{
font-style: bold;
color: #ff8000;
margin: 5px 0 0 0;
}
.legendaryItem > .rarity{
font-style: italic;
color: gold;
margin: 2px 0 0 0;
}
.legendaryItem > .description{
color: white;
margin: 5px 0 0 0;
font-size: 14px;
}
.legendaryItem >.flavorText{
color: yellow;
margin: 5px 0 0 0;
font-size: 12px;
font-style: italic;
}
.legendaryItem > .sellingPrice{
color: white;
font-size: 14px;
margin: 10px 0 0 0;
}
.smithSpeech{
color: black;
background: rgb(211,211,211);
border: 2px ridge black;
font-size: 10px;
}
.updateInfoArea {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
.updateInfoArea > #updateMessage{
font-size: small;
font-style: italic;
}
.dialog.day18.ui-dialog-content{
background-color: black;
color: white;
font-family: "Consolas";
}
.unstyledInput{
background: transparent;
border: none;
color: white;
}
.monopolyCard{
border: 1px solid black;
padding: 2px;
}
.monopolyHeader{
width: 100%;
color: white;
background-color: blue;
text-align: center;
padding: 5px 0;
margin: 0;
}
.monopolytext{
display: grid;
grid-template-columns: 110px 50px;
grid-template-rows: auto;
justify-content: center;
font-size: small;
grid-template-areas:
"text0 price0"
"text1 price1"
"text2 price2"
"text3 price3"
"text4 price4"
"text5 price5";
}
.monopolyFooter{
font-size: small;
padding-top: 5px;
font-style: italic;
}
.text0 { grid-area: text0; }
.crates {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.crate{
display: flex;
flex-direction: column;
align-items: center;
}
.cratePic{
height: 80px;
width: 80px;
align-self: center;
cursor: pointer;
}
.crateLabel,
.cratePrice{
font-size: small;
}
.crateLabel{
font-weight: bold;
}
.percentageRow{
display: flex;
flex-direction: row;
justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<div class="wrapper">
<section id="calendar">
<div class="header">
<div class="dayLabel">Mon</div>
<div class="dayLabel">Tue</div>
<div class="dayLabel">Wed</div>
<div class="dayLabel">Thu</div>
<div class="dayLabel">Fri</div>
<div class="dayLabel">Sat</div>
<div class="dayLabel">Sun</div>
</div>
<div class="dayRow">
<div class="emptyDay"> </div>
<div class="emptyDay"> </div>
<div class="emptyDay"> </div>
<div class="emptyDay"> </div>
<div class="emptyDay"> </div>
<div id="1" class="day">1</div>
<div id="2" class="day">2</div>
</div>
<div class="dayRow">
<div id="3" class="day">3</div>
<div id="4" class="day">4</div>
<div id="5" class="day">5</div>
<div id="6" class="day">6</div>
<div id="7" class="day">7</div>
<div id="8" class="day">8</div>
<div id="9" class="day">9</div>
</div>
<div class="dayRow">
<div id="10" class="day">10</div>
<div id="11" class="day">11</div>
<div id="12" class="day">12</div>
<div id="13" class="day">13</div>
<div id="14" class="day">14</div>
<div id="15" class="day">15</div>
<div id="16" class="day">16</div>
</div>
<div class="dayRow">
<div id="17" class="day">17</div>
<div id="18" class="day">18</div>
<div id="19" class="day">19</div>
<div id="20" class="day">20</div>
<div id="21" class="day">21</div>
<div id="22" class="day">22</div>
<div id="23" class="day">23</div>
</div>
<div class="dayRow">
<div id="24" class="day">24</div>
<div id="25" class="day">25</div>
<div class="emptyDay"> </div>
<div class="emptyDay"> </div>
<div class="emptyDay"> </div>
<div class="emptyDay"> </div>
<div class="emptyDay"> </div>
</div>
</section>
</div>
<div class="dialog day1" title="Sat, Dec 1st">
<p>Today you get a free cookie! Click <a href="#" onclick="claimCookie()">here</a> to claim it.</p>
</div>
<div class="dialog day2" title="Sun, Dec 2nd">
<img src="https://i.sstatic.net/WqfqL.png" />
</div>
<div class="dialog day3" title="Mon, Dec 3rd">
<p>I had prepared some cupcakes, but I forgot today is also Twilight birthday, so she gets them instead. Sorry, try again tomorrow.</p>
<div class="flex-row">
<img src="https://i.sstatic.net/a4SzT.png" />
<div style="padding-left: 10px">
If that's any comfort, they were hay-flavored.
</div>
<div>
</div>
<div class="dialog day4" title="Tue, Dec 4th">
<img src="https://i.sstatic.net/ktpag.gif" />
</div>
<div class="dialog day5" title="Wed, Dec 5th">
<p>Congratulation! You just won some <marquee>FREE REP</marquee>To claim it please compile <a href="https://meta.stackexchange.com/questions/ask">this request form</a> with the required info. Your rep will be delivered in 6 to 8 time units.*</p>
<p class="extraSmallText">* Waring: may result in negative free rep in some not-null probability cases</p>
</div>
<div class="dialog day6" title="Thu, Dec 6th">
<p>Today is <a href="https://www.daysoftheyear.com/days/miners-day/">"Miners' Day</a>. To celebrate it, we are currently using your cpu to extract some <a href="https://meta.stackexchange.com/questions/227363/what-are-stack-overflow-unicoins">Unicoins</a> from the depths of Stack Exchange salt mines. Please, stand by while we finish and do not turn out your pc.</p>
</div>
<div class="dialog day7" title="Fri, Dec 7th">
<a href="https://www.google.it/maps/@40.7087193,-74.0068885,3a,75y,313.51h,79.36t/data=!3m7!1e1!3m5!1sAF1QipPkI6vTyjgKR-q5RmtXFX5hLwQJ_58ja3SrdGDC!2e10!3e11!7i13312!8i6656" target="_blank"><img style="width:100%" src="https://i.sstatic.net/Xj2EC.jpg" title="Nope, you won't get the chocolate bar, we alredy ate it."/></a>
<div class="center" style="font-size: 12px">Please, click the ticket to claim it (if that doesn't work, open the link in a new tab)</div>
</div>
<div class="dialog day8" title="Sat, Dec 8th">
<p>Today prize contained personaly identificable informations and has been removed in compliance with the new G.D.P.R European laws.</p>
</div>
<div class="dialog day9" title="Sun, Dec 9th" style="font-size: 13px;">
<div class="flex-row">
<img src="https://i.sstatic.net/KFtJZ.png" style="height: 60px; padding-top: 20px;" />
<div style="padding-left: 10px">
<p>You just got a cheap bootleg plastic replica of Tim's Lost Keys. It is a shame they aren't the real ones, though.</p>
</div>
</div>
<p>Legends tell that someday an Hero of Light will came and claim the lost keys, putting an end to the dark reign of the <a href="https://meta.stackexchange.com/a/288240/171199">Unjustified Downvote Lord</a>.</p>
</div>
<div class="dialog day10" title="Mon, Dec 10th">
<div class="flex-row">
<div class="itemImage">
<img src="https://i.sstatic.net/62eCw.gif" style="height: 50px;"/>
</div>
<div style="margin-left: 5px" class="legendaryItem">
<h5 class="name">Ring Of The Annoying Bird</h5>
<h6 class="rarity">Item level 9001</h6>
<div class="description">
<div>Binds when picked up</div>
<div>Finger</div>
<div style="margin-top: 5px">+75% to agro generation</div>
<div style="color: lightgreen">Equip: Persuasion +20 (25 at level 9999)</div>
</div>
<div class="flavorText">"Sometimes a quick rant is the fastest way to get things done."</div>
<div class="sellingPrice">Sell price: 10 <span style="color: gold">●</span> 18 <span style="color: silver">●</span></div>
</div>
</div>
</div>
<div class="dialog day11" title="Tue, Dec 11th">
<p>Today, you get free hats. Why are you here? <a href="https://winterbash2018.stackexchange.com/">Go hunting now!</a>.</p>
</div>
<div class="dialog day12" title="Wed, Dec 12th" style="background-image: url('https://i.sstatic.net/cuWpp.png'); background-size: cover;">
<div class="flex-row" style="height: 200px">
<img src="https://i.sstatic.net/D2GtJ.png" style="height: 70px; padding-top: 20px;" />
<div style="padding-left: 10px">
<p class="smithSpeech">𝕱𝖎𝖓𝖆𝖑𝖑𝖞 𝖙𝖍𝖊𝖊 𝖍𝖆𝖘'𝖙 𝖈𝖔𝖒𝖊𝖙𝖍, 𝕬𝖛𝖆𝖙𝖆𝖗. 𝕴 𝖍𝖆𝖘'𝖙 𝖇𝖊𝖊𝖓 𝖜𝖆𝖎𝖙𝖎𝖓𝖌 𝖍'𝖗𝖊 𝖆𝖑𝖑 𝖉𝖆𝖞! 𝖎 𝖓𝖊𝖊𝖉𝖊𝖙𝖍 𝖙𝖔 𝖌𝖎𝖛𝖊𝖙𝖍 𝖙𝖍𝖊𝖊 𝖆 𝖛𝖎𝖙𝖆𝖑 𝖈𝖑𝖚𝖊 𝖋'𝖗 𝖙𝖍𝖞 𝖖𝖚𝖊𝖘𝖙. 𝕿𝖔 𝖋𝖎𝖓𝖉𝖊𝖙𝖍 𝖙𝖍𝖊 𝖑𝖊𝖌𝖊𝖓𝖉𝖆𝖗𝖞 𝕮𝖔𝖘𝖒𝖎𝖈 𝕭𝖗𝖆𝖎𝖓 𝖈𝖔𝖝𝖈𝖔𝖒𝖇 𝖙𝖍𝖊𝖊 𝖘𝖍𝖆𝖑𝖑 𝖓𝖊𝖊𝖉𝖊𝖙𝖍 𝖙𝖔 𝖆𝖈𝖖𝖚𝖎𝖗𝖊𝖙𝖍 𝖆 𝖓𝖎𝖈𝖊 𝖆𝖓𝖘𝖜'𝖗 𝖇𝖆𝖉𝖌𝖊</p>
</div>
</div>
</div>
<div class="dialog day13" title="Thu, Dec 13th">
<div class="flex-row">
<img src="https://i.sstatic.net/C1BVJ.png" style="height: 60px; padding-top: 20px;" />
<div style="padding-left: 10px">
<p>You got a piece of moldy cheese. Only 47.577.295 lefthover cheese slices from the last swag event to ditch off now.</p>
</div>
</div>
</div>
<div class="dialog day14" title="Fri, Dec 14th">
<div class="flex-row">
<img src="https://i.sstatic.net/Vqahd.png" />
<div style="padding-left: 10px" class="song">
<p>On the first day of Christmas your true network sent to you</p>
<p>A <a href="https://meta.stackexchange.com/users/369802/tinkeringbell">parrot</a> in a pear tree.</p>
</div>
<div>
</div>
<div class="dialog day15" title="Sat, Dec 15th">
<div class="flex-row">
<img src="https://i.sstatic.net/LZgfP.png" style="height: 60px; padding-top: 20px;" onclick="fortuneCookie()" />
<div style="padding-left: 10px">
<p>A fortune cookie! You should click it an see what is inside!</p>
</div>
</div>
</div>
<div class="dialog day16" title="Sun, Dec 16th year 214">
<div class="flex-row">
<img src="https://i.sstatic.net/ZzZMn.jpg" style="height: 60px; padding-top: 20px;" onclick="fortuneCookie()" />
<div style="padding-left: 10px; font-size: 10px;">
To the attention of ALL CITIZENS. This calendar entry is currently placed at Security Clearance ULTRAVIOLET. Reading any part of this notice without appropiate security clearance is considered treason. Please proceed directly to your nearest available Termination Booth. Thank you for your cooperation. Have a nice daycycle!
</div>
</div>
</div>
<div class="dialog day17" title="Mon, Dec 17th">
<p>In order to see this day calendar item, you need to update your Swag Advent Calendar app to a never version.</p>
<div class="flex-button-row"><button onclick="startEndlessUpdate()">Update</button><a href="#" onclick="closeUpdateDialog()">Remind me later</a></div>
</div>
<div class="dialog day18" title="Tue, Dec 18th">
<div style="background-color: black; color: white;">
<p id="zorkRoomText">> You find yourself in a room, staring at an advent calendar. On a nearby table there is a lantern. The rest of the room is pitch black. You are likely to be eaten by a grue. What do you do?</p>
<p id="zorkInputLine">> <input id="zorkInput" type="text" class="unstyledInput" />
</div>
</div>
<div class="dialog day19" title="Wed, Dec 19th">
<div class="flex-row">
<img src="https://i.sstatic.net/FietH.png" style="height: 60px; padding-top: 20px;" />
<div style="padding-left: 10px; font-size: small;">
<p>Today Stack Exchange is giving away free fried chicken nuggets! Get them while they last!</p>
<p>... wait... Chicken nuggets? <a href="https://meta.stackexchange.com/questions/319928/the-lord-of-the-hats-the-return-of-the-chicken">They wouldn't dare!!! BALPHAAAAAAAA!!!!!!</a></p>
</div>
</div>
</div>
<div class="dialog day20" title="Thu, Dec 20th">
<div class="flex-row">
<img src="https://i.sstatic.net/jv1Vp.png" style="height: 60px; padding-top: 20px;" />
<div style="padding-left: 10px; font-size: small; padding-top: 10px;">
<p>Otay oinjay ethay Tacksay Exchangay abalcay, askay otay ethay arrotpey inay ethay averntay</p>
</div>
</div>
</div>
<div class="dialog day21" title="Fri, Dec 21st">
<img src="https://i.sstatic.net/gnVLT.jpg" style="width: 100%"/>
<p>Today it is Dalek Day, so instead of the usual joke you get a nice collection of Daleks. Please choose your favorite one, we have all flavors from strawberry to liquirice.</p>
</div>
<div class="dialog day22" title="Sat, Dec 22th">
<div class="monopolyCard">
<h4 class="monopolyHeader">Park Palace</h4>
<div class="monopolytext">
<div class="grid-area: text0">RENT</div><div style="grid-area: price0">🦄$35</div>
<div style="grid-area: text1">With 1 House</div><div style="grid-area: price1">🦄$175</div>
<div style="grid-area: text2">With 2 House</div><div style="grid-area: price2">🦄$500</div>
<div style="grid-area: text3">With 3 House</div><div style="grid-area: price3">🦄$1100</div>
<div style="grid-area: text4">With 4 House</div><div style="grid-area: price4">🦄$1300</div>
<div style="grid-area: text5">With Hotel</div><div style="grid-area: price5">🦄$1500</div>
</div>
<div class="monopolyFooter">If a player owns ALL the lots of any Color-Group, the rent is Doubled on Unimproved Lots in that group. </div>
</div>
</div>
<div class="dialog day23" title="Sun, Dec 23st">
<div class="flex-row">
<img src="https://i.sstatic.net/5BO78.gif" style="height: 60px; padding-top: 20px;" />
<div style="padding-left: 10px; font-size: small; padding-top: 10px;">
<p>You got a sprite swap mod! Now you can play as JNat in any Nes game!.</p>
<p>The mod is so advanced that it doesn't require any installation either: just boot up the game of your choice, concentrate and here you go:P</p>
</div>
</div>
</div>
<div class="dialog day24" title="mon, Dec 24th">
<h5 style="margin: 0; text-align: center; background-color: blue; color: white;">
<div>Complete your hat collection!</div>
<div>Buy an Hat Crate now!</div>
</h5>
<div class="crates">
<div class="crate">
<img class="cratePic" src="https://i.sstatic.net/7J4Bh.png" onclick="showBuyPopup('Common')"/>
<span class="crateLabel">Common <a href="#" onclick="showCommonRates()">(?)</a></span>
<span class="cratePrice">🦄$10</span>
</div>
<div class="crate">
<img class="cratePic" src="https://i.sstatic.net/bWyRp.png" onclick="showBuyPopup('Rare')" />
<span class="crateLabel">Rare <a href="#" onclick="showRareRates()">(?)</a></span>
<span class="cratePrice">🦄$75</span>
</div>
<div class="crate">
<img class="cratePic" src="https://i.sstatic.net/1jAxe.png" onclick="showBuyPopup('Epic')"/>
<span class="crateLabel">Epic <a href="#" onclick="showEpicRates()">(?)</a></span>
<span class="cratePrice">🦄$200</span>
</div>
</div>
</div>
<div class="dialog day25" title="Tue, Dec 25th">
<p>Today is the last day... So instead of a joke you will get something different.</p>
<p>I don't know if you, reader, actually celebrate Christmas or any other special event in this period. But I had to chose a day to end this, so... forgive me if this date has no meaning in your country.</p>
<p>Either way... have a nice day! It was fun till it lasted, I hope I was able to make you smile even for a little. <a href="https://www.youtube.com/watch?v=-6ZaCY0sToo">Till next time!</a></p>
</div>
<div class="dialog notEvenDecember" title="A message from Yoda">
<p>The path to December long is. Patience have you must.</p>
</div>
<div class="dialog notYet" title="A cheater is You">
<p>Thou are not future enough to use this. Yet.</p>
</div>
<div class="dialog endlessUpdate" title="Wasting your time...">
<p>The application is currently updating. Please do not turn off your connection or disconnect your pc.</p>
<div class="updateInfoArea">
<div id="updateMessage">foobar</div>
<div style="width: 100%"><progress style="width: 100%"></progress></div>
<div>
</div>
<div class="dialog commonCrateRates" title="Common Crate % Rates">
<div class="percentageRow"><div>Common Hat</div><div>95%</div></div>
<div class="percentageRow"><div>Rare Hat</div><div>4.5%</div></div>
<div class="percentageRow"><div>Epic Hat</div><div>0.5%</div></div>
<div class="percentageRow"><div>Unique Hat</div><div>0%</div></div>
</div>
<div class="dialog rareCrateRates" title="Rare Crate % Rates">
<div class="percentageRow"><div>Common Hat</div><div>20%</div></div>
<div class="percentageRow"><div>Rare Hat</div><div>70%</div></div>
<div class="percentageRow"><div>Epic Hat</div><div>9%</div></div>
<div class="percentageRow"><div>Unique Hat</div><div>1%</div></div>
</div>
<div class="dialog epicCrateRates" title="Epic Crate % Rates">
<div class="percentageRow"><div>Common Hat</div><div>0%</div></div>
<div class="percentageRow"><div>Rare Hat</div><div>25%</div></div>
<div class="percentageRow"><div>Epic Hat</div><div>50%</div></div>
<div class="percentageRow"><div>Unique Hat</div><div>25%</div></div>
</div>
<div class="dialog dupeHat" title="A loser is you">
<p>Oh, no, what a shame. You got a common hat you already had. But you can still buy another one and hope you'll have more luck next time...</p>
</div>
<div class="dialog monopoly" title="Danger! Somecactus set us up the hotel!">
<p>Oh, no! You landed on Stack Palace! And Grace had an hotel built there, too! You now own Stack Exchange 1500 unicorn dollars! Let's hope you get some by the end of this...</p>
</div>
