1
0
forked from sent/waves
waves/public/assets/g/littlealchemy/index.html
2025-04-17 20:43:10 -05:00

643 lines
18 KiB
HTML

<!DOCTYPE html>
<html class="no-js" manifest="manifest.appcache">
<!--<!
[endif]--><head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Little Alchemy</title>
<meta
name="description"
content="A simple but addictive game. Start with four basic items and use them to find dinosaurs, unicorns and spaceships!"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
/>
<meta name="theme-color" content="#75005D" />
<link rel="stylesheet" href="css/app.580.css" media="all" />
<script src="js/OgRTanTSyNlCptY7QtgVJL4dWJA.js"></script>
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//ajax.googleapis.com" />
<link rel="dns-prefetch" href="https://apis.google.com" />
<link
rel="subresource"
href="//fonts.googleapis.com/css?family=Roboto:300,100|Roboto+Condensed:300&subset=latin,latin-ext"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Little Alchemy" />
<link rel="apple-touch-icon" sizes="76x76" href="images/76-opaque.png" />
<link rel="apple-touch-icon" sizes="120x120" href="images/120-opaque.png" />
<link rel="apple-touch-icon" sizes="152x152" href="images/152-opaque.png" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="images/apple-touch-icon-precomposed.png"
/>
<meta name="mobile-web-app-capable" content="yes" />
<link rel="icon" sizes="48x48" href="images/48-alpha.png" />
<link rel="icon" sizes="72x72" href="images/72-alpha.png" />
<link rel="icon" sizes="96x96" href="images/96-alpha.png" />
<link rel="icon" sizes="192x192" href="images/192-alpha.png" />
<link
href="//fonts.googleapis.com/css?family=Roboto+Condensed:300|Roboto:100&amp;subset=latin,latin-ext"
rel="stylesheet"
type="text/css"
/>
<style>
img,
legend {
border: 0;
}
legend,
td,
th {
padding: 0;
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
optgroup,
strong {
font-weight: 700;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
vertical-align: middle;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
pre,
textarea {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
.loadingScreen svg,
.progressBar {
cursor: pointer;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
@media only screen and (min-height: 750px) {
.panel .content {
height: 650px;
margin-top: 50px;
}
}
@media only screen and (min-height: 690px) and (max-height: 749px) {
.panel .content {
height: 650px;
margin-top: 20px;
}
}
@media only screen and (min-height: 500px) and (max-height: 689px) and (min-width: 460px) {
.panel .content {
height: 95%;
top: 2.5%;
}
}
@media only screen and (min-height: 500px) and (max-height: 689px) and (max-width: 459px) {
.panel .content {
height: 100%;
margin-top: 0;
}
}
@media only screen and (min-height: 420px) and (max-height: 499px) {
.panel .content {
height: 100%;
margin-top: 0;
}
}
@media only screen and (min-height: 260px) and (max-height: 419px) {
.panel .content {
height: 100%;
margin-top: 0;
}
.loadingScreenContainer {
margin: 10px auto 0;
}
.loadingScreenLogo {
width: 222px;
height: 85px;
margin: 0 auto 10px;
}
.loadingScreenMessage {
padding: 0 5px;
margin-top: 10px;
}
.loadingScreenPlatforms {
display: none;
}
}
@media only screen and (max-height: 259px) {
.panel .content {
height: 100%;
margin-top: 0;
}
.loadingScreenContainer {
margin: 10px auto 0;
}
.loadingScreenLogo {
width: 222px;
height: 85px;
margin: 0 auto 10px;
}
.loadingScreenMessage,
.loadingScreenPlatforms {
display: none;
}
}
body,
html {
width: 100%;
height: 100%;
line-height: 1.4;
-ms-touch-action: none;
touch-action: none;
-ms-overflow-style: none;
overflow: hidden;
position: fixed;
font: 16px/26px Roboto, sans-serif-light, "Roboto Condensed", Helvetica,
"Helvetica Neue", Arial, sans-serif;
font-weight: 300;
color: #938671;
}
* {
-webkit-tap-highlight-color: transparent;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
.loadingScreen {
width: 100%;
height: 100%;
position: absolute;
z-index: 2000;
top: 0;
left: 0;
background: #fff;
}
.loadingScreenContainer {
min-width: 300px;
margin: 30px auto 0;
}
.loadingScreenLogo {
width: 287px;
height: 110px;
display: block;
margin: 0 auto 20px;
}
.playButton,
.playButtonContainer {
width: 300px;
height: 100px;
}
.playButtonContainer {
margin: 0 auto;
text-align: center;
background-color: #c226a2;
}
.loadingScreenLA2,
.loadingScreenPlatforms {
width: 100%;
text-align: center;
position: absolute;
}
.progressBar {
font-family: "Roboto Condensed";
font-size: 30pt;
color: #fff;
margin-top: -65px;
transition: opacity 0.3s ease;
-webkit-transition: opacity 0.3s ease;
}
.loadingScreen svg rect {
opacity: 0.75;
transition: opacity 1s ease-out;
-webkit-transition: opacity 1s ease-out;
}
.loadingScreen .playButton path {
transition: stroke-dashoffset 0.75s ease-in-out, opacity 0.75s ease-out;
-webkit-transition: stroke-dashoffset 0.75s ease-in-out,
opacity 0.75s ease-out;
}
.loadingScreenMessage {
text-align: center;
padding: 0 30px;
margin-top: 30px;
}
.loadingScreenLink,
.loadingScreenMessage a,
.loadingScreenPlatforms a {
border-bottom: solid 1px #c226a2;
color: #938671;
text-decoration: none;
}
.loadingScreenLink:hover,
.loadingScreenMessage a:hover,
.loadingScreenPlatforms a:hover {
color: #c226a2;
}
.nightMode .loadingScreenMessage a,
.nightMode .loadingScreenPlatforms a,
body.nightMode {
color: #9779a6;
}
.loadingScreenPlatforms {
bottom: 20px;
}
.loadingScreenLA2 {
margin: 0 auto;
bottom: 80px;
font-weight: 700;
}
.loadingScreenLA2 img {
width: 196px;
height: 90px;
margin: 0 auto;
}
@media only screen and (max-height: 560px) {
.loadingScreenLA2 img {
width: 131px;
height: 60px;
}
}
@media only screen and (max-height: 540px) {
.loadingScreenLA2 {
display: none;
}
}
.nightMode .loadingScreen {
background-color: #201a24;
}
.nightMode .loadingScreenMessage a:hover,
.nightMode .loadingScreenPlatforms a:hover {
color: #c226a2;
}
</style>
<link rel="manifest" href="manifest.json" />
<meta itemprop="name" content="Little Alchemy" />
<meta
itemprop="description"
content="A simple but addictive game. Start with four basic items and use them to find dinosaurs, unicorns and spaceships!"
/>
<meta
itemprop="image"
content="http://littlealchemy.com/img/little-alchemy-1024-logo.png"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@alchemygame" />
<meta name="twitter:title" content="Little Alchemy" />
<meta
name="twitter:description"
content="A simple but addictive game. Start with four basic items and use them to find dinosaurs, unicorns and spaceships!"
/>
<meta name="twitter:creator" content="@alchemygame" />
<meta
name="twitter:image:src"
content="http://littlealchemy.com/img/little-alchemy-1024-logo.png"
/>
<meta property="og:title" content="Little Alchemy" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://littlealchemy.com" />
<meta property="og:site_name" content="Little Alchemy" />
<meta
property="og:description"
content="A simple but addictive game. Start with four basic items and use them to find dinosaurs, unicorns and spaceships!"
/>
<meta property="og:image" content="images/little-alchemy-open-graph.png" />
</head>
<body>
<script>
if (JSON.parse(localStorage["settings"]).nightMode) {
document.body.className += " nightMode";
}
</script>
<div class="googlePlusHaxor"></div>
<!--[if lt IE 7]>
<p class="chromeframe">
You are using an <strong>outdated</strong> browser. Please
<a href="http://browsehappy.com/">upgrade your browser</a> or
<a href="http://www.google.com/chromeframe/?redirect=true"
>activate Google Chrome Frame</a
>
to improve your experience.
</p>
<![endif]-->
<div id="loadingScreen" class="loadingScreen">
<div class="loadingScreenContainer">
<img class="loadingScreenLogo" src="images/loading-screen-logo.png" />
<div class="playButtonContainer rect">
<div class="playButton">
<svg class="playButton" width="300" height="100">
<rect x="0" y="0" width="300" height="100" fill="transparent" />
<path
stroke="#75005D"
stroke-width="0"
fill="none"
d="M0 0 H 300 V 100 H 0 L 0 0"
stroke-dasharray="800, 800"
stroke-dashoffset="800"
style="display: none"
/>
</svg>
</div>
<div class="progressBar">0%</div>
</div>
<div id="loadingScreenMessage" class="loadingScreenMessage"></div>
</div>
<div class="loadingScreenLA2">
<a
href="https://littlealchemy2.com"
target="_blank"
data-la2="loading-screen-logo"
><img src="fonts/la2logo.svg"
/></a>
<div>
<a
href="https://littlealchemy2.com"
target="_blank"
class="loadingScreenLink"
data-la2="loading-screen-text"
>Little Alchemy 2 is out! Play it now!</a
>
</div>
</div>
<div class="loadingScreenPlatforms">
Little Alchemy is also available on
<a
href="https://itunes.apple.com/app/little-alchemy/id542467126"
target="_blank"
>App Store</a
>
and
<a
href="https://play.google.com/store/apps/details?id=com.sometimeswefly.littlealchemy"
target="_blank"
>Play Store!</a
>
</div>
</div>
<div id="workspace" class="workspace"></div>
<div id="side" class="side">
<div id="alphabet" class="alphabet">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</div>
<div id="libraryOverlay"></div>
<div id="outerLibrary" class="outerLibrary">
<div id="library" class="library"></div>
</div>
<div class="libraryFade"></div>
</div>
<div id="ui" class="ui">
<a id="progressShareButton" class="progressShare" target="_blank"
><div id="progress" class="progress"></div
></a>
<div id="toggleFullscreen" class="toggleFullscreen"></div>
<div id="icons" class="icons">
<a
href="https://littlealchemy2.com"
target="_blank"
title="Little Alchemy 2 is out! Play it now!"
data-la2="menu"
><div class="icon iconLA2" id="littleAlchemy2Button"></div
></a>
<div class="icon iconClear" id="clearWorkspace"></div>
<div
class="icon iconScreenshot"
id="screenshotIcon"
style="display: none"
></div>
<div class="icon iconMenu" id="menu"></div>
</div>
<div id="broadcast" class="broadcast"><div class="content"></div></div>
<div id="login" class="login"></div>
</div>
<div id="panel" class="panel">
<div class="content"><div id="closePanel" class="closePanel"></div></div>
</div>
<input type="hidden" id="searchBar" class="searchBar" maxlength="75" />
<div class="outerNotificationBox">
<div id="notificationBox" class="notificationBox hide">
<div class="close"></div>
<div class="content"></div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
window.jQuery ||
document.write(
'<script src="js/vendor/jquery-2.1.0.min.js"><\/script>'
);
</script>
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/alchemy.580.js"></script>
<script src="js/dragNdrop.580.js"></script>
<script src="js/iscroll-lite-5.0.6.1.js" async></script>
<script src="js/alchemy.firstLoad.580.js" async></script>
<script src="js/alchemy.secondLoad.580.js" async></script>
<script src="js/html2canvas-0.4.1.min.js" async></script>
<script
src="https://apis.google.com/js/client.js?onload=GAPILoaded"
async
defer
></script>
<script>
function loadCSS(e, t, n) {
"use strict";
var i = window.document.createElement("link");
var o = t || window.document.getElementsByTagName("script")[0];
i.rel = "stylesheet";
i.href = e;
i.media = "only x";
o.parentNode.insertBefore(i, o);
setTimeout(function () {
i.media = n || "all";
});
}
loadCSS("css/app.580.css");
</script>
<script src="/html/settings/js/index.js"></script>
</body>
</html>