Skip to content

Commit d6c4e75

Browse files
mudlermudler
authored
feat(explorer): visual improvements (#3247)
Signed-off-by: Ettore Di Giacinto <[email protected]>
1 parent faadabe commit d6c4e75

File tree

1 file changed

+56
-11
lines changed

1 file changed

+56
-11
lines changed

‎core/http/views/explorer.html

Lines changed: 56 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -152,21 +152,59 @@
152152
right: 10px;
153153
color: #e2e8f0;
154154
}
155+
.fa-circle-nodes {
156+
/* font-size: 100px; /* Adjust the size as needed */
157+
animation: rotateCircleNodes 8s linear infinite; /* Slow and fluid rotation */
158+
display: inline-block;
159+
}
160+
161+
@keyframes rotateCircleNodes {
162+
0% { transform: rotate(0deg); }
163+
100% { transform: rotate(360deg); }
164+
}
165+
/* Animation for the warning box */
166+
.fa-flask {
167+
/* font-size: 100px; /* Adjust the size as needed */
168+
animation: shakeFlask 3s ease-in-out infinite; /* Smooth easing and longer duration for fluidity */
169+
transform-origin: bottom center;
170+
}
171+
172+
@keyframes shakeFlask {
173+
0%, 10% { transform: rotate(0deg); } /* Start and end still */
174+
20% { transform: rotate(-10deg); } /* Smooth transition to left */
175+
30% { transform: rotate(10deg); } /* Smooth transition to right */
176+
40% { transform: rotate(-8deg); } /* Smooth transition to left */
177+
50% { transform: rotate(8deg); } /* Smooth transition to right */
178+
60% { transform: rotate(-5deg); } /* Smooth transition to left */
179+
70% { transform: rotate(5deg); } /* Smooth transition to right */
180+
80% { transform: rotate(-2deg); } /* Smooth transition to left */
181+
90% { transform: rotate(2deg); } /* Smooth transition to right */
182+
100% { transform: rotate(0deg); } /* Return to center */
183+
}
155184
</style>
156185

157186
<body class="bg-gray-900 text-gray-200">
158187
<div class="flex flex-col min-h-screen" x-data="networkClusters()" x-init="init()">
159188
{{template "views/partials/navbar_explorer" .}}
160189

161190
<header class="text-center py-12">
162-
<h1 class="text-5xl font-bold text-gray-100">Network Clusters Explorer</h1>
163-
<p class="mt-4 text-lg">View the clusters and workers available in each network.</p>
191+
<h1 class="text-5xl font-bold text-gray-100">
192+
<i class="fa-solid fa-circle-nodes mr-2"></i> Network Clusters Explorer
193+
194+
</h1>
195+
<p class="mt-4 text-lg">
196+
View the clusters and workers available in each network.
197+
<a href="https://localai.io/features/distribute/" target="_blank">
198+
<i class="fas fa-circle-info pr-2"></i>
199+
</a>
200+
</p>
201+
164202
</header>
165203

166204
<div class="container mx-auto px-4 flex-grow">
167205
<!-- Warning Box -->
168206
<div class="warning-box bg-yellow-100 text-gray-800 mb-20 pt-5 pb-5 pr-5 pl-5 text-lg">
169-
<i class="fa-solid fa-triangle-exclamation"></i>
207+
<i class="fa-solid fa-triangle-exclamation"></i><i class="fa-solid fa-flask"></i>
170208
The explorer is a global, community-driven tool to share network tokens and view available clusters in the globe.
171209
Anyone can use the tokens to offload computation and use the clusters available or share resources.
172210
This is provided without any warranty. Use it at your own risk. We are not responsible for any potential harm or misuse. Sharing tokens globally allows anyone from the internet to use your instances.
@@ -221,23 +259,30 @@ <h2 class="text-3xl font-bold mb-4"><i class="fa-solid fa-plus"></i> Add New Net
221259
<!-- Display Networks -->
222260
<template x-for="network in networks" :key="network.name">
223261
<div class="network-card">
224-
<div class="network-title" x-text="network.name"></div>
262+
<i class="fa-solid fa-circle-nodes mr-2"></i><span class="network-title font-bold mb-4 mt-1" x-text="network.name"></span>
225263
<div class="token-box" @click="copyToken(network.token)">
226-
<i class="fa-solid fa-copy copy-icon"></i>
227-
Token (click to copy): <br>
264+
<p class="text-lg font-bold mb-4 mt-1">
265+
<i class="fa-solid fa-copy copy-icon"></i>
266+
<i class="fa-solid fa-key mr-2"></i>Token (click to copy):
267+
</p>
228268
<span class="token-text" x-text="network.token"></span>
229269
</div>
230270

231271
<div class="cluster">
232-
<p class="text-lg">Description</p>
272+
<p class="text-lg font-bold mb-4 mt-1"><i class="fa-solid fa-book mr-2"></i> Description</p>
233273
<p x-text="network.description"></p>
234274
</div>
235-
275+
<h2 class="text-3xl font-bold mb-4 mt-4">Available Clusters in this network</h2>
236276
<template x-for="cluster in network.Clusters" :key="cluster.NetworkID + cluster.Type">
237277
<div class="cluster">
238-
<div class="cluster-title" x-text="'Cluster Type: ' + cluster.Type"></div>
239-
<p x-show="cluster.NetworkID" x-text="'Network ID: ' + (cluster.NetworkID || 'N/A')"></p>
240-
<p x-text="'Number of Workers: ' + cluster.Workers.length"></p>
278+
279+
<div class="cluster-title"></div>
280+
<span class="inline-block bg-orange-500 text-white py-1 px-3 rounded-full text-xs" x-text="'Cluster Type: ' + cluster.Type">
281+
</span>
282+
<span class="inline-block bg-orange-500 text-white py-1 px-3 rounded-full text-xs" x-show="cluster.NetworkID" x-text="'Network ID: ' + (cluster.NetworkID || 'N/A')">
283+
</span>
284+
<span class="inline-block bg-blue-500 text-white py-1 px-3 rounded-full text-xs" x-text="'Number of Workers: ' + cluster.Workers.length">
285+
</span>
241286
</div>
242287
</template>
243288
</div>

0 commit comments

Comments
 (0)