Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +958 -19
- prompts.txt +1 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: ai-cloud-marketspace
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: pink
|
| 5 |
+
colorTo: purple
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,958 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Decentralized Cloud Marketplace</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
| 9 |
+
<style>
|
| 10 |
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
| 11 |
+
|
| 12 |
+
body {
|
| 13 |
+
font-family: 'Inter', sans-serif;
|
| 14 |
+
background-color: #f8fafc;
|
| 15 |
+
}
|
| 16 |
+
|
| 17 |
+
.gradient-bg {
|
| 18 |
+
background: linear-gradient(135deg, #6b46c1 0%, #3b82f6 100%);
|
| 19 |
+
}
|
| 20 |
+
|
| 21 |
+
.service-card:hover {
|
| 22 |
+
transform: translateY(-5px);
|
| 23 |
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 24 |
+
}
|
| 25 |
+
|
| 26 |
+
.nav-link:hover {
|
| 27 |
+
background-color: rgba(255, 255, 255, 0.1);
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
.dashboard-card:hover {
|
| 31 |
+
background-color: #f1f5f9;
|
| 32 |
+
}
|
| 33 |
+
|
| 34 |
+
.animate-pulse {
|
| 35 |
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
| 36 |
+
}
|
| 37 |
+
|
| 38 |
+
@keyframes pulse {
|
| 39 |
+
0%, 100% {
|
| 40 |
+
opacity: 1;
|
| 41 |
+
}
|
| 42 |
+
50% {
|
| 43 |
+
opacity: 0.5;
|
| 44 |
+
}
|
| 45 |
+
}
|
| 46 |
+
</style>
|
| 47 |
+
</head>
|
| 48 |
+
<body class="min-h-screen">
|
| 49 |
+
<!-- Navigation -->
|
| 50 |
+
<nav class="gradient-bg text-white shadow-lg">
|
| 51 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 52 |
+
<div class="flex items-center justify-between h-16">
|
| 53 |
+
<div class="flex items-center">
|
| 54 |
+
<div class="flex-shrink-0 flex items-center">
|
| 55 |
+
<i class="fas fa-cloud text-2xl mr-2"></i>
|
| 56 |
+
<span class="text-xl font-bold">CloudChain</span>
|
| 57 |
+
</div>
|
| 58 |
+
<div class="hidden md:block">
|
| 59 |
+
<div class="ml-10 flex items-baseline space-x-4">
|
| 60 |
+
<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium bg-white bg-opacity-10">Marketplace</a>
|
| 61 |
+
<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
|
| 62 |
+
<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Providers</a>
|
| 63 |
+
<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Documentation</a>
|
| 64 |
+
</div>
|
| 65 |
+
</div>
|
| 66 |
+
</div>
|
| 67 |
+
<div class="hidden md:block">
|
| 68 |
+
<div class="ml-4 flex items-center md:ml-6">
|
| 69 |
+
<button class="bg-indigo-700 hover:bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
|
| 70 |
+
<i class="fab fa-ethereum mr-2"></i>
|
| 71 |
+
Connect Wallet
|
| 72 |
+
</button>
|
| 73 |
+
</div>
|
| 74 |
+
</div>
|
| 75 |
+
<div class="-mr-2 flex md:hidden">
|
| 76 |
+
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-white focus:outline-none">
|
| 77 |
+
<i class="fas fa-bars"></i>
|
| 78 |
+
</button>
|
| 79 |
+
</div>
|
| 80 |
+
</div>
|
| 81 |
+
</div>
|
| 82 |
+
</nav>
|
| 83 |
+
|
| 84 |
+
<!-- Hero Section -->
|
| 85 |
+
<div class="gradient-bg text-white">
|
| 86 |
+
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
| 87 |
+
<div class="text-center">
|
| 88 |
+
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
|
| 89 |
+
Decentralized Cloud Marketplace
|
| 90 |
+
</h1>
|
| 91 |
+
<p class="mt-6 max-w-2xl mx-auto text-xl">
|
| 92 |
+
Compare and provision cloud services across multiple providers with blockchain-powered transparency and trustless transactions.
|
| 93 |
+
</p>
|
| 94 |
+
<div class="mt-10 flex justify-center space-x-4">
|
| 95 |
+
<a href="#" class="bg-white text-indigo-600 px-6 py-3 rounded-md text-base font-medium hover:bg-gray-100">
|
| 96 |
+
Explore Marketplace
|
| 97 |
+
</a>
|
| 98 |
+
<a href="#" class="bg-indigo-700 bg-opacity-70 text-white px-6 py-3 rounded-md text-base font-medium hover:bg-opacity-80">
|
| 99 |
+
Provider Sign Up
|
| 100 |
+
</a>
|
| 101 |
+
</div>
|
| 102 |
+
</div>
|
| 103 |
+
</div>
|
| 104 |
+
</div>
|
| 105 |
+
|
| 106 |
+
<!-- Features Section -->
|
| 107 |
+
<div class="py-12 bg-white">
|
| 108 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 109 |
+
<div class="lg:text-center">
|
| 110 |
+
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
|
| 111 |
+
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
| 112 |
+
A better way to manage cloud services
|
| 113 |
+
</p>
|
| 114 |
+
</div>
|
| 115 |
+
|
| 116 |
+
<div class="mt-10">
|
| 117 |
+
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
|
| 118 |
+
<!-- Feature 1 -->
|
| 119 |
+
<div class="bg-gray-50 rounded-lg p-6">
|
| 120 |
+
<div class="flex items-center">
|
| 121 |
+
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
|
| 122 |
+
<i class="fas fa-network-wired text-white text-xl"></i>
|
| 123 |
+
</div>
|
| 124 |
+
<div class="ml-5">
|
| 125 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">Multi-Cloud Integration</h3>
|
| 126 |
+
</div>
|
| 127 |
+
</div>
|
| 128 |
+
<div class="mt-4">
|
| 129 |
+
<p class="text-base text-gray-500">
|
| 130 |
+
Seamlessly connect with AWS, GCP, Azure and more through standardized APIs and abstract provisioning layer.
|
| 131 |
+
</p>
|
| 132 |
+
</div>
|
| 133 |
+
</div>
|
| 134 |
+
|
| 135 |
+
<!-- Feature 2 -->
|
| 136 |
+
<div class="bg-gray-50 rounded-lg p-6">
|
| 137 |
+
<div class="flex items-center">
|
| 138 |
+
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
|
| 139 |
+
<i class="fas fa-link text-white text-xl"></i>
|
| 140 |
+
</div>
|
| 141 |
+
<div class="ml-5">
|
| 142 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">Blockchain Backend</h3>
|
| 143 |
+
</div>
|
| 144 |
+
</div>
|
| 145 |
+
<div class="mt-4">
|
| 146 |
+
<p class="text-base text-gray-500">
|
| 147 |
+
Smart contracts handle billing, usage tracking, and SLA enforcement with complete transparency.
|
| 148 |
+
</p>
|
| 149 |
+
</div>
|
| 150 |
+
</div>
|
| 151 |
+
|
| 152 |
+
<!-- Feature 3 -->
|
| 153 |
+
<div class="bg-gray-50 rounded-lg p-6">
|
| 154 |
+
<div class="flex items-center">
|
| 155 |
+
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
|
| 156 |
+
<i class="fas fa-search-dollar text-white text-xl"></i>
|
| 157 |
+
</div>
|
| 158 |
+
<div class="ml-5">
|
| 159 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">Price Comparison</h3>
|
| 160 |
+
</div>
|
| 161 |
+
</div>
|
| 162 |
+
<div class="mt-4">
|
| 163 |
+
<p class="text-base text-gray-500">
|
| 164 |
+
Compare services across providers by price, location, and performance metrics in real-time.
|
| 165 |
+
</p>
|
| 166 |
+
</div>
|
| 167 |
+
</div>
|
| 168 |
+
|
| 169 |
+
<!-- Feature 4 -->
|
| 170 |
+
<div class="bg-gray-50 rounded-lg p-6">
|
| 171 |
+
<div class="flex items-center">
|
| 172 |
+
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
|
| 173 |
+
<i class="fas fa-chart-line text-white text-xl"></i>
|
| 174 |
+
</div>
|
| 175 |
+
<div class="ml-5">
|
| 176 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">Usage Analytics</h3>
|
| 177 |
+
</div>
|
| 178 |
+
</div>
|
| 179 |
+
<div class="mt-4">
|
| 180 |
+
<p class="text-base text-gray-500">
|
| 181 |
+
Detailed dashboards show your resource consumption and costs across all providers.
|
| 182 |
+
</p>
|
| 183 |
+
</div>
|
| 184 |
+
</div>
|
| 185 |
+
|
| 186 |
+
<!-- Feature 5 -->
|
| 187 |
+
<div class="bg-gray-50 rounded-lg p-6">
|
| 188 |
+
<div class="flex items-center">
|
| 189 |
+
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
|
| 190 |
+
<i class="fas fa-file-contract text-white text-xl"></i>
|
| 191 |
+
</div>
|
| 192 |
+
<div class="ml-5">
|
| 193 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">Immutable SLAs</h3>
|
| 194 |
+
</div>
|
| 195 |
+
</div>
|
| 196 |
+
<div class="mt-4">
|
| 197 |
+
<p class="text-base text-gray-500">
|
| 198 |
+
Service agreements are recorded on-chain and automatically enforced by smart contracts.
|
| 199 |
+
</p>
|
| 200 |
+
</div>
|
| 201 |
+
</div>
|
| 202 |
+
|
| 203 |
+
<!-- Feature 6 -->
|
| 204 |
+
<div class="bg-gray-50 rounded-lg p-6">
|
| 205 |
+
<div class="flex items-center">
|
| 206 |
+
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
|
| 207 |
+
<i class="fas fa-coins text-white text-xl"></i>
|
| 208 |
+
</div>
|
| 209 |
+
<div class="ml-5">
|
| 210 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">Token Payments</h3>
|
| 211 |
+
</div>
|
| 212 |
+
</div>
|
| 213 |
+
<div class="mt-4">
|
| 214 |
+
<p class="text-base text-gray-500">
|
| 215 |
+
Pay with native tokens or stablecoins, with automatic conversion and settlement.
|
| 216 |
+
</p>
|
| 217 |
+
</div>
|
| 218 |
+
</div>
|
| 219 |
+
</div>
|
| 220 |
+
</div>
|
| 221 |
+
</div>
|
| 222 |
+
</div>
|
| 223 |
+
|
| 224 |
+
<!-- Marketplace Preview -->
|
| 225 |
+
<div class="py-12 bg-gray-50">
|
| 226 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 227 |
+
<div class="text-center">
|
| 228 |
+
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
|
| 229 |
+
Cloud Services Marketplace
|
| 230 |
+
</h2>
|
| 231 |
+
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
|
| 232 |
+
Browse and compare services from leading providers
|
| 233 |
+
</p>
|
| 234 |
+
</div>
|
| 235 |
+
|
| 236 |
+
<!-- Filter Controls -->
|
| 237 |
+
<div class="mt-8 flex flex-col sm:flex-row justify-between items-center bg-white p-4 rounded-lg shadow">
|
| 238 |
+
<div class="w-full sm:w-auto mb-4 sm:mb-0">
|
| 239 |
+
<label for="provider" class="sr-only">Provider</label>
|
| 240 |
+
<select id="provider" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
|
| 241 |
+
<option selected>All Providers</option>
|
| 242 |
+
<option>AWS</option>
|
| 243 |
+
<option>Google Cloud</option>
|
| 244 |
+
<option>Azure</option>
|
| 245 |
+
<option>Alibaba Cloud</option>
|
| 246 |
+
</select>
|
| 247 |
+
</div>
|
| 248 |
+
<div class="w-full sm:w-auto mb-4 sm:mb-0 sm:ml-4">
|
| 249 |
+
<label for="service-type" class="sr-only">Service Type</label>
|
| 250 |
+
<select id="service-type" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
|
| 251 |
+
<option selected>All Service Types</option>
|
| 252 |
+
<option>Compute</option>
|
| 253 |
+
<option>Storage</option>
|
| 254 |
+
<option>Database</option>
|
| 255 |
+
<option>Networking</option>
|
| 256 |
+
</select>
|
| 257 |
+
</div>
|
| 258 |
+
<div class="w-full sm:w-auto mb-4 sm:mb-0 sm:ml-4">
|
| 259 |
+
<label for="location" class="sr-only">Location</label>
|
| 260 |
+
<select id="location" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
|
| 261 |
+
<option selected>All Locations</option>
|
| 262 |
+
<option>North America</option>
|
| 263 |
+
<option>Europe</option>
|
| 264 |
+
<option>Asia</option>
|
| 265 |
+
<option>South America</option>
|
| 266 |
+
</select>
|
| 267 |
+
</div>
|
| 268 |
+
<div class="w-full sm:w-auto sm:ml-4">
|
| 269 |
+
<button class="w-full bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
|
| 270 |
+
Apply Filters
|
| 271 |
+
</button>
|
| 272 |
+
</div>
|
| 273 |
+
</div>
|
| 274 |
+
|
| 275 |
+
<!-- Service Cards -->
|
| 276 |
+
<div class="mt-8 grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
|
| 277 |
+
<!-- Service Card 1 -->
|
| 278 |
+
<div class="service-card bg-white overflow-hidden shadow rounded-lg transition duration-300 ease-in-out">
|
| 279 |
+
<div class="px-4 py-5 sm:p-6">
|
| 280 |
+
<div class="flex items-center">
|
| 281 |
+
<div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
|
| 282 |
+
<i class="fab fa-aws text-white text-2xl"></i>
|
| 283 |
+
</div>
|
| 284 |
+
<div class="ml-5">
|
| 285 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">AWS EC2 t3.large</h3>
|
| 286 |
+
<p class="mt-1 text-sm text-gray-500">Compute - US East (N. Virginia)</p>
|
| 287 |
+
</div>
|
| 288 |
+
</div>
|
| 289 |
+
<div class="mt-6">
|
| 290 |
+
<div class="flex justify-between">
|
| 291 |
+
<span class="text-sm text-gray-500">vCPUs</span>
|
| 292 |
+
<span class="text-sm font-medium">2</span>
|
| 293 |
+
</div>
|
| 294 |
+
<div class="mt-2 flex justify-between">
|
| 295 |
+
<span class="text-sm text-gray-500">Memory</span>
|
| 296 |
+
<span class="text-sm font-medium">8 GB</span>
|
| 297 |
+
</div>
|
| 298 |
+
<div class="mt-2 flex justify-between">
|
| 299 |
+
<span class="text-sm text-gray-500">Storage</span>
|
| 300 |
+
<span class="text-sm font-medium">EBS Only</span>
|
| 301 |
+
</div>
|
| 302 |
+
<div class="mt-4 pt-4 border-t border-gray-200 flex justify-between items-center">
|
| 303 |
+
<span class="text-2xl font-bold text-gray-900">$0.0832</span>
|
| 304 |
+
<span class="text-sm text-gray-500">per hour</span>
|
| 305 |
+
</div>
|
| 306 |
+
</div>
|
| 307 |
+
</div>
|
| 308 |
+
<div class="px-4 py-4 bg-gray-50 flex justify-between">
|
| 309 |
+
<button class="text-sm text-indigo-600 hover:text-indigo-900 font-medium">
|
| 310 |
+
View Details
|
| 311 |
+
</button>
|
| 312 |
+
<button class="bg-indigo-600 text-white px-3 py-1 rounded text-sm font-medium hover:bg-indigo-700">
|
| 313 |
+
Provision
|
| 314 |
+
</button>
|
| 315 |
+
</div>
|
| 316 |
+
</div>
|
| 317 |
+
|
| 318 |
+
<!-- Service Card 2 -->
|
| 319 |
+
<div class="service-card bg-white overflow-hidden shadow rounded-lg transition duration-300 ease-in-out">
|
| 320 |
+
<div class="px-4 py-5 sm:p-6">
|
| 321 |
+
<div class="flex items-center">
|
| 322 |
+
<div class="flex-shrink-0 bg-blue-400 rounded-md p-3">
|
| 323 |
+
<i class="fab fa-google text-white text-2xl"></i>
|
| 324 |
+
</div>
|
| 325 |
+
<div class="ml-5">
|
| 326 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">GCP n2-standard-2</h3>
|
| 327 |
+
<p class="mt-1 text-sm text-gray-500">Compute - Europe (Belgium)</p>
|
| 328 |
+
</div>
|
| 329 |
+
</div>
|
| 330 |
+
<div class="mt-6">
|
| 331 |
+
<div class="flex justify-between">
|
| 332 |
+
<span class="text-sm text-gray-500">vCPUs</span>
|
| 333 |
+
<span class="text-sm font-medium">2</span>
|
| 334 |
+
</div>
|
| 335 |
+
<div class="mt-2 flex justify-between">
|
| 336 |
+
<span class="text-sm text-gray-500">Memory</span>
|
| 337 |
+
<span class="text-sm font-medium">8 GB</span>
|
| 338 |
+
</div>
|
| 339 |
+
<div class="mt-2 flex justify-between">
|
| 340 |
+
<span class="text-sm text-gray-500">Storage</span>
|
| 341 |
+
<span class="text-sm font-medium">10 GB SSD</span>
|
| 342 |
+
</div>
|
| 343 |
+
<div class="mt-4 pt-4 border-t border-gray-200 flex justify-between items-center">
|
| 344 |
+
<span class="text-2xl font-bold text-gray-900">$0.0970</span>
|
| 345 |
+
<span class="text-sm text-gray-500">per hour</span>
|
| 346 |
+
</div>
|
| 347 |
+
</div>
|
| 348 |
+
</div>
|
| 349 |
+
<div class="px-4 py-4 bg-gray-50 flex justify-between">
|
| 350 |
+
<button class="text-sm text-indigo-600 hover:text-indigo-900 font-medium">
|
| 351 |
+
View Details
|
| 352 |
+
</button>
|
| 353 |
+
<button class="bg-indigo-600 text-white px-3 py-1 rounded text-sm font-medium hover:bg-indigo-700">
|
| 354 |
+
Provision
|
| 355 |
+
</button>
|
| 356 |
+
</div>
|
| 357 |
+
</div>
|
| 358 |
+
|
| 359 |
+
<!-- Service Card 3 -->
|
| 360 |
+
<div class="service-card bg-white overflow-hidden shadow rounded-lg transition duration-300 ease-in-out">
|
| 361 |
+
<div class="px-4 py-5 sm:p-6">
|
| 362 |
+
<div class="flex items-center">
|
| 363 |
+
<div class="flex-shrink-0 bg-blue-600 rounded-md p-3">
|
| 364 |
+
<i class="fab fa-microsoft text-white text-2xl"></i>
|
| 365 |
+
</div>
|
| 366 |
+
<div class="ml-5">
|
| 367 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">Azure D2s v3</h3>
|
| 368 |
+
<p class="mt-1 text-sm text-gray-500">Compute - Asia (Singapore)</p>
|
| 369 |
+
</div>
|
| 370 |
+
</div>
|
| 371 |
+
<div class="mt-6">
|
| 372 |
+
<div class="flex justify-between">
|
| 373 |
+
<span class="text-sm text-gray-500">vCPUs</span>
|
| 374 |
+
<span class="text-sm font-medium">2</span>
|
| 375 |
+
</div>
|
| 376 |
+
<div class="mt-2 flex justify-between">
|
| 377 |
+
<span class="text-sm text-gray-500">Memory</span>
|
| 378 |
+
<span class="text-sm font-medium">8 GB</span>
|
| 379 |
+
</div>
|
| 380 |
+
<div class="mt-2 flex justify-between">
|
| 381 |
+
<span class="text-sm text-gray-500">Storage</span>
|
| 382 |
+
<span class="text-sm font-medium">Temp Storage</span>
|
| 383 |
+
</div>
|
| 384 |
+
<div class="mt-4 pt-4 border-t border-gray-200 flex justify-between items-center">
|
| 385 |
+
<span class="text-2xl font-bold text-gray-900">$0.1100</span>
|
| 386 |
+
<span class="text-sm text-gray-500">per hour</span>
|
| 387 |
+
</div>
|
| 388 |
+
</div>
|
| 389 |
+
</div>
|
| 390 |
+
<div class="px-4 py-4 bg-gray-50 flex justify-between">
|
| 391 |
+
<button class="text-sm text-indigo-600 hover:text-indigo-900 font-medium">
|
| 392 |
+
View Details
|
| 393 |
+
</button>
|
| 394 |
+
<button class="bg-indigo-600 text-white px-3 py-1 rounded text-sm font-medium hover:bg-indigo-700">
|
| 395 |
+
Provision
|
| 396 |
+
</button>
|
| 397 |
+
</div>
|
| 398 |
+
</div>
|
| 399 |
+
</div>
|
| 400 |
+
|
| 401 |
+
<div class="mt-8 text-center">
|
| 402 |
+
<button class="bg-white text-indigo-600 px-6 py-3 border border-gray-300 rounded-md text-base font-medium hover:bg-gray-50">
|
| 403 |
+
View All Services
|
| 404 |
+
</button>
|
| 405 |
+
</div>
|
| 406 |
+
</div>
|
| 407 |
+
</div>
|
| 408 |
+
|
| 409 |
+
<!-- Dashboard Preview -->
|
| 410 |
+
<div class="py-12 bg-white">
|
| 411 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 412 |
+
<div class="lg:text-center">
|
| 413 |
+
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">User Dashboard</h2>
|
| 414 |
+
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
| 415 |
+
Manage your cloud resources
|
| 416 |
+
</p>
|
| 417 |
+
</div>
|
| 418 |
+
|
| 419 |
+
<div class="mt-10">
|
| 420 |
+
<div class="bg-gray-50 rounded-lg p-6 shadow-inner">
|
| 421 |
+
<!-- Dashboard Tabs -->
|
| 422 |
+
<div class="border-b border-gray-200">
|
| 423 |
+
<nav class="-mb-px flex space-x-8">
|
| 424 |
+
<a href="#" class="border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
|
| 425 |
+
Overview
|
| 426 |
+
</a>
|
| 427 |
+
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
|
| 428 |
+
Resources
|
| 429 |
+
</a>
|
| 430 |
+
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
|
| 431 |
+
Billing
|
| 432 |
+
</a>
|
| 433 |
+
<a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
|
| 434 |
+
Wallet
|
| 435 |
+
</a>
|
| 436 |
+
</nav>
|
| 437 |
+
</div>
|
| 438 |
+
|
| 439 |
+
<!-- Dashboard Content -->
|
| 440 |
+
<div class="mt-6">
|
| 441 |
+
<div class="grid grid-cols-1 gap-5 sm:grid-cols-3">
|
| 442 |
+
<!-- Stats Card 1 -->
|
| 443 |
+
<div class="dashboard-card bg-white overflow-hidden shadow rounded-lg transition duration-150 ease-in-out">
|
| 444 |
+
<div class="px-4 py-5 sm:p-6">
|
| 445 |
+
<div class="flex items-center">
|
| 446 |
+
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-2">
|
| 447 |
+
<i class="fas fa-server text-white"></i>
|
| 448 |
+
</div>
|
| 449 |
+
<div class="ml-5 w-0 flex-1">
|
| 450 |
+
<dt class="text-sm font-medium text-gray-500 truncate">
|
| 451 |
+
Active Instances
|
| 452 |
+
</dt>
|
| 453 |
+
<dd class="flex items-baseline">
|
| 454 |
+
<div class="text-2xl font-semibold text-gray-900">
|
| 455 |
+
8
|
| 456 |
+
</div>
|
| 457 |
+
</dd>
|
| 458 |
+
</div>
|
| 459 |
+
</div>
|
| 460 |
+
</div>
|
| 461 |
+
</div>
|
| 462 |
+
|
| 463 |
+
<!-- Stats Card 2 -->
|
| 464 |
+
<div class="dashboard-card bg-white overflow-hidden shadow rounded-lg transition duration-150 ease-in-out">
|
| 465 |
+
<div class="px-4 py-5 sm:p-6">
|
| 466 |
+
<div class="flex items-center">
|
| 467 |
+
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-2">
|
| 468 |
+
<i class="fas fa-coins text-white"></i>
|
| 469 |
+
</div>
|
| 470 |
+
<div class="ml-5 w-0 flex-1">
|
| 471 |
+
<dt class="text-sm font-medium text-gray-500 truncate">
|
| 472 |
+
Current Balance
|
| 473 |
+
</dt>
|
| 474 |
+
<dd class="flex items-baseline">
|
| 475 |
+
<div class="text-2xl font-semibold text-gray-900">
|
| 476 |
+
1.24 ETH
|
| 477 |
+
</div>
|
| 478 |
+
</dd>
|
| 479 |
+
</div>
|
| 480 |
+
</div>
|
| 481 |
+
</div>
|
| 482 |
+
</div>
|
| 483 |
+
|
| 484 |
+
<!-- Stats Card 3 -->
|
| 485 |
+
<div class="dashboard-card bg-white overflow-hidden shadow rounded-lg transition duration-150 ease-in-out">
|
| 486 |
+
<div class="px-4 py-5 sm:p-6">
|
| 487 |
+
<div class="flex items-center">
|
| 488 |
+
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-2">
|
| 489 |
+
<i class="fas fa-receipt text-white"></i>
|
| 490 |
+
</div>
|
| 491 |
+
<div class="ml-5 w-0 flex-1">
|
| 492 |
+
<dt class="text-sm font-medium text-gray-500 truncate">
|
| 493 |
+
Monthly Cost
|
| 494 |
+
</dt>
|
| 495 |
+
<dd class="flex items-baseline">
|
| 496 |
+
<div class="text-2xl font-semibold text-gray-900">
|
| 497 |
+
$342.50
|
| 498 |
+
</div>
|
| 499 |
+
</dd>
|
| 500 |
+
</div>
|
| 501 |
+
</div>
|
| 502 |
+
</div>
|
| 503 |
+
</div>
|
| 504 |
+
</div>
|
| 505 |
+
|
| 506 |
+
<!-- Resource Table -->
|
| 507 |
+
<div class="mt-8">
|
| 508 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
| 509 |
+
Your Cloud Resources
|
| 510 |
+
</h3>
|
| 511 |
+
<div class="mt-4 overflow-x-auto">
|
| 512 |
+
<div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg">
|
| 513 |
+
<table class="min-w-full divide-y divide-gray-200">
|
| 514 |
+
<thead class="bg-gray-50">
|
| 515 |
+
<tr>
|
| 516 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
| 517 |
+
Name
|
| 518 |
+
</th>
|
| 519 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
| 520 |
+
Provider
|
| 521 |
+
</th>
|
| 522 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
| 523 |
+
Type
|
| 524 |
+
</th>
|
| 525 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
| 526 |
+
Status
|
| 527 |
+
</th>
|
| 528 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
| 529 |
+
Cost
|
| 530 |
+
</th>
|
| 531 |
+
<th scope="col" class="relative px-6 py-3">
|
| 532 |
+
<span class="sr-only">Manage</span>
|
| 533 |
+
</th>
|
| 534 |
+
</tr>
|
| 535 |
+
</thead>
|
| 536 |
+
<tbody class="bg-white divide-y divide-gray-200">
|
| 537 |
+
<tr>
|
| 538 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 539 |
+
<div class="flex items-center">
|
| 540 |
+
<div class="flex-shrink-0 h-10 w-10">
|
| 541 |
+
<i class="fab fa-aws text-2xl text-orange-500"></i>
|
| 542 |
+
</div>
|
| 543 |
+
<div class="ml-4">
|
| 544 |
+
<div class="text-sm font-medium text-gray-900">
|
| 545 |
+
web-server-1
|
| 546 |
+
</div>
|
| 547 |
+
<div class="text-sm text-gray-500">
|
| 548 |
+
us-east-1
|
| 549 |
+
</div>
|
| 550 |
+
</div>
|
| 551 |
+
</div>
|
| 552 |
+
</td>
|
| 553 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 554 |
+
<div class="text-sm text-gray-900">AWS</div>
|
| 555 |
+
</td>
|
| 556 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 557 |
+
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
| 558 |
+
Compute
|
| 559 |
+
</span>
|
| 560 |
+
</td>
|
| 561 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 562 |
+
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
| 563 |
+
Running
|
| 564 |
+
</span>
|
| 565 |
+
</td>
|
| 566 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
| 567 |
+
$0.0832/hr
|
| 568 |
+
</td>
|
| 569 |
+
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
| 570 |
+
<a href="#" class="text-indigo-600 hover:text-indigo-900">Manage</a>
|
| 571 |
+
</td>
|
| 572 |
+
</tr>
|
| 573 |
+
<tr>
|
| 574 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 575 |
+
<div class="flex items-center">
|
| 576 |
+
<div class="flex-shrink-0 h-10 w-10">
|
| 577 |
+
<i class="fab fa-google text-2xl text-blue-400"></i>
|
| 578 |
+
</div>
|
| 579 |
+
<div class="ml-4">
|
| 580 |
+
<div class="text-sm font-medium text-gray-900">
|
| 581 |
+
db-primary
|
| 582 |
+
</div>
|
| 583 |
+
<div class="text-sm text-gray-500">
|
| 584 |
+
europe-west1
|
| 585 |
+
</div>
|
| 586 |
+
</div>
|
| 587 |
+
</div>
|
| 588 |
+
</td>
|
| 589 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 590 |
+
<div class="text-sm text-gray-900">Google Cloud</div>
|
| 591 |
+
</td>
|
| 592 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 593 |
+
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
|
| 594 |
+
Database
|
| 595 |
+
</span>
|
| 596 |
+
</td>
|
| 597 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 598 |
+
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
| 599 |
+
Running
|
| 600 |
+
</span>
|
| 601 |
+
</td>
|
| 602 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
| 603 |
+
$0.1450/hr
|
| 604 |
+
</td>
|
| 605 |
+
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
| 606 |
+
<a href="#" class="text-indigo-600 hover:text-indigo-900">Manage</a>
|
| 607 |
+
</td>
|
| 608 |
+
</tr>
|
| 609 |
+
<tr>
|
| 610 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 611 |
+
<div class="flex items-center">
|
| 612 |
+
<div class="flex-shrink-0 h-10 w-10">
|
| 613 |
+
<i class="fab fa-microsoft text-2xl text-blue-600"></i>
|
| 614 |
+
</div>
|
| 615 |
+
<div class="ml-4">
|
| 616 |
+
<div class="text-sm font-medium text-gray-900">
|
| 617 |
+
storage-archive
|
| 618 |
+
</div>
|
| 619 |
+
<div class="text-sm text-gray-500">
|
| 620 |
+
southeastasia
|
| 621 |
+
</div>
|
| 622 |
+
</div>
|
| 623 |
+
</div>
|
| 624 |
+
</td>
|
| 625 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 626 |
+
<div class="text-sm text-gray-900">Azure</div>
|
| 627 |
+
</td>
|
| 628 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 629 |
+
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
|
| 630 |
+
Storage
|
| 631 |
+
</span>
|
| 632 |
+
</td>
|
| 633 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 634 |
+
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
|
| 635 |
+
Provisioning
|
| 636 |
+
</span>
|
| 637 |
+
</td>
|
| 638 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
| 639 |
+
$0.0230/hr
|
| 640 |
+
</td>
|
| 641 |
+
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
| 642 |
+
<a href="#" class="text-indigo-600 hover:text-indigo-900">Manage</a>
|
| 643 |
+
</td>
|
| 644 |
+
</tr>
|
| 645 |
+
</tbody>
|
| 646 |
+
</table>
|
| 647 |
+
</div>
|
| 648 |
+
</div>
|
| 649 |
+
</div>
|
| 650 |
+
</div>
|
| 651 |
+
</div>
|
| 652 |
+
</div>
|
| 653 |
+
</div>
|
| 654 |
+
</div>
|
| 655 |
+
|
| 656 |
+
<!-- Provider Dashboard Preview -->
|
| 657 |
+
<div class="py-12 bg-gray-50">
|
| 658 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 659 |
+
<div class="lg:text-center">
|
| 660 |
+
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">For Providers</h2>
|
| 661 |
+
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
| 662 |
+
Grow your cloud business
|
| 663 |
+
</p>
|
| 664 |
+
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
|
| 665 |
+
Register your services and reach thousands of potential customers
|
| 666 |
+
</p>
|
| 667 |
+
</div>
|
| 668 |
+
|
| 669 |
+
<div class="mt-10">
|
| 670 |
+
<div class="bg-white rounded-lg shadow overflow-hidden">
|
| 671 |
+
<div class="p-6">
|
| 672 |
+
<div class="flex items-center">
|
| 673 |
+
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
|
| 674 |
+
<i class="fas fa-cloud-upload-alt text-white text-xl"></i>
|
| 675 |
+
</div>
|
| 676 |
+
<div class="ml-5">
|
| 677 |
+
<h3 class="text-lg leading-6 font-medium text-gray-900">Register New Service</h3>
|
| 678 |
+
</div>
|
| 679 |
+
</div>
|
| 680 |
+
<div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
|
| 681 |
+
<div class="sm:col-span-3">
|
| 682 |
+
<label for="service-name" class="block text-sm font-medium text-gray-700">Service Name</label>
|
| 683 |
+
<div class="mt-1">
|
| 684 |
+
<input type="text" name="service-name" id="service-name" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
|
| 685 |
+
</div>
|
| 686 |
+
</div>
|
| 687 |
+
|
| 688 |
+
<div class="sm:col-span-3">
|
| 689 |
+
<label for="service-type" class="block text-sm font-medium text-gray-700">Service Type</label>
|
| 690 |
+
<div class="mt-1">
|
| 691 |
+
<select id="service-type" name="service-type" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
|
| 692 |
+
<option>Compute</option>
|
| 693 |
+
<option>Storage</option>
|
| 694 |
+
<option>Database</option>
|
| 695 |
+
<option>Networking</option>
|
| 696 |
+
<option>Other</option>
|
| 697 |
+
</select>
|
| 698 |
+
</div>
|
| 699 |
+
</div>
|
| 700 |
+
|
| 701 |
+
<div class="sm:col-span-6">
|
| 702 |
+
<label for="description" class="block text-sm font-medium text-gray-700">Description</label>
|
| 703 |
+
<div class="mt-1">
|
| 704 |
+
<textarea id="description" name="description" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"></textarea>
|
| 705 |
+
</div>
|
| 706 |
+
</div>
|
| 707 |
+
|
| 708 |
+
<div class="sm:col-span-2">
|
| 709 |
+
<label for="price" class="block text-sm font-medium text-gray-700">Price per hour (USD)</label>
|
| 710 |
+
<div class="mt-1 relative rounded-md shadow-sm">
|
| 711 |
+
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
| 712 |
+
<span class="text-gray-500 sm:text-sm">$</span>
|
| 713 |
+
</div>
|
| 714 |
+
<input type="text" name="price" id="price" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-7 pr-12 sm:text-sm border-gray-300 rounded-md" placeholder="0.00">
|
| 715 |
+
<div class="absolute inset-y-0 right-0 flex items-center">
|
| 716 |
+
<label for="currency" class="sr-only">Currency</label>
|
| 717 |
+
<select id="currency" name="currency" class="focus:ring-indigo-500 focus:border-indigo-500 h-full py-0 pl-2 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md">
|
| 718 |
+
<option>USD</option>
|
| 719 |
+
<option>ETH</option>
|
| 720 |
+
<option>USDC</option>
|
| 721 |
+
</select>
|
| 722 |
+
</div>
|
| 723 |
+
</div>
|
| 724 |
+
</div>
|
| 725 |
+
|
| 726 |
+
<div class="sm:col-span-2">
|
| 727 |
+
<label for="region" class="block text-sm font-medium text-gray-700">Region</label>
|
| 728 |
+
<div class="mt-1">
|
| 729 |
+
<select id="region" name="region" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
|
| 730 |
+
<option>US East (N. Virginia)</option>
|
| 731 |
+
<option>US West (Oregon)</option>
|
| 732 |
+
<option>Europe (Ireland)</option>
|
| 733 |
+
<option>Asia Pacific (Singapore)</option>
|
| 734 |
+
</select>
|
| 735 |
+
</div>
|
| 736 |
+
</div>
|
| 737 |
+
|
| 738 |
+
<div class="sm:col-span-2">
|
| 739 |
+
<label for="specs" class="block text-sm font-medium text-gray-700">Specs</label>
|
| 740 |
+
<div class="mt-1">
|
| 741 |
+
<input type="text" name="specs" id="specs" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="e.g. 2vCPU, 8GB RAM">
|
| 742 |
+
</div>
|
| 743 |
+
</div>
|
| 744 |
+
|
| 745 |
+
<div class="sm:col-span-6">
|
| 746 |
+
<label class="block text-sm font-medium text-gray-700">SLA Options</label>
|
| 747 |
+
<div class="mt-2 space-y-2">
|
| 748 |
+
<div class="flex items-center">
|
| 749 |
+
<input id="sla-uptime" name="sla-options" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
| 750 |
+
<label for="sla-uptime" class="ml-3 block text-sm font-medium text-gray-700">
|
| 751 |
+
99.9% Uptime Guarantee (+$0.02/hr)
|
| 752 |
+
</label>
|
| 753 |
+
</div>
|
| 754 |
+
<div class="flex items-center">
|
| 755 |
+
<input id="sla-support" name="sla-options" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
| 756 |
+
<label for="sla-support" name="sla-options" class="ml-3 block text-sm font-medium text-gray-700">
|
| 757 |
+
24/7 Premium Support (+$0.05/hr)
|
| 758 |
+
</label>
|
| 759 |
+
</div>
|
| 760 |
+
</div>
|
| 761 |
+
</div>
|
| 762 |
+
</div>
|
| 763 |
+
</div>
|
| 764 |
+
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
| 765 |
+
<button type="submit" class="bg-indigo-600 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
| 766 |
+
Register Service
|
| 767 |
+
</button>
|
| 768 |
+
</div>
|
| 769 |
+
</div>
|
| 770 |
+
</div>
|
| 771 |
+
</div>
|
| 772 |
+
</div>
|
| 773 |
+
|
| 774 |
+
<!-- Tech Stack Section -->
|
| 775 |
+
<div class="py-12 bg-white">
|
| 776 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 777 |
+
<div class="lg:text-center">
|
| 778 |
+
<h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Technology</h2>
|
| 779 |
+
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
| 780 |
+
Our Tech Stack
|
| 781 |
+
</p>
|
| 782 |
+
</div>
|
| 783 |
+
|
| 784 |
+
<div class="mt-10">
|
| 785 |
+
<div class="grid grid-cols-2 gap-8 md:grid-cols-4">
|
| 786 |
+
<div class="col-span-1 flex justify-center">
|
| 787 |
+
<div class="flex items-center">
|
| 788 |
+
<i class="fab fa-react text-4xl text-blue-500"></i>
|
| 789 |
+
<span class="ml-3 text-lg font-medium">React/Next.js</span>
|
| 790 |
+
</div>
|
| 791 |
+
</div>
|
| 792 |
+
<div class="col-span-1 flex justify-center">
|
| 793 |
+
<div class="flex items-center">
|
| 794 |
+
<i class="fab fa-node-js text-4xl text-green-500"></i>
|
| 795 |
+
<span class="ml-3 text-lg font-medium">Node.js</span>
|
| 796 |
+
</div>
|
| 797 |
+
</div>
|
| 798 |
+
<div class="col-span-1 flex justify-center">
|
| 799 |
+
<div class="flex items-center">
|
| 800 |
+
<i class="fas fa-link text-4xl text-purple-500"></i>
|
| 801 |
+
<span class="ml-3 text-lg font-medium">Web3.js</span>
|
| 802 |
+
</div>
|
| 803 |
+
</div>
|
| 804 |
+
<div class="col-span-1 flex justify-center">
|
| 805 |
+
<div class="flex items-center">
|
| 806 |
+
<i class="fab fa-ethereum text-4xl text-gray-500"></i>
|
| 807 |
+
<span class="ml-3 text-lg font-medium">Ethereum</span>
|
| 808 |
+
</div>
|
| 809 |
+
</div>
|
| 810 |
+
<div class="col-span-1 flex justify-center">
|
| 811 |
+
<div class="flex items-center">
|
| 812 |
+
<i class="fas fa-file-contract text-4xl text-yellow-500"></i>
|
| 813 |
+
<span class="ml-3 text-lg font-medium">Solidity</span>
|
| 814 |
+
</div>
|
| 815 |
+
</div>
|
| 816 |
+
<div class="col-span-1 flex justify-center">
|
| 817 |
+
<div class="flex items-center">
|
| 818 |
+
<i class="fas fa-database text-4xl text-blue-400"></i>
|
| 819 |
+
<span class="ml-3 text-lg font-medium">PostgreSQL</span>
|
| 820 |
+
</div>
|
| 821 |
+
</div>
|
| 822 |
+
<div class="col-span-1 flex justify-center">
|
| 823 |
+
<div class="flex items-center">
|
| 824 |
+
<i class="fas fa-network-wired text-4xl text-orange-500"></i>
|
| 825 |
+
<span class="ml-3 text-lg font-medium">IPFS</span>
|
| 826 |
+
</div>
|
| 827 |
+
</div>
|
| 828 |
+
<div class="col-span-1 flex justify-center">
|
| 829 |
+
<div class="flex items-center">
|
| 830 |
+
<i class="fas fa-code-branch text-4xl text-red-500"></i>
|
| 831 |
+
<span class="ml-3 text-lg font-medium">Terraform</span>
|
| 832 |
+
</div>
|
| 833 |
+
</div>
|
| 834 |
+
</div>
|
| 835 |
+
</div>
|
| 836 |
+
</div>
|
| 837 |
+
</div>
|
| 838 |
+
|
| 839 |
+
<!-- CTA Section -->
|
| 840 |
+
<div class="gradient-bg">
|
| 841 |
+
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
|
| 842 |
+
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
|
| 843 |
+
<span class="block">Ready to get started?</span>
|
| 844 |
+
<span class="block text-indigo-200">Join the decentralized cloud revolution today.</span>
|
| 845 |
+
</h2>
|
| 846 |
+
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
|
| 847 |
+
<div class="inline-flex rounded-md shadow">
|
| 848 |
+
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
|
| 849 |
+
Sign up for free
|
| 850 |
+
</a>
|
| 851 |
+
</div>
|
| 852 |
+
<div class="ml-3 inline-flex rounded-md shadow">
|
| 853 |
+
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70">
|
| 854 |
+
Contact sales
|
| 855 |
+
</a>
|
| 856 |
+
</div>
|
| 857 |
+
</div>
|
| 858 |
+
</div>
|
| 859 |
+
</div>
|
| 860 |
+
|
| 861 |
+
<!-- Footer -->
|
| 862 |
+
<footer class="bg-gray-800">
|
| 863 |
+
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
| 864 |
+
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
| 865 |
+
<div>
|
| 866 |
+
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3>
|
| 867 |
+
<ul class="mt-4 space-y-4">
|
| 868 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li>
|
| 869 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li>
|
| 870 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li>
|
| 871 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li>
|
| 872 |
+
</ul>
|
| 873 |
+
</div>
|
| 874 |
+
<div>
|
| 875 |
+
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
|
| 876 |
+
<ul class="mt-4 space-y-4">
|
| 877 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
|
| 878 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
|
| 879 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
|
| 880 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
|
| 881 |
+
</ul>
|
| 882 |
+
</div>
|
| 883 |
+
<div>
|
| 884 |
+
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
|
| 885 |
+
<ul class="mt-4 space-y-4">
|
| 886 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
|
| 887 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
|
| 888 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li>
|
| 889 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">GDPR</a></li>
|
| 890 |
+
</ul>
|
| 891 |
+
</div>
|
| 892 |
+
<div>
|
| 893 |
+
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
|
| 894 |
+
<ul class="mt-4 space-y-4">
|
| 895 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li>
|
| 896 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">GitHub</a></li>
|
| 897 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Discord</a></li>
|
| 898 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Email</a></li>
|
| 899 |
+
</ul>
|
| 900 |
+
</div>
|
| 901 |
+
</div>
|
| 902 |
+
<div class="mt-12 border-t border-gray-700 pt-8 flex justify-between">
|
| 903 |
+
<p class="text-base text-gray-400">
|
| 904 |
+
© 2023 CloudChain. All rights reserved.
|
| 905 |
+
</p>
|
| 906 |
+
<div class="flex space-x-6">
|
| 907 |
+
<a href="#" class="text-gray-400 hover:text-gray-300">
|
| 908 |
+
<i class="fab fa-twitter"></i>
|
| 909 |
+
</a>
|
| 910 |
+
<a href="#" class="text-gray-400 hover:text-gray-300">
|
| 911 |
+
<i class="fab fa-github"></i>
|
| 912 |
+
</a>
|
| 913 |
+
<a href="#" class="text-gray-400 hover:text-gray-300">
|
| 914 |
+
<i class="fab fa-discord"></i>
|
| 915 |
+
</a>
|
| 916 |
+
</div>
|
| 917 |
+
</div>
|
| 918 |
+
</div>
|
| 919 |
+
</footer>
|
| 920 |
+
|
| 921 |
+
<script>
|
| 922 |
+
// Simple animation for service cards on page load
|
| 923 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 924 |
+
const serviceCards = document.querySelectorAll('.service-card');
|
| 925 |
+
|
| 926 |
+
setTimeout(() => {
|
| 927 |
+
serviceCards.forEach((card, index) => {
|
| 928 |
+
setTimeout(() => {
|
| 929 |
+
card.classList.add('transform');
|
| 930 |
+
card.classList.add('transition');
|
| 931 |
+
card.classList.add('duration-300');
|
| 932 |
+
card.classList.add('ease-in-out');
|
| 933 |
+
}, index * 100);
|
| 934 |
+
});
|
| 935 |
+
}, 500);
|
| 936 |
+
|
| 937 |
+
// Connect wallet button functionality
|
| 938 |
+
const connectWalletBtn = document.querySelector('button.bg-indigo-700');
|
| 939 |
+
if (connectWalletBtn) {
|
| 940 |
+
connectWalletBtn.addEventListener('click', function() {
|
| 941 |
+
this.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Connected';
|
| 942 |
+
this.classList.remove('bg-indigo-700');
|
| 943 |
+
this.classList.add('bg-green-600');
|
| 944 |
+
|
| 945 |
+
// Simulate wallet connection
|
| 946 |
+
setTimeout(() => {
|
| 947 |
+
const walletAddress = '0x742d35Cc6634C0532925a3b844Bc454e4438f44e';
|
| 948 |
+
const walletElement = document.createElement('div');
|
| 949 |
+
walletElement.className = 'ml-2 text-xs font-light';
|
| 950 |
+
walletElement.textContent = walletAddress.substring(0, 6) + '...' + walletAddress.substring(38);
|
| 951 |
+
this.parentNode.appendChild(walletElement);
|
| 952 |
+
}, 1000);
|
| 953 |
+
});
|
| 954 |
+
}
|
| 955 |
+
});
|
| 956 |
+
</script>
|
| 957 |
+
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jhparmar/ai-cloud-marketspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 958 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
Project Overview Goal: Create a decentralized platform where users can browse, compare, and provision services from multiple cloud providers (AWS, GCP, Azure, etc.), optionally leveraging blockchain/smart contracts for trustless transactions, usage tracking, and billing. --- Core Features 1. Cloud Provider Integration API integrations with AWS, GCP, Azure, and others. Support for basic services (e.g., compute, storage, DBs). Abstract provisioning layer. 2. Decentralized Backend Use blockchain for: Smart contract-based billing and usage tracking. Immutable logs and service agreements (SLAs). Token-based payments (optional). 3. Marketplace Interface Browse cloud services by price, location, provider, and SLA. Search and compare services. Transparent usage-based pricing. 4. User Dashboard Provision/manage instances. Monitor costs and usage. Manage tokens/wallet. 5. Provider Dashboard Register services and pricing. Manage offerings. View usage analytics. --- Tech Stack (Sample) Frontend: React.js or Next.js for SPA. Web3.js or Ethers.js for blockchain wallet integration (Metamask). Tailwind or shadcn/ui for styling. Backend: Node.js / FastAPI / Go for API orchestration. Integrate with Terraform, Pulumi, or SDKs for cloud provisioning. Blockchain: Ethereum (or a cheaper L2 like Polygon, Arbitrum). Solidity smart contracts: User contracts Provider registration Usage metering Payments Optional: Use Chainlink for real-world API price feeds. Storage: IPFS (for service metadata or logs). PostgreSQL or decentralized DBs (e.g., Tableland, Ceramic) for hybrid storage. --- Smart Contract Design (Simplified) contract CloudMarketplace { struct Service { string name; string description; uint pricePerHour; address provider; } mapping(uint => Service) public services; mapping(address => uint) public userBalance; function registerService(...) public; function provisionService(uint serviceId) public payable; function withdraw() public; } --- Monetization Ideas Commission on each transaction. Premium analytics tools. Token economy and staking for providers. --- Challenges Standardizing APIs across cloud platforms. Accurate metering and usage billing. Legal compliance for international usage. Smart contract upgrades/security. --- Would you like a GitHub starter template or mock architecture diagram for this?
|