mi nombre es cooler o'connor

rodber · rodber · commit 68e09e3c821b · 2026-01-22T14:37:41.000-03:00
diff --git a/demo/output/console.log b/demo/output/console.log
@@ -16,9 +16,9 @@ array (
 )
 
 [32m# Time[0m
-2025-04-06T23:37:54+00:00 [1743982674]
+2026-01-22T17:37:00+00:00 [1769103420]
 
-[32m# Incident 67f31052cf84d[0m
+[32m# Incident 6972603c921b5[0m
 
 [32m# Backtrace[0m
 [34m------------------------------------------------------------[0m
diff --git a/demo/output/html-silent.html b/demo/output/html-silent.html
@@ -2,9 +2,9 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<style>html, body { min-height: 100%; } html { height: 100%; color: #000; font: 16px Helvetica, Arial, sans-serif; line-height: 1.2; background: #FFF; } .body--block { margin: 20px; } .body--flex { margin: 0; display: flex; align-items: center; justify-content: center; } .user-select-none { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .user-select-all { -webkit-touch-callout: all; -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } main { background: none; display: block; padding: 0; margin: 0; border: 0; width: 470px; } .body--block main { margin: 0 auto; } @media (min-width: 768px) { body { background: #3498db; background: linear-gradient(to bottom, #3498db 0%, #8e44ad 100%); background-attachment: fixed; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3498db", endColorstr="#8e44ad", GradientType=0); } main { padding: 20px; } } .main--stack { width: 100%; max-width: 900px; } .hr { display: block; height: 1px; color: transparent; background: transparent; margin-bottom: -1px; } .hr>span { opacity: 0; line-height: 0; } .main--stack hr:last-of-type { margin-bottom: 0; } .title { font-weight: 700; margin-bottom: 5px; } .title--scream { font-size: 2.25em; margin-bottom: 0; } .title--scream span { font-size: 0.667em; font-weight: 400; } .title--scream span::before { white-space: pre; content: "\A"; } .hide { width: 0; height: 0; opacity: 0; } .title>.hide { display: block; float: left; } .content code, .pre { padding: 1px 4px; background-color: hsl(192, 15.2%, 93.5%); border: 1px solid hsl(204, 8.2%, 76.1%); font-size: 0.9em; font-family: "Fira Code Retina", "Operator Mono", Inconsolata, Consolas, monospace, sans-serif; line-height: 1; } .pre { overflow: auto; word-wrap: break-word; white-space: pre-line; display: block; margin: 0; padding: 10px; border: 1px solid hsl(192, 15%, 84%); word-break: break-all; } .pre.pre--stack-entry { border: 0; color: #ecf0f1; background: hsl(210, 29%, 24%); line-height: normal; } .pre.pre--stack-entry.entry--even { background: hsl(210, 29%, 29%); } main>div { padding: 20px; background: #fff; } main>div, main>div>* { word-break: break-word; white-space: normal; } @media (min-width: 768px) { main>div { box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.09); border-radius: 0.2857em; } } main>div> :first-child { margin-top: 0; } main>div> :last-child { margin-bottom: 0; } .note { margin: 1em 0; } .backtrace { min-height: 3.375em; max-height: -webkit-max-content; max-height: -moz-max-content; max-height: max-content; resize: vertical; overflow: auto; } .backtrace .hr:last-child { display: none; } @media (prefers-color-scheme: light) { :root { --textColor: #24292f; --backgroundColor: #f2f5f8; --inlineColor: #c4c5c7; } } @media (prefers-color-scheme: dark) { :root { --textColor: #ecf0f1; --backgroundColor: #132537; --inlineColor: #323e4a; } } html.chv-dump { background: var(--backgroundColor); } pre.chv-dump { font-size: 14px; font-family: 'Fira Code Retina', 'Operator Mono', Inconsolata, Menlo, Monaco, Consolas, monospace; line-height: normal; color: var(--textColor); padding: 1.25em; margin: 0.8em 0; word-break: break-word; white-space: pre-wrap; background: var(--backgroundColor); display: block; text-align: left; border: none; border-radius: 0.2857em; } .chv-dump-hr { opacity: 0.25; } .chv-dump-inline { border-left: 1px solid var(--inlineColor); } .chv-dump-details { line-height: normal; display: block; margin-top: -1.242857em; } * > .chv-dump-details:not(:last-child) { margin-bottom: -1.242857em; } .chv-dump-summary { height: 1.242857em; margin-left: -0.8em; position: relative; } .chv-dump-summary:hover { background: rgba(255, 255, 255, 0.1); } .chv-dump-summary::-webkit-details-marker { margin-top: 0.3em; } .chv-dump-float { color: #ff8700; } .chv-dump-int { color: #ff8700; } .chv-dump-string { color: #ff8700; } .chv-dump-bool { color: #ff8700; } .chv-dump-null { color: #ff8700; } .chv-dump-object { color: #fabb00; } .chv-dump-array { color: #27ae60; } .chv-dump-resource { color: #ff5f5f; } .chv-dump-file { color: #87afff; } .chv-dump-class { color: #fabb00; } .chv-dump-operator { color: #6c6c6c; } .chv-dump-function { color: #00afff; } .chv-dump-variable { color: #00afff; } .chv-dump-modifier { color: #d75fd7; } .chv-dump-emphasis { color: rgb(108 108 108 / 65%); }</style>
+<style>html, body { min-height: 100%; height: auto; } html { color: #000; font: 16px Helvetica, Arial, sans-serif; line-height: 1.2; background: #FFF; } .body--block { margin: 20px; } .body--flex { margin: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100vh; } .user-select-none { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .user-select-all { -webkit-touch-callout: all; -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } main { background: none; display: block; padding: 0; margin: 0; border: 0; width: 470px; } .body--block main { margin: 0 auto; } @media (min-width: 768px) { body { background: #2a97ff; background: linear-gradient(to bottom, #2a97ff 0%, #00e97e 100%); background-attachment: fixed; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2a97ff", endColorstr="#00e97e", GradientType=0); } main { padding: 20px; } } .main--stack { width: 100%; max-width: 900px; } .hr { display: block; height: 1px; color: transparent; background: transparent; margin-bottom: -1px; } .hr>span { opacity: 0; line-height: 0; } .main--stack hr:last-of-type { margin-bottom: 0; } .title { font-weight: 700; margin-bottom: 5px; } .title--scream { font-size: 2.25em; margin-bottom: 0; } .title--scream span { font-size: 0.667em; font-weight: 400; } .title--scream span::before { white-space: pre; content: "\A"; } .hide { width: 0; height: 0; opacity: 0; } .title>.hide { display: block; float: left; } .content code, .pre { padding: 1px 4px; background-color: hsl(192, 15.2%, 93.5%); border: 1px solid hsl(204, 8.2%, 76.1%); font-size: 0.9em; font-family: "Fira Code Retina", "Operator Mono", Inconsolata, Consolas, monospace, sans-serif; line-height: 1; } .pre { overflow: auto; word-wrap: break-word; white-space: pre-line; display: block; margin: 0; padding: 10px; border: 1px solid hsl(192, 15%, 84%); word-break: break-all; } .pre.pre--stack-entry { border: 0; color: #ecf0f1; background: hsl(210, 29%, 24%); line-height: normal; } .pre.pre--stack-entry.entry--even { background: hsl(210, 29%, 29%); } main>div { padding: 20px; background: #fff; } main>div, main>div>* { word-break: break-word; white-space: normal; } @media (min-width: 768px) { main>div { box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.09); border-radius: 0.2857em; } } main>div> :first-child { margin-top: 0; } main>div> :last-child { margin-bottom: 0; } .note { margin: 1em 0; } .backtrace { min-height: 3.375em; max-height: -webkit-max-content; max-height: -moz-max-content; max-height: max-content; resize: vertical; overflow: auto; } .backtrace .hr:last-child { display: none; } @media (prefers-color-scheme: light) { :root { --textColor: #24292f; --backgroundColor: #f2f5f8; --inlineColor: #c4c5c7; } } @media (prefers-color-scheme: dark) { :root { --textColor: #ecf0f1; --backgroundColor: #132537; --inlineColor: #323e4a; } } html.chv-dump { background: var(--backgroundColor); } pre.chv-dump { font-size: 14px; font-family: 'Fira Code Retina', 'Operator Mono', Inconsolata, Menlo, Monaco, Consolas, monospace; line-height: normal; color: var(--textColor); padding: 1.25em; margin: 0.8em 0; word-break: break-word; white-space: pre-wrap; background: var(--backgroundColor); display: block; text-align: left; border: none; border-radius: 0.2857em; } .chv-dump-hr { opacity: 0.25; } .chv-dump-inline { border-left: 1px solid var(--inlineColor); } .chv-dump-details { line-height: normal; display: block; margin-top: -1.242857em; } * > .chv-dump-details:not(:last-child) { margin-bottom: -1.242857em; } .chv-dump-summary { height: 1.242857em; margin-left: -0.8em; position: relative; } .chv-dump-summary:hover { background: rgba(255, 255, 255, 0.1); } .chv-dump-summary::-webkit-details-marker { margin-top: 0.3em; } .chv-dump-float { color: #ff8700; } .chv-dump-int { color: #ff8700; } .chv-dump-string { color: #ff8700; } .chv-dump-bool { color: #ff8700; } .chv-dump-null { color: #ff8700; } .chv-dump-object { color: #fabb00; } .chv-dump-array { color: #27ae60; } .chv-dump-resource { color: #ff5f5f; } .chv-dump-file { color: #87afff; } .chv-dump-class { color: #fabb00; } .chv-dump-operator { color: #6c6c6c; } .chv-dump-function { color: #00afff; } .chv-dump-variable { color: #00afff; } .chv-dump-modifier { color: #d75fd7; } .chv-dump-emphasis { color: rgb(108 108 108 / 65%); }</style>
 </head>
-<body class="body--flex"><main><div><div class="title title--scream">Something went wrong</div><p>Please try again later. If the problem persist don't hesitate to contact the system administrator.</p><div><span class="user-select-all">2025-04-06T23:37:54+00:00</span> • <span class="user-select-all">67f31052cf84d</span></div>
+<body class="body--flex"><main><div><div class="title title--scream">Something went wrong</div><p>Please try again later. If the problem persists don't hesitate to contact the system administrator.</p><div><span class="user-select-all">2026-01-22T17:37:00+00:00</span> • <span class="user-select-all">6972603c921b5</span></div>
 <br>
 <div class="title"><span class="hide">#&nbsp;</span>Path</div>
 <div class="path">/admin/settings</div>
diff --git a/demo/output/html.html b/demo/output/html.html
@@ -2,7 +2,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<style>html, body { min-height: 100%; } html { height: 100%; color: #000; font: 16px Helvetica, Arial, sans-serif; line-height: 1.2; background: #FFF; } .body--block { margin: 20px; } .body--flex { margin: 0; display: flex; align-items: center; justify-content: center; } .user-select-none { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .user-select-all { -webkit-touch-callout: all; -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } main { background: none; display: block; padding: 0; margin: 0; border: 0; width: 470px; } .body--block main { margin: 0 auto; } @media (min-width: 768px) { body { background: #3498db; background: linear-gradient(to bottom, #3498db 0%, #8e44ad 100%); background-attachment: fixed; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3498db", endColorstr="#8e44ad", GradientType=0); } main { padding: 20px; } } .main--stack { width: 100%; max-width: 900px; } .hr { display: block; height: 1px; color: transparent; background: transparent; margin-bottom: -1px; } .hr>span { opacity: 0; line-height: 0; } .main--stack hr:last-of-type { margin-bottom: 0; } .title { font-weight: 700; margin-bottom: 5px; } .title--scream { font-size: 2.25em; margin-bottom: 0; } .title--scream span { font-size: 0.667em; font-weight: 400; } .title--scream span::before { white-space: pre; content: "\A"; } .hide { width: 0; height: 0; opacity: 0; } .title>.hide { display: block; float: left; } .content code, .pre { padding: 1px 4px; background-color: hsl(192, 15.2%, 93.5%); border: 1px solid hsl(204, 8.2%, 76.1%); font-size: 0.9em; font-family: "Fira Code Retina", "Operator Mono", Inconsolata, Consolas, monospace, sans-serif; line-height: 1; } .pre { overflow: auto; word-wrap: break-word; white-space: pre-line; display: block; margin: 0; padding: 10px; border: 1px solid hsl(192, 15%, 84%); word-break: break-all; } .pre.pre--stack-entry { border: 0; color: #ecf0f1; background: hsl(210, 29%, 24%); line-height: normal; } .pre.pre--stack-entry.entry--even { background: hsl(210, 29%, 29%); } main>div { padding: 20px; background: #fff; } main>div, main>div>* { word-break: break-word; white-space: normal; } @media (min-width: 768px) { main>div { box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.09); border-radius: 0.2857em; } } main>div> :first-child { margin-top: 0; } main>div> :last-child { margin-bottom: 0; } .note { margin: 1em 0; } .backtrace { min-height: 3.375em; max-height: -webkit-max-content; max-height: -moz-max-content; max-height: max-content; resize: vertical; overflow: auto; } .backtrace .hr:last-child { display: none; } @media (prefers-color-scheme: light) { :root { --textColor: #24292f; --backgroundColor: #f2f5f8; --inlineColor: #c4c5c7; } } @media (prefers-color-scheme: dark) { :root { --textColor: #ecf0f1; --backgroundColor: #132537; --inlineColor: #323e4a; } } html.chv-dump { background: var(--backgroundColor); } pre.chv-dump { font-size: 14px; font-family: 'Fira Code Retina', 'Operator Mono', Inconsolata, Menlo, Monaco, Consolas, monospace; line-height: normal; color: var(--textColor); padding: 1.25em; margin: 0.8em 0; word-break: break-word; white-space: pre-wrap; background: var(--backgroundColor); display: block; text-align: left; border: none; border-radius: 0.2857em; } .chv-dump-hr { opacity: 0.25; } .chv-dump-inline { border-left: 1px solid var(--inlineColor); } .chv-dump-details { line-height: normal; display: block; margin-top: -1.242857em; } * > .chv-dump-details:not(:last-child) { margin-bottom: -1.242857em; } .chv-dump-summary { height: 1.242857em; margin-left: -0.8em; position: relative; } .chv-dump-summary:hover { background: rgba(255, 255, 255, 0.1); } .chv-dump-summary::-webkit-details-marker { margin-top: 0.3em; } .chv-dump-float { color: #ff8700; } .chv-dump-int { color: #ff8700; } .chv-dump-string { color: #ff8700; } .chv-dump-bool { color: #ff8700; } .chv-dump-null { color: #ff8700; } .chv-dump-object { color: #fabb00; } .chv-dump-array { color: #27ae60; } .chv-dump-resource { color: #ff5f5f; } .chv-dump-file { color: #87afff; } .chv-dump-class { color: #fabb00; } .chv-dump-operator { color: #6c6c6c; } .chv-dump-function { color: #00afff; } .chv-dump-variable { color: #00afff; } .chv-dump-modifier { color: #d75fd7; } .chv-dump-emphasis { color: rgb(108 108 108 / 65%); }</style>
+<style>html, body { min-height: 100%; height: auto; } html { color: #000; font: 16px Helvetica, Arial, sans-serif; line-height: 1.2; background: #FFF; } .body--block { margin: 20px; } .body--flex { margin: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100vh; } .user-select-none { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .user-select-all { -webkit-touch-callout: all; -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } main { background: none; display: block; padding: 0; margin: 0; border: 0; width: 470px; } .body--block main { margin: 0 auto; } @media (min-width: 768px) { body { background: #2a97ff; background: linear-gradient(to bottom, #2a97ff 0%, #00e97e 100%); background-attachment: fixed; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2a97ff", endColorstr="#00e97e", GradientType=0); } main { padding: 20px; } } .main--stack { width: 100%; max-width: 900px; } .hr { display: block; height: 1px; color: transparent; background: transparent; margin-bottom: -1px; } .hr>span { opacity: 0; line-height: 0; } .main--stack hr:last-of-type { margin-bottom: 0; } .title { font-weight: 700; margin-bottom: 5px; } .title--scream { font-size: 2.25em; margin-bottom: 0; } .title--scream span { font-size: 0.667em; font-weight: 400; } .title--scream span::before { white-space: pre; content: "\A"; } .hide { width: 0; height: 0; opacity: 0; } .title>.hide { display: block; float: left; } .content code, .pre { padding: 1px 4px; background-color: hsl(192, 15.2%, 93.5%); border: 1px solid hsl(204, 8.2%, 76.1%); font-size: 0.9em; font-family: "Fira Code Retina", "Operator Mono", Inconsolata, Consolas, monospace, sans-serif; line-height: 1; } .pre { overflow: auto; word-wrap: break-word; white-space: pre-line; display: block; margin: 0; padding: 10px; border: 1px solid hsl(192, 15%, 84%); word-break: break-all; } .pre.pre--stack-entry { border: 0; color: #ecf0f1; background: hsl(210, 29%, 24%); line-height: normal; } .pre.pre--stack-entry.entry--even { background: hsl(210, 29%, 29%); } main>div { padding: 20px; background: #fff; } main>div, main>div>* { word-break: break-word; white-space: normal; } @media (min-width: 768px) { main>div { box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.09); border-radius: 0.2857em; } } main>div> :first-child { margin-top: 0; } main>div> :last-child { margin-bottom: 0; } .note { margin: 1em 0; } .backtrace { min-height: 3.375em; max-height: -webkit-max-content; max-height: -moz-max-content; max-height: max-content; resize: vertical; overflow: auto; } .backtrace .hr:last-child { display: none; } @media (prefers-color-scheme: light) { :root { --textColor: #24292f; --backgroundColor: #f2f5f8; --inlineColor: #c4c5c7; } } @media (prefers-color-scheme: dark) { :root { --textColor: #ecf0f1; --backgroundColor: #132537; --inlineColor: #323e4a; } } html.chv-dump { background: var(--backgroundColor); } pre.chv-dump { font-size: 14px; font-family: 'Fira Code Retina', 'Operator Mono', Inconsolata, Menlo, Monaco, Consolas, monospace; line-height: normal; color: var(--textColor); padding: 1.25em; margin: 0.8em 0; word-break: break-word; white-space: pre-wrap; background: var(--backgroundColor); display: block; text-align: left; border: none; border-radius: 0.2857em; } .chv-dump-hr { opacity: 0.25; } .chv-dump-inline { border-left: 1px solid var(--inlineColor); } .chv-dump-details { line-height: normal; display: block; margin-top: -1.242857em; } * > .chv-dump-details:not(:last-child) { margin-bottom: -1.242857em; } .chv-dump-summary { height: 1.242857em; margin-left: -0.8em; position: relative; } .chv-dump-summary:hover { background: rgba(255, 255, 255, 0.1); } .chv-dump-summary::-webkit-details-marker { margin-top: 0.3em; } .chv-dump-float { color: #ff8700; } .chv-dump-int { color: #ff8700; } .chv-dump-string { color: #ff8700; } .chv-dump-bool { color: #ff8700; } .chv-dump-null { color: #ff8700; } .chv-dump-object { color: #fabb00; } .chv-dump-array { color: #27ae60; } .chv-dump-resource { color: #ff5f5f; } .chv-dump-file { color: #87afff; } .chv-dump-class { color: #fabb00; } .chv-dump-operator { color: #6c6c6c; } .chv-dump-function { color: #00afff; } .chv-dump-variable { color: #00afff; } .chv-dump-modifier { color: #d75fd7; } .chv-dump-emphasis { color: rgb(108 108 108 / 65%); }</style>
 </head>
 <body class="body--flex"><main class="main--stack"><div><div class="title title--scream">LogicException <span>in&nbsp;/var/www/html/throws/throws.php:16</span></div>
 <br>
@@ -22,9 +22,9 @@
 )</div>
 <br>
 <div class="title"><span class="hide">#&nbsp;</span>Time</div>
-<div class="time">2025-04-06T23:37:54+00:00 [1743982674]</div>
+<div class="time">2026-01-22T17:37:00+00:00 [1769103420]</div>
 <br>
-<div class="title"><span class="hide">#&nbsp;</span>Incident 67f31052cf84d</div>
+<div class="title"><span class="hide">#&nbsp;</span>Incident 6972603c921b5</div>
 <br>
 <div class="title"><span class="hide">#&nbsp;</span>Backtrace</div>
 <div class="backtrace"><div class="hr"><span>------------------------------------------------------------</span></div>
diff --git a/demo/output/plain.txt b/demo/output/plain.txt
@@ -16,9 +16,9 @@ array (
 )
 
 # Time
-2025-04-06T23:37:54+00:00 [1743982674]
+2026-01-22T17:37:00+00:00 [1769103420]
 
-# Incident 67f31052cf84d
+# Incident 6972603c921b5
 
 # Backtrace
 ------------------------------------------------------------
diff --git a/src/src/template.css b/src/src/template.css

Original file line number	Diff line number	Diff line change
`@@ -16,9 +16,9 @@ array (`
`16`	`16`	`)`
`17`	`17`
`18`	`18`	`[32m# Time[0m`
`19`		`-2025-04-06T23:37:54+00:00 [1743982674]`
	`19`	`+2026-01-22T17:37:00+00:00 [1769103420]`
`20`	`20`
`21`		`-[32m# Incident 67f31052cf84d[0m`
	`21`	`+[32m# Incident 6972603c921b5[0m`
`22`	`22`
`23`	`23`	`[32m# Backtrace[0m`
`24`	`24`	`[34m------------------------------------------------------------[0m`