@jjlmoya/utils-developer 1.15.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-developer",
-    "version": "1.15.0",
+    "version": "1.16.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -19,10 +19,11 @@ import { readabilityCalculator } from '../tool/readabilityCalculator/index';
 import { svgSanitizer } from '../tool/svgSanitizer/index';
 import { utmGenerator } from '../tool/utmGenerator/index';
 import { urlCleaner } from '../tool/urlCleaner/index';
+import { serpPixelSimulator } from '../tool/serpPixelSimulator/index';
 
 export const developerCategory: DeveloperCategoryEntry = {
   icon: 'mdi:code-tags',
-  tools: [jsonFormatter, svgToCss, aspectRatio, placeholderGenerator, urlEncoderDecoder, duplicateCssRemover, cssToInlineConverter, cssSpecificityCalculator, cronGenerator, keycode, llmCostCalculator, musicalTypography, mobileMockupGenerator, hashGenerator, promptLibrary, colorConverter, readabilityCalculator, svgSanitizer, utmGenerator, urlCleaner],
+  tools: [jsonFormatter, svgToCss, aspectRatio, placeholderGenerator, urlEncoderDecoder, duplicateCssRemover, cssToInlineConverter, cssSpecificityCalculator, cronGenerator, keycode, llmCostCalculator, musicalTypography, mobileMockupGenerator, hashGenerator, promptLibrary, colorConverter, readabilityCalculator, svgSanitizer, utmGenerator, urlCleaner, serpPixelSimulator],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -46,6 +46,8 @@ export { urlEncoderDecoder } from './tool/urlEncoderDecoder/entry';
 export type { UrlEncoderDecoderLocaleContent } from './tool/urlEncoderDecoder/entry';
 export { utmGenerator } from './tool/utmGenerator/entry';
 export type { UtmGeneratorLocaleContent } from './tool/utmGenerator/entry';
+export { serpPixelSimulator } from './tool/serpPixelSimulator/entry';
+export type { SerpPixelSimulatorLocaleContent } from './tool/serpPixelSimulator/entry';
 export { developerCategory } from './category';
 import { aspectRatio } from './tool/aspectRatio/entry';
 import { calculadoraTiempoDatos } from './tool/calculadoraTiempoDatos/entry';
@@ -71,4 +73,5 @@ import { svgToCss } from './tool/svgToCss/entry';
 import { urlCleaner } from './tool/urlCleaner/entry';
 import { urlEncoderDecoder } from './tool/urlEncoderDecoder/entry';
 import { utmGenerator } from './tool/utmGenerator/entry';
-export const ALL_ENTRIES = [aspectRatio, calculadoraTiempoDatos, colorConverter, conversorExcelCsvHtml, cronGenerator, cssSpecificityCalculator, cssToInlineConverter, duplicateCssRemover, generadorSecurityTxt, hashGenerator, inspectorCertificadosSsl, jsonFormatter, keycode, llmCostCalculator, mobileMockupGenerator, musicalTypography, placeholderGenerator, promptLibrary, readabilityCalculator, svgSanitizer, svgToCss, urlCleaner, urlEncoderDecoder, utmGenerator];
+import { serpPixelSimulator } from './tool/serpPixelSimulator/entry';
+export const ALL_ENTRIES = [aspectRatio, calculadoraTiempoDatos, colorConverter, conversorExcelCsvHtml, cronGenerator, cssSpecificityCalculator, cssToInlineConverter, duplicateCssRemover, generadorSecurityTxt, hashGenerator, inspectorCertificadosSsl, jsonFormatter, keycode, llmCostCalculator, mobileMockupGenerator, musicalTypography, placeholderGenerator, promptLibrary, readabilityCalculator, svgSanitizer, svgToCss, urlCleaner, urlEncoderDecoder, utmGenerator, serpPixelSimulator];

package/src/index.ts

@@ -64,3 +64,5 @@ export { CALCULADORA_TIEMPO_DATOS_TOOL } from './tool/calculadoraTiempoDatos/ind
 export { INSPECTOR_CERTIFICADOS_SSL_TOOL } from './tool/inspectorCertificadosSsl/index';
 
 export { CONVERSOR_EXCEL_CSV_HTML_TOOL } from './tool/conversorExcelCsvHtml/index';
+
+export { SERP_PIXEL_SIMULATOR_TOOL } from './tool/serpPixelSimulator/index';

package/src/tests/locale_completeness.test.ts

@@ -35,8 +35,7 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 24 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(24);
+  it('all 25 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(25);
   });
 });
-

package/src/tests/pagespeed_best_practices.test.ts

@@ -0,0 +1,198 @@
+import { describe, expect, it } from 'vitest';
+import { readdirSync, readFileSync } from 'fs';
+import { join, relative } from 'path';
+import { ALL_TOOLS } from '../tools';
+import type { SEOSection, ToolLocaleContent } from '../types';
+
+const srcDir = join(process.cwd(), 'src');
+const toolDir = join(srcDir, 'tool');
+const geometryReads = [
+  'offsetWidth',
+  'offsetHeight',
+  'offsetTop',
+  'offsetLeft',
+  'clientWidth',
+  'clientHeight',
+  'clientTop',
+  'clientLeft',
+  'scrollWidth',
+  'scrollHeight',
+  'scrollTop',
+  'scrollLeft',
+  'getBoundingClientRect',
+  'getClientRects',
+  'computedStyle',
+  'getComputedStyle',
+];
+const domWrites = [
+  '.style.',
+  '.classList.add',
+  '.classList.remove',
+  '.classList.toggle',
+  '.appendChild',
+  '.insertBefore',
+  '.prepend',
+  '.append',
+  '.remove',
+  '.innerHTML',
+  '.textContent',
+  '.setAttribute',
+];
+
+function findFiles(dir: string, extensions: string[]): string[] {
+  const files: string[] = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) files.push(...findFiles(fullPath, extensions));
+    else if (extensions.some((extension) => entry.name.endsWith(extension))) files.push(fullPath);
+  }
+  return files;
+}
+
+function relativePath(file: string): string {
+  return relative(process.cwd(), file).replace(/\\/g, '/');
+}
+
+function findFormControls(content: string, tagName: 'input' | 'select'): RegExpMatchArray[] {
+  return Array.from(content.matchAll(new RegExp(`<${tagName}\\b[^>]*>`, 'gi')));
+}
+
+function attrValue(tag: string, attr: string): string | null {
+  const match = tag.match(new RegExp(`\\b${attr}\\s*=\\s*(?:"([^"]+)"|'([^']+)'|\\{([^}]+)\\})`, 'i'));
+  return match?.[1] ?? match?.[2] ?? match?.[3] ?? null;
+}
+
+function booleanAttr(tag: string, attr: string): boolean {
+  return new RegExp(`\\b${attr}\\b`, 'i').test(tag);
+}
+
+function controlStartIndex(content: string, tag: RegExpMatchArray): number {
+  return tag.index ?? content.indexOf(tag[0]);
+}
+
+function hasWrappingLabel(content: string, tag: RegExpMatchArray): boolean {
+  const index = controlStartIndex(content, tag);
+  const before = content.slice(0, index);
+  const labelOpen = before.lastIndexOf('<label');
+  const labelClose = before.lastIndexOf('</label>');
+  const nextLabelClose = content.indexOf('</label>', index + tag[0].length);
+  return labelOpen > labelClose && nextLabelClose !== -1;
+}
+
+function hasAccessibleName(content: string, tag: RegExpMatchArray): boolean {
+  const source = tag[0];
+  if (attrValue(source, 'aria-label')) return true;
+  if (attrValue(source, 'aria-labelledby')) return true;
+  const id = attrValue(source, 'id');
+  if (id && hasExplicitLabel(content, id)) return true;
+  return hasWrappingLabel(content, tag);
+}
+
+function isVisuallyHiddenFileInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  const attributes = `${attrValue(tag, 'style') ?? ''} ${attrValue(tag, 'class') ?? ''}`.toLowerCase();
+  const hiddenPatterns = ['display:none', 'display: none', 'file-input'];
+  return type === 'file' && hiddenPatterns.some((pattern) => attributes.includes(pattern));
+}
+
+function isIgnoredInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  return ['hidden', 'button', 'submit', 'reset'].includes(type) || booleanAttr(tag, 'aria-hidden') || isVisuallyHiddenFileInput(tag);
+}
+
+function controlFailures(content: string, tagName: 'input' | 'select'): string[] {
+  return findFormControls(content, tagName)
+    .filter((tag) => tagName !== 'input' || !isIgnoredInput(tag[0]))
+    .filter((tag) => !hasAccessibleName(content, tag))
+    .map((tag) => tag[0]);
+}
+
+function explicitLabelMessage(tagName: string, path: string, failures: string[]): string {
+  return `${tagName} controls without label, wrapping label, aria-label or aria-labelledby in ${path}:\n${failures.join('\n')}`;
+}
+
+function hasExplicitLabel(content: string, id: string): boolean {
+  const escapedId = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return (
+    new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*["']${escapedId}["'][^>]*>`, 'i').test(content)
+    || new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*\\{${escapedId}\\}[^>]*>`, 'i').test(content)
+  );
+}
+
+function headingLevels(sections: SEOSection[]): number[] {
+  return sections
+    .filter((section) => section.type === 'title')
+    .map((section) => Number('level' in section ? section.level : 0))
+    .filter((level) => Number.isInteger(level) && level > 0);
+}
+
+function findHeadingLevelJumps(levels: number[]): string[] {
+  const failures: string[] = [];
+  levels.forEach((level, index) => {
+    const previous = index === 0 ? 1 : levels[index - 1];
+    if (previous && level > previous + 1) {
+      failures.push(`h${previous} -> h${level}`);
+    }
+  });
+  return failures;
+}
+
+function hasDomWriteBeforeGeometryRead(content: string): boolean {
+  const normalized = content.replace(/\s+/g, ' ');
+  return domWrites.some((write) => {
+    const writeIndex = normalized.indexOf(write);
+    if (writeIndex === -1) return false;
+    return geometryReads.some((read) => normalized.indexOf(read, writeIndex + write.length) !== -1);
+  });
+}
+
+describe('PageSpeed best-practice guards', () => {
+  const astroToolFiles = findFiles(toolDir, ['.astro']);
+  const scriptFiles = findFiles(toolDir, ['.astro', '.ts', '.js']);
+
+  astroToolFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} labels every input with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'input');
+
+      expect(failures, explicitLabelMessage('Input', displayPath, failures)).toEqual([]);
+    });
+
+    it(`${displayPath} labels every select with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'select');
+
+      expect(failures, explicitLabelMessage('Select', displayPath, failures)).toEqual([]);
+    });
+  });
+
+  ALL_TOOLS.forEach((tool) => {
+    Object.entries(tool.entry.i18n).forEach(([locale, loader]) => {
+      it(`${tool.entry.id}/${locale} keeps SEO headings sequential`, async () => {
+        if (!loader) return;
+        const content = (await loader()) as ToolLocaleContent;
+        const levels = headingLevels(content.seo);
+        const failures = findHeadingLevelJumps(levels);
+
+        expect(
+          failures,
+          `SEO headings in ${tool.entry.id}/${locale} skip levels: ${failures.join(', ')}`,
+        ).toEqual([]);
+      });
+    });
+  });
+
+  scriptFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} avoids static forced-reflow patterns`, () => {
+      const content = readFileSync(file, 'utf-8');
+      expect(
+        hasDomWriteBeforeGeometryRead(content),
+        `${displayPath} appears to read layout geometry after DOM/style mutations. Split writes and reads across frames or measure before mutating.`,
+      ).toBe(false);
+    });
+  });
+});

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { developerCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 24 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(24);
+    it('should have 25 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(25);
     });
 
     it('developerCategory should be defined', () => {

package/src/tool/aspectRatio/component.astro

@@ -137,12 +137,14 @@ const t = (ui ?? {}) as AspectRatioUI;
     const { rw, rh, cw, ch } = getInputValues();
     const divisor = calculateGcd(Math.round(rw * 100), Math.round(rh * 100)) / 100;
     const ratioText = `${Math.round(rw / divisor)}:${Math.round(rh / divisor)}`;
+    const viewWidth = viewport.clientWidth - 80;
+    const viewHeight = viewport.clientHeight - 80;
+    const { w, h } = computeBoxDimensions(rw, rh, viewWidth, viewHeight);
 
     arcBoxRatio.textContent = ratioText;
     arcBoxRes.innerHTML = `${cw} × ${ch}px`;
     arcBadge.textContent = ratioText;
 
-    const { w, h } = computeBoxDimensions(rw, rh, viewport.clientWidth - 80, viewport.clientHeight - 80);
     arcBox.style.width = w + 'px';
     arcBox.style.height = h + 'px';
   };

package/src/tool/colorConverter/component.astro

@@ -53,21 +53,21 @@ const t = (ui ?? {}) as ColorConverterUI;
             <span>{t.labelR}</span>
             <span id="cc-r-val">255</span>
           </div>
-          <input type="range" id="cc-r-slider" class="cc-range" min="0" max="255" value="255" />
+          <input type="range" id="cc-r-slider" class="cc-range" min="0" max="255" value="255" aria-label={t.labelR} />
         </div>
         <div class="cc-slider-group">
           <div class="cc-slider-header">
             <span>{t.labelG}</span>
             <span id="cc-g-val">255</span>
           </div>
-          <input type="range" id="cc-g-slider" class="cc-range" min="0" max="255" value="255" />
+          <input type="range" id="cc-g-slider" class="cc-range" min="0" max="255" value="255" aria-label={t.labelG} />
         </div>
         <div class="cc-slider-group">
           <div class="cc-slider-header">
             <span>{t.labelB}</span>
             <span id="cc-b-val">255</span>
           </div>
-          <input type="range" id="cc-b-slider" class="cc-range" min="0" max="255" value="255" />
+          <input type="range" id="cc-b-slider" class="cc-range" min="0" max="255" value="255" aria-label={t.labelB} />
         </div>
       </div>
     </div>

package/src/tool/llmCostCalculator/component.astro

@@ -59,7 +59,7 @@ const t = (ui ?? {}) as LlmCostCalculatorUI;
                 step="100"
                 value="1000"
               />
-              <input class="llm-req-num" type="number" id="llm-requests-num" value="1000" min="1" />
+              <input class="llm-req-num" type="number" id="llm-requests-num" value="1000" min="1" aria-label={t.labelRequests} />
             </div>
           </div>
         </div>
@@ -232,4 +232,3 @@ const t = (ui ?? {}) as LlmCostCalculatorUI;
 
   init();
 </script>
-

package/src/tool/mobileMockupGenerator/component.astro

@@ -90,16 +90,16 @@ const t = (ui ?? {}) as MobileMockupGeneratorUI;
           </div>
           <div id="mmg-presets" class="mmg-presets-row"></div>
           <div class="mmg-gradient-inputs">
-            <input type="color" id="mmg-grad-start" value="#6366f1" class="mmg-color-picker" />
+            <input type="color" id="mmg-grad-start" value="#6366f1" class="mmg-color-picker" aria-label={t.labelBackground} />
             <Icon name="mdi:arrow-right" class="mmg-arrow-icon" />
-            <input type="color" id="mmg-grad-end" value="#a855f7" class="mmg-color-picker" />
+            <input type="color" id="mmg-grad-end" value="#a855f7" class="mmg-color-picker" aria-label={t.labelBackground} />
           </div>
           <div class="mmg-angle-section">
             <div class="mmg-angle-row">
               <span>{t.labelAngle}</span>
               <span id="mmg-angle-val">135&deg;</span>
             </div>
-            <input type="range" id="mmg-grad-angle" min="0" max="360" value="135" class="mmg-range" />
+            <input type="range" id="mmg-grad-angle" min="0" max="360" value="135" class="mmg-range" aria-label={t.labelAngle} />
           </div>
         </div>
 
@@ -111,7 +111,7 @@ const t = (ui ?? {}) as MobileMockupGeneratorUI;
             </button>
           </div>
           <div class="mmg-safe-color-row">
-            <input type="color" id="mmg-safe-color" value="#000000" class="mmg-color-picker-sm" />
+            <input type="color" id="mmg-safe-color" value="#000000" class="mmg-color-picker-sm" aria-label={t.labelSafeAreaColor} />
             <span class="mmg-safe-color-label">{t.labelSafeAreaColor}</span>
           </div>
         </div>
@@ -135,4 +135,3 @@ const t = (ui ?? {}) as MobileMockupGeneratorUI;
   import { App } from './app';
   new App();
 </script>
-

package/src/tool/placeholderGenerator/component.astro

@@ -43,14 +43,14 @@ const t = (ui ?? {}) as PlaceholderGeneratorUI;
             <label class="pg-label" for="p-bg-color">{t.labelBgColor}</label>
             <div class="pg-color-wrapper">
               <input type="color" id="p-bg-color" value="#e2e8f0" />
-              <input class="pg-color-text" type="text" id="p-bg-text" value="#e2e8f0" maxlength="7" />
+              <input class="pg-color-text" type="text" id="p-bg-text" value="#e2e8f0" maxlength="7" aria-label={t.labelBgColor} />
             </div>
           </div>
           <div class="pg-control-group">
             <label class="pg-label" for="p-text-color">{t.labelTextColor}</label>
             <div class="pg-color-wrapper">
               <input type="color" id="p-text-color" value="#64748b" />
-              <input class="pg-color-text" type="text" id="p-text-text" value="#64748b" maxlength="7" />
+              <input class="pg-color-text" type="text" id="p-text-text" value="#64748b" maxlength="7" aria-label={t.labelTextColor} />
             </div>
           </div>
         </div>

package/src/tool/readabilityCalculator/component.astro

@@ -18,14 +18,14 @@ const t = (ui ?? {}) as ReadabilityCalculatorUI;
           <div class="rc-input-wrapper">
             <label class="rc-label-mini">{t.labelText}</label>
             <div class="rc-color-input-container">
-              <input type="color" id="rc-text-color" class="rc-color-picker" value="#1e293b" />
+              <input type="color" id="rc-text-color" class="rc-color-picker" value="#1e293b" aria-label={t.labelText} />
               <span id="rc-text-hex" class="rc-hex-text">#1E293B</span>
             </div>
           </div>
           <div class="rc-input-wrapper">
             <label class="rc-label-mini">{t.labelBg}</label>
             <div class="rc-color-input-container">
-              <input type="color" id="rc-bg-color" class="rc-color-picker" value="#ffffff" />
+              <input type="color" id="rc-bg-color" class="rc-color-picker" value="#ffffff" aria-label={t.labelBg} />
               <span id="rc-bg-hex" class="rc-hex-text">#FFFFFF</span>
             </div>
           </div>
@@ -38,14 +38,14 @@ const t = (ui ?? {}) as ReadabilityCalculatorUI;
               <label class="rc-label-mini">{t.labelFontSize}</label>
               <span id="rc-size-val" class="rc-slider-value">16px</span>
             </div>
-            <input type="range" id="rc-size-slider" class="rc-range" min="12" max="72" value="16" />
+            <input type="range" id="rc-size-slider" class="rc-range" min="12" max="72" value="16" aria-label={t.labelFontSize} />
           </div>
           <div class="rc-slider-group">
             <div class="rc-slider-header">
               <label class="rc-label-mini">{t.labelFontWeight}</label>
               <span id="rc-weight-val" class="rc-slider-value">400</span>
             </div>
-            <input type="range" id="rc-weight-slider" class="rc-range" min="100" max="900" step="100" value="400" />
+            <input type="range" id="rc-weight-slider" class="rc-range" min="100" max="900" step="100" value="400" aria-label={t.labelFontWeight} />
           </div>
         </div>
 

package/src/tool/serpPixelSimulator/bibliography.astro

@@ -0,0 +1,7 @@
+---
+import { bibliography } from './bibliography';
+---
+
+<ul>
+  {bibliography.map((item) => <li><a href={item.url} rel="nofollow noopener" target="_blank">{item.name}</a></li>)}
+</ul>

package/src/tool/serpPixelSimulator/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Google Search Central: Control your snippets in search results',
+    url: 'https://developers.google.com/search/docs/appearance/snippet',
+  },
+  {
+    name: 'Google Search Central: Influencing title links in search results',
+    url: 'https://developers.google.com/search/docs/appearance/title-link',
+  },
+  {
+    name: 'Google Search Central: Create good titles and snippets in search results',
+    url: 'https://developers.google.com/search/docs/appearance/title-link#best-practices',
+  },
+];

package/src/tool/serpPixelSimulator/component.astro

@@ -0,0 +1,84 @@
+---
+import type { SerpPixelSimulatorUI } from './ui';
+import './serp-pixel-simulator.css';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as SerpPixelSimulatorUI;
+---
+
+<div id="sps-root" class="sps-root" data-i18n={JSON.stringify(t)}>
+  <section class="sps-card">
+    <div class="sps-shell">
+      <div class="sps-panel" aria-label={t.titleLabel}>
+        <div class="sps-field">
+          <label class="sps-label" for="sps-title">{t.titleLabel}</label>
+          <input id="sps-title" class="sps-input" type="text" maxlength="180" placeholder={t.titlePlaceholder} value={t.defaultTitle} />
+        </div>
+
+        <div class="sps-field">
+          <label class="sps-label" for="sps-url">{t.urlLabel}</label>
+          <div class="sps-url-control">
+            <input id="sps-url" class="sps-input sps-url-input" type="url" placeholder={t.urlPlaceholder} value={t.defaultUrl} />
+            <button id="sps-fetch" class="sps-fetch-button" type="button">{t.fetchButtonLabel}</button>
+          </div>
+          <p id="sps-fetch-message" class="sps-fetch-message" aria-live="polite"></p>
+        </div>
+
+        <div class="sps-field">
+          <label class="sps-label" for="sps-description">{t.descriptionLabel}</label>
+          <textarea id="sps-description" class="sps-textarea" maxlength="360" placeholder={t.descriptionPlaceholder}>{t.defaultDescription}</textarea>
+        </div>
+
+        <div class="sps-device">
+          <span class="sps-device-label">{t.deviceLabel}</span>
+          <div class="sps-segment" role="group" aria-label={t.deviceLabel}>
+            <button id="sps-desktop" type="button" aria-pressed="true">{t.desktopLabel}</button>
+            <button id="sps-mobile" type="button" aria-pressed="false">{t.mobileLabel}</button>
+          </div>
+        </div>
+
+        <div id="sps-title-meter" class="sps-meter">
+          <div class="sps-meter-top">
+            <span>{t.titlePixelsLabel}</span>
+            <span id="sps-title-count">0 {t.pixelUnit} / 580 {t.pixelUnit}</span>
+          </div>
+          <div class="sps-track"><span id="sps-title-fill" class="sps-fill"></span></div>
+          <span id="sps-title-status" class="sps-meter-status">{t.goodLabel}</span>
+        </div>
+
+        <div id="sps-description-meter" class="sps-meter">
+          <div class="sps-meter-top">
+            <span>{t.descriptionPixelsLabel}</span>
+            <span id="sps-description-count">0 {t.pixelUnit} / 920 {t.pixelUnit}</span>
+          </div>
+          <div class="sps-track"><span id="sps-description-fill" class="sps-fill"></span></div>
+          <span id="sps-description-status" class="sps-meter-status">{t.goodLabel}</span>
+        </div>
+      </div>
+
+      <div class="sps-preview-wrap" aria-label={t.previewLabel}>
+        <h2 class="sps-preview-title">{t.previewLabel}</h2>
+        <article id="sps-serp" class="sps-serp">
+          <div class="sps-url-line">
+            <span id="sps-favicon-fallback" class="sps-favicon" aria-hidden="true">{t.fallbackFaviconText}</span>
+            <img id="sps-favicon-image" class="sps-favicon-image sps-hidden" alt="" />
+            <div id="sps-preview-url" class="sps-url-text">{t.fallbackUrl}</div>
+          </div>
+          <h3 id="sps-preview-title" class="sps-serp-title">{t.emptyTitle}</h3>
+          <p id="sps-preview-description" class="sps-description">{t.emptyDescription}</p>
+        </article>
+      </div>
+    </div>
+  </section>
+</div>
+
+<script>
+  import { initSerpPixelSimulator } from './controller';
+
+  const root = document.getElementById('sps-root') as HTMLElement;
+  initSerpPixelSimulator(root);
+</script>