-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoptions.html
161 lines (150 loc) · 6.39 KB
/
options.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!doctype html>
<meta charset="UTF-8" />
<html>
<head>
<title>Social URL Manager Settings</title>
<link rel="stylesheet" href="options.css" />
<!-- placeholder for icon lib -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> -->
</head>
<body>
<div class="container">
<header class="main-header">
<h1>Social Media URL Manager</h1>
<div class="header-actions">
<button id="add-profile-btn" class="button button-primary">
<span class="icon-placeholder"> ➕ </span> Add
Profile
</button>
<button id="reset-all-btn" class="button button-secondary">
<span class="icon-placeholder"> 🔄 </span> Reset
All
</button>
</div>
</header>
<div id="profile-list" class="profile-list-container">
<!-- profile items will be added here -->
<p id="no-profiles-message" style="display: none">
No profiles added yet. Click "Add Profile" to start.
</p>
</div>
<p class="footer-note">
Click the copy icon
<img src="icons/copy.png" alt="Delete" width="16" height="16" />
to copy the full URL to your clipboard.
</p>
<span id="status-message" class="status"></span>
<!-- for save/error messages -->
</div>
<!-- the modal -->
<div id="profile-modal" class="modal">
<div class="modal-content">
<header class="modal-header">
<h2 id="modal-title">Add Social Profile</h2>
<button id="close-modal-btn" class="close-button">×</button>
</header>
<form id="profile-form">
<input type="hidden" id="profile-id" />
<div class="form-group">
<label for="platform">Platform</label>
<select id="platform" name="platform" required>
<option value="linkedin">LinkedIn</option>
<option value="twitter">X / Twitter</option>
<option value="github">GitHub</option>
<option value="website">Website</option>
<option value="youtube">YouTube</option>
<option value="custom">Custom</option>
</select>
</div>
<div class="form-group">
<label>Icon Choice</label>
<div class="radio-group">
<label>
<input
type="radio"
name="iconChoice"
value="platform"
id="iconChoicePlatform"
checked
/>
Use Platform Icon
</label>
<label>
<input
type="radio"
name="iconChoice"
value="emoji"
id="iconChoiceEmoji"
/>
Use Emoji
</label>
</div>
</div>
<div
class="form-group"
id="emoji-input-group"
style="display: none"
>
<label for="emoji-input">Emoji</label>
<input
type="text"
id="emoji-input"
placeholder="Enter a single emoji (e.g., 🔗)"
maxlength="2"
/>
<small
>Enter one or two characters. Display may
vary.</small
>
</div>
<div
class="form-group"
id="custom-platform-group"
style="display: none"
>
<label for="custom-platform-name"
>Custom Platform Name</label
>
<input
type="text"
id="custom-platform-name"
placeholder="e.g., Blog, Portfolio"
/>
</div>
<div class="form-group">
<label for="username">Username / Display Text</label>
<input
type="text"
id="username"
name="username"
placeholder="e.g., stalwartcoder"
required
/>
<small>The text shown below the platform name.</small>
</div>
<div class="form-group">
<label for="url">Full URL</label>
<input
type="url"
id="url"
name="url"
placeholder="https://..."
required
/>
<small>The complete URL that will be copied.</small>
</div>
<div class="modal-actions">
<button
type="submit"
id="save-profile-btn"
class="button button-primary"
>
Add Profile
</button>
</div>
</form>
</div>
</div>
<script src="options.js"></script>
</body>
</html>