diff --git a/epicpedia_2024/showdiff.html b/epicpedia_2024/showdiff.html
index d0a3146..33587c7 100644
--- a/epicpedia_2024/showdiff.html
+++ b/epicpedia_2024/showdiff.html
@@ -3,15 +3,32 @@
     <head>
         <style>
             body {
-                font-face: monospace;
+                font-family: monospace;
                 margin: 5%;
             }
-            ins { color: green }
-            del { color: red }
+            #controls {
+                margin-bottom: 1em;
+            }
+            ins {
+                color: black;
+                visibility: visible;
+            }
+            del {
+                color: black;
+                visibility: visible;
+            }
             #comment { font-style: italic; }
             #revision { display: none } /* hide the template */
             .revision {
                 border-bottom: 1px dotted gray;
+                margin-bottom: 1em;
+                text-align: center;
+            }
+            .revision .user {
+                text-transform: uppercase;
+            }
+            .revision .comment {
+                font-style: italic;
             }
             .revision .body .mw-diff-inline-header {
                 display: none;
@@ -21,14 +38,15 @@
             }
             .revision .body .mw-diff-inline-changed {
                  color: white;
+                visibility: hidden;
             }
 
         </style>
     </head>
     <body>
-        <div>
-            title: <input type="text" name="title" value="Han Kang" /> 
-            revid:<input type="text" value="376586279" name="revision" /> 
+        <div id="controls">
+            article title: <input type="text" name="title" value="Han Kang" /> 
+            starting revision (id):<input type="text" value="376586279" name="revision" /> 
             number of revisions: <input type="range" name="numrevs" min="1" max="100" value="10" />        
             <button id="generate">generate script</button>
         </div>
@@ -39,7 +57,9 @@
             <div class="body"></div>
         </div>
         <div id="revisions"></div>
+        <script src="difftime.js"></script>
         <script>
+            const dateFormat = new Intl.RelativeTimeFormat('en', { style: 'long' });
             let r = {
                 action: "compare",
                 format: "json",
@@ -57,6 +77,7 @@
             let api_url = "https://en.wikipedia.org/w/api.php"
             // let url = "https://en.wikipedia.org/w/api.php?action=compare&format=json&fromtitle=Han%20Kang&fromrev=376586279&totitle=Han%20Kang&torelative=next&formatversion=2&origin=*";
             let generate = document.querySelector("button#generate");
+            let last_time;
             generate.addEventListener("click", async e => {
                 r.fromrev = parseInt(revid.value);
                 r.fromtitle = title.value.trim();
@@ -74,7 +95,17 @@
                     r.fromrev = data.compare.torevid;
                     console.log("generate, next revid", r.revid);
                     revision.querySelector(".user").textContent = data.compare.touser;
-                    revision.querySelector(".timestamp").textContent = data.compare.totimestamp;
+                    
+                    // revision.querySelector(".timestamp").textContent = data.compare.totimestamp;
+                    console.log("totimestamp", data.compare.totimestamp);
+                    let ts = new Date(data.compare.totimestamp);
+                    if (x == 0) {
+                        revision.querySelector(".timestamp").textContent = ts.toString();
+                    } else {
+                        revision.querySelector(".timestamp").textContent = replaceInWithLater(timeDiff(ts, last_time, dateFormat));
+                    }
+                    last_time = ts.getUTCTime();
+
                     revision.querySelector(".comment").textContent = data.compare.tocomment;                    
                 }
             })
