girlLifeButtonMaker.html 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Centered Button with Overlayed Image</title>
  7. <style>
  8. @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&family=Nunito+Sans:wght@200;300;400;600;700;800;900&family=Oswald:wght@200;300;400;500;600;700&family=Open+Sans:wght@300;400;500;600;700;800&family=Unbounded:wght@100;200;300;400;500;600;700;800&family=Grenze+Gotisch:wght@100;200;300;400;500;600;700;800;900&family=Recursive:wght@300;400;500;600;700;800;900&family=Vollkorn:wght@200;300;400;500;600;700;800;900&family=Edu+Australia+VIC+WA+NT+Hand:wght@400;500;600;700&family=EB+Garamond:wght@200;300;400;500;600;700;800&family=Exo+2:wght@100;200;300;400;500;600;700;800;900&family=Bodoni+Moda+SC:wght@100;200;300;400;500;600;700;800;900&family=Caveat:wght@400;500;600;700&family=Cinzel:wght@400;500;600;700;800;900&family=Orbitron:wght@100;200;300;400;500;600;700;800;900&family=Josefin+Slab:wght@100;200;300;400;500;600;700&family=BioRhyme:wght@200;300;400;500;600;700;800&display=swap');
  9. /* General styles */
  10. body {
  11. display: flex;
  12. height: 100vh;
  13. margin: 0;
  14. background-color: #000;
  15. color: #fff;
  16. }
  17. /* Controls section */
  18. .controls {
  19. padding: 15px;
  20. background-color: #333333;
  21. border-right: 1px solid #333;
  22. display: flex;
  23. flex-direction: column;
  24. gap: 10px;
  25. }
  26. .control-section {
  27. display: flex;
  28. align-items: center;
  29. gap: 10px;
  30. height: 40px;
  31. }
  32. /* Input styles */
  33. input, select, textarea {
  34. height: 30px;
  35. background-color: #333;
  36. color: #ffffff;
  37. border: 1px solid #444;
  38. padding: 0 5px;
  39. box-sizing: border-box;
  40. font-size: medium;
  41. }
  42. input[type="range"] {
  43. background-color: #444;
  44. }
  45. /* Color input styles */
  46. input[type="color"] {
  47. padding: 0;
  48. height: 30px;
  49. border: 3px solid #444;
  50. -webkit-appearance: none;
  51. appearance: none;
  52. }
  53. input[type="color"]::-webkit-color-swatch-wrapper {
  54. padding: 0;
  55. }
  56. input[type="color"]::-webkit-color-swatch {
  57. border: none;
  58. }
  59. /* Label styles */
  60. label {
  61. display: flex;
  62. align-items: center;
  63. gap: 10px;
  64. height: 100%;
  65. margin: 0;
  66. font-size: 20px;
  67. }
  68. /* Checkbox container */
  69. .checkbox-container {
  70. display: flex;
  71. align-items: center;
  72. gap: 10px;
  73. height: 30px;
  74. }
  75. /* Main content area */
  76. .main-content {
  77. flex-grow: 1;
  78. display: flex;
  79. justify-content: center;
  80. align-items: center;
  81. background-color: #000;
  82. flex-direction: column;
  83. }
  84. /* Overlay container */
  85. .overlay-container {
  86. position: relative;
  87. width: 75px;
  88. height: 75px;
  89. margin-bottom: 20px;
  90. }
  91. /* Button styles */
  92. .button {
  93. background: radial-gradient(ellipse at 10% 0%, lightpink 60%, deeppink 61%);
  94. border: none;
  95. color: white;
  96. width: 75px;
  97. height: 75px;
  98. position: absolute;
  99. top: 0;
  100. left: 0;
  101. display: flex;
  102. align-items: center;
  103. justify-content: center;
  104. font-size: 60px;
  105. cursor: pointer;
  106. border-radius: 28px;
  107. font-family: 'BioRhyme', serif;
  108. appearance: none;
  109. }
  110. .button.zoom-2x {
  111. transform: scale(2);
  112. }
  113. .button.zoom-3x {
  114. transform: scale(3);
  115. }
  116. /* Color sample */
  117. .color-sample {
  118. width: 20px;
  119. height: 20px;
  120. display: inline-block;
  121. border: 1px solid #000;
  122. margin-left: 10px;
  123. }
  124. /* Modal styles */
  125. .modal {
  126. display: none;
  127. position: fixed;
  128. z-index: 1;
  129. left: 0;
  130. top: 0;
  131. width: 100%;
  132. height: 100%;
  133. overflow: auto;
  134. }
  135. .modal-content {
  136. background-color: #333333;
  137. margin: 15% auto;
  138. padding: 20px;
  139. border: 1px solid #333;
  140. width: 350px; /* Adjusted width to accommodate the small image and some padding */
  141. color: #ffffff;
  142. display: flex;
  143. flex-direction: column;
  144. align-items: center; /* Center content horizontally */
  145. }
  146. #imageContainer {
  147. display: flex;
  148. justify-content: center;
  149. align-items: center;
  150. width: 75px;
  151. height: 75px;
  152. margin-bottom: 20px; /* Space between image and controls */
  153. }
  154. #imageContainer img,
  155. #imageContainer svg {
  156. width: 75px;
  157. height: 75px;
  158. object-fit: contain; /* Ensure the entire image is visible */
  159. }
  160. .close {
  161. color: #aaa;
  162. float: right;
  163. font-size: 28px;
  164. font-weight: bold;
  165. cursor: pointer;
  166. }
  167. .close:hover,
  168. .close:focus {
  169. color: #ffffff;
  170. text-decoration: none;
  171. }
  172. /* Button styles */
  173. #showPngButton,
  174. #downloadPngButton {
  175. background-color: lightgray;
  176. color: #000;
  177. border: none;
  178. padding: 5px;
  179. font-size: 20px;
  180. border-radius: 0;
  181. cursor: pointer;
  182. margin-top: 5px;
  183. height: 30px;
  184. font-weight: 900;
  185. margin-top: 60px;
  186. }
  187. #zoomButton {
  188. background-color: lightgray;
  189. color: #000;
  190. border: none;
  191. padding: 0;
  192. font-size: 20px;
  193. border-radius: 0;
  194. cursor: pointer;
  195. transition: background-color 0.3s ease;
  196. margin-left: 10px;
  197. height: 30px;
  198. width: 30px;
  199. font-weight: 900;
  200. }
  201. #buttonText {
  202. position: absolute;
  203. transform: translate(-50%, -50%);
  204. left: 50%;
  205. top: 50%;
  206. }
  207. /* Ensure modal elements have consistent styling */
  208. .modal input,
  209. .modal select,
  210. .modal label {
  211. background-color: #333;
  212. color: #ffffff;
  213. border: 1px solid #444;
  214. }
  215. .modal select option {
  216. background-color: inherit;
  217. color: inherit;
  218. }
  219. </style>
  220. </head>
  221. <body>
  222. <!-- The Modal -->
  223. <div id="myModal" class="modal">
  224. <div class="modal-content">
  225. <span class="close">&times;</span>
  226. <div id="imageContainer"></div>
  227. <div style="margin-top: 20px;">
  228. <label title="Change the background color of the modal">
  229. Background Color:
  230. <input type="color" id="modalBackgroundColor" value="#ffffff" style="border-color: rgb(204, 204, 204);">
  231. <select id="modalBackgroundSelect">
  232. <option value="#000000" style="background-color: #000000; color: white;">Black</option>
  233. <option value="#333333" style="background-color: #333333; color: white;">Dark Grey</option>
  234. <option value="#666666" style="background-color: #666666; color: white;">Grey</option>
  235. <option value="#999999" style="background-color: #999999; color: black;">Light Grey</option>
  236. <option value="#FFFFFF" style="background-color: #FFFFFF; color: black;">White</option>
  237. <option value="#FF0000" style="background-color: #FF0000; color: white;">Red</option>
  238. <option value="#FF7F00" style="background-color: #FF7F00; color: white;">Orange</option>
  239. <option value="#FFFF00" style="background-color: #FFFF00; color: black;">Yellow</option>
  240. <option value="#00FF00" style="background-color: #00FF00; color: black;">Green</option>
  241. <option value="#0000FF" style="background-color: #0000FF; color: white;">Blue</option>
  242. <option value="#4B0082" style="background-color: #4B0082; color: white;">Indigo</option>
  243. <option value="#8B00FF" style="background-color: #8B00FF; color: white;">Violet</option>
  244. </select>
  245. </label>
  246. </div>
  247. </div>
  248. </div>
  249. <div class="controls">
  250. <div class="control-section">
  251. <label title="Change the background color of the right pane">
  252. Background Color:
  253. <input type="color" id="rightPaneBackgroundColor" value="#000000">
  254. <select id="rightPaneBackgroundSelect">
  255. <option value="#000000" style="background-color: #000000; color: white;">Black</option>
  256. <option value="#333333" style="background-color: #333333; color: white;">Dark Grey</option>
  257. <option value="#666666" style="background-color: #666666; color: white;">Grey</option>
  258. <option value="#999999" style="background-color: #999999; color: black;">Light Grey</option>
  259. <option value="#FFFFFF" style="background-color: #FFFFFF; color: black;">White</option>
  260. <option value="#FF0000" style="background-color: #FF0000; color: white;">Red</option>
  261. <option value="#FF7F00" style="background-color: #FF7F00; color: white;">Orange</option>
  262. <option value="#FFFF00" style="background-color: #FFFF00; color: black;">Yellow</option>
  263. <option value="#00FF00" style="background-color: #00FF00; color: black;">Green</option>
  264. <option value="#0000FF" style="background-color: #0000FF; color: white;">Blue</option>
  265. <option value="#4B0082" style="background-color: #4B0082; color: white;">Indigo</option>
  266. <option value="#8B00FF" style="background-color: #8B00FF; color: white;">Violet</option>
  267. </select>
  268. </label>
  269. </div>
  270. <div class="control-section">
  271. <label title="Change the letter inside the button">
  272. Button Letter:
  273. <input type="text" id="buttonLetter" value="B">
  274. </label>
  275. </div>
  276. <div class="control-section">
  277. <label title="Change the font color of the button text">
  278. Font Color:
  279. <input type="color" id="fontColor" value="#ffffff">
  280. <select id="fontColorNames"></select>
  281. </label>
  282. </div>
  283. <div class="control-section">
  284. <label title="Change the font size of the button text">
  285. Font Size:
  286. <input type="number" id="fontSize" value="60">
  287. </label>
  288. </div>
  289. <div class="control-section">
  290. <label title="Change the font family of the button text">
  291. Font Family:
  292. <select id="fontFamily" defaultValue="BioRhyme" onchange="updateFontFamily()">
  293. <option value="BioRhyme" style="font-family: 'BioRhyme', serif;">BioRhyme</option>
  294. <option value="Bodoni Moda SC" style="font-family: 'Bodoni Moda SC', serif;">Bodoni Moda SC</option>
  295. <option value="Caveat" style="font-family: 'Caveat', cursive;">Caveat</option>
  296. <option value="Cinzel" style="font-family: 'Cinzel', serif;">Cinzel</option>
  297. <option value="EB Garamond" style="font-family: 'EB Garamond', serif;">EB Garamond</option>
  298. <option value="Edu Australia VIC WA NT Hand" style="font-family: 'Edu Australia VIC WA NT Hand', cursive;">Edu Australia VIC WA NT Hand</option>
  299. <option value="Exo 2" style="font-family: 'Exo 2', sans-serif;">Exo 2</option>
  300. <option value="Grenze Gotisch" style="font-family: 'Grenze Gotisch', serif;">Grenze Gotisch</option>
  301. <option value="Josefin Slab" style="font-family: 'Josefin Slab', serif;">Josefin Slab</option>
  302. <option value="Noto Sans" style="font-family: 'Noto Sans', sans-serif;">Noto Sans</option>
  303. <option value="Nunito Sans" style="font-family: 'Nunito Sans', sans-serif;">Nunito Sans</option>
  304. <option value="Open Sans" style="font-family: 'Open Sans', sans-serif;">Open Sans</option>
  305. <option value="Orbitron" style="font-family: 'Orbitron', sans-serif;">Orbitron</option>
  306. <option value="Oswald" style="font-family: 'Oswald', sans-serif;">Oswald</option>
  307. <option value="Recursive" style="font-family: 'Recursive', sans-serif;">Recursive</option>
  308. <option value="Unbounded" style="font-family: 'Unbounded', sans-serif;">Unbounded</option>
  309. <option value="Vollkorn" style="font-family: 'Vollkorn', serif;">Vollkorn</option>
  310. </select>
  311. </label>
  312. </div>
  313. <div class="control-section checkbox-container">
  314. <label title="Apply italic style to the font">
  315. Italic
  316. <input type="checkbox" id="fontItalic">
  317. </label>
  318. <label title="Apply underline style to the font">
  319. Underline
  320. <input type="checkbox" id="fontUnderline">
  321. </label>
  322. <label title="Adjust font weight">
  323. Weight
  324. <input type="range" id="fontWeightRange" min="1" max="1000" step="1" value="400">
  325. <input type="number" id="fontWeightNumber" min="1" max="1000" step="1" value="400">
  326. </label>
  327. </div>
  328. <div class="control-section">
  329. <label title="Change the horizontal position of the text inside the button">
  330. Text Horizontal Position:
  331. <input type="range" id="textHorizontal" min="0" max="100" value="50">
  332. <input type="number" id="textHorizontalNumber" min="0" max="100" value="50">
  333. </label>
  334. </div>
  335. <div class="control-section">
  336. <label title="Change the vertical position of the text inside the button">
  337. Text Vertical Position:
  338. <input type="range" id="textVertical" min="0" max="100" value="50">
  339. <input type="number" id="textVerticalNumber" min="0" max="100" value="50">
  340. </label>
  341. </div>
  342. <div class="control-section">
  343. <label title="Change the border radius to adjust the shape of the button">
  344. Border Radius Horizontal:
  345. <input type="range" id="borderRadiusHorizontal" min="0" max="50" value="28">
  346. <input type="number" id="borderRadiusHorizontalNumber" min="0" max="50" value="28">
  347. </label>
  348. </div>
  349. <div class="control-section">
  350. <label title="Change the border radius to adjust the shape of the button">
  351. Border Radius Vertical:
  352. <input type="range" id="borderRadiusVertical" min="0" max="50" value="28">
  353. <input type="number" id="borderRadiusVerticalNumber" min="0" max="50" value="28">
  354. </label>
  355. </div>
  356. <div class="control-section">
  357. <label title="Change the radial gradient horizontal position">
  358. Ellipse X Position:
  359. <input type="range" id="ellipseX" min="0" max="100" value="10">
  360. <input type="number" id="ellipseXNumber" min="0" max="100" value="10">
  361. </label>
  362. </div>
  363. <div class="control-section">
  364. <label title="Change the radial gradient vertical position">
  365. Ellipse Y Position:
  366. <input type="range" id="ellipseY" min="0" max="100" value="0">
  367. <input type="number" id="ellipseYNumber" min="0" max="100" value="0">
  368. </label>
  369. </div>
  370. <div class="control-section">
  371. <label title="Change the radial gradient start color">
  372. Ellipse Start Color:
  373. <input type="color" id="ellipseStartColor" value="#FFB6C1">
  374. <select id="startColorNames">
  375. <!-- Additional options will be populated by JavaScript -->
  376. </select>
  377. </label>
  378. </div>
  379. <div class="control-section">
  380. <label title="Change the radial gradient end color">
  381. Ellipse End Color:&nbsp;
  382. <input type="color" id="ellipseEndColor" value="#FF1493">
  383. <select id="endColorNames">
  384. <!-- Additional options will be populated by JavaScript -->
  385. </select>
  386. </label>
  387. </div>
  388. <div class="control-section">
  389. <label title="Button Zoom">
  390. Button Zoom Level:
  391. <button type="button" id="zoomButton">1x</button>
  392. </label>
  393. </div>
  394. <div class="control-section">
  395. <label title="Toggle Inset Shadow">
  396. Inset Shadow
  397. <input type="checkbox" id="toggleInsetShadow">
  398. </label>
  399. </div>
  400. <div class="control-section">
  401. <label title="Shadow Horizontal Offset">
  402. Shadow Horizontal Offset
  403. <input type="range" id="shadowHorizontal" min="-20" max="20" value="0">
  404. <input type="number" id="shadowHorizontalNumber" min="-20" max="20" value="0">
  405. </label>
  406. </div>
  407. <div class="control-section">
  408. <label title="Shadow Vertical Offset">
  409. Shadow Vertical Offset
  410. <input type="range" id="shadowVertical" min="-20" max="20" value="-3">
  411. <input type="number" id="shadowVerticalNumber" min="-20" max="20" value="-3">
  412. </label>
  413. </div>
  414. <div class="control-section">
  415. <label title="Shadow Blur Radius">
  416. Shadow Blur Radius
  417. <input type="range" id="shadowBlur" min="0" max="20" value="6">
  418. <input type="number" id="shadowBlurNumber" min="0" max="20" value="6">
  419. </label>
  420. </div>
  421. <div class="control-section">
  422. <label title="Shadow Color">
  423. Shadow Color
  424. <input type="color" id="shadowColor" value="#000000">
  425. <select id="shadowColorSelect">
  426. <option value="#000000" style="background-color: #000000; color: white;">Black</option>
  427. <option value="#333333" style="background-color: #333333; color: white;">Dark Grey</option>
  428. <option value="#666666" style="background-color: #666666; color: white;">Grey</option>
  429. <option value="#999999" style="background-color: #999999; color: black;">Light Grey</option>
  430. <option value="#FFFFFF" style="background-color: #FFFFFF; color: black;">White</option>
  431. <option value="#FF0000" style="background-color: #FF0000; color: white;">Red</option>
  432. <option value="#FF7F00" style="background-color: #FF7F00; color: white;">Orange</option>
  433. <option value="#FFFF00" style="background-color: #FFFF00; color: black;">Yellow</option>
  434. <option value="#00FF00" style="background-color: #00FF00; color: black;">Green</option>
  435. <option value="#0000FF" style="background-color: #0000FF; color: white;">Blue</option>
  436. <option value="#4B0082" style="background-color: #4B0082; color: white;">Indigo</option>
  437. <option value="#8B00FF" style="background-color: #8B00FF; color: white;">Violet</option>
  438. </select>
  439. </label>
  440. </div>
  441. <div class="control-section">
  442. <label title="Shadow Opacity">
  443. Shadow Opacity
  444. <input type="range" id="shadowOpacity" min="0" max="1" step="0.1" value="0.5">
  445. <input type="number" id="shadowOpacityNumber" min="0" max="1" step="0.1" value="0.5">
  446. </label>
  447. </div>
  448. </div>
  449. <div class="main-content">
  450. <div class="overlay-container">
  451. <button type="button" class="button" id="toggleButton">
  452. <span id="buttonText">B</span>
  453. </button>
  454. </div>
  455. <div>
  456. <button type="button" id="showPngButton">Show PNG</button>
  457. <button type="button" id="downloadPngButton">Download PNG</button>
  458. </div>
  459. </div>
  460. <script src="https://cdn.jsdelivr.net/npm/html-to-image@1.7.0/dist/html-to-image.min.js"></script>
  461. <script>
  462. const colorNames = [
  463. { name: 'White', value: '#FFFFFF' },
  464. { name: 'WhiteSmoke', value: '#F5F5F5' },
  465. { name: 'Gainsboro', value: '#DCDCDC' },
  466. { name: 'LightGray', value: '#D3D3D3' },
  467. { name: 'Silver', value: '#C0C0C0' },
  468. { name: 'DarkGray', value: '#A9A9A9' },
  469. { name: 'Gray', value: '#808080' },
  470. { name: 'DimGray', value: '#696969' },
  471. { name: 'Black', value: '#000000' },
  472. { name: 'Maroon', value: '#800000' },
  473. { name: 'DarkRed', value: '#8B0000' },
  474. { name: 'Brown', value: '#A52A2A' },
  475. { name: 'FireBrick', value: '#B22222' },
  476. { name: 'Crimson', value: '#DC143C' },
  477. { name: 'Red', value: '#FF0000' },
  478. { name: 'Tomato', value: '#FF6347' },
  479. { name: 'Coral', value: '#FF7F50' },
  480. { name: 'IndianRed', value: '#CD5C5C' },
  481. { name: 'LightCoral', value: '#F08080' },
  482. { name: 'DarkSalmon', value: '#E9967A' },
  483. { name: 'Salmon', value: '#FA8072' },
  484. { name: 'LightSalmon', value: '#FFA07A' },
  485. { name: 'OrangeRed', value: '#FF4500' },
  486. { name: 'DarkOrange', value: '#FF8C00' },
  487. { name: 'Orange', value: '#FFA500' },
  488. { name: 'Gold', value: '#FFD700' },
  489. { name: 'DarkGoldenRod', value: '#B8860B' },
  490. { name: 'GoldenRod', value: '#DAA520' },
  491. { name: 'PaleGoldenRod', value: '#EEE8AA' },
  492. { name: 'DarkKhaki', value: '#BDB76B' },
  493. { name: 'Khaki', value: '#F0E68C' },
  494. { name: 'Olive', value: '#808000' },
  495. { name: 'Yellow', value: '#FFFF00' },
  496. { name: 'YellowGreen', value: '#9ACD32' },
  497. { name: 'DarkOliveGreen', value: '#556B2F' },
  498. { name: 'OliveDrab', value: '#6B8E23' },
  499. { name: 'LawnGreen', value: '#7CFC00' },
  500. { name: 'Chartreuse', value: '#7FFF00' },
  501. { name: 'GreenYellow', value: '#ADFF2F' },
  502. { name: 'DarkGreen', value: '#006400' },
  503. { name: 'Green', value: '#008000' },
  504. { name: 'ForestGreen', value: '#228B22' },
  505. { name: 'Lime', value: '#00FF00' },
  506. { name: 'LimeGreen', value: '#32CD32' },
  507. { name: 'LightGreen', value: '#90EE90' },
  508. { name: 'PaleGreen', value: '#98FB98' },
  509. { name: 'DarkSeaGreen', value: '#8FBC8F' },
  510. { name: 'MediumSpringGreen', value: '#00FA9A' },
  511. { name: 'SpringGreen', value: '#00FF7F' },
  512. { name: 'SeaGreen', value: '#2E8B57' },
  513. { name: 'MediumAquaMarine', value: '#66CDAA' },
  514. { name: 'MediumSeaGreen', value: '#3CB371' },
  515. { name: 'LightSeaGreen', value: '#20B2AA' },
  516. { name: 'DarkSlateGray', value: '#2F4F4F' },
  517. { name: 'Teal', value: '#008080' },
  518. { name: 'DarkCyan', value: '#008B8B' },
  519. { name: 'Aqua', value: '#00FFFF' },
  520. { name: 'Cyan', value: '#00FFFF' },
  521. { name: 'LightCyan', value: '#E0FFFF' },
  522. { name: 'DarkTurquoise', value: '#00CED1' },
  523. { name: 'Turquoise', value: '#40E0D0' },
  524. { name: 'MediumTurquoise', value: '#48D1CC' },
  525. { name: 'PaleTurquoise', value: '#AFEEEE' },
  526. { name: 'AquaMarine', value: '#7FFFD4' },
  527. { name: 'PowderBlue', value: '#B0E0E6' },
  528. { name: 'CadetBlue', value: '#5F9EA0' },
  529. { name: 'SteelBlue', value: '#4682B4' },
  530. { name: 'CornflowerBlue', value: '#6495ED' },
  531. { name: 'DeepSkyBlue', value: '#00BFFF' },
  532. { name: 'DodgerBlue', value: '#1E90FF' },
  533. { name: 'LightBlue', value: '#ADD8E6' },
  534. { name: 'SkyBlue', value: '#87CEEB' },
  535. { name: 'LightSkyBlue', value: '#87CEFA' },
  536. { name: 'MidnightBlue', value: '#191970' },
  537. { name: 'Navy', value: '#000080' },
  538. { name: 'DarkBlue', value: '#00008B' },
  539. { name: 'MediumBlue', value: '#0000CD' },
  540. { name: 'Blue', value: '#0000FF' },
  541. { name: 'RoyalBlue', value: '#4169E1' },
  542. { name: 'BlueViolet', value: '#8A2BE2' },
  543. { name: 'Indigo', value: '#4B0082' },
  544. { name: 'DarkSlateBlue', value: '#483D8B' },
  545. { name: 'SlateBlue', value: '#6A5ACD' },
  546. { name: 'MediumSlateBlue', value: '#7B68EE' },
  547. { name: 'MediumPurple', value: '#9370DB' },
  548. { name: 'DarkMagenta', value: '#8B008B' },
  549. { name: 'DarkViolet', value: '#9400D3' },
  550. { name: 'DarkOrchid', value: '#9932CC' },
  551. { name: 'MediumOrchid', value: '#BA55D3' },
  552. { name: 'Purple', value: '#800080' },
  553. { name: 'Thistle', value: '#D8BFD8' },
  554. { name: 'Plum', value: '#DDA0DD' },
  555. { name: 'Violet', value: '#EE82EE' },
  556. { name: 'Fuchsia', value: '#FF00FF' },
  557. { name: 'Orchid', value: '#DA70D6' },
  558. { name: 'MediumVioletRed', value: '#C71585' },
  559. { name: 'PaleVioletRed', value: '#DB7093' },
  560. { name: 'DeepPink', value: '#FF1493' },
  561. { name: 'HotPink', value: '#FF69B4' },
  562. { name: 'LightPink', value: '#FFB6C1' },
  563. { name: 'Pink', value: '#FFC0CB' },
  564. { name: 'AntiqueWhite', value: '#FAEBD7' },
  565. { name: 'Beige', value: '#F5F5DC' },
  566. { name: 'Bisque', value: '#FFE4C4' },
  567. { name: 'BlanchedAlmond', value: '#FFEBCD' },
  568. { name: 'Wheat', value: '#F5DEB3' },
  569. { name: 'CornSilk', value: '#FFF8DC' },
  570. { name: 'LemonChiffon', value: '#FFFACD' },
  571. { name: 'LightGoldenRodYellow', value: '#FAFAD2' },
  572. { name: 'LightYellow', value: '#FFFFE0' },
  573. { name: 'SaddleBrown', value: '#8B4513' },
  574. { name: 'Sienna', value: '#A0522D' },
  575. { name: 'Chocolate', value: '#D2691E' },
  576. { name: 'Peru', value: '#CD853F' },
  577. { name: 'SandyBrown', value: '#F4A460' },
  578. { name: 'BurlyWood', value: '#DEB887' },
  579. { name: 'Tan', value: '#D2B48C' },
  580. { name: 'RosyBrown', value: '#BC8F8F' },
  581. { name: 'Moccasin', value: '#FFE4B5' },
  582. { name: 'NavajoWhite', value: '#FFDEAD' },
  583. { name: 'PeachPuff', value: '#FFDAB9' },
  584. { name: 'MistyRose', value: '#FFE4E1' },
  585. { name: 'LavenderBlush', value: '#FFF0F5' },
  586. { name: 'Linen', value: '#FAF0E6' },
  587. { name: 'OldLace', value: '#FDF5E6' },
  588. { name: 'PapayaWhip', value: '#FFEFD5' },
  589. { name: 'SeaShell', value: '#FFF5EE' },
  590. { name: 'MintCream', value: '#F5FFFA' },
  591. { name: 'SlateGray', value: '#708090' },
  592. { name: 'LightSlateGray', value: '#778899' },
  593. { name: 'LightSteelBlue', value: '#B0C4DE' },
  594. { name: 'Lavender', value: '#E6E6FA' },
  595. { name: 'FloralWhite', value: '#FFFAF0' },
  596. { name: 'AliceBlue', value: '#F0F8FF' },
  597. { name: 'GhostWhite', value: '#F8F8FF' },
  598. { name: 'HoneyDew', value: '#F0FFF0' },
  599. { name: 'Ivory', value: '#FFFFF0' },
  600. { name: 'Azure', value: '#F0FFFF' },
  601. { name: 'Snow', value: '#FFFAFA' },
  602. ];
  603. document.getElementById('modalBackgroundColor').value = '#333333';
  604. document.getElementById('modalBackgroundSelect').value = '#333333';
  605. // Get the color input and select elements
  606. var colorInput = document.getElementById('modalBackgroundColor');
  607. // var colorSelect = document.getElementById('modalBackgroundSelect');
  608. // Function to update the modal background color
  609. function updateModalBackgroundColor(color) {
  610. document.querySelector('.modal-content').style.backgroundColor = color;
  611. }
  612. /* // Event listener for color input
  613. colorInput.addEventListener('input', function() {
  614. updateModalBackgroundColor(colorInput.value);
  615. });
  616. // Event listener for color select
  617. colorSelect.addEventListener('change', function() {
  618. updateModalBackgroundColor(colorSelect.value);
  619. });*/
  620. document.getElementById('modalBackgroundColor').addEventListener('input', function() {
  621. updateModalBackgroundColor(colorInput.value);
  622. });
  623. document.getElementById('modalBackgroundSelect').addEventListener('change', function() {
  624. const color = this.value;
  625. document.getElementById('modalBackgroundColor').value = color;
  626. updateModalBackgroundColor(colorInput.value);
  627. });
  628. function updateFontFamily() {
  629. var selectElement = document.getElementById('fontFamily');
  630. var selectedFont = selectElement.options[selectElement.selectedIndex].value;
  631. selectElement.style.fontFamily = selectedFont;
  632. }
  633. function populateColorSelect(selectElement, defaultValue) {
  634. colorNames.forEach(color => {
  635. const option = document.createElement('option');
  636. option.value = color.value;
  637. option.innerHTML = `${color.name}`;
  638. option.style.backgroundColor = color.value;
  639. option.style.color = (parseInt(color.value.replace('#', ''), 16) > 0xffffff / 2) ? 'black' : 'white';
  640. selectElement.appendChild(option);
  641. });
  642. // Set the default color
  643. selectElement.value = defaultValue;
  644. }
  645. populateColorSelect(document.getElementById('startColorNames'), '#FFB6C1'); // LightPink
  646. populateColorSelect(document.getElementById('endColorNames'), '#FF1493'); // DeepPink
  647. populateColorSelect(document.getElementById('fontColorNames'), '#FFFFFF'); // Default for font color if needed
  648. // Set default color values for inputs
  649. document.getElementById('ellipseStartColor').value = '#FFB6C1';
  650. document.getElementById('ellipseEndColor').value = '#FF1493';
  651. document.getElementById('fontColorNames').addEventListener('change', function() {
  652. const color = this.value;
  653. document.getElementById('fontColor').value = color;
  654. document.getElementById('toggleButton').style.color = color;
  655. });
  656. document.getElementById('startColorNames').addEventListener('change', function() {
  657. const color = this.value;
  658. document.getElementById('ellipseStartColor').value = color;
  659. updateGradient();
  660. });
  661. document.getElementById('endColorNames').addEventListener('change', function() {
  662. const color = this.value;
  663. document.getElementById('ellipseEndColor').value = color;
  664. updateGradient();
  665. });
  666. document.getElementById('fontColor').addEventListener('input', function() {
  667. document.getElementById('toggleButton').style.color = this.value;
  668. });
  669. document.getElementById('buttonText').addEventListener('input', function() {
  670. document.getElementById('toggleButton').textContent = this.value;
  671. });
  672. document.getElementById('fontSize').addEventListener('input', function() {
  673. document.getElementById('toggleButton').style.fontSize = this.value + 'px';
  674. });
  675. document.getElementById('fontFamily').addEventListener('change', function() {
  676. document.getElementById('toggleButton').style.fontFamily = this.value;
  677. });
  678. /* font related listeners */
  679. document.getElementById('fontItalic').addEventListener('change', function() {
  680. document.getElementById('toggleButton').style.fontStyle = this.checked ? 'italic' : 'normal';
  681. });
  682. document.getElementById('fontUnderline').addEventListener('change', function() {
  683. document.getElementById('toggleButton').style.textDecoration = this.checked ? 'underline' : 'none';
  684. });
  685. document.getElementById('fontWeightRange').addEventListener('input', function() {
  686. const weight = this.value;
  687. document.getElementById('toggleButton').style.fontVariationSettings = `'wght' ${weight}`;
  688. document.getElementById('fontWeightNumber').value = weight;
  689. });
  690. document.getElementById('fontWeightNumber').addEventListener('input', function() {
  691. const weight = this.value;
  692. document.getElementById('toggleButton').style.fontVariationSettings = `'wght' ${weight}`;
  693. document.getElementById('fontWeightRange').value = weight;
  694. });
  695. document.getElementById('textHorizontal').addEventListener('input', function() {
  696. const value = this.value;
  697. const buttonText = document.getElementById('buttonText');
  698. buttonText.style.left = `${value}%`;
  699. document.getElementById('textHorizontalNumber').value = value;
  700. });
  701. document.getElementById('textHorizontalNumber').addEventListener('input', function() {
  702. const value = this.value;
  703. const buttonText = document.getElementById('buttonText');
  704. buttonText.style.left = `${value}%`;
  705. document.getElementById('textHorizontal').value = value;
  706. });
  707. document.getElementById('textVertical').addEventListener('input', function() {
  708. const value = this.value;
  709. const buttonText = document.getElementById('buttonText');
  710. buttonText.style.top = `${value}%`;
  711. document.getElementById('textVerticalNumber').value = value;
  712. });
  713. document.getElementById('textVerticalNumber').addEventListener('input', function() {
  714. const value = this.value;
  715. const buttonText = document.getElementById('buttonText');
  716. buttonText.style.top = `${value}%`;
  717. document.getElementById('textVertical').value = value;
  718. });
  719. document.getElementById('borderRadiusHorizontal').addEventListener('input', function() {
  720. const value = this.value;
  721. const verticalValue = document.getElementById('borderRadiusVertical').value;
  722. document.getElementById('toggleButton').style.borderRadius = `${value}px / ${verticalValue}px`;
  723. document.getElementById('borderRadiusHorizontalNumber').value = value;
  724. });
  725. document.getElementById('borderRadiusHorizontalNumber').addEventListener('input', function() {
  726. const value = this.value;
  727. const verticalValue = document.getElementById('borderRadiusVertical').value;
  728. document.getElementById('toggleButton').style.borderRadius = `${value}px / ${verticalValue}px`;
  729. document.getElementById('borderRadiusHorizontal').value = value;
  730. });
  731. document.getElementById('borderRadiusVertical').addEventListener('input', function() {
  732. const value = this.value;
  733. const horizontalValue = document.getElementById('borderRadiusHorizontal').value;
  734. document.getElementById('toggleButton').style.borderRadius = `${horizontalValue}px / ${value}px`;
  735. document.getElementById('borderRadiusVerticalNumber').value = value;
  736. });
  737. document.getElementById('borderRadiusVerticalNumber').addEventListener('input', function() {
  738. const value = this.value;
  739. const horizontalValue = document.getElementById('borderRadiusHorizontal').value;
  740. document.getElementById('toggleButton').style.borderRadius = `${horizontalValue}px / ${value}px`;
  741. document.getElementById('borderRadiusVertical').value = value;
  742. });
  743. document.getElementById('ellipseX').addEventListener('input', function() {
  744. const x = this.value;
  745. const y = document.getElementById('ellipseY').value;
  746. updateGradient();
  747. document.getElementById('ellipseXNumber').value = x;
  748. });
  749. document.getElementById('ellipseXNumber').addEventListener('input', function() {
  750. const x = this.value;
  751. const y = document.getElementById('ellipseY').value;
  752. updateGradient();
  753. document.getElementById('ellipseX').value = x;
  754. });
  755. document.getElementById('ellipseY').addEventListener('input', function() {
  756. const y = this.value;
  757. const x = document.getElementById('ellipseX').value;
  758. updateGradient();
  759. document.getElementById('ellipseYNumber').value = y;
  760. });
  761. document.getElementById('ellipseYNumber').addEventListener('input', function() {
  762. const y = this.value;
  763. const x = document.getElementById('ellipseX').value;
  764. updateGradient();
  765. document.getElementById('ellipseY').value = y;
  766. });
  767. document.getElementById('ellipseStartColor').addEventListener('input', function() {
  768. updateGradient();
  769. });
  770. document.getElementById('ellipseEndColor').addEventListener('input', function() {
  771. updateGradient();
  772. });
  773. document.getElementById('rightPaneBackgroundColor').addEventListener('input', function() {
  774. document.querySelector('.main-content').style.backgroundColor = this.value;
  775. });
  776. document.getElementById('rightPaneBackgroundSelect').addEventListener('change', function() {
  777. const color = this.value;
  778. document.getElementById('rightPaneBackgroundColor').value = color;
  779. document.querySelector('.main-content').style.backgroundColor = color;
  780. });
  781. let zoomLevel = 1;
  782. document.getElementById('zoomButton').addEventListener('click', function() {
  783. const button = document.getElementById('toggleButton');
  784. zoomLevel = (zoomLevel % 3) + 1;
  785. button.classList.remove('zoom-1x', 'zoom-2x', 'zoom-3x');
  786. button.classList.add(`zoom-${zoomLevel}x`);
  787. this.textContent = `${zoomLevel}x`;
  788. });
  789. document.getElementById('toggleInsetShadow').addEventListener('change', function() {
  790. const button = document.getElementById('toggleButton');
  791. if (this.checked) {
  792. updateShadow();
  793. } else {
  794. button.style.boxShadow = 'none';
  795. }
  796. });
  797. function updateShadow() {
  798. const hOffset = document.getElementById('shadowHorizontal').value;
  799. const vOffset = document.getElementById('shadowVertical').value;
  800. const blur = document.getElementById('shadowBlur').value;
  801. const color = document.getElementById('shadowColor').value;
  802. const opacity = document.getElementById('shadowOpacity').value;
  803. const boxShadow = `inset ${hOffset}px ${vOffset}px ${blur}px rgba(${hexToRgb(color)}, ${opacity})`;
  804. document.getElementById('toggleButton').style.boxShadow = boxShadow;
  805. }
  806. function hexToRgb(hex) {
  807. const bigint = parseInt(hex.slice(1), 16);
  808. const r = (bigint >> 16) & 255;
  809. const g = (bigint >> 8) & 255;
  810. const b = bigint & 255;
  811. return `${r}, ${g}, ${b}`;
  812. }
  813. document.getElementById('shadowHorizontal').addEventListener('input', function() {
  814. document.getElementById('shadowHorizontalNumber').value = this.value;
  815. updateShadow();
  816. });
  817. document.getElementById('shadowHorizontalNumber').addEventListener('input', function() {
  818. document.getElementById('shadowHorizontal').value = this.value;
  819. updateShadow();
  820. });
  821. document.getElementById('shadowVertical').addEventListener('input', function() {
  822. document.getElementById('shadowVerticalNumber').value = this.value;
  823. updateShadow();
  824. });
  825. document.getElementById('shadowVerticalNumber').addEventListener('input', function() {
  826. document.getElementById('shadowVertical').value = this.value;
  827. updateShadow();
  828. });
  829. document.getElementById('shadowBlur').addEventListener('input', function() {
  830. document.getElementById('shadowBlurNumber').value = this.value;
  831. updateShadow();
  832. });
  833. document.getElementById('shadowBlurNumber').addEventListener('input', function() {
  834. document.getElementById('shadowBlur').value = this.value;
  835. updateShadow();
  836. });
  837. document.getElementById('shadowColor').addEventListener('input', function() {
  838. updateShadow();
  839. });
  840. document.getElementById('shadowColorSelect').addEventListener('change', function() {
  841. const color = this.value;
  842. document.getElementById('shadowColor').value = color;
  843. updateShadow();
  844. });
  845. document.getElementById('shadowOpacity').addEventListener('input', function() {
  846. document.getElementById('shadowOpacityNumber').value = this.value;
  847. updateShadow();
  848. });
  849. document.getElementById('shadowOpacityNumber').addEventListener('input', function() {
  850. document.getElementById('shadowOpacity').value = this.value;
  851. updateShadow();
  852. });
  853. function updateGradient() {
  854. const x = document.getElementById('ellipseX').value;
  855. const y = document.getElementById('ellipseY').value;
  856. const startColor = document.getElementById('ellipseStartColor').value;
  857. const endColor = document.getElementById('ellipseEndColor').value;
  858. document.getElementById('toggleButton').style.background = `radial-gradient(ellipse at ${x}% ${y}%, ${startColor} 60%, ${endColor} 61%)`;
  859. }
  860. function getBrightness(rgb) {
  861. // Calculate the brightness of the color
  862. return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
  863. }
  864. function updateBorderColor(input) {
  865. var color = input.value;
  866. var rgb = hexToRgb(color);
  867. var brightness = getBrightness(rgb);
  868. var borderColor = brightness > 128 ? '#333333' : '#cccccc'; // Dark gray for light colors, light gray for dark colors
  869. input.style.borderColor = borderColor;
  870. }
  871. document.querySelectorAll('input[type="color"]').forEach(input => {
  872. input.addEventListener('input', () => updateBorderColor(input));
  873. updateBorderColor(input); // Initialize the border color on page load
  874. });
  875. // Set the initial font family when the page loads
  876. document.addEventListener('DOMContentLoaded', function() {
  877. const buttonText = document.getElementById('buttonText');
  878. const buttonLetterInput = document.getElementById('buttonLetter');
  879. buttonLetterInput.addEventListener('input', function() {
  880. buttonText.textContent = buttonLetterInput.value;
  881. });
  882. document.getElementById('toggleButton').style.fontFamily = 'BioRhyme, serif';
  883. document.getElementById('toggleButton').style.fontVariationSettings = "'wght' 400";
  884. });
  885. // Get the modal
  886. var modal = document.getElementById("myModal");
  887. // Get the <span> element that closes the modal
  888. var span = document.getElementsByClassName("close")[0];
  889. /* // When the user clicks the button, open the modal
  890. document.getElementById('showPngButton').addEventListener('click', function() {
  891. html2canvas(document.getElementById('toggleButton'), { backgroundColor: null }).then(function(canvas) {
  892. // Set the image source to the PNG data URL
  893. var img = canvas.toDataURL("image/png");
  894. var imageContainer = document.getElementById('imageContainer');
  895. imageContainer.innerHTML = `<img src="${img}" alt="Toggle Button Image">`;
  896. // Open the modal
  897. modal.style.display = "block";
  898. });
  899. });
  900. document.getElementById('downloadPngButton').addEventListener('click', function() {
  901. html2canvas(document.getElementById('toggleButton'), { backgroundColor: null }).then(function(canvas) {
  902. // Create a link element and trigger download
  903. var link = document.createElement('a');
  904. link.href = canvas.toDataURL("image/png");
  905. link.download = 'button.png';
  906. link.click();
  907. });
  908. });*/
  909. // When the user clicks the button, open the modal
  910. document.getElementById('showPngButton').addEventListener('click', function() {
  911. htmlToImage.toPng(document.getElementById('toggleButton'), { backgroundColor: null })
  912. .then(function(dataUrl) {
  913. // Set the image source to the PNG data URL
  914. var imageContainer = document.getElementById('imageContainer');
  915. imageContainer.innerHTML = `<img src="${dataUrl}" alt="Toggle Button Image">`;
  916. // Open the modal
  917. var modal = document.getElementById('myModal'); // Correctly reference the modal element
  918. modal.style.display = "block";
  919. })
  920. .catch(function(error) {
  921. console.error('oops, something went wrong!', error);
  922. });
  923. });
  924. document.getElementById('downloadPngButton').addEventListener('click', function() {
  925. htmlToImage.toPng(document.getElementById('toggleButton'), { backgroundColor: null })
  926. .then(function(dataUrl) {
  927. // Create a link element and trigger download
  928. var link = document.createElement('a');
  929. link.href = dataUrl;
  930. link.download = 'button.png';
  931. link.click();
  932. })
  933. .catch(function(error) {
  934. console.error('oops, something went wrong!', error);
  935. });
  936. });
  937. // When the user clicks on <span> (x), close the modal
  938. span.onclick = function() {
  939. modal.style.display = "none";
  940. }
  941. // When the user clicks anywhere outside of the modal, close it
  942. window.onclick = function(event) {
  943. if (event.target == modal) {
  944. modal.style.display = "none";
  945. }
  946. }
  947. </script>
  948. </body>
  949. </html>