Mini-JavaScript-Projects/Spread Controller/index.html at main · AmanSinghNp/Mini-JavaScript-Projects · GitHub

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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Spread Controller | Avellaneda-Stoikov Model</title>
    <meta name="description" content="Interactive dashboard demonstrating the Avellaneda-Stoikov market making model for optimal bid-ask spread calculation."/>

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg"/>

    <!-- Open Graph -->
    <meta property="og:title" content="Spread Controller"/>
    <meta property="og:description" content="Interactive Avellaneda-Stoikov market making model dashboard"/>
    <meta property="og:type" content="website"/>

    <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        primary: "#0500e2",
                        "primary-hover": "#0400b5",
                        "background-light": "#f8f9fa",
                        "background-dark": "#0f1115",
                        "card-light": "#ffffff",
                        "card-dark": "#181a20",
                        "text-light": "#1f2937",
                        "text-dark": "#f3f4f6",
                        "border-light": "#e5e7eb",
                        "border-dark": "#2d3039",
                        "buy-green": "#10b981",
                        "buy-green-light": "#d1fae5",
                        "buy-green-dark": "#065f46",
                        "sell-red": "#ef4444",
                        "sell-red-light": "#fee2e2",
                        "sell-red-dark": "#991b1b",
                    },
                    fontFamily: {
                        display: ["Inter", "sans-serif"],
                        mono: ["JetBrains Mono", "monospace"],
                    },
                    borderRadius: {
                        DEFAULT: "0.5rem",
                        'xl': "0.75rem",
                        '2xl': "1rem",
                        '3xl': "1.5rem",
                    },
                },
            },
        };
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet"/>
    <style>
        body { font-family: 'Inter', sans-serif; }
        .font-mono { font-family: 'JetBrains Mono', monospace; }
        .tabular-nums { font-variant-numeric: tabular-nums; }

        /* Custom slider styling */
        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            height: 8px;
            border-radius: 4px;
            background: linear-gradient(to right, #e5e7eb 0%, #e5e7eb 100%);
            cursor: pointer;
        }
        .dark input[type="range"] {
            background: linear-gradient(to right, #374151 0%, #374151 100%);
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #0500e2;
            cursor: grab;
            box-shadow: 0 2px 6px rgba(5, 0, 226, 0.3);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(5, 0, 226, 0.4);
        }
        input[type="range"]::-webkit-slider-thumb:active {
            cursor: grabbing;
            transform: scale(0.95);
        }
        input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border: none;
            border-radius: 50%;
            background: #0500e2;
            cursor: grab;
            box-shadow: 0 2px 6px rgba(5, 0, 226, 0.3);
        }

        /* Inventory slider special styling */
        #inventory-slider::-webkit-slider-thumb {
            background: linear-gradient(135deg, #10b981, #ef4444);
        }
        #inventory-slider::-moz-range-thumb {
            background: linear-gradient(135deg, #10b981, #ef4444);
        }

        /* Value flash animation */
        @keyframes value-flash {
            0%, 100% { background-color: transparent; }
            50% { background-color: rgba(5, 0, 226, 0.1); }
        }
        .value-flash {
            animation: value-flash 0.2s ease-out;
        }

        /* Price pulse animation */
        @keyframes price-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }
        .price-display {
            transition: all 0.3s ease;
        }

        /* Scrollbar styling */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
        .dark ::-webkit-scrollbar-thumb { background: #374151; }
    </style>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark min-h-screen p-4 md:p-8 flex flex-col items-center">

<!-- Header -->
<header class="w-full max-w-[1000px] mb-6">
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white tracking-tight flex items-center gap-3">
                <span class="material-icons-round text-primary text-3xl">tune</span>
                Spread Controller
            </h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Avellaneda-Stoikov Market Making Model</p>
        </div>
        <button id="btn-theme" aria-label="Toggle dark mode" class="p-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
            <span class="material-icons-round text-xl dark:hidden">dark_mode</span>
            <span class="material-icons-round text-xl hidden dark:block">light_mode</span>
        </button>
    </div>
</header>

<main class="w-full max-w-[1000px] space-y-6">

    <!-- Mid Price Display -->
    <div class="bg-gradient-to-br from-gray-900 to-gray-800 dark:from-gray-800 dark:to-gray-900 rounded-2xl p-6 border border-gray-700">
        <div class="text-center">
            <p class="text-gray-400 text-xs uppercase tracking-wider mb-1">Mid-Price (Reference)</p>
            <p class="text-4xl font-mono font-bold text-white tabular-nums">$100.00</p>
        </div>
    </div>

    <!-- Output Prices -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Bid Price -->
        <div class="bg-card-light dark:bg-card-dark rounded-2xl p-6 border-2 border-buy-green/30 hover:border-buy-green/50 transition-all">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 rounded-xl bg-buy-green-light dark:bg-buy-green/20 flex items-center justify-center">
                    <span class="material-icons-round text-buy-green text-2xl">trending_up</span>
                </div>
                <div>
                    <h2 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">My Bid Price</h2>
                    <p class="text-xs text-gray-400 dark:text-gray-500">I'm willing to BUY at</p>
                </div>
            </div>
            <p id="bid-price" class="text-4xl font-mono font-bold text-buy-green tabular-nums price-display">$99.33</p>
        </div>

        <!-- Ask Price -->
        <div class="bg-card-light dark:bg-card-dark rounded-2xl p-6 border-2 border-sell-red/30 hover:border-sell-red/50 transition-all">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 rounded-xl bg-sell-red-light dark:bg-sell-red/20 flex items-center justify-center">
                    <span class="material-icons-round text-sell-red text-2xl">trending_down</span>
                </div>
                <div>
                    <h2 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">My Ask Price</h2>
                    <p class="text-xs text-gray-400 dark:text-gray-500">I'm willing to SELL at</p>
                </div>
            </div>
            <p id="ask-price" class="text-4xl font-mono font-bold text-sell-red tabular-nums price-display">$100.67</p>
        </div>
    </div>

    <!-- Derived Values -->
    <div class="grid grid-cols-2 gap-4">
        <div class="bg-card-light dark:bg-card-dark rounded-xl p-4 border border-border-light dark:border-border-dark">
            <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">Reservation Price</p>
            <p id="reservation-price" class="text-xl font-mono font-bold text-gray-900 dark:text-white tabular-nums">$100.00</p>
        </div>
        <div class="bg-card-light dark:bg-card-dark rounded-xl p-4 border border-border-light dark:border-border-dark">
            <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">Spread Width</p>
            <p id="spread-value" class="text-xl font-mono font-bold text-primary tabular-nums">$1.34</p>
        </div>
    </div>

    <!-- Skew Indicator -->
    <div class="bg-card-light dark:bg-card-dark rounded-2xl p-6 border border-border-light dark:border-border-dark">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-semibold text-gray-900 dark:text-white">Quote Skew</h3>
            <span id="skew-text" class="text-xs text-gray-500 font-medium">Neutral</span>
        </div>
        <div class="relative h-2 bg-gradient-to-r from-sell-red via-gray-300 to-buy-green rounded-full">
            <div id="skew-indicator" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-white dark:bg-gray-900 border-2 border-gray-400 rounded-full shadow-lg transition-transform duration-300"></div>
        </div>
        <div class="flex justify-between mt-2 text-xs text-gray-400">
            <span>← Sell Pressure</span>
            <span>Buy Pressure →</span>
        </div>
    </div>

    <!-- Control Sliders -->
    <div class="bg-card-light dark:bg-card-dark rounded-2xl p-6 border border-border-light dark:border-border-dark space-y-8">
        <div class="flex items-center gap-2 mb-2">
            <span class="material-icons-round text-primary">settings</span>
            <h3 class="font-bold text-gray-900 dark:text-white">Model Parameters</h3>
        </div>

        <!-- Inventory Slider -->
        <div>
            <div class="flex items-center justify-between mb-3">
                <div>
                    <label class="font-semibold text-gray-900 dark:text-white">Inventory Position (q)</label>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Positive = Long, Negative = Short</p>
                </div>
                <span id="inventory-value" class="font-mono font-bold text-gray-600 dark:text-gray-400">0</span>
            </div>
            <input id="inventory-slider" type="range" min="-100" max="100" value="0" step="1" class="w-full" aria-label="Inventory position"/>
            <!-- Inventory visualization bar -->
            <div class="mt-3 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                <div id="inventory-bar" class="h-full bg-gray-400 rounded-full transition-all duration-300" style="width: 50%"></div>
            </div>
            <div class="flex justify-between mt-1 text-xs text-gray-400">
                <span>Short -100</span>
                <span>Neutral</span>
                <span>Long +100</span>
            </div>
        </div>

        <!-- Risk Aversion Slider -->
        <div>
            <div class="flex items-center justify-between mb-3">
                <div>
                    <label class="font-semibold text-gray-900 dark:text-white">Risk Aversion (γ)</label>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Higher = wider spreads, less risk</p>
                </div>
                <span id="risk-value" class="font-mono font-bold text-primary">0.10</span>
            </div>
            <input id="risk-slider" type="range" min="0.01" max="1" value="0.1" step="0.01" class="w-full" aria-label="Risk aversion coefficient"/>
            <div class="flex justify-between mt-1 text-xs text-gray-400">
                <span>Aggressive 0.01</span>
                <span>Conservative 1.0</span>
            </div>
        </div>

        <!-- Time Remaining Slider -->
        <div>
            <div class="flex items-center justify-between mb-3">
                <div>
                    <label class="font-semibold text-gray-900 dark:text-white">Time Remaining (T-t)</label>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Time until end of trading session</p>
                </div>
                <span id="time-value" class="font-mono font-bold text-primary">1.00</span>
            </div>
            <input id="time-slider" type="range" min="0.01" max="1" value="1" step="0.01" class="w-full" aria-label="Time remaining"/>
            <div class="flex justify-between mt-1 text-xs text-gray-400">
                <span>End 0.01</span>
                <span>Start 1.0</span>
            </div>
        </div>

        <!-- Reset Button -->
        <div class="pt-2">
            <button id="btn-reset" class="w-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium py-3 rounded-lg transition-all flex items-center justify-center gap-2">
                <span class="material-icons-round text-lg">restart_alt</span>
                Reset to Defaults
            </button>
        </div>
    </div>

    <!-- Formula Explanation -->
    <div class="bg-card-light dark:bg-card-dark rounded-2xl p-6 border border-border-light dark:border-border-dark">
        <div class="flex items-center gap-2 mb-4">
            <span class="material-icons-round text-primary">school</span>
            <h3 class="font-bold text-gray-900 dark:text-white">How It Works: The Avellaneda-Stoikov Model</h3>
        </div>
        <div class="grid md:grid-cols-2 gap-4 text-sm text-gray-600 dark:text-gray-400">
            <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-4">
                <h4 class="font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                    <span class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-bold">1</span>
                    Reservation Price
                </h4>
                <p class="mb-2">The price where you're indifferent to trading:</p>
                <code class="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded text-xs font-mono block">r = s - q × γ × σ² × (T-t)</code>
                <p class="mt-2 text-xs">When inventory is long (q > 0), reservation price drops (you want to sell). When short (q < 0), it rises (you want to buy).</p>
            </div>
            <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-4">
                <h4 class="font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                    <span class="w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-bold">2</span>
                    Optimal Spread
                </h4>
                <p class="mb-2">The distance between bid and ask:</p>
                <code class="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded text-xs font-mono block">δ = γσ²(T-t) + (2/γ)ln(1 + γ/k)</code>
                <p class="mt-2 text-xs">Higher risk aversion (γ) means wider spreads. Less time remaining narrows the spread as urgency increases.</p>
            </div>
        </div>
        <div class="mt-4 p-4 bg-primary/5 dark:bg-primary/10 rounded-xl border border-primary/20">
            <p class="text-sm text-gray-700 dark:text-gray-300">
                <span class="font-semibold">💡 The Thermostat Analogy:</span> Just like a thermostat adjusts heating based on temperature, this model adjusts bid/ask prices based on your inventory position. Too long? Lower prices to sell. Too short? Raise prices to buy.
            </p>
        </div>
    </div>
</main>

<!-- Footer -->
<footer class="w-full max-w-[1000px] mt-8 text-center text-xs text-gray-500 dark:text-gray-500">
    <p>Based on "High-frequency trading in a limit order book" by Avellaneda & Stoikov (2008) © 2026</p>
</footer>

<!-- Scripts -->
<script src="./js/spread-controller.js"></script>

</body>
</html>