jalehman · January 31, 2026 23:50
diff --git a/annotation-test-v3.html b/annotation-test-v3.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Annotation Test v3</title>
  <style>
    body {
      font-family: -apple-system, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 1rem;
      padding-top: 60px;
      background: #0f0f0f;
      color: #e0e0e0;
      line-height: 1.8;
    }
    h1 { color: #fff; margin-bottom: 0.5rem; }
    h2 { color: #6366f1; margin-top: 2rem; }
    p { margin-bottom: 1.5rem; }
    pre {
      background: #1a1a2e;
      padding: 1rem;
      border-radius: 8px;
      overflow-x: auto;
      font-size: 13px;
    }
    code { color: #22c55e; }
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 1rem 0;
    }
    th, td {
      padding: 10px;
      border: 1px solid #333;
      text-align: left;
    }
    th { background: #1a1a2e; }
  </style>
 </head>
 <body>
  <h1>📝 Annotation Test v3</h1>
  
  <h2>Text Content</h2>
  <p>Select any text to annotate it. The "✏️ Annotate" button appears at the bottom when you have a selection. Toolbar is now in the top-right corner.</p>
  
  <h2>Code Block</h2>
  <pre><code>function greet(name) {
  // This is a comment you could annotate
  return `Hello, ${name}!`;
 }

 const result = greet("OpenClaw");
 console.log(result);</code></pre>
  
  <h2>Table</h2>
  <table>
    <tr><th>Feature</th><th>Status</th></tr>
    <tr><td>Text selection</td><td>✅ Working</td></tr>
    <tr><td>Code blocks</td><td>🧪 Testing</td></tr>
    <tr><td>Tables</td><td>🧪 Testing</td></tr>
    <tr><td>Images</td><td>🔮 Future</td></tr>
  </table>
  
  <h2>More Text</h2>
  <p>For non-text elements like images or complex diagrams, a future version could support tapping the element directly to annotate it as a whole, or using a screenshot-based approach.</p>
  
  <script src="https://gist.githack.com/jalehman/89b1df714761b77ba0087d4e07e07781/raw/annotate.js"></script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Annotation Test v3</title>
	<style>
	body {
	font-family: -apple-system, sans-serif;
	max-width: 600px;
	margin: 0 auto;
	padding: 1rem;
	padding-top: 60px;
	background: #0f0f0f;
	color: #e0e0e0;
	line-height: 1.8;
	}
	h1 { color: #fff; margin-bottom: 0.5rem; }
	h2 { color: #6366f1; margin-top: 2rem; }
	p { margin-bottom: 1.5rem; }
	pre {
	background: #1a1a2e;
	padding: 1rem;
	border-radius: 8px;
	overflow-x: auto;
	font-size: 13px;
	}
	code { color: #22c55e; }
	table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
	}
	th, td {
	padding: 10px;
	border: 1px solid #333;
	text-align: left;
	}
	th { background: #1a1a2e; }
	</style>
	</head>
	<body>
	<h1>📝 Annotation Test v3</h1>

	<h2>Text Content</h2>
	<p>Select any text to annotate it. The "✏️ Annotate" button appears at the bottom when you have a selection. Toolbar is now in the top-right corner.</p>

	<h2>Code Block</h2>
	<pre><code>function greet(name) {
	// This is a comment you could annotate
	return `Hello, ${name}!`;
	}

	const result = greet("OpenClaw");
	console.log(result);</code></pre>

	<h2>Table</h2>
	<table>
	<tr><th>Feature</th><th>Status</th></tr>
	<tr><td>Text selection</td><td>✅ Working</td></tr>
	<tr><td>Code blocks</td><td>🧪 Testing</td></tr>
	<tr><td>Tables</td><td>🧪 Testing</td></tr>
	<tr><td>Images</td><td>🔮 Future</td></tr>
	</table>

	<h2>More Text</h2>
	<p>For non-text elements like images or complex diagrams, a future version could support tapping the element directly to annotate it as a whole, or using a screenshot-based approach.</p>

	<script src="https://gist.githack.com/jalehman/89b1df714761b77ba0087d4e07e07781/raw/annotate.js"></script>
	</body>
	</html>
No results found