forked from ddupont808/GPT-4V-Act
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (106 loc) · 6.53 KB
/
index.html
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com;" />
<script src="https://cdn.tailwindcss.com"></script>
<style>
::-webkit-scrollbar {
width: 0px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #27272a;
border-radius: 0.375rem;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body class="bg-zinc-900 h-screen" style="-webkit-app-region: drag">
<div class="h-full flex gap-3 p-3">
<!-- Browser Column -->
<div class="grow flex flex-col space-y-2 bg-zinc-800 p-2 rounded-xl shadow-md h-full border border-indigo-700/50">
<!-- Navigation Row -->
<div class="flex items-center space-x-2"
style="-webkit-app-region: no-drag">
<!-- Back Button -->
<button class="hover:bg-indigo-700/50 text-white p-1 rounded-full w-8 h-8" id="backButton">
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path clip-rule="evenodd" fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"></path>
</svg>
</button>
<!-- Forward Button -->
<button class="hover:bg-indigo-700/50 text-white p-1 rounded-full w-8 h-8" id="forwardButton">
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path clip-rule="evenodd" fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"></path>
</svg>
</button>
<!-- Reload Button -->
<button class="hover:bg-indigo-700/50 text-white p-1 rounded-full w-8 h-8" id="reloadButton">
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path clip-rule="evenodd" fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"></path>
</svg>
</button>
<!-- URL Input -->
<input type="url" placeholder="Enter URL..." id="urlInput"
class="flex-grow py-2 px-4 ml-2 rounded-full text-zinc-400
bg-zinc-700 focus:outline-none text-sm">
</div>
<!-- WebView Placeholder (use an iframe or embed for an actual webview) -->
<webview class="flex-grow bg-white border border-zinc-700 overflow-hidden rounded-md scrollbar"
style="-webkit-app-region: no-drag"
autosize="on"
src="https://google.com"
preload="./preload-view.js"
id="webview"
></webview>
<!-- Row of Buttons below the WebView -->
<div class="grid grid-cols-4 gap-2"
style="-webkit-app-region: no-drag">
<button class="bg-indigo-700 text-white p-2 rounded-md" onclick="webview.openDevTools()">Open DevTools</button>
<button class="bg-indigo-700 text-white p-2 rounded-md" id="screenshot">Observe</button>
<button class="bg-indigo-700 text-white p-2 rounded-md" id="continue">Continue</button>
<button class="bg-emerald-700 text-white p-2 rounded-md" id="execute">Execute</button>
</div>
<div class="grid grid-cols-4 gap-2"
style="-webkit-app-region: no-drag">
<button class="bg-gray-700 text-white p-2 rounded-md" id="mark">Mark</button>
<button class="bg-gray-700 text-white p-2 rounded-md" id="unmark">Unmark</button>
<button class="bg-gray-700 text-white p-2 rounded-md" id="export">Export Annotations</button>
<button class="bg-gray-700 text-white p-2 rounded-md" id="randomize">Auto Export</button>
</div>
</div>
<!-- Chat Column -->
<div class="flex flex-col grow space-y-2 max-w-sm p-4 pt-8 rounded-xl h-full">
<div id="chat-container" class="flex-grow overflow-y-auto scrollbar" style="-webkit-app-region: no-drag">
<!-- Sample chat bubbles -->
<div class="mb-2 mr-8">
<div class="py-2 px-3 bg-indigo-700 text-indigo-200 rounded-lg shadow-md break-words">
Hello, how can I help?
</div>
</div>
<!-- <div class="mb-2 ml-8">
<div class="py-2 px-3 bg-zinc-200 text-zinc-700 rounded-lg shadow-md break-words">
I have a question about Tailwind.
</div>
</div> -->
</div>
<!-- Input for sending message -->
<div class="relative" style="-webkit-app-region: no-drag">
<input type="text" placeholder="Type your message..."
class="p-2 w-full pl-4 pr-10 rounded-md border bg-zinc-800 text-white border-zinc-950/50 shadow focus:border-indigo-700 focus:outline-none placeholder-gray-500">
<button id="send" class="absolute inset-y-0 mt-2 right-3 flex items-center justify-center w-7 h-7 p-1 hover:bg-indigo-700 rounded text-zinc-400">
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3.105 2.289a.75.75 0 00-.826.95l1.414 4.925A1.5 1.5 0 005.135 9.25h6.115a.75.75 0 010 1.5H5.135a1.5 1.5 0 00-1.442 1.086l-1.414 4.926a.75.75 0 00.826.95 28.896 28.896 0 0015.293-7.154.75.75 0 000-1.115A28.897 28.897 0 003.105 2.289z"></path>
</svg>
</button>
</div>
</div>
</div>
</body>
</html>