Add popup html and css

kevintomsgithub · kevintomsgithub · commit 13c461f9f608 · 2025-03-15T15:38:24.000-04:00
diff --git a/popup.css b/popup.css
@@ -0,0 +1,44 @@
+body {
+    font-family: 'Arial', sans-serif;
+    width: 300px;
+    margin: 0;
+    padding: 20px;
+  }
+  
+  .container {
+    text-align: center;
+  }
+  
+  h1 {
+    font-size: 20px;
+    color: #333;
+    margin-bottom: 20px;
+  }
+  
+  button {
+    background-color: #1e90ff;
+    color: white;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    font-size: 14px;
+    cursor: pointer;
+    width: 100%;
+  }
+  
+  button:hover {
+    background-color: #008cff;
+  }
+  
+  .summary-box {
+    margin-top: 20px;
+    background-color: #f7f7f7;
+    padding: 15px;
+    border-radius: 5px;
+    font-size: 14px;
+    color: #555;
+    height: 120px;
+    overflow-y: auto;
+    display: none;
+  }
+  
diff --git a/popup.html b/popup.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Summarize Me</title>
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <div class="container">
+    <h1>Summarize Page</h1>
+    <button id="summarizeBtn">Summarize Current Page</button>
+    <div id="summaryResult" class="summary-box"></div>
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>
