123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Centered Button with Overlayed Image</title>
- <style>
- @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');
-
- body {
- display: flex;
- height: 100vh;
- margin: 0;
- background-color: #000;
- color: #fff;
- }
- .controls {
- padding: 15px;
- background-color: #333333;
- border-right: 1px solid #333;
- display: flex;
- flex-direction: column;
- gap: 10px;
- }
- .control-section {
- display: flex;
- align-items: center;
- gap: 10px;
- height: 40px;
- }
- input, select, textarea {
- height: 30px;
- background-color: #333;
- color: #ffffff;
- border: 1px solid #444;
- padding: 0 5px;
- box-sizing: border-box;
- font-size: medium;
- }
- input[type="range"] {
- background-color: #444;
- }
- input[type="color"] {
- padding: 0;
- height: 30px;
- border: 3px solid #444;
- -webkit-appearance: none;
- appearance: none;
- }
- input[type="color"]::-webkit-color-swatch-wrapper {
- padding: 0;
- }
- input[type="color"]::-webkit-color-swatch {
- border: none;
- }
- label {
- display: flex;
- align-items: center;
- gap: 10px;
- height: 100%;
- margin: 0;
- font-size: 20px;
- }
- .checkbox-container {
- display: flex;
- align-items: center;
- gap: 10px;
- height: 30px;
- }
- .main-content {
- flex-grow: 1;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: #000;
- flex-direction: column;
- }
- .overlay-container {
- position: relative;
- width: 75px;
- height: 75px;
- margin-bottom: 20px;
- }
- .button {
- background: radial-gradient(ellipse at 10% 0%, lightpink 60%, deeppink 61%);
- border: none;
- color: white;
- width: 75px;
- height: 75px;
- position: absolute;
- top: 0;
- left: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 60px;
- cursor: pointer;
- border-radius: 28px;
- font-family: 'BioRhyme', serif;
- appearance: none;
- }
- .button.zoom-2x {
- transform: scale(2);
- }
- .button.zoom-3x {
- transform: scale(3);
- }
- .color-sample {
- width: 20px;
- height: 20px;
- display: inline-block;
- border: 1px solid #000;
- margin-left: 10px;
- }
- .modal {
- display: none;
- position: fixed;
- z-index: 1;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- overflow: auto;
- }
- .modal-content {
- background-color: #333333;
- margin: 15% auto;
- padding: 20px;
- border: 1px solid #333;
- width: 350px;
- color: #ffffff;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- #imageContainer {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 75px;
- height: 75px;
- margin-bottom: 20px;
- }
- #imageContainer img,
- #imageContainer svg {
- width: 75px;
- height: 75px;
- object-fit: contain;
- }
- .close {
- color: #aaa;
- float: right;
- font-size: 28px;
- font-weight: bold;
- cursor: pointer;
- }
- .close:hover,
- .close:focus {
- color: #ffffff;
- text-decoration: none;
- }
- #showPngButton,
- #downloadPngButton {
- background-color: lightgray;
- color: #000;
- border: none;
- padding: 5px;
- font-size: 20px;
- border-radius: 0;
- cursor: pointer;
- margin-top: 5px;
- height: 30px;
- font-weight: 900;
- margin-top: 60px;
- }
- #zoomButton {
- background-color: lightgray;
- color: #000;
- border: none;
- padding: 0;
- font-size: 20px;
- border-radius: 0;
- cursor: pointer;
- transition: background-color 0.3s ease;
- margin-left: 10px;
- height: 30px;
- width: 30px;
- font-weight: 900;
- }
- #buttonText {
- position: absolute;
- transform: translate(-50%, -50%);
- left: 50%;
- top: 50%;
- }
- .modal input,
- .modal select,
- .modal label {
- background-color: #333;
- color: #ffffff;
- border: 1px solid #444;
- }
- .modal select option {
- background-color: inherit;
- color: inherit;
- }
- </style>
- </head>
- <body>
-
- <div id="myModal" class="modal">
- <div class="modal-content">
- <span class="close">×</span>
- <div id="imageContainer"></div>
- <div style="margin-top: 20px;">
- <label title="Change the background color of the modal">
- Background Color:
- <input type="color" id="modalBackgroundColor" value="#ffffff" style="border-color: rgb(204, 204, 204);">
- <select id="modalBackgroundSelect">
- <option value="#000000" style="background-color: #000000; color: white;">Black</option>
- <option value="#333333" style="background-color: #333333; color: white;">Dark Grey</option>
- <option value="#666666" style="background-color: #666666; color: white;">Grey</option>
- <option value="#999999" style="background-color: #999999; color: black;">Light Grey</option>
- <option value="#FFFFFF" style="background-color: #FFFFFF; color: black;">White</option>
- <option value="#FF0000" style="background-color: #FF0000; color: white;">Red</option>
- <option value="#FF7F00" style="background-color: #FF7F00; color: white;">Orange</option>
- <option value="#FFFF00" style="background-color: #FFFF00; color: black;">Yellow</option>
- <option value="#00FF00" style="background-color: #00FF00; color: black;">Green</option>
- <option value="#0000FF" style="background-color: #0000FF; color: white;">Blue</option>
- <option value="#4B0082" style="background-color: #4B0082; color: white;">Indigo</option>
- <option value="#8B00FF" style="background-color: #8B00FF; color: white;">Violet</option>
- </select>
- </label>
- </div>
- </div>
- </div>
- <div class="controls">
- <div class="control-section">
- <label title="Change the background color of the right pane">
- Background Color:
- <input type="color" id="rightPaneBackgroundColor" value="#000000">
- <select id="rightPaneBackgroundSelect">
- <option value="#000000" style="background-color: #000000; color: white;">Black</option>
- <option value="#333333" style="background-color: #333333; color: white;">Dark Grey</option>
- <option value="#666666" style="background-color: #666666; color: white;">Grey</option>
- <option value="#999999" style="background-color: #999999; color: black;">Light Grey</option>
- <option value="#FFFFFF" style="background-color: #FFFFFF; color: black;">White</option>
- <option value="#FF0000" style="background-color: #FF0000; color: white;">Red</option>
- <option value="#FF7F00" style="background-color: #FF7F00; color: white;">Orange</option>
- <option value="#FFFF00" style="background-color: #FFFF00; color: black;">Yellow</option>
- <option value="#00FF00" style="background-color: #00FF00; color: black;">Green</option>
- <option value="#0000FF" style="background-color: #0000FF; color: white;">Blue</option>
- <option value="#4B0082" style="background-color: #4B0082; color: white;">Indigo</option>
- <option value="#8B00FF" style="background-color: #8B00FF; color: white;">Violet</option>
- </select>
- </label>
- </div>
- <div class="control-section">
- <label title="Change the letter inside the button">
- Button Letter:
- <input type="text" id="buttonLetter" value="B">
- </label>
- </div>
- <div class="control-section">
- <label title="Change the font color of the button text">
- Font Color:
- <input type="color" id="fontColor" value="#ffffff">
- <select id="fontColorNames"></select>
- </label>
- </div>
- <div class="control-section">
- <label title="Change the font size of the button text">
- Font Size:
- <input type="number" id="fontSize" value="60">
- </label>
- </div>
- <div class="control-section">
- <label title="Change the font family of the button text">
- Font Family:
- <select id="fontFamily" defaultValue="BioRhyme" onchange="updateFontFamily()">
- <option value="BioRhyme" style="font-family: 'BioRhyme', serif;">BioRhyme</option>
- <option value="Bodoni Moda SC" style="font-family: 'Bodoni Moda SC', serif;">Bodoni Moda SC</option>
- <option value="Caveat" style="font-family: 'Caveat', cursive;">Caveat</option>
- <option value="Cinzel" style="font-family: 'Cinzel', serif;">Cinzel</option>
- <option value="EB Garamond" style="font-family: 'EB Garamond', serif;">EB Garamond</option>
- <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>
- <option value="Exo 2" style="font-family: 'Exo 2', sans-serif;">Exo 2</option>
- <option value="Grenze Gotisch" style="font-family: 'Grenze Gotisch', serif;">Grenze Gotisch</option>
- <option value="Josefin Slab" style="font-family: 'Josefin Slab', serif;">Josefin Slab</option>
- <option value="Noto Sans" style="font-family: 'Noto Sans', sans-serif;">Noto Sans</option>
- <option value="Nunito Sans" style="font-family: 'Nunito Sans', sans-serif;">Nunito Sans</option>
- <option value="Open Sans" style="font-family: 'Open Sans', sans-serif;">Open Sans</option>
- <option value="Orbitron" style="font-family: 'Orbitron', sans-serif;">Orbitron</option>
- <option value="Oswald" style="font-family: 'Oswald', sans-serif;">Oswald</option>
- <option value="Recursive" style="font-family: 'Recursive', sans-serif;">Recursive</option>
- <option value="Unbounded" style="font-family: 'Unbounded', sans-serif;">Unbounded</option>
- <option value="Vollkorn" style="font-family: 'Vollkorn', serif;">Vollkorn</option>
- </select>
- </label>
- </div>
- <div class="control-section checkbox-container">
- <label title="Apply italic style to the font">
- Italic
- <input type="checkbox" id="fontItalic">
- </label>
- <label title="Apply underline style to the font">
- Underline
- <input type="checkbox" id="fontUnderline">
- </label>
- <label title="Adjust font weight">
- Weight
- <input type="range" id="fontWeightRange" min="1" max="1000" step="1" value="400">
- <input type="number" id="fontWeightNumber" min="1" max="1000" step="1" value="400">
- </label>
- </div>
- <div class="control-section">
- <label title="Change the horizontal position of the text inside the button">
- Text Horizontal Position:
- <input type="range" id="textHorizontal" min="0" max="100" value="50">
- <input type="number" id="textHorizontalNumber" min="0" max="100" value="50">
- </label>
- </div>
- <div class="control-section">
- <label title="Change the vertical position of the text inside the button">
- Text Vertical Position:
- <input type="range" id="textVertical" min="0" max="100" value="50">
- <input type="number" id="textVerticalNumber" min="0" max="100" value="50">
- </label>
- </div>
- <div class="control-section">
- <label title="Change the border radius to adjust the shape of the button">
- Border Radius Horizontal:
- <input type="range" id="borderRadiusHorizontal" min="0" max="50" value="28">
- <input type="number" id="borderRadiusHorizontalNumber" min="0" max="50" value="28">
- </label>
- </div>
- <div class="control-section">
- <label title="Change the border radius to adjust the shape of the button">
- Border Radius Vertical:
- <input type="range" id="borderRadiusVertical" min="0" max="50" value="28">
- <input type="number" id="borderRadiusVerticalNumber" min="0" max="50" value="28">
- </label>
- </div>
- <div class="control-section">
- <label title="Change the radial gradient horizontal position">
- Ellipse X Position:
- <input type="range" id="ellipseX" min="0" max="100" value="10">
- <input type="number" id="ellipseXNumber" min="0" max="100" value="10">
- </label>
- </div>
- <div class="control-section">
- <label title="Change the radial gradient vertical position">
- Ellipse Y Position:
- <input type="range" id="ellipseY" min="0" max="100" value="0">
- <input type="number" id="ellipseYNumber" min="0" max="100" value="0">
- </label>
- </div>
- <div class="control-section">
- <label title="Change the radial gradient start color">
- Ellipse Start Color:
- <input type="color" id="ellipseStartColor" value="#FFB6C1">
- <select id="startColorNames">
-
- </select>
- </label>
- </div>
- <div class="control-section">
- <label title="Change the radial gradient end color">
- Ellipse End Color:
- <input type="color" id="ellipseEndColor" value="#FF1493">
- <select id="endColorNames">
-
- </select>
- </label>
- </div>
- <div class="control-section">
- <label title="Button Zoom">
- Button Zoom Level:
- <button type="button" id="zoomButton">1x</button>
- </label>
- </div>
- <div class="control-section">
- <label title="Toggle Inset Shadow">
- Inset Shadow
- <input type="checkbox" id="toggleInsetShadow">
- </label>
- </div>
- <div class="control-section">
- <label title="Shadow Horizontal Offset">
- Shadow Horizontal Offset
- <input type="range" id="shadowHorizontal" min="-20" max="20" value="0">
- <input type="number" id="shadowHorizontalNumber" min="-20" max="20" value="0">
- </label>
- </div>
- <div class="control-section">
- <label title="Shadow Vertical Offset">
- Shadow Vertical Offset
- <input type="range" id="shadowVertical" min="-20" max="20" value="-3">
- <input type="number" id="shadowVerticalNumber" min="-20" max="20" value="-3">
- </label>
- </div>
- <div class="control-section">
- <label title="Shadow Blur Radius">
- Shadow Blur Radius
- <input type="range" id="shadowBlur" min="0" max="20" value="6">
- <input type="number" id="shadowBlurNumber" min="0" max="20" value="6">
- </label>
- </div>
- <div class="control-section">
- <label title="Shadow Color">
- Shadow Color
- <input type="color" id="shadowColor" value="#000000">
- <select id="shadowColorSelect">
- <option value="#000000" style="background-color: #000000; color: white;">Black</option>
- <option value="#333333" style="background-color: #333333; color: white;">Dark Grey</option>
- <option value="#666666" style="background-color: #666666; color: white;">Grey</option>
- <option value="#999999" style="background-color: #999999; color: black;">Light Grey</option>
- <option value="#FFFFFF" style="background-color: #FFFFFF; color: black;">White</option>
- <option value="#FF0000" style="background-color: #FF0000; color: white;">Red</option>
- <option value="#FF7F00" style="background-color: #FF7F00; color: white;">Orange</option>
- <option value="#FFFF00" style="background-color: #FFFF00; color: black;">Yellow</option>
- <option value="#00FF00" style="background-color: #00FF00; color: black;">Green</option>
- <option value="#0000FF" style="background-color: #0000FF; color: white;">Blue</option>
- <option value="#4B0082" style="background-color: #4B0082; color: white;">Indigo</option>
- <option value="#8B00FF" style="background-color: #8B00FF; color: white;">Violet</option>
- </select>
- </label>
- </div>
- <div class="control-section">
- <label title="Shadow Opacity">
- Shadow Opacity
- <input type="range" id="shadowOpacity" min="0" max="1" step="0.1" value="0.5">
- <input type="number" id="shadowOpacityNumber" min="0" max="1" step="0.1" value="0.5">
- </label>
- </div>
- </div>
- <div class="main-content">
- <div class="overlay-container">
- <button type="button" class="button" id="toggleButton">
- <span id="buttonText">B</span>
- </button>
- </div>
- <div>
- <button type="button" id="showPngButton">Show PNG</button>
- <button type="button" id="downloadPngButton">Download PNG</button>
- </div>
- </div>
- <script src="https://cdn.jsdelivr.net/npm/html-to-image@1.7.0/dist/html-to-image.min.js"></script>
- <script>
- const colorNames = [
- { name: 'White', value: '#FFFFFF' },
- { name: 'WhiteSmoke', value: '#F5F5F5' },
- { name: 'Gainsboro', value: '#DCDCDC' },
- { name: 'LightGray', value: '#D3D3D3' },
- { name: 'Silver', value: '#C0C0C0' },
- { name: 'DarkGray', value: '#A9A9A9' },
- { name: 'Gray', value: '#808080' },
- { name: 'DimGray', value: '#696969' },
- { name: 'Black', value: '#000000' },
- { name: 'Maroon', value: '#800000' },
- { name: 'DarkRed', value: '#8B0000' },
- { name: 'Brown', value: '#A52A2A' },
- { name: 'FireBrick', value: '#B22222' },
- { name: 'Crimson', value: '#DC143C' },
- { name: 'Red', value: '#FF0000' },
- { name: 'Tomato', value: '#FF6347' },
- { name: 'Coral', value: '#FF7F50' },
- { name: 'IndianRed', value: '#CD5C5C' },
- { name: 'LightCoral', value: '#F08080' },
- { name: 'DarkSalmon', value: '#E9967A' },
- { name: 'Salmon', value: '#FA8072' },
- { name: 'LightSalmon', value: '#FFA07A' },
- { name: 'OrangeRed', value: '#FF4500' },
- { name: 'DarkOrange', value: '#FF8C00' },
- { name: 'Orange', value: '#FFA500' },
- { name: 'Gold', value: '#FFD700' },
- { name: 'DarkGoldenRod', value: '#B8860B' },
- { name: 'GoldenRod', value: '#DAA520' },
- { name: 'PaleGoldenRod', value: '#EEE8AA' },
- { name: 'DarkKhaki', value: '#BDB76B' },
- { name: 'Khaki', value: '#F0E68C' },
- { name: 'Olive', value: '#808000' },
- { name: 'Yellow', value: '#FFFF00' },
- { name: 'YellowGreen', value: '#9ACD32' },
- { name: 'DarkOliveGreen', value: '#556B2F' },
- { name: 'OliveDrab', value: '#6B8E23' },
- { name: 'LawnGreen', value: '#7CFC00' },
- { name: 'Chartreuse', value: '#7FFF00' },
- { name: 'GreenYellow', value: '#ADFF2F' },
- { name: 'DarkGreen', value: '#006400' },
- { name: 'Green', value: '#008000' },
- { name: 'ForestGreen', value: '#228B22' },
- { name: 'Lime', value: '#00FF00' },
- { name: 'LimeGreen', value: '#32CD32' },
- { name: 'LightGreen', value: '#90EE90' },
- { name: 'PaleGreen', value: '#98FB98' },
- { name: 'DarkSeaGreen', value: '#8FBC8F' },
- { name: 'MediumSpringGreen', value: '#00FA9A' },
- { name: 'SpringGreen', value: '#00FF7F' },
- { name: 'SeaGreen', value: '#2E8B57' },
- { name: 'MediumAquaMarine', value: '#66CDAA' },
- { name: 'MediumSeaGreen', value: '#3CB371' },
- { name: 'LightSeaGreen', value: '#20B2AA' },
- { name: 'DarkSlateGray', value: '#2F4F4F' },
- { name: 'Teal', value: '#008080' },
- { name: 'DarkCyan', value: '#008B8B' },
- { name: 'Aqua', value: '#00FFFF' },
- { name: 'Cyan', value: '#00FFFF' },
- { name: 'LightCyan', value: '#E0FFFF' },
- { name: 'DarkTurquoise', value: '#00CED1' },
- { name: 'Turquoise', value: '#40E0D0' },
- { name: 'MediumTurquoise', value: '#48D1CC' },
- { name: 'PaleTurquoise', value: '#AFEEEE' },
- { name: 'AquaMarine', value: '#7FFFD4' },
- { name: 'PowderBlue', value: '#B0E0E6' },
- { name: 'CadetBlue', value: '#5F9EA0' },
- { name: 'SteelBlue', value: '#4682B4' },
- { name: 'CornflowerBlue', value: '#6495ED' },
- { name: 'DeepSkyBlue', value: '#00BFFF' },
- { name: 'DodgerBlue', value: '#1E90FF' },
- { name: 'LightBlue', value: '#ADD8E6' },
- { name: 'SkyBlue', value: '#87CEEB' },
- { name: 'LightSkyBlue', value: '#87CEFA' },
- { name: 'MidnightBlue', value: '#191970' },
- { name: 'Navy', value: '#000080' },
- { name: 'DarkBlue', value: '#00008B' },
- { name: 'MediumBlue', value: '#0000CD' },
- { name: 'Blue', value: '#0000FF' },
- { name: 'RoyalBlue', value: '#4169E1' },
- { name: 'BlueViolet', value: '#8A2BE2' },
- { name: 'Indigo', value: '#4B0082' },
- { name: 'DarkSlateBlue', value: '#483D8B' },
- { name: 'SlateBlue', value: '#6A5ACD' },
- { name: 'MediumSlateBlue', value: '#7B68EE' },
- { name: 'MediumPurple', value: '#9370DB' },
- { name: 'DarkMagenta', value: '#8B008B' },
- { name: 'DarkViolet', value: '#9400D3' },
- { name: 'DarkOrchid', value: '#9932CC' },
- { name: 'MediumOrchid', value: '#BA55D3' },
- { name: 'Purple', value: '#800080' },
- { name: 'Thistle', value: '#D8BFD8' },
- { name: 'Plum', value: '#DDA0DD' },
- { name: 'Violet', value: '#EE82EE' },
- { name: 'Fuchsia', value: '#FF00FF' },
- { name: 'Orchid', value: '#DA70D6' },
- { name: 'MediumVioletRed', value: '#C71585' },
- { name: 'PaleVioletRed', value: '#DB7093' },
- { name: 'DeepPink', value: '#FF1493' },
- { name: 'HotPink', value: '#FF69B4' },
- { name: 'LightPink', value: '#FFB6C1' },
- { name: 'Pink', value: '#FFC0CB' },
- { name: 'AntiqueWhite', value: '#FAEBD7' },
- { name: 'Beige', value: '#F5F5DC' },
- { name: 'Bisque', value: '#FFE4C4' },
- { name: 'BlanchedAlmond', value: '#FFEBCD' },
- { name: 'Wheat', value: '#F5DEB3' },
- { name: 'CornSilk', value: '#FFF8DC' },
- { name: 'LemonChiffon', value: '#FFFACD' },
- { name: 'LightGoldenRodYellow', value: '#FAFAD2' },
- { name: 'LightYellow', value: '#FFFFE0' },
- { name: 'SaddleBrown', value: '#8B4513' },
- { name: 'Sienna', value: '#A0522D' },
- { name: 'Chocolate', value: '#D2691E' },
- { name: 'Peru', value: '#CD853F' },
- { name: 'SandyBrown', value: '#F4A460' },
- { name: 'BurlyWood', value: '#DEB887' },
- { name: 'Tan', value: '#D2B48C' },
- { name: 'RosyBrown', value: '#BC8F8F' },
- { name: 'Moccasin', value: '#FFE4B5' },
- { name: 'NavajoWhite', value: '#FFDEAD' },
- { name: 'PeachPuff', value: '#FFDAB9' },
- { name: 'MistyRose', value: '#FFE4E1' },
- { name: 'LavenderBlush', value: '#FFF0F5' },
- { name: 'Linen', value: '#FAF0E6' },
- { name: 'OldLace', value: '#FDF5E6' },
- { name: 'PapayaWhip', value: '#FFEFD5' },
- { name: 'SeaShell', value: '#FFF5EE' },
- { name: 'MintCream', value: '#F5FFFA' },
- { name: 'SlateGray', value: '#708090' },
- { name: 'LightSlateGray', value: '#778899' },
- { name: 'LightSteelBlue', value: '#B0C4DE' },
- { name: 'Lavender', value: '#E6E6FA' },
- { name: 'FloralWhite', value: '#FFFAF0' },
- { name: 'AliceBlue', value: '#F0F8FF' },
- { name: 'GhostWhite', value: '#F8F8FF' },
- { name: 'HoneyDew', value: '#F0FFF0' },
- { name: 'Ivory', value: '#FFFFF0' },
- { name: 'Azure', value: '#F0FFFF' },
- { name: 'Snow', value: '#FFFAFA' },
- ];
- document.getElementById('modalBackgroundColor').value = '#333333';
- document.getElementById('modalBackgroundSelect').value = '#333333';
-
- var colorInput = document.getElementById('modalBackgroundColor');
-
-
- function updateModalBackgroundColor(color) {
- document.querySelector('.modal-content').style.backgroundColor = color;
- }
-
- document.getElementById('modalBackgroundColor').addEventListener('input', function() {
- updateModalBackgroundColor(colorInput.value);
- });
- document.getElementById('modalBackgroundSelect').addEventListener('change', function() {
- const color = this.value;
- document.getElementById('modalBackgroundColor').value = color;
- updateModalBackgroundColor(colorInput.value);
- });
- function updateFontFamily() {
- var selectElement = document.getElementById('fontFamily');
- var selectedFont = selectElement.options[selectElement.selectedIndex].value;
- selectElement.style.fontFamily = selectedFont;
- }
- function populateColorSelect(selectElement, defaultValue) {
- colorNames.forEach(color => {
- const option = document.createElement('option');
- option.value = color.value;
- option.innerHTML = `${color.name}`;
- option.style.backgroundColor = color.value;
- option.style.color = (parseInt(color.value.replace('#', ''), 16) > 0xffffff / 2) ? 'black' : 'white';
- selectElement.appendChild(option);
- });
-
- selectElement.value = defaultValue;
- }
- populateColorSelect(document.getElementById('startColorNames'), '#FFB6C1');
- populateColorSelect(document.getElementById('endColorNames'), '#FF1493');
- populateColorSelect(document.getElementById('fontColorNames'), '#FFFFFF');
-
- document.getElementById('ellipseStartColor').value = '#FFB6C1';
- document.getElementById('ellipseEndColor').value = '#FF1493';
- document.getElementById('fontColorNames').addEventListener('change', function() {
- const color = this.value;
- document.getElementById('fontColor').value = color;
- document.getElementById('toggleButton').style.color = color;
- });
- document.getElementById('startColorNames').addEventListener('change', function() {
- const color = this.value;
- document.getElementById('ellipseStartColor').value = color;
- updateGradient();
- });
- document.getElementById('endColorNames').addEventListener('change', function() {
- const color = this.value;
- document.getElementById('ellipseEndColor').value = color;
- updateGradient();
- });
- document.getElementById('fontColor').addEventListener('input', function() {
- document.getElementById('toggleButton').style.color = this.value;
- });
- document.getElementById('buttonText').addEventListener('input', function() {
- document.getElementById('toggleButton').textContent = this.value;
- });
- document.getElementById('fontSize').addEventListener('input', function() {
- document.getElementById('toggleButton').style.fontSize = this.value + 'px';
- });
- document.getElementById('fontFamily').addEventListener('change', function() {
- document.getElementById('toggleButton').style.fontFamily = this.value;
- });
-
- document.getElementById('fontItalic').addEventListener('change', function() {
- document.getElementById('toggleButton').style.fontStyle = this.checked ? 'italic' : 'normal';
- });
- document.getElementById('fontUnderline').addEventListener('change', function() {
- document.getElementById('toggleButton').style.textDecoration = this.checked ? 'underline' : 'none';
- });
- document.getElementById('fontWeightRange').addEventListener('input', function() {
- const weight = this.value;
- document.getElementById('toggleButton').style.fontVariationSettings = `'wght' ${weight}`;
- document.getElementById('fontWeightNumber').value = weight;
- });
- document.getElementById('fontWeightNumber').addEventListener('input', function() {
- const weight = this.value;
- document.getElementById('toggleButton').style.fontVariationSettings = `'wght' ${weight}`;
- document.getElementById('fontWeightRange').value = weight;
- });
- document.getElementById('textHorizontal').addEventListener('input', function() {
- const value = this.value;
- const buttonText = document.getElementById('buttonText');
- buttonText.style.left = `${value}%`;
- document.getElementById('textHorizontalNumber').value = value;
- });
- document.getElementById('textHorizontalNumber').addEventListener('input', function() {
- const value = this.value;
- const buttonText = document.getElementById('buttonText');
- buttonText.style.left = `${value}%`;
- document.getElementById('textHorizontal').value = value;
- });
- document.getElementById('textVertical').addEventListener('input', function() {
- const value = this.value;
- const buttonText = document.getElementById('buttonText');
- buttonText.style.top = `${value}%`;
- document.getElementById('textVerticalNumber').value = value;
- });
- document.getElementById('textVerticalNumber').addEventListener('input', function() {
- const value = this.value;
- const buttonText = document.getElementById('buttonText');
- buttonText.style.top = `${value}%`;
- document.getElementById('textVertical').value = value;
- });
- document.getElementById('borderRadiusHorizontal').addEventListener('input', function() {
- const value = this.value;
- const verticalValue = document.getElementById('borderRadiusVertical').value;
- document.getElementById('toggleButton').style.borderRadius = `${value}px / ${verticalValue}px`;
- document.getElementById('borderRadiusHorizontalNumber').value = value;
- });
- document.getElementById('borderRadiusHorizontalNumber').addEventListener('input', function() {
- const value = this.value;
- const verticalValue = document.getElementById('borderRadiusVertical').value;
- document.getElementById('toggleButton').style.borderRadius = `${value}px / ${verticalValue}px`;
- document.getElementById('borderRadiusHorizontal').value = value;
- });
- document.getElementById('borderRadiusVertical').addEventListener('input', function() {
- const value = this.value;
- const horizontalValue = document.getElementById('borderRadiusHorizontal').value;
- document.getElementById('toggleButton').style.borderRadius = `${horizontalValue}px / ${value}px`;
- document.getElementById('borderRadiusVerticalNumber').value = value;
- });
- document.getElementById('borderRadiusVerticalNumber').addEventListener('input', function() {
- const value = this.value;
- const horizontalValue = document.getElementById('borderRadiusHorizontal').value;
- document.getElementById('toggleButton').style.borderRadius = `${horizontalValue}px / ${value}px`;
- document.getElementById('borderRadiusVertical').value = value;
- });
- document.getElementById('ellipseX').addEventListener('input', function() {
- const x = this.value;
- const y = document.getElementById('ellipseY').value;
- updateGradient();
- document.getElementById('ellipseXNumber').value = x;
- });
- document.getElementById('ellipseXNumber').addEventListener('input', function() {
- const x = this.value;
- const y = document.getElementById('ellipseY').value;
- updateGradient();
- document.getElementById('ellipseX').value = x;
- });
- document.getElementById('ellipseY').addEventListener('input', function() {
- const y = this.value;
- const x = document.getElementById('ellipseX').value;
- updateGradient();
- document.getElementById('ellipseYNumber').value = y;
- });
- document.getElementById('ellipseYNumber').addEventListener('input', function() {
- const y = this.value;
- const x = document.getElementById('ellipseX').value;
- updateGradient();
- document.getElementById('ellipseY').value = y;
- });
- document.getElementById('ellipseStartColor').addEventListener('input', function() {
- updateGradient();
- });
- document.getElementById('ellipseEndColor').addEventListener('input', function() {
- updateGradient();
- });
- document.getElementById('rightPaneBackgroundColor').addEventListener('input', function() {
- document.querySelector('.main-content').style.backgroundColor = this.value;
- });
- document.getElementById('rightPaneBackgroundSelect').addEventListener('change', function() {
- const color = this.value;
- document.getElementById('rightPaneBackgroundColor').value = color;
- document.querySelector('.main-content').style.backgroundColor = color;
- });
- let zoomLevel = 1;
- document.getElementById('zoomButton').addEventListener('click', function() {
- const button = document.getElementById('toggleButton');
- zoomLevel = (zoomLevel % 3) + 1;
- button.classList.remove('zoom-1x', 'zoom-2x', 'zoom-3x');
- button.classList.add(`zoom-${zoomLevel}x`);
- this.textContent = `${zoomLevel}x`;
- });
- document.getElementById('toggleInsetShadow').addEventListener('change', function() {
- const button = document.getElementById('toggleButton');
- if (this.checked) {
- updateShadow();
- } else {
- button.style.boxShadow = 'none';
- }
- });
- function updateShadow() {
- const hOffset = document.getElementById('shadowHorizontal').value;
- const vOffset = document.getElementById('shadowVertical').value;
- const blur = document.getElementById('shadowBlur').value;
- const color = document.getElementById('shadowColor').value;
- const opacity = document.getElementById('shadowOpacity').value;
- const boxShadow = `inset ${hOffset}px ${vOffset}px ${blur}px rgba(${hexToRgb(color)}, ${opacity})`;
- document.getElementById('toggleButton').style.boxShadow = boxShadow;
- }
- function hexToRgb(hex) {
- const bigint = parseInt(hex.slice(1), 16);
- const r = (bigint >> 16) & 255;
- const g = (bigint >> 8) & 255;
- const b = bigint & 255;
- return `${r}, ${g}, ${b}`;
- }
- document.getElementById('shadowHorizontal').addEventListener('input', function() {
- document.getElementById('shadowHorizontalNumber').value = this.value;
- updateShadow();
- });
- document.getElementById('shadowHorizontalNumber').addEventListener('input', function() {
- document.getElementById('shadowHorizontal').value = this.value;
- updateShadow();
- });
- document.getElementById('shadowVertical').addEventListener('input', function() {
- document.getElementById('shadowVerticalNumber').value = this.value;
- updateShadow();
- });
- document.getElementById('shadowVerticalNumber').addEventListener('input', function() {
- document.getElementById('shadowVertical').value = this.value;
- updateShadow();
- });
- document.getElementById('shadowBlur').addEventListener('input', function() {
- document.getElementById('shadowBlurNumber').value = this.value;
- updateShadow();
- });
- document.getElementById('shadowBlurNumber').addEventListener('input', function() {
- document.getElementById('shadowBlur').value = this.value;
- updateShadow();
- });
- document.getElementById('shadowColor').addEventListener('input', function() {
- updateShadow();
- });
- document.getElementById('shadowColorSelect').addEventListener('change', function() {
- const color = this.value;
- document.getElementById('shadowColor').value = color;
- updateShadow();
- });
- document.getElementById('shadowOpacity').addEventListener('input', function() {
- document.getElementById('shadowOpacityNumber').value = this.value;
- updateShadow();
- });
- document.getElementById('shadowOpacityNumber').addEventListener('input', function() {
- document.getElementById('shadowOpacity').value = this.value;
- updateShadow();
- });
- function updateGradient() {
- const x = document.getElementById('ellipseX').value;
- const y = document.getElementById('ellipseY').value;
- const startColor = document.getElementById('ellipseStartColor').value;
- const endColor = document.getElementById('ellipseEndColor').value;
- document.getElementById('toggleButton').style.background = `radial-gradient(ellipse at ${x}% ${y}%, ${startColor} 60%, ${endColor} 61%)`;
- }
- function getBrightness(rgb) {
-
- return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
- }
- function updateBorderColor(input) {
- var color = input.value;
- var rgb = hexToRgb(color);
- var brightness = getBrightness(rgb);
- var borderColor = brightness > 128 ? '#333333' : '#cccccc';
- input.style.borderColor = borderColor;
- }
- document.querySelectorAll('input[type="color"]').forEach(input => {
- input.addEventListener('input', () => updateBorderColor(input));
- updateBorderColor(input);
- });
-
- document.addEventListener('DOMContentLoaded', function() {
- const buttonText = document.getElementById('buttonText');
- const buttonLetterInput = document.getElementById('buttonLetter');
- buttonLetterInput.addEventListener('input', function() {
- buttonText.textContent = buttonLetterInput.value;
- });
- document.getElementById('toggleButton').style.fontFamily = 'BioRhyme, serif';
- document.getElementById('toggleButton').style.fontVariationSettings = "'wght' 400";
- });
-
- var modal = document.getElementById("myModal");
-
- var span = document.getElementsByClassName("close")[0];
-
-
- document.getElementById('showPngButton').addEventListener('click', function() {
- htmlToImage.toPng(document.getElementById('toggleButton'), { backgroundColor: null })
- .then(function(dataUrl) {
-
- var imageContainer = document.getElementById('imageContainer');
- imageContainer.innerHTML = `<img src="${dataUrl}" alt="Toggle Button Image">`;
-
- var modal = document.getElementById('myModal');
- modal.style.display = "block";
- })
- .catch(function(error) {
- console.error('oops, something went wrong!', error);
- });
- });
- document.getElementById('downloadPngButton').addEventListener('click', function() {
- htmlToImage.toPng(document.getElementById('toggleButton'), { backgroundColor: null })
- .then(function(dataUrl) {
-
- var link = document.createElement('a');
- link.href = dataUrl;
- link.download = 'button.png';
- link.click();
- })
- .catch(function(error) {
- console.error('oops, something went wrong!', error);
- });
- });
-
- span.onclick = function() {
- modal.style.display = "none";
- }
-
- window.onclick = function(event) {
- if (event.target == modal) {
- modal.style.display = "none";
- }
- }
- </script>
- </body>
- </html>
|