Skip to content

Commit bcae4af

Browse files
tinchox5tinchox5
committed
Add description
1 parent bedf815 commit bcae4af

1 file changed

Lines changed: 83 additions & 49 deletions

File tree

‎docs/index.html‎

Lines changed: 83 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,31 @@
22
<html lang="en">
33

44
<head>
5-
6-
<title>snapDOM – HTML to SVG/Image capture with superior fidelity and speed</title>
7-
<meta name="description" content="snapdom is a powerful alternative to html2canvas and other tools that captures DOM elements with extreme precision, including pseudo-elements, web fonts, and shadow DOM.">
8-
<meta name="keywords" content="snapdom, html2canvas, DOM capture, screenshot library, SVG export, canvas image, frontend tools, JavaScript screenshot, shadow DOM, pseudo-elements, high fidelity">
9-
10-
<meta property="og:type" content="website">
11-
<meta property="og:title" content="snapDOM – serious alternative to html2canvas">
12-
<meta property="og:description" content="Capture any web UI with high accuracy and speed, including details that html2canvas misses. Try the demo and see the difference.">
13-
<meta property="og:url" content="https://zumerlab.github.io/snapdom/">
14-
<meta property="og:image" content="https://zumerlab.github.io/snapdom/assets/hero.png">
15-
16-
<!-- Twitter Card -->
17-
<meta name="twitter:card" content="summary_large_image">
18-
<meta name="twitter:title" content="snapdom – HTML capture reinvented">
19-
<meta name="twitter:description" content="A high-fidelity alternative to html2canvas. Export DOM to SVG, PNG, JPG with full CSS and pseudo support.">
20-
<meta name="twitter:image" content="https://zumerlab.github.io/snapdom/assets/hero.png">
5+
<title>
6+
snapDOM – HTML to SVG/Image capture with superior fidelity and speed
7+
</title>
8+
<meta name="description"
9+
content="snapdom is a powerful alternative to html2canvas and other tools that captures DOM elements with extreme precision, including pseudo-elements, web fonts, and shadow DOM." />
10+
<meta name="keywords"
11+
content="snapdom, html2canvas, DOM capture, screenshot library, SVG export, canvas image, frontend tools, JavaScript screenshot, shadow DOM, pseudo-elements, high fidelity" />
12+
13+
<meta property="og:type" content="website" />
14+
<meta property="og:title" content="snapDOM – serious alternative to html2canvas" />
15+
<meta property="og:description"
16+
content="Capture any web UI with high accuracy and speed, including details that html2canvas misses. Try the demo and see the difference." />
17+
<meta property="og:url" content="https://zumerlab.github.io/snapdom/" />
18+
<meta property="og:image" content="https://zumerlab.github.io/snapdom/assets/hero.png" />
19+
20+
<!-- Twitter Card -->
21+
<meta name="twitter:card" content="summary_large_image" />
22+
<meta name="twitter:title" content="snapdom – HTML capture reinvented" />
23+
<meta name="twitter:description"
24+
content="A high-fidelity alternative to html2canvas. Export DOM to SVG, PNG, JPG with full CSS and pseudo support." />
25+
<meta name="twitter:image" content="https://zumerlab.github.io/snapdom/assets/hero.png" />
2126
<meta charset="UTF-8" />
22-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
23-
<!-- Canonical link -->
24-
<link rel="canonical" href="https://zumerlab.github.io/snapdom/">
27+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
28+
<!-- Canonical link -->
29+
<link rel="canonical" href="https://zumerlab.github.io/snapdom/" />
2530
<link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.css" crossorigin="anonymous" />
2631
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
2732
crossorigin="anonymous" />
@@ -33,11 +38,13 @@
3338
<!-- Google tag (gtag.js) -->
3439
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4G88ZHG7S1"></script>
3540
<script>
36-
window.dataLayer = window.dataLayer || [];
37-
function gtag() { dataLayer.push(arguments); }
38-
gtag('js', new Date());
41+
window.dataLayer = window.dataLayer || []
42+
function gtag() {
43+
dataLayer.push(arguments)
44+
}
45+
gtag('js', new Date())
3946

40-
gtag('config', 'G-4G88ZHG7S1');
47+
gtag('config', 'G-4G88ZHG7S1')
4148
</script>
4249
<style>
4350
body {
@@ -519,7 +526,7 @@
519526
font-weight: bold;
520527
font-size: 1.1em;
521528
gap: 0.4em;
522-
" data-umami-event="SnapDOM repo" >
529+
" data-umami-event="SnapDOM repo">
523530
<i class="fab fa-github" style="font-size: 1.6em"></i>
524531
<span id="repo-link">zumerlab/snapdom</span>
525532

@@ -541,24 +548,28 @@
541548
</div>
542549

543550
<h1>SnapDOM demo gallery</h1>
551+
<p style="text-align:center; max-width: 700px; margin: 0 auto 2rem; font-size: 1.1rem; color: #333;">
552+
SnapDOM captures HTML elements to images with exceptional speed and accuracy, supporting pseudo-elements, shadow
553+
DOM, web fonts, and more.
554+
</p>
544555
<nav style="
545556
margin-bottom: 2rem;
546557
display: flex;
547558
flex-wrap: wrap;
548559
gap: 1em;
549560
justify-content: center;
550561
">
551-
<a data-umami-event="To basic" href="#basic">Basic</a>
552-
<a data-umami-event="To transition" href="#transition">Transition</a>
553-
<a data-umami-event="To orbit" href="#orbit">Orbit</a>
554-
<a data-umami-event="To fonts" href="#fonts-demo">Fonts</a>
555-
<a data-umami-event="To shadow" href="#shadow">Shadow DOM</a>
556-
<a data-umami-event="To canvas" href="#canvas">Canvas</a>
557-
<a data-umami-event="To export" href="#export">Export</a>
558-
<a data-umami-event="To pseudo" href="#pseudo">Pseudo</a>
559-
<a data-umami-event="To clippath" href="#clip">Clip-Path</a>
560-
<a data-umami-event="To blend" href="#blend">Blend</a>
561-
<a data-umami-event="To fullpage" href="#fullbody">Full Page</a>
562+
<a href="#basic">Basic</a>
563+
<a href="#transition">Transition</a>
564+
<a href="#orbit">Orbit</a>
565+
<a href="#fonts-demo">Fonts</a>
566+
<a href="#shadow">Shadow DOM</a>
567+
<a href="#canvas">Canvas</a>
568+
<a href="#export">Export</a>
569+
<a href="#pseudo">Pseudo</a>
570+
<a href="#clip">Clip-Path</a>
571+
<a href="#blend">Blend</a>
572+
<a href="#fullbody">Full Page</a>
562573
</nav>
563574
<main style="width: 100%; max-width: 700px">
564575
<section id="basic">
@@ -569,7 +580,9 @@ <h3>Hello SnapDOM!</h3>
569580
<button data-umami-event="Capture basic" onclick="captureDemo('basic-box', 'basic-output', this)">
570581
Capture
571582
</button>
572-
<button data-umami-event="Download basic" onclick="downloadDemo('basic-box')">Download</button>
583+
<button data-umami-event="Download basic" onclick="downloadDemo('basic-box')">
584+
Download
585+
</button>
573586
<div class="output" id="basic-output"></div>
574587
</section>
575588
<section id="transition">
@@ -583,13 +596,16 @@ <h2>🚀 Fun Transition</h2>
583596
<button data-umami-event="Capture transition" onclick="captureDemo('transition-box', 'transition-output', this)">
584597
Capture
585598
</button>
586-
<button data-umami-event="Download transition" onclick="downloadDemo('transition-box')">Download</button>
599+
<button data-umami-event="Download transition" onclick="downloadDemo('transition-box')">
600+
Download
601+
</button>
587602
<div class="output" id="transition-output"></div>
588603
</section>
589604
<section id="orbit">
590605
<h2>
591606
📦 Orbit CSS framework -
592-
<a href="https://github.com/zumerlab/orbit/?utm_source=snapdom" data-umami-event="To orbit repo" target="_blank">repo</a>
607+
<a href="https://github.com/zumerlab/orbit/?utm_source=snapdom" data-umami-event="To orbit repo"
608+
target="_blank">repo</a>
593609
</h2>
594610
<div class="card black" id="orbit-box" style="
595611
height: 400px;
@@ -723,7 +739,9 @@ <h2>
723739
<button data-umami-event="Capture orbit" onclick="captureDemo('orbit-box', 'orbit-output', this)">
724740
Capture
725741
</button>
726-
<button data-umami-event="Download orbit" onclick="downloadDemo('orbit-box')">Download</button>
742+
<button data-umami-event="Download orbit" onclick="downloadDemo('orbit-box')">
743+
Download
744+
</button>
727745
<div class="output" id="orbit-output"></div>
728746
</section>
729747
<section id="fonts-demo">
@@ -737,7 +755,9 @@ <h3 style="font-family: 'Mansalva', cursive">Unique Typography!</h3>
737755
<button data-umami-event="Capture fonts" onclick="captureDemo('fonts-box', 'fonts-output', this)">
738756
Capture
739757
</button>
740-
<button data-umami-event="Download fonts" onclick="downloadDemo('fonts-box')">Download</button>
758+
<button data-umami-event="Download fonts" onclick="downloadDemo('fonts-box')">
759+
Download
760+
</button>
741761
<div class="output" id="fonts-output"></div>
742762
</section>
743763

@@ -747,7 +767,9 @@ <h2>🧱 Shadow DOM</h2>
747767
<button data-umami-event="Capture shadow" onclick="captureDemo('shadow-host', 'shadow-output', this)">
748768
Capture
749769
</button>
750-
<button data-umami-event="Download shadow" onclick="downloadDemo('shadow-host')">Download</button>
770+
<button data-umami-event="Download shadow" onclick="downloadDemo('shadow-host')">
771+
Download
772+
</button>
751773
<div class="output" id="shadow-output"></div>
752774
</section>
753775
<section id="canvas">
@@ -758,7 +780,9 @@ <h2>🎨 Canvas</h2>
758780
<button data-umami-event="Capture canvas" onclick="captureDemo('myCanvas', 'canvas-output', this)">
759781
Capture
760782
</button>
761-
<button data-umami-event="Download canvas" onclick="downloadDemo('myCanvas')">Download</button>
783+
<button data-umami-event="Download canvas" onclick="downloadDemo('myCanvas')">
784+
Download
785+
</button>
762786
<div class="output" id="canvas-output"></div>
763787
</section>
764788
<section id="export">
@@ -771,7 +795,9 @@ <h2>📁 Export Formats</h2>
771795
<span class="export-format">WebP</span>.
772796
</div>
773797
</div>
774-
<button data-umami-event="Export formats "onclick="exportFormats('export-box')">Export</button>
798+
<button data-umami-event="Export formats " onclick="exportFormats('export-box')">
799+
Export
800+
</button>
775801
<div class="output" id="export-output"></div>
776802
</section>
777803
<section id="pseudo">
@@ -782,7 +808,9 @@ <h2>✨ Pseudo Elements</h2>
782808
<button data-umami-event="Capture pseudo" onclick="captureDemo('pseudo-box', 'pseudo-output', this)">
783809
Capture
784810
</button>
785-
<button data-umami-event="Download pseudo" onclick="downloadDemo('pseudo-box')">Download</button>
811+
<button data-umami-event="Download pseudo" onclick="downloadDemo('pseudo-box')">
812+
Download
813+
</button>
786814
<div class="output" id="pseudo-output"></div>
787815
</section>
788816
<section id="clip">
@@ -793,7 +821,9 @@ <h2>✂️ Clip-Path Demo</h2>
793821
<button data-umami-event="Capture clip path" onclick="captureDemo('clip-box', 'clip-output', this)">
794822
Capture
795823
</button>
796-
<button data-umami-event="Download clip path" onclick="downloadDemo('clip-box')">Download</button>
824+
<button data-umami-event="Download clip path" onclick="downloadDemo('clip-box')">
825+
Download
826+
</button>
797827
<div class="output" id="clip-output"></div>
798828
</section>
799829
<section id="blend">
@@ -802,15 +832,19 @@ <h2>🌀 Mix Blend Mode</h2>
802832
<button data-umami-event="Capture blend" onclick="captureDemo('blend-box', 'blend-output', this)">
803833
Capture
804834
</button>
805-
<button data-umami-event="Download blend" onclick="downloadDemo('blend-box')">Download</button>
835+
<button data-umami-event="Download blend" onclick="downloadDemo('blend-box')">
836+
Download
837+
</button>
806838
<div class="output" id="blend-output"></div>
807839
</section>
808840
<section id="fullbody">
809841
<h2>🧾 Full Page Capture</h2>
810842
<button data-umami-event="Capture full" onclick="captureDemo('body', 'fullbody-output', this)">
811843
Capture
812844
</button>
813-
<button data-umami-event="Download full" onclick="downloadDemo('body')">Download</button>
845+
<button data-umami-event="Download full" onclick="downloadDemo('body')">
846+
Download
847+
</button>
814848
<div class="output" id="fullbody-output"></div>
815849
</section>
816850
</main>
@@ -902,7 +936,7 @@ <h2>🧾 Full Page Capture</h2>
902936
embedFonts: id === 'body' || id === 'fonts-box' ? true : false,
903937
scale: id === 'body' ? 0.4 : 1,
904938
fast: id !== 'fonts-box' ? true : false,
905-
compress: id !== 'fonts-box' ? true : false
939+
compress: id !== 'fonts-box' ? true : false,
906940
})
907941
output.innerHTML = ''
908942
output.appendChild(img)
@@ -978,4 +1012,4 @@ <h2>🧾 Full Page Capture</h2>
9781012
<script crossorigin src="https://unpkg.com/@zumer/orbit@latest/dist/orbit.min.js"></script>
9791013
</body>
9801014

981-
</html>
1015+
</html>

0 commit comments

Comments
 (0)