-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
175 lines (155 loc) · 8.13 KB
/
index.html
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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css"/>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="css/style.css">
<!-- add favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon.png">
<title>Mosaic - Claim your loyalty rewards</title>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "//matomo.meierij.it/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '2']);
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<noscript><p><img src="//matomo.meierij.it/matomo.php?idsite=2&rec=1" style="border:0;" alt=""/></p></noscript>
<!-- End Matomo Code -->
</head>
<body>
<div class="h-screen bg-gray-900">
<div class="relative isolate overflow-hidden bg-gray-900">
<svg
class="absolute inset-0 -z-10 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
aria-hidden="true">
<defs>
<pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1"
patternUnits="userSpaceOnUse">
<path d="M.5 200V.5H200" fill="none"/>
</pattern>
</defs>
<svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
<path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
stroke-width="0"/>
</svg>
<rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)"/>
</svg>
<div
class="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]"
aria-hidden="true">
<div class="aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20"
style="clip-path: polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)"></div>
</div>
<div class="mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-32 lg:flex lg:px-8 lg:py-40">
<div class="mx-auto max-w-2xl flex-shrink-0 lg:mx-0 lg:max-w-xl lg:pt-8">
<img class="h-11" src="img/Mosaic-workdmark-alpha-2-purple.png" alt="Mosaic Drops">
<div class="mt-24 sm:mt-32 lg:mt-16">
<a href="https://blog.mosaicdrops.com/" class="inline-flex space-x-6"
target="_blank">
<span
class="rounded-full bg-indigo-500/10 px-3 py-1 text-sm font-semibold leading-6 text-indigo-400 ring-1 ring-inset ring-indigo-500/20">What's new</span>
</span>
</a>
</div>
<h1 class="mt-10 text-4xl font-bold tracking-tight text-white sm:text-5xl">Discover your favorite brands and
earn onchain rewards</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">Mosaic provides easy-to-redeem rewards from top web3 brands.
Connect your wallet and unlock your first prize today.</p>
<div class="mt-10 flex items-center gap-x-6">
<iframe src="https://blog.mosaicdrops.com/embed?minimal=true" width="480" height="140" style="" frameborder="0" scrolling="no"></iframe> </div>
<div class="pt-10">
</div>
</div>
<div class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32">
<div class="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
<div class="mx-auto ">
<iframe
class="rounded-xl shadow-lg "
src="https://embed.ipfscdn.io/ipfs/bafybeigtqeyfmqkfbdu7ubjlwhtqkdqckvee7waks4uwhmzdfvpfaqzdwm/erc1155.html?contract=0x1F4005a548068Acb991FfcBDb835BC8883FF0546&chain=%7B%22name%22%3A%22OP+Mainnet%22%2C%22chain%22%3A%22ETH%22%2C%22rpc%22%3A%5B%22https%3A%2F%2Foptimism.rpc.thirdweb.com%2F%24%7BTHIRDWEB_API_KEY%7D%22%5D%2C%22nativeCurrency%22%3A%7B%22name%22%3A%22Ether%22%2C%22symbol%22%3A%22ETH%22%2C%22decimals%22%3A18%7D%2C%22shortName%22%3A%22oeth%22%2C%22chainId%22%3A10%2C%22testnet%22%3Afalse%2C%22slug%22%3A%22optimism%22%2C%22icon%22%3A%7B%22url%22%3A%22ipfs%3A%2F%2FQmcxZHpyJa8T4i63xqjPYrZ6tKrt55tZJpbXcjSDKuKaf9%2Foptimism%2F512.png%22%2C%22height%22%3A512%2C%22width%22%3A512%2C%22format%22%3A%22png%22%7D%7D&clientId=daccaa8a7f8c9bc62c9eeecc7aa994ac&tokenId=0&theme=dark&primaryColor=purple"
style="max-width:100%; min-width: 450px ; height: 700px;"
frameborder="0"
></iframe>
</div>
</div>
</div>
</div>
<div class="py-10"></div>
</div>
<div class="">
<h2 class="mt-10 text-4xl font-bold tracking-tight text-indigo-600 sm:text-3xl text-center">Our Previous Drops</h2>
<div class="mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-32 lg:flex lg:px-8 lg:py-20 gap-5">
<div class="card card-compact w-96 bg-base-100 shadow-xl mb-2">
<figure><img src="nft/buildspaces4w3_.png" alt="Shoes"/></figure>
<div class="card-body">
<h2 class="card-title">Alpha Drop - Open Edition</h2>
<p>As we continue to build Mosaic Drops and prepare to launch out of alpha. </p>
<div class="justify-end card-actions">
<span
class="inline-flex items-center rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-700/10">
4266 Dropped
</span>
<span
class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10">
Closed
</span>
</div>
</div>
</div>
<div class="card card-compact w-96 bg-base-100 shadow-xl mb-2">
<figure><img src="nft/buildspaces4w2_.png" alt="Shoes"/></figure>
<div class="card-body">
<h2 class="card-title">Special mosaic buildspace drop</h2>
<p>Journey into the Mosaicverse. </p>
<div class="justify-end card-actions">
<span
class="inline-flex items-center rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-700/10">
1500 Dropped
</span>
<span
class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10">
Closed
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function follow() {
window.open("https://twitter.com/intent/follow?follow=mosaicdrops&screen_name=mosaicdrops", "_blank");
setTimeout(function () {
document.getElementById('likeButton').style.display = 'block';
document.getElementById('step2').style.display = 'block';
}, 1000);
}
function like() {
window.open("https://twitter.com/intent/like?tweet_id=1698754084742774804", "_blank");
setTimeout(function () {
document.getElementById('hiddenElement').style.display = 'block';
document.getElementById('step3').style.display = 'block';
}, 1000);
}
function retweet() {
window.open("https://twitter.com/intent/retweet?tweet_id=1698754084742774804", "_blank");
setTimeout(function () {
document.getElementById('nextHiddenElement').style.display = 'block';
document.getElementById('step4').style.display = 'block';
}, 1000);
}
</script>
</body>
</html>