diff options
| author | Yuval Adam <_@yuv.al> | 2025-05-22 13:00:55 +0200 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-05-22 13:00:55 +0200 |
| commit | 69cc1db574e319c77d5ae049979a6b35518b26fe (patch) | |
| tree | 3ffa4cd7a8d6f09d3a97addfe2c5e20468801ed3 /src/pages/embed-example.astro | |
| parent | 65276a312f20cbcbab07201c5a07c547540652ed (diff) | |
Add subnet guide, layout, nav and embed
Diffstat (limited to 'src/pages/embed-example.astro')
| -rw-r--r-- | src/pages/embed-example.astro | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/src/pages/embed-example.astro b/src/pages/embed-example.astro new file mode 100644 index 0000000..f66feab --- /dev/null +++ b/src/pages/embed-example.astro @@ -0,0 +1,66 @@ +--- +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"; +--- + +<Layout title={title} description={description}> + <h1 class="my-3 sm:my-1 text-center sm:text-left text-4xl font-extrabold tracking-tight text-gray-900 sm:text-6xl text-4xl"> + CIDR Calculator Widget + </h1> + <h2 class="pt-1 text-xl text-center sm:text-left text-gray-600 mb-8"> + Embed the CIDR Calculator in your website + </h2> + + <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="bg-gray-100 p-4 rounded-md overflow-x-auto"><code><iframe + src="https://cidr.xyz/embed" + width="100%" + height="600" + frameborder="0" + allowtransparency="true" + title="CIDR Calculator" + loading="lazy" +></iframe></code></pre> + + <h3>Live Example</h3> + <p>Here's how the embedded widget looks:</p> + </div> + + <div class="border border-gray-300 rounded-lg shadow-md mb-8"> + <iframe + src="/embed" + width="100%" + height="600" + frameborder="0" + allowtransparency="true" + 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> |