Skip to content

Commit 9695607

Browse files
committed
add: base setup
1 parent cfacf6f commit 9695607

2 files changed

Lines changed: 66 additions & 0 deletions

File tree

frontend/popup.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>CodeTranslateAI</title>
6+
<link rel="stylesheet" href="styles.css" />
7+
</head>
8+
<body>
9+
<div class="container">
10+
<h1>CodeTranslateAI</h1>
11+
<p>Select your target language and enable the picker.</p>
12+
13+
<select id="language-select">
14+
<option value="Java">Java</option>
15+
<option value="Python">Python</option>
16+
<option value="JavaScript">JavaScript</option>
17+
<option value="C++">C++</option>
18+
<option value="Ruby">Ruby</option>
19+
</select>
20+
21+
<button id="enable-picker-btn">Enable Code Selector</button>
22+
</div>
23+
<script src="popup.js"></script>
24+
</body>
25+
</html>

frontend/styles.css

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
body {
2+
font-family: sans-serif;
3+
width: 250px;
4+
padding: 10px;
5+
}
6+
.container {
7+
text-align: center;
8+
}
9+
h1 {
10+
font-size: 1.2em;
11+
margin-bottom: 5px;
12+
}
13+
p {
14+
font-size: 0.9em;
15+
color: #555;
16+
margin-top: 0;
17+
}
18+
select,
19+
button {
20+
width: 100%;
21+
padding: 8px;
22+
margin-top: 10px;
23+
box-sizing: border-box;
24+
}
25+
button {
26+
background-color: #007bff;
27+
color: white;
28+
border: none;
29+
cursor: pointer;
30+
font-weight: bold;
31+
}
32+
button:hover {
33+
background-color: #0056b3;
34+
}
35+
36+
/* Style for the element picker highlight (SAFE to inject on any page) */
37+
.translator-highlight {
38+
outline: 2px dashed #007bff !important;
39+
background-color: rgba(0, 123, 255, 0.1) !important;
40+
cursor: crosshair !important;
41+
}

0 commit comments

Comments
 (0)