Tool frame

One order for every tool page: head, input, answer, family, folds, related.

  • kit.tool()
  • 2.5 KB of CSS · 86 rules
  • kit.css
  • kit-data.css
  • No script needed

DNS lookup

Every record for a domain.

  • Free

4 records

A
104.21.32.1
AAAA
2606:4700::6810:2001

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.tool({
      head: kit.toolHead({ icon: 'search', hue: 200, title: 'DNS lookup', task: 'Every record for a domain.', facts: ['Free'], level: 2 }),
      input: kit.toolInput({ name: 'd', label: 'A domain', placeholder: 'openvibe.live', button: 'Look up' }),
      answer: kit.answer({ title: '4 records', rows: [['A', '104.21.32.1'], ['AAAA', '2606:4700::6810:2001']] }),
      family: kit.family({ title: 'More network tools', items: [
          { href: '/tools/ping', label: 'Ping', icon: 'wave' }] })
  });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<link rel="stylesheet" href="https://openvibe.network/shared/kit-data.css">
<script src="https://openvibe.network/shared/kit.js"></script>
<script src="https://openvibe.network/shared/kit-web.js" defer></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.tool({
        head: OpenVibeKit.toolHead({ icon: 'search', hue: 200, title: 'DNS lookup', task: 'Every record for a domain.', facts: ['Free'], level: 2 }),
        input: OpenVibeKit.toolInput({ name: 'd', label: 'A domain', placeholder: 'openvibe.live', button: 'Look up' }),
        answer: OpenVibeKit.answer({ title: '4 records', rows: [['A', '104.21.32.1'], ['AAAA', '2606:4700::6810:2001']] }),
        family: OpenVibeKit.family({ title: 'More network tools', items: [
            { href: '/tools/ping', label: 'Ping', icon: 'wave' }] })
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 1.7 KB
<div class="ovk-tool"><header class="ovk-tool-head ovk-tool-head--solo" style="--ovk-tint-h:200"><span class="ovk-tool-tile" aria-hidden="true"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="10.6" cy="10.6" r="7"/><path d="M20.4 20.4l-4.5-4.5"/></svg></span><h2 class="ovk-tool-title">DNS lookup</h2><p class="ovk-tool-task">Every record for a domain.</p><ul class="ovk-tool-facts"><li>Free</li></ul></header><div class="ovk-tool-card"><form class="ovk-tool-form" method="get" action="?"><label class="ovk-tool-label" for="ovk-tool-d">A domain</label><div class="ovk-tool-row"><span class="ovk-tool-field"><input id="ovk-tool-d" name="d" type="text" value="" placeholder="openvibe.live" autocomplete="off" spellcheck="false" autocapitalize="off" required><button type="button" class="ovk-tool-clear" data-ovk-clear="#ovk-tool-d" aria-label="Clear" title="Clear" hidden><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.7 3.7l16.7 16.7M20.4 3.7L3.7 20.4"/></svg></button></span><button type="submit" class="ovk-btn ovk-btn--primary ovk-tool-go"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="10.6" cy="10.6" r="7"/><path d="M20.4 20.4l-4.5-4.5"/></svg><span>Look up</span></button></div></form></div><div class="ovk-tool-out"><section class="ovk-answer" aria-live="polite"><div class="ovk-answer-head"><h2>4 records</h2></div><dl class="ovk-answer-rows"><div><dt>A</dt><dd>104.21.32.1</dd></div><div><dt>AAAA</dt><dd>2606:4700::6810:2001</dd></div></dl></section></div><nav class="ovk-family" aria-label="More network tools"><div class="ovk-family-head"><h2>More network tools</h2></div><div class="ovk-family-items"><a href="/tools/ping">Ping</a></div></nav></div>

What it weighs

Its own rules are 12.0 KB, 2.5 KB as sent: 14% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.