chrome-gpt-summary/popup.html at main · adamlove86/chrome-gpt-summary · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Summarise Text</title>
    <style>
        body {
            font-family: sans-serif;
            padding: 10px 15px;
            min-width: 200px; /* Prevent popup from being too small */
            background-color: #f4f4f4;
        }
        h1 {
            font-size: 1.2em;
            margin-bottom: 15px;
            color: #333;
            text-align: center;
        }
        .button-container {
            display: flex;
            flex-direction: column; /* Stack buttons vertically */
            gap: 5px; /* Reduced space between buttons */
        }
        button {
            padding: 10px 12px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.95em;
            text-align: left;
            transition: background-color 0.2s ease, transform 0.1s ease;
            color: white;
        }
        button:hover {
            opacity: 0.9;
        }
        button:active,
        .button-pressed { /* Combine active and pressed styles */
            transform: scale(0.98);
            opacity: 1;
            filter: brightness(90%);
        }

        /* Primary Button: Summarise */
        #summariseBtn {
            background-color: #007bff; /* Blue */
        }

        /* Secondary Buttons */
        #blockSiteBtn {
            background-color: #dc3545; /* Red */
        }
        #optionsBtn {
            background-color: #6c757d; /* Grey */
        }
        #copyTranscriptBtn {
            background-color: #28a745; /* Green */
             /* Initially hidden - JS controls display */
             /* display: none; - Handled by inline style */
        }
        #readContentBtn {
            background-color: #218838; /* Darker green for read article */
             /* Initially hidden - JS controls display */
             /* display: none; - Handled by inline style */
        }
        #copyContentBtn {
            background-color: #17a2b8; /* Teal */
             /* Initially hidden - JS controls display */
             /* display: none; - Handled by inline style */
        }
        #sendToChatGPTBtn {
            background-color: #10a37f; /* ChatGPT green */
             /* Initially hidden - JS controls display */
             /* display: none; - Handled by inline style */
        }
        #factCheckBtn {
            background-color: #ff6b35; /* Orange for fact-checking */
             /* Initially hidden - JS controls display */
             /* display: none; - Handled by inline style */
        }
    </style>
</head>
<body>
    <h1 id="popupTitle">Summarise Text</h1>
    <div class="button-container">
        <button id="summariseBtn">📄 Summarise Page</button>
        <button id="copyTranscriptBtn" style="display: none;">📋 Copy Transcript</button>
        <button id="readContentBtn" style="display: none;">🔊 Read Article</button>
        <button id="copyContentBtn" style="display: none;">📋 Copy Content</button>
        <button id="sendToChatGPTBtn" style="display: none;">💬 Send to ChatGPT</button>
        <button id="factCheckBtn" style="display: none;">🔍 Fact Check</button>
        <button id="blockSiteBtn">🚫 Block Paywall Site</button>
        <button id="optionsBtn">⚙️ Open Settings</button>
    </div>
    <script type="module" src="popup.js"></script>
</body>
</html>