-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfable.html
More file actions
238 lines (229 loc) · 11.6 KB
/
Copy pathfable.html
File metadata and controls
238 lines (229 loc) · 11.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Deriv Game Lab — The Fable Set</title>
<style>
:root{
--bg:#05070d; --panel:#0b1322; --stroke:rgba(120,160,220,.14);
--ink:#eaf2ff; --muted:#8398bd; --keep:#27e0a8; --keep2:#9fffd8;
--dup:#f5a623; --below:#6d7e9c;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
background:
radial-gradient(1200px 700px at 78% -10%, rgba(39,224,168,.10), transparent 60%),
radial-gradient(1000px 600px at 12% 0%, rgba(120,90,255,.10), transparent 55%),
var(--bg);
color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
min-height:100vh;
}
header{
padding:46px 30px 26px; max-width:1360px; margin:0 auto;
display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:18px;
border-bottom:1px solid var(--stroke);
}
.brand .eyebrow{font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}
.brand h1{
margin:0; font-size:40px; font-weight:850; letter-spacing:-.01em; line-height:1;
background:linear-gradient(92deg,#ffffff,#b9d2ff 55%,#9fffd8);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand p{margin:12px 0 0; color:var(--muted); font-size:14px; max-width:560px; line-height:1.55}
.count{
text-align:right; padding:16px 22px; border:1px solid rgba(39,224,168,.35); border-radius:16px;
background:linear-gradient(180deg,rgba(39,224,168,.10),rgba(39,224,168,.02));
box-shadow:0 0 40px rgba(39,224,168,.12) inset;
}
.count b{display:block; font-size:34px; font-weight:850; line-height:1; color:var(--keep2);
text-shadow:0 0 26px rgba(39,224,168,.5); font-variant-numeric:tabular-nums}
.count span{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted)}
.grid{
max-width:1360px; margin:0 auto; padding:34px 30px 90px;
display:grid; grid-template-columns:repeat(auto-fill, minmax(560px,1fr)); gap:30px;
}
@media(max-width:680px){ .grid{grid-template-columns:1fr} }
.card{
background:linear-gradient(180deg,var(--panel),#070d18);
border:1px solid var(--stroke); border-radius:20px; overflow:hidden;
box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px); border-color:rgba(39,224,168,.4);
box-shadow:0 40px 90px -40px rgba(0,0,0,1), 0 0 50px -20px rgba(39,224,168,.4)}
.card.keeper{border-color:rgba(39,224,168,.30)}
.preview{position:relative; width:100%; aspect-ratio:1280 / 800; overflow:hidden; background:#03060c}
.preview iframe{
position:absolute; top:0; left:0; width:1280px; height:800px; border:0; transform-origin:top left;
}
.preview .veil{position:absolute; inset:0; pointer-events:none;
background:linear-gradient(180deg,transparent 70%, rgba(5,7,13,.45));}
.meta{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px 18px}
.meta .nm{font-size:19px; font-weight:800; letter-spacing:.01em}
.meta .mech{margin:4px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5; max-width:92%}
.badge{
flex:none; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
padding:7px 13px; border-radius:999px; white-space:nowrap;
}
.badge.keeper{color:#04140e; background:linear-gradient(180deg,var(--keep2),var(--keep));
box-shadow:0 0 22px rgba(39,224,168,.5)}
.badge.duplicate{color:#1a1303; background:linear-gradient(180deg,#ffd98a,var(--dup))}
.badge.below_bar{color:#cdd9ee; background:#1b2740; border:1px solid var(--stroke)}
.fable{
flex:none; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
padding:6px 11px; border-radius:999px; white-space:nowrap; color:#e8ddff;
background:linear-gradient(180deg,rgba(167,128,255,.30),rgba(167,128,255,.10));
border:1px solid rgba(167,128,255,.5); box-shadow:0 0 18px rgba(167,128,255,.25);
}
.open{display:inline-block; margin-left:8px; font-size:11px; color:var(--muted); text-decoration:none;
border:1px solid var(--stroke); padding:6px 10px; border-radius:8px}
.open:hover{color:var(--ink); border-color:rgba(39,224,168,.5)}
footer{max-width:1360px; margin:0 auto; padding:0 30px 70px; color:var(--muted); font-size:12px; letter-spacing:.04em}
</style>
</head>
<body>
<header>
<div class="brand">
<p class="eyebrow">Deriv Game Lab · The Fable Set</p>
<h1>Built with Fable 5</h1>
<p>The newest wave of prototypes, designed and built end-to-end by the Fable 5 model — same rules as the original thirty: a live market chart, a real bet/payout, and a core mechanic distinct from every keeper before it. The full collection lives in the <a href="index.html" style="color:#9fffd8">main gallery</a>.</p>
</div>
<div class="count"><b>9</b><span>Fable keepers · 9 designs</span></div>
</header>
<main class="grid" id="grid">
<article class="card keeper">
<div class="preview">
<iframe src="results/iteration31/design.html" scrolling="no" loading="lazy" title="CRUX"></iframe>
<div class="veil"></div>
</div>
<div class="meta">
<div>
<div class="nm">CRUX <a class="open" href="results/iteration31/design.html" target="_blank" rel="noopener">open ↗</a></div>
<p class="mech">spend a fixed rack of irreversible pitons to ratchet-lock altitude floors on the price wall; settled by highest lock vs final through a convex curve plus unspent bonus</p>
</div>
<span class="badge keeper">Keeper</span> <span class="fable">Fable</span>
</div>
</article>
<article class="card keeper">
<div class="preview">
<iframe src="results/iteration32/design.html" scrolling="no" loading="lazy" title="MURMUR"></iframe>
<div class="veil"></div>
</div>
<div class="meta">
<div>
<div class="nm">MURMUR <a class="open" href="results/iteration32/design.html" target="_blank" rel="noopener">open ↗</a></div>
<p class="mech">herd a price-driven starling swarm with rationed pressure pulses; paid by headcount tiers at the roost bell</p>
</div>
<span class="badge keeper">Keeper</span> <span class="fable">Fable</span>
</div>
</article>
<article class="card keeper">
<div class="preview">
<iframe src="results/iteration33/design.html" scrolling="no" loading="lazy" title="WINDLEASE"></iframe>
<div class="veil"></div>
</div>
<div class="meta">
<div>
<div class="nm">WINDLEASE <a class="open" href="results/iteration33/design.html" target="_blank" rel="noopener">open ↗</a></div>
<p class="mech">lease future 5s time-windows at demand-inflated vol quotes; paid by realized travel inside owned windows</p>
</div>
<span class="badge keeper">Keeper</span> <span class="fable">Fable</span>
</div>
</article>
<article class="card keeper">
<div class="preview">
<iframe src="results/iteration34/design.html" scrolling="no" loading="lazy" title="HOTHOUSE"></iframe>
<div class="veil"></div>
</div>
<div class="meta">
<div>
<div class="nm">HOTHOUSE <a class="open" href="results/iteration34/design.html" target="_blank" rel="noopener">open ↗</a></div>
<p class="mech">plant market-fed flora typed to price-action character, graft mid-round with lossy shears; paid by nonlinear bloom-stage cliffs at the bell</p>
</div>
<span class="badge keeper">Keeper</span> <span class="fable">Fable</span>
</div>
</article>
<article class="card keeper">
<div class="preview">
<iframe src="results/iteration35/design.html" scrolling="no" loading="lazy" title="CAUSTIC"></iframe>
<div class="veil"></div>
</div>
<div class="meta">
<div>
<div class="nm">CAUSTIC <a class="open" href="results/iteration35/design.html" target="_blank" rel="noopener">open ↗</a></div>
<p class="mech">aim three light cannons at the liquid-mirror price curve; paid by which odds-zones the multi-bounce reflections strike at the bell</p>
</div>
<span class="badge keeper">Keeper</span> <span class="fable">Fable</span>
</div>
</article>
<article class="card keeper">
<div class="preview">
<iframe src="results/iteration36/design.html" scrolling="no" loading="lazy" title="RECOIL"></iframe>
<div class="veil"></div>
</div>
<div class="meta">
<div>
<div class="nm">RECOIL <a class="open" href="results/iteration36/design.html" target="_blank" rel="noopener">open ↗</a></div>
<p class="mech">anchor an elastic tether on the spread between two coupled runners; harvest squared-excursion energy per re-crossing, salvage on snap</p>
</div>
<span class="badge keeper">Keeper</span> <span class="fable">Fable</span>
</div>
</article>
<article class="card keeper">
<div class="preview">
<iframe src="results/iteration37/design.html" scrolling="no" loading="lazy" title="GAVEL"></iframe>
<div class="veil"></div>
</div>
<div class="meta">
<div>
<div class="nm">GAVEL <a class="open" href="results/iteration37/design.html" target="_blank" rel="noopener">open ↗</a></div>
<p class="mech">sealed-bid first-price auctions vs three rival temperaments for lots whose value the next 15s of tape forges; settled realized value minus your winning bid</p>
</div>
<span class="badge keeper">Keeper</span> <span class="fable">Fable</span>
</div>
</article>
<article class="card keeper">
<div class="preview">
<iframe src="results/iteration38/design.html" scrolling="no" loading="lazy" title="SYNDICATE"></iframe>
<div class="veil"></div>
</div>
<div class="meta">
<div>
<div class="nm">SYNDICATE <a class="open" href="results/iteration38/design.html" target="_blank" rel="noopener">open ↗</a></div>
<p class="mech">underwrite a six-trigger book of market-event insurance for upfront premiums with a priced claims cap; settled premiums minus claims, floored at the cap</p>
</div>
<span class="badge keeper">Keeper</span> <span class="fable">Fable</span>
</div>
</article>
<article class="card keeper">
<div class="preview">
<iframe src="results/iteration39/design.html" scrolling="no" loading="lazy" title="SENTE"></iframe>
<div class="veil"></div>
</div>
<div class="meta">
<div>
<div class="nm">SENTE <a class="open" href="results/iteration39/design.html" target="_blank" rel="noopener">open ↗</a></div>
<p class="mech">board duel vs the tape: candles print forced enemy stones, you pre-place nine; settled by custodial captures and engagement-gated chain tiers</p>
</div>
<span class="badge keeper">Keeper</span> <span class="fable">Fable</span>
</div>
</article>
</main>
<footer>The Fable Set · 9 keepers of 9 Fable-built designs · iterations 31+ of The Loop. Previews are the live prototypes, scaled to fit; click “open ↗” for the full-bleed game.</footer>
<script>
function fit(){
document.querySelectorAll('.preview').forEach(function(p){
var f = p.querySelector('iframe');
if(!f) return;
f.style.transform = 'scale(' + (p.clientWidth/1280) + ')';
});
}
window.addEventListener('resize', fit);
window.addEventListener('load', fit);
fit();
</script>
</body>
</html>