add comment to stop real life gambling
This commit is contained in:
zyqunix
parent
822756855f
commit
fecc443e4b
4 changed files with 2939 additions and 11 deletions
224
games/farming/index.html
Normal file
224
games/farming/index.html
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Idle Farming Game</title>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://silvio-r.github.io/spop/dist/spop.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/blitzer/jquery-ui.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="game">
|
||||
<div class="upbar-container">
|
||||
<div class="upbar" id=levelbar></div>
|
||||
</div>
|
||||
<br>
|
||||
<div id="sun"></div>
|
||||
<center>
|
||||
<div id="season"></div>
|
||||
<div class="upbar-container" style="width: 250px; float: none; margin: 0 auto;">
|
||||
<div class="upbar" id=seasonbar></div>
|
||||
</div>
|
||||
</center>
|
||||
<button id=openMenuBtn>Menu</button>
|
||||
<div id="navbar">
|
||||
<ul>
|
||||
<li id=raceTimeLeft style="text-align: center;"></li>
|
||||
<li>
|
||||
<a href="#unlockTab" id=menuUnlock>
|
||||
<i class="fa fa-unlock-alt"></i> Unlockables </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#upgradesTab" id=menuUpgrades>
|
||||
<i class="fa fa-arrow-circle-up"></i> Upgrades </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#skillTab" id=menuSkill>⚅ Skills</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#achievementsTab" id=menuAchievements> 🏆 Achievements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#debtTab" id=menuDebt style="display: none;">Debt challenge</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#statsTab" id=menuStats>📊 Statistics</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#settingsTab">
|
||||
<i class="fa fa-cog fa-spin"></i> Settings </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#creditsTab">© Credits</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="contents">
|
||||
<menu id=unlockTab></menu>
|
||||
<menu id="upgradesTab" style="overflow: hidden;">
|
||||
<code>To quick buy click the button and hold enter.</code>
|
||||
<br>
|
||||
<button id=moreSpaceBtn onclick="buyMoreSpace();" class="btn-style"></button>
|
||||
<button id=growthSpeedBtn onclick="buyMoreGrowthSpeed();" class="btn-style info"></button>
|
||||
<button id=replantUpgradeBtn onclick="buyReplantChance();" class="btn-style info"></button>
|
||||
<button onclick="buyMaxEff();">Buy 10x efficiency</button>
|
||||
<button onclick="buyFill();" id=buyFillBtn class="btn-style info" title="£1 Million.">Unlock "fill all" button</button>
|
||||
</menu>
|
||||
<menu id="settingsTab">
|
||||
<label for="numberPopUps">Number pop ups</label>
|
||||
<div id=numberPopUps class=checkbox></div>
|
||||
<br>
|
||||
<label for="simplifyNumbers">Simplify numbers</label>
|
||||
<div id=simplifyNumbers class="checkbox active"></div>
|
||||
<br>
|
||||
<label for="useSelectedPlant">Use selected plant in "Fill all".</label>
|
||||
<div id="useSelectedPlant" class="checkbox active"></div>
|
||||
<br>
|
||||
<label for="sunEnabled">Show sun</label>
|
||||
<div id="sunEnabled" class="checkbox active"></div>
|
||||
<br>
|
||||
<label for="plantTime">Toggle % / time</label>
|
||||
<div id="plantTime" class="checkbox"></div>
|
||||
<br>
|
||||
<label for="replantEnable">Enable replant</label>
|
||||
<div id="replantEnable" class="checkbox active"></div>
|
||||
<br>
|
||||
<br>
|
||||
<label for="fps">FPS</label>
|
||||
<select id=fps>
|
||||
<optgroup label="Choose FPS:" id=fpsOption></optgroup>
|
||||
</select>
|
||||
<br>
|
||||
<label for="tileSize">Tile size</label>
|
||||
<select id=tileSize>
|
||||
<optgroup label="Tile size:" id=tileSizeOption></optgroup>
|
||||
</select>
|
||||
<br>
|
||||
<p onclick="saveTest();">
|
||||
<i class="fa fa-floppy-o" aria-hidden="true"></i> Save
|
||||
</p>
|
||||
<p onclick="history.go(0);">
|
||||
<i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Load
|
||||
</p>
|
||||
<p style="background-color: red;" onclick="reset();">Reset game</p>
|
||||
</menu>
|
||||
<menu id="creditsTab">
|
||||
<ul>
|
||||
<u>Creator:</u>
|
||||
<li>killereks (game design, scripts)</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<u>Helpers:</u>
|
||||
<li>Richfest (glitches & ideas)</li>
|
||||
<li>LeEclipse (glitches & ideas)</li>
|
||||
</ul>
|
||||
</menu>
|
||||
<menu id=skillTab>
|
||||
<div id=skilltree>
|
||||
<div id="skillpoints"></div>
|
||||
<span class="title">Skill tree</span>
|
||||
</div>
|
||||
</menu>
|
||||
<menu id=achievementsTab>
|
||||
<div id="achievements">
|
||||
<div id=achievementPercentage>Here</div>
|
||||
</div>
|
||||
</menu>
|
||||
<menu id=statsTab>
|
||||
<div id="stats"></div>
|
||||
</menu>
|
||||
<menu id=debtTab>
|
||||
<div id="timeLeft"></div>
|
||||
<div id=debtLeft></div>
|
||||
<button id=debtBtn>Pay 100% of money</button>
|
||||
</menu>
|
||||
</div>
|
||||
<div id="menuQuest">
|
||||
<div id="questTimeLeft"></div>
|
||||
<div id=quest></div>
|
||||
</div>
|
||||
<button onclick="fillAll();" disabled id=fillAllBtn>
|
||||
<img src="http://downloadicons.net/sites/default/files/paint-bucket-icon-61620.png" style="width: 25px; height: 25px;"> Fill all </button>
|
||||
<br>
|
||||
<div id="money"></div>
|
||||
<div id="mps"></div>
|
||||
<select id="plant" style="width: 350px;"></select>
|
||||
<div id="info"></div>
|
||||
<div id=log></div>
|
||||
<div id=map></div>
|
||||
<div class="ach">
|
||||
<div class="icon">
|
||||
<i class="fa fa-bolt" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="text_wrap">
|
||||
<div class="title"></div>
|
||||
<span class="detail"></span>
|
||||
</div>
|
||||
</div>
|
||||
<img src="http://vignette1.wikia.nocookie.net/community-sitcom/images/4/46/Arrow_up.png/revision/latest?cb=20131015142243" id=arrow style="width: 50px; height: 90px;">
|
||||
<div id=tutorialMsg></div>
|
||||
</div>
|
||||
<div id=mainMenu>
|
||||
<center>
|
||||
<img src="https://1001freedownloads.s3.amazonaws.com/vector/thumb/136232/nicubunu_RPG_map_symbols_Farm.png" alt="" class="logo">
|
||||
</center>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<center id=gameTitle>Welcome to farming idle v2</center>
|
||||
<br>
|
||||
<br>
|
||||
<button class=mainMenuBtn onclick="startGame();">Start</button>
|
||||
<br>
|
||||
<div id="currentChallenge"></div>
|
||||
<br>
|
||||
<label style="float: none;"> Tutorial? <div class=checkbox id=tutorial></div>
|
||||
</label>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<select style="width: 200px;" id=challengeOption>
|
||||
<option value="No challenge">No challenge</option>
|
||||
<optgroup label="Easy challenges">
|
||||
<option value="wheat only">Wheat only</option>
|
||||
<option value="winter only">Only winter</option>
|
||||
</optgroup>
|
||||
<optgroup label="Medium challenges">
|
||||
<option value="hideout">Hideout</option>
|
||||
<option value="race">Race</option>
|
||||
<option value="slot loss">Slot loss</option>
|
||||
</optgroup>
|
||||
<optgroup label="Hard challenges">
|
||||
<option value="five slots">5 Slots max</option>
|
||||
<option value="debt">Debt</option>
|
||||
<option value="quest chaos">Quest chaos</option>
|
||||
<option value="missing plants">Missing plants</option>
|
||||
<option value="no upgrades">No upgrades</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<br>
|
||||
<div id="challengeDesc" style="width: 200px; text-align: center; margin: 0 auto; border: 2px double black; padding: 10px;"></div>
|
||||
<br>
|
||||
<br>
|
||||
<select id=difficultySelect>
|
||||
<option>Easy</option>
|
||||
<option disabled>Medium</option>
|
||||
<option disabled>Hard</option>
|
||||
</select>
|
||||
<button onclick="reset();" style="position:absolute;left:10px; bottom: 10px; background-color: red;">Reset game</button>
|
||||
</div>
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1999
games/farming/index.js
Normal file
1999
games/farming/index.js
Normal file
File diff suppressed because it is too large
Load diff
702
games/farming/style.css
Normal file
702
games/farming/style.css
Normal file
|
|
@ -0,0 +1,702 @@
|
|||
@import url("https://fonts.googleapis.com/css?family=Caveat+Brush");
|
||||
@keyframes wiggle {
|
||||
0% {
|
||||
transform: none;
|
||||
}
|
||||
10% {
|
||||
transform: rotate(10deg) scale(1.2);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-10deg) scale(0.8);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
}
|
||||
}
|
||||
#menuQuest {
|
||||
width: 200px;
|
||||
border: 2px double black;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
cursor: move;
|
||||
background: linear-gradient(#efbc9b, #edb29e);
|
||||
}
|
||||
.logo {
|
||||
position: absolute;
|
||||
left: calc(50% - 50px);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.golden {
|
||||
border: 2px solid goldenrod !important;
|
||||
}
|
||||
#mainMenu {
|
||||
text-align: center;
|
||||
}
|
||||
#gameTitle {
|
||||
animation-name: wiggle;
|
||||
animation-duration: 4s;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0, 1);
|
||||
animation-iteration-count: infinite;
|
||||
font-size: 48px;
|
||||
text-shadow: 0 1px 0 #999999, 0 2px 0 #888888, 0 3px 0 #777777,
|
||||
0 4px 0 #666666, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333,
|
||||
0 8px 7px rgba(0, 0, 0, 0.4), 0 9px 10px rgba(0, 0, 0, 0.2);
|
||||
font-family: "Caveat Brush", cursive;
|
||||
}
|
||||
.mainMenuBtn {
|
||||
width: 25%;
|
||||
height: 4em;
|
||||
}
|
||||
#tutorialMsg {
|
||||
width: 250px;
|
||||
border: 3px double #848484;
|
||||
background-color: white;
|
||||
outline: 0;
|
||||
padding: 20px 5px 5px 5px;
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
display: block;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#tutorialMsg > button {
|
||||
padding: 16px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
-webkit-transition-duration: 0.2s; /* Safari */
|
||||
transition-duration: 0.2s;
|
||||
cursor: pointer;
|
||||
background-color: white;
|
||||
color: black;
|
||||
border: 2px solid #008cba;
|
||||
}
|
||||
#tutorialMsg > button:hover {
|
||||
background-color: #008cba;
|
||||
color: white;
|
||||
}
|
||||
#tutorialMsg > label {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
color: grey;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
#arrow {
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #6190e8;
|
||||
background: -webkit-linear-gradient(to left, #6190e8, #a7bfe8);
|
||||
background: linear-gradient(to left, #6190e8, #a7bfe8);
|
||||
|
||||
overflow-x: hidden;
|
||||
font-family: "Indie flower", cursive;
|
||||
}
|
||||
|
||||
#contents menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#contents menu:target {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tile {
|
||||
float: left;
|
||||
border: 2px solid black;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: default;
|
||||
margin: 1px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.tile:hover {
|
||||
transform: scale(1.1);
|
||||
cursor: pointer;
|
||||
z-index: 99;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.plant {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
p {
|
||||
background-color: lightblue;
|
||||
float: left;
|
||||
padding: 10px 16px;
|
||||
cursor: pointer;
|
||||
font-weight: 900;
|
||||
border: 2px solid black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
* {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #4caf50;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: all 0.4s cubic-bezier(0, 0, 1, 0);
|
||||
border: 2px solid darkgreen;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.animation {
|
||||
position: absolute;
|
||||
font-size: 24px;
|
||||
z-index: -1;
|
||||
}
|
||||
#console {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
resize: none;
|
||||
overflow: auto;
|
||||
border: 2px solid black;
|
||||
width: 250px;
|
||||
height: calc(100% - 100px);
|
||||
}
|
||||
|
||||
.upbar-container {
|
||||
width: calc(100% - 4px);
|
||||
height: 15px;
|
||||
float: right;
|
||||
background-color: white;
|
||||
border: 2px solid black;
|
||||
clear: both;
|
||||
display: block;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.upbar {
|
||||
background-color: #167ac6;
|
||||
height: 100%;
|
||||
line-height: inherit;
|
||||
transition: all 0.5s cubic-bezier(0.24, 0.07, 0, 1);
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
width: 0%;
|
||||
white-space: pre;
|
||||
border-radius: 10px;
|
||||
}
|
||||
img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
float: left;
|
||||
}
|
||||
button:disabled {
|
||||
background-color: grey;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
#money {
|
||||
font-size: 24px;
|
||||
font-family: monospace;
|
||||
}
|
||||
#season {
|
||||
font-size: 24px;
|
||||
}
|
||||
select {
|
||||
border: 1px solid #111;
|
||||
width: 150px;
|
||||
padding: 5px 35px 5px 5px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #ccc;
|
||||
height: 34px;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
#plant {
|
||||
background: url(http://www.freeiconspng.com/uploads/plant-icon-21.png) 96% /
|
||||
10% no-repeat white;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
#fps {
|
||||
background: url(http://board.4players.pl/uploads/monthly_2016_10/icon175x175.png.ebedf77abfe6da9c05d149bbd6612aa4.png)
|
||||
96% / 15% no-repeat white;
|
||||
}
|
||||
#tileSize {
|
||||
background: url(https://cdn2.iconfinder.com/data/icons/designers-and-developers-icon-set/32/increased_proportionally_square_button-512.png)
|
||||
96% / 15% no-repeat white;
|
||||
}
|
||||
#sun {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: calc(50% + 80px);
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
opacity: 0.6;
|
||||
box-shadow: 0px 0px 40px 15px white;
|
||||
transition: opacity 2s linear;
|
||||
}
|
||||
|
||||
#map {
|
||||
float: left;
|
||||
width: calc(100% - 600px);
|
||||
}
|
||||
|
||||
#contents {
|
||||
position: fixed;
|
||||
right: 250px;
|
||||
width: 400px;
|
||||
overflow-y: auto;
|
||||
max-height: 450px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
menu > button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#navbar ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 200px;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
#navbar li a {
|
||||
display: block;
|
||||
color: #000;
|
||||
padding: 8px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#navbar li a:hover {
|
||||
background-color: #555;
|
||||
color: white;
|
||||
}
|
||||
#openMenuBtn {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: red;
|
||||
border-radius: 2px;
|
||||
border: 2px solid black;
|
||||
font-size: 17px;
|
||||
margin: 2px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
line-height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
label {
|
||||
width: 250px;
|
||||
float: left;
|
||||
}
|
||||
.active {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#skilltree {
|
||||
padding: 10px;
|
||||
width: 350px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#skilltree > button {
|
||||
width: 87.5px;
|
||||
padding: 0;
|
||||
color: black;
|
||||
font-size: 11px;
|
||||
height: 60px;
|
||||
background-color: orange;
|
||||
cursor: pointer;
|
||||
border: 2px solid darkorange;
|
||||
outline: none;
|
||||
float: left;
|
||||
white-space: nowrap !important;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0, 0, 1, 0);
|
||||
}
|
||||
#skilltree > button:disabled {
|
||||
background-color: red;
|
||||
color: black;
|
||||
border: 2px solid #aa0303;
|
||||
cursor: default;
|
||||
transition: all 0.3s cubic-bezier(0, 0, 1, 0);
|
||||
}
|
||||
|
||||
.achievement {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid black;
|
||||
float: left;
|
||||
font-family: "Monospace";
|
||||
text-align: center;
|
||||
/* background-color: black;
|
||||
color: white; */
|
||||
font-size: 28px;
|
||||
margin: 1px;
|
||||
}
|
||||
.achievement > img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
#menuSkill {
|
||||
transition: all 0.4s cubic-bezier(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
.tooltipster-punk {
|
||||
border-radius: 5px;
|
||||
border-bottom: 3px solid #004fce;
|
||||
background: #2a2a2a;
|
||||
color: #fff;
|
||||
}
|
||||
.tooltipster-punk .tooltipster-content {
|
||||
font-family: "Courier", monospace;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
border-radius: 10px;
|
||||
width: 12px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
select {
|
||||
border: 2px solid black;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#unlockTab > button {
|
||||
width: 100%;
|
||||
height: 75px;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
font-size: 16px;
|
||||
margin: 1px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.btn-style {
|
||||
width: 32.5%;
|
||||
height: 75px;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
font-size: 16px;
|
||||
margin: 1px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
hr {
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-top: medium double #333;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#achievementPercentage {
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.achievementText {
|
||||
color: #f97400;
|
||||
}
|
||||
.achievementRewardText {
|
||||
color: #01bc05;
|
||||
}
|
||||
code {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ach {
|
||||
background: #52c234;
|
||||
background: -webkit-linear-gradient(to bottom, #52c234, #061700);
|
||||
background: linear-gradient(to bottom, #52c234, #061700);
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
position: fixed;
|
||||
bottom: -5em;
|
||||
left: 50%;
|
||||
margin-left: -175px;
|
||||
width: 350px;
|
||||
height: 65px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 0 0 0 0;
|
||||
}
|
||||
|
||||
.ach .icon {
|
||||
float: left;
|
||||
font-size: 2.2em;
|
||||
width: 65px;
|
||||
padding: 0.1em 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ach .text_wrap {
|
||||
position: absolute;
|
||||
left: 65px;
|
||||
width: 250px;
|
||||
top: 0.7em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ach .title {
|
||||
font-size: 0.9em;
|
||||
width: 260px;
|
||||
margin: 0 0 -0.2em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ach .detail {
|
||||
font-size: 0.7em;
|
||||
width: 260px;
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.ach {
|
||||
-webkit-transition: all 0.1s ease-out;
|
||||
-moz-transition: all 0.1s ease-out;
|
||||
-o-transition: all 0.1s ease-out;
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
|
||||
@keyframes ach_in_anim {
|
||||
0% {
|
||||
bottom: -5em;
|
||||
width: 65px;
|
||||
margin-left: -32.5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
15% {
|
||||
bottom: 2.2em;
|
||||
width: 65px;
|
||||
margin-left: -32.5px;
|
||||
}
|
||||
25% {
|
||||
bottom: 1em;
|
||||
width: 65px;
|
||||
margin-left: -32.5px;
|
||||
}
|
||||
75% {
|
||||
bottom: 1em;
|
||||
width: 65px;
|
||||
margin-left: -32.5px;
|
||||
}
|
||||
85% {
|
||||
bottom: 1em;
|
||||
width: 65px;
|
||||
margin-left: -32.5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
92% {
|
||||
bottom: 1em;
|
||||
width: 380px;
|
||||
margin-left: -190px;
|
||||
border-radius: 0;
|
||||
}
|
||||
100% {
|
||||
bottom: 1em;
|
||||
width: 350px;
|
||||
margin-left: -175px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ach_current {
|
||||
0% {
|
||||
bottom: 1em;
|
||||
width: 350px;
|
||||
margin-left: -175px;
|
||||
}
|
||||
100% {
|
||||
bottom: 1em;
|
||||
width: 350px;
|
||||
margin-left: -175px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ach_out_anim {
|
||||
0% {
|
||||
bottom: 1em;
|
||||
width: 350px;
|
||||
margin-left: -175px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
16% {
|
||||
bottom: 1em;
|
||||
width: 65px;
|
||||
margin-left: -32.5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
20% {
|
||||
bottom: 1em;
|
||||
width: 50px;
|
||||
margin-left: -25px;
|
||||
}
|
||||
34% {
|
||||
bottom: 1em;
|
||||
width: 65px;
|
||||
margin-left: -32.5px;
|
||||
}
|
||||
70% {
|
||||
bottom: 1em;
|
||||
width: 65px;
|
||||
margin-left: -32.5px;
|
||||
}
|
||||
100% {
|
||||
bottom: -5em;
|
||||
width: 65px;
|
||||
margin-left: -32.5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.achieved {
|
||||
animation: ach_in_anim 1.4s, ach_current 3s, ach_out_anim 0.8s;
|
||||
animation-delay: 0s, 1.4s, 4.4s;
|
||||
}
|
||||
|
||||
@keyframes i_in_anim {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
45% {
|
||||
transform: scale(0);
|
||||
}
|
||||
46% {
|
||||
transform: scale(0.4);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1);
|
||||
}
|
||||
55% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
60% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes i_current {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes i_out_anim {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
46% {
|
||||
transform: scale(1);
|
||||
}
|
||||
47% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
56% {
|
||||
transform: scale(1);
|
||||
}
|
||||
60% {
|
||||
transform: scale(0.4);
|
||||
}
|
||||
65% {
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
.achieved .icon i {
|
||||
animation: i_in_anim 1.4s, i_current 3s, i_out_anim 0.8s;
|
||||
animation-delay: 0s, 1.4s, 4.4s;
|
||||
}
|
||||
|
||||
@keyframes text_in_anim {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
85% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes text_out_anim {
|
||||
0% {
|
||||
width: 260px;
|
||||
}
|
||||
12% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.achieved .text_wrap {
|
||||
animation: text_in_anim 1.4s, text_out_anim 0.8s;
|
||||
animation-delay: 0s, 4.4s;
|
||||
}
|
||||
|
|
@ -1,16 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="iframe-wrapper">
|
||||
<iframe src="https://bgaming-network.com/play/Plinko/FUN?server=demo" frameborder="0" id="gamefileEmbed1" scrolling="no"></iframe></div>
|
||||
</body>
|
||||
<body>
|
||||
<div class="iframe-wrapper">
|
||||
<iframe src="https://bgaming-network.com/play/Plinko/FUN?server=demo" frameborder="0" id="gamefileEmbed1" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
<!-- ngl i stole dis off of a random site. i do not condone gambling. do not play for money unless you're 18+ -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue