blob: 4f79bfe421ca87c8eeb7bb1cff6fc213baae0030 (
plain)
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
|
---
import Layout from "../layouts/Layout.astro";
const title = "CIDR Calculator Widget Embed Example";
const description =
"Learn how to embed the CIDR calculator widget in your website";
// Embed code that users can copy
const embedCode = `<iframe src="https://cidr.xyz/embed" width="100%" height="600" title="CIDR Calculator" loading="lazy"></iframe>`;
---
<Layout title={title} description={description}>
<header>
<div class="mx-auto max-w-7xl px-4 py-2 sm:py-4 lg:px-6 text-center">
<h1
class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-6xl"
>
CIDR Calculator Widget
</h1>
<p class="mt-4 text-lg sm:text-xl max-w-2xl mx-auto text-gray-700">
Embed the CIDR Calculator in your website
</p>
</div>
</header>
<div class="prose max-w-none mb-8">
<p>
You can embed the CIDR calculator widget in your website or
application using an iframe. Copy the code below and adjust the
width and height as needed:
</p>
<pre
class="p-4 rounded-md overflow-x-auto bg-gray-800 flex justify-center"><code class="text-gray-300 whitespace-pre-wrap">{embedCode}</code></pre>
<h3>Live Example</h3>
</div>
<div class="border border-gray-300 rounded-lg shadow-md mb-8">
<iframe
src="/embed"
width="100%"
height="600"
title="CIDR Calculator"
loading="lazy"></iframe>
</div>
<div class="prose max-w-none">
<h3>Customization</h3>
<p>
The widget adapts to the width of its container. For best results:
</p>
<ul>
<li>Use a minimum width of 400px for optimal display</li>
<li>Set a minimum height of 600px to avoid scrolling</li>
<li>
The widget has a transparent background that can blend with your
site
</li>
</ul>
<h3>Usage Notes</h3>
<ul>
<li>The widget is free to use on any website</li>
<li>
Please consider adding attribution with a link back to <a
href="https://cidr.xyz"
class="text-blue-600 hover:underline">cidr.xyz</a
>
</li>
<li>
For any questions or customization needs, visit the <a
href="https://github.com/yuvadm/cidr.xyz"
class="text-blue-600 hover:underline">GitHub repository</a
>
</li>
</ul>
</div>
</Layout>
|
