Hugging Face's logo

Spaces:
Nymbo
/
farmville-ai
Running

App Files Community
Omnibus commited on
Commit
633ccc8
•
1 Parent(s): e29effd

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +233 -18
index.html CHANGED
@@ -1,19 +1,234 @@
1
- <!doctype html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <title>
5
+ Solar Farmville
6
+ </title>
7
+ <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
8
+ <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
9
+ <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
10
+ <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
11
+ <link rel="stylesheet" type="text/css" href="css/styles.css">
12
+ </head>
13
+
14
+ <body>
15
+ <div class="game-container container-fluid">
16
+ <div class="top container">
17
+ <div class="logo-container">
18
+ <img class="logo" src="img/logo.png" alt="">
19
+ </div>
20
+ <div class="status container">
21
+ <div class="money-container">
22
+ <p class="money-title">Money</p>
23
+ <div class="progress">
24
+ <div class="money-bar progress-bar progress-bar-success progress-bar-striped active money-amount" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
25
+ $1000
26
+ </div>
27
+ </div>
28
+ </div>
29
+ <div class="waste-container">
30
+ <p class="waste-title">Waste</p>
31
+ <div class="progress">
32
+ <div class="waste-bar progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:0%">
33
+ 0%
34
+ </div>
35
+ </div>
36
+ </div>
37
+ <div>
38
+ <p class="year-title">
39
+ Year
40
+ </p>
41
+ <div class="year-number">
42
+
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </div><!-- end of .top.container -->
47
+ <div class="titlescreen popup">
48
+ <div class="row">
49
+ <div class="col-sm-6 col-centered">
50
+ <img class="titleLogo img-responsive" src="img/logo.png">
51
+ <button class="btn btn-primary btn-start text-center" type="button">Start</button>
52
+ <h3>Instructions</h3>
53
+ <p><span><h4 class="red">Goal:</h4></span> Get as much money as possible without polluting the planet.</p>
54
+ <p><span><h4 class="orange">How to get money?</h4></span>Build and upgrade buildings.</p>
55
+ <p><span><h4 class="blue">How to get rid of waste?</h4></span> Spend money to remove waste at the end of each year.</p>
56
+ </div>
57
+
58
+ </div>
59
+ </div>
60
+ <div class="grid">
61
+ <div class="row">
62
+ <div class="block col-sm-4 block-1" data-block="0">
63
+ <div class="version-text" data-version="1"> Version 1</div>
64
+ <img class="energy-img">
65
+ </div>
66
+ <div class="block col-sm-4 block-2" data-block="1">
67
+ <div class="version-text" data-version="1"> Version 1</div>
68
+ <img class="energy-img">
69
+ </div>
70
+ <div class="block col-sm-4 block-3" data-block="2">
71
+ <div class="version-text" data-version="1"> Version 1</div>
72
+ <img class="energy-img">
73
+ </div>
74
+ </div>
75
+ <div class="row">
76
+ <div class="block col-sm-4 block-4" data-block="3">
77
+ <div class="version-text" data-version="1"> Version 1</div>
78
+ <img class="energy-img">
79
+ </div>
80
+ <div class="block col-sm-4 block-5" data-block="4">
81
+ <div class="version-text" data-version="1"> Version 1</div>
82
+ <img class="energy-img">
83
+ </div>
84
+ <div class="block col-sm-4 block-6" data-block="5">
85
+ <div class="version-text" data-version="1"> Version 1</div>
86
+ <img class="energy-img">
87
+ </div>
88
+ </div>
89
+ </div><!-- end of .grid -->
90
+ <button type="button" class="btn btn-primary btn-next-year">Next Year</button>
91
+ <div class="popup buy-menu">
92
+ <div class="escape-container">
93
+ <span class="glyphicon glyphicon-remove"></span>
94
+ </div>
95
+ <h2 class="blue">Choose energy source to build:</h2>
96
+ <div class="row">
97
+ <div class="col-sm-3">
98
+ <h2>Oil</h2>
99
+ <img class="img-responsive img-block-type"src="img/oil.png" alt="">
100
+ <div class="text-center">
101
+ <p class="green">+$100/Year</p>
102
+ <p class="red">+15% Waste/Year</p>
103
+ </div>
104
+
105
+ <button type="button" class="btn btn-primary oil btn-buy" data-buy="oil">
106
+ <span class="glyphicon glyphicon-usd"></span>
107
+ 100
108
+ </button>
109
+ </div>
110
+ <div class="col-sm-3">
111
+ <h2>Solar</h2>
112
+ <img class="img-responsive img-block-type"src="img/solar.png" alt="">
113
+ <div class="text-center">
114
+ <p class="green">+$250/Year</p>
115
+ <p class="red">+5% Waste/Year</p>
116
+ </div>
117
+ <button type="button" class="btn btn-primary btn-buy" data-buy="solar">
118
+ <span class="glyphicon glyphicon-usd"></span>500
119
+ </button>
120
+ </div>
121
+ <div class="col-sm-3">
122
+ <h2>Wind</h2>
123
+ <img class="img-responsive img-block-type" src="img/wind.png" alt="">
124
+ <div class="text-center">
125
+ <p class="green">+$500/Year</p>
126
+ <p class="red">+5% Waste/Year</p>
127
+ </div>
128
+ <button type="button" class="btn btn-primary btn-buy" data-buy="wind">
129
+ <span class="glyphicon glyphicon-usd"></span>1500
130
+ </button>
131
+ </div>
132
+ <div class="col-sm-3">
133
+ <h2>Nuclear</h2>
134
+ <img class="img-responsive img-block-type" src="img/nuclear.png" alt="">
135
+ <div class="text-center">
136
+ <p class="green">+$1500/Year</p>
137
+ <p class="red">+15%/Year</p>
138
+ </div>
139
+ <button type="button" class="btn btn-primary btn-buy" data-buy="nuclear">
140
+ <span class="glyphicon glyphicon-usd"></span>2500
141
+ </button>
142
+ </div>
143
+ </div>
144
+ </div><!-- end of .buy-menu -->
145
+ <div class="popup upgrade-menu">
146
+ <div class="escape-container">
147
+ <span class="glyphicon glyphicon-remove"></span>
148
+ </div>
149
+ <h2 class="text-center">Upgrades</h2>
150
+ <div class="row">
151
+ <div class="col-sm-3 version" data-version="1">
152
+ <h3>Version 1</h1>
153
+ <img class="img-responsive img-block-type"src="img/oil.png" alt="">
154
+ <div class="text-center">
155
+ <p class="green">+Current Price/Year</p>
156
+ <p class="red">+Current Price/Year</p>
157
+ </div>
158
+ <button type="button" class="btn btn-primary oil btn-upgrade" data-upgrade="1">
159
+ <span class="glyphicon glyphicon-usd"></span>
160
+ Buy
161
+ </button>
162
+ </div>
163
+ <div class="col-sm-3 version" data-version="2">
164
+ <h3>Version 2</h1>
165
+ <img class="img-responsive img-block-type"src="img/solar.png" alt="">
166
+ <div class="text-center">
167
+ <p class="green">+$150/Year</p>
168
+ <p class="red">+0%/Year</p>
169
+ </div>
170
+ <button type="button" class="btn btn-primary btn-upgrade" data-upgrade="2">
171
+ <span class="glyphicon glyphicon-usd">1000</span>
172
+ </button>
173
+ </div>
174
+ <div class="col-sm-3 version" data-version="3">
175
+ <h3>Version 3</h1>
176
+ <img class="img-responsive img-block-type" src="img/wind.png" alt="">
177
+ <div class="text-center">
178
+ <p class="green">+$200/Year</p>
179
+ <p class="red">+0%/Year</p>
180
+ <p class="price"></p>
181
+ </div>
182
+ <button type="button" class="btn btn-primary btn-upgrade" data-upgrade="3">
183
+ <span class="glyphicon glyphicon-usd">3000</span>
184
+ </button>
185
+ </div>
186
+ <div class="col-sm-3 remove">
187
+ <h3>Remove Building</h3>
188
+ <button class="btn btn-warning btn-remove">Remove</button>
189
+
190
+ </div>
191
+ </div>
192
+ </div>
193
+ <div class="popup gameover">
194
+ <h2 class="text-center">Game Over</h2>
195
+ <p class="gameover-score">Your score is: <p>
196
+ <div class="progress">
197
+ <div class="money-amount money-bar progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
198
+ $250
199
+ </div>
200
+ </div>
201
+ <p class="year-title">
202
+ You survived for <span class="yearnum"></span> years from 2014 - <span class="year-number"></span>
203
+ </p>
204
+
205
+ <div class="row gameover-btns">
206
+ <div class="col-sm-3">
207
+ <button type="button" class="btn btn-primary btn-again">Play Again?</button>
208
+ </div>
209
+ <div class="col-sm-3">
210
+ <button type="button" class="btn btn-primary btn-menu">Back to Menu</button>
211
+ </div>
212
+ </div>
213
+ </div><!-- end of .gameover -->
214
+ <div class="popup year-report">
215
+ <div class="escape-container">
216
+ <span class="glyphicon glyphicon-remove"></span>
217
+ </div>
218
+ <div class="fact">
219
+ <h2 class="fact-title">SMUD Fact of the Year</h2>
220
+ <p class="fact-text"></p>
221
+ </div>
222
+ <h3 class="green">Money Gained $<span class="year-gain"></span></h3>
223
+ <h3 class="red">Waste Gained <span class="year-waste"></span></h3>
224
+
225
+ <button class="btn btn-danger remove-waste-25-btn" data-waste="25">Remove 25% Waste for <span class="remove-waste-25"></span> </button>
226
+ <button class="btn btn-danger remove-waste-50-btn" data-waste="50">Remove 50% Waste for <span class="remove-waste-50"></span></button>
227
+ <button class="btn btn-primary btn-next">Continue</button>
228
+ </div>
229
+ </div><!-- end of .game-container -->
230
+ <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
231
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
232
+ <script type="text/javascript" src="js/main.js"></script>
233
+ </body>
234
+ </html>