hornguy6
/
glife
forked from Kevin_Smarts/glife


			
							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');
    /* General styles */
body {
    display: flex;
    height: 100vh;
    margin: 0;
    background-color: #000;
    color: #fff;
}

/* Controls section */
.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 styles */
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;
}

/* Color input styles */
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 styles */
label {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    margin: 0;
    font-size: 20px;
}

/* Checkbox container */
.checkbox-container {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 30px;
}

/* Main content area */
.main-content {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    flex-direction: column;
}

/* Overlay container */
.overlay-container {
    position: relative;
    width: 75px;
    height: 75px;
    margin-bottom: 20px;
}

/* Button styles */
.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 */
.color-sample {
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 1px solid #000;
    margin-left: 10px;
}

/* Modal styles */
.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; /* Adjusted width to accommodate the small image and some padding */
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
}

#imageContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75px;
    height: 75px;
    margin-bottom: 20px; /* Space between image and controls */
}

#imageContainer img,
#imageContainer svg {
    width: 75px;
    height: 75px;
    object-fit: contain; /* Ensure the entire image is visible */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #ffffff;
    text-decoration: none;
}

/* Button styles */
#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%;
}

/* Ensure modal elements have consistent styling */
.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>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</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">
                    <!-- Additional options will be populated by JavaScript -->
                </select>
            </label>
        </div>
        <div class="control-section">
            <label title="Change the radial gradient end color">
                Ellipse End Color:&nbsp;
                <input type="color" id="ellipseEndColor" value="#FF1493">
                <select id="endColorNames">
                    <!-- Additional options will be populated by JavaScript -->
                </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/[email protected]/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';
    // Get the color input and select elements
    var colorInput = document.getElementById('modalBackgroundColor');
    // var colorSelect = document.getElementById('modalBackgroundSelect');

    // Function to update the modal background color
    function updateModalBackgroundColor(color) {
        document.querySelector('.modal-content').style.backgroundColor = color;
    }

    /*    // Event listener for color input
        colorInput.addEventListener('input', function() {
            updateModalBackgroundColor(colorInput.value);
        });

        // Event listener for color select
        colorSelect.addEventListener('change', function() {
            updateModalBackgroundColor(colorSelect.value);
        });*/

    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);
        });
        // Set the default color
        selectElement.value = defaultValue;
    }
    populateColorSelect(document.getElementById('startColorNames'), '#FFB6C1'); // LightPink
    populateColorSelect(document.getElementById('endColorNames'), '#FF1493'); // DeepPink
    populateColorSelect(document.getElementById('fontColorNames'), '#FFFFFF'); // Default for font color if needed
    // Set default color values for inputs
    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;
    });

    /* font related listeners */
    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) {
        // Calculate the brightness of the color
        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'; // Dark gray for light colors, light gray for dark colors
        input.style.borderColor = borderColor;
    }
    document.querySelectorAll('input[type="color"]').forEach(input => {
        input.addEventListener('input', () => updateBorderColor(input));
        updateBorderColor(input); // Initialize the border color on page load
    });
    // Set the initial font family when the page loads
    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";
    });

    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    /*    // When the user clicks the button, open the modal
        document.getElementById('showPngButton').addEventListener('click', function() {
            html2canvas(document.getElementById('toggleButton'), { backgroundColor: null }).then(function(canvas) {
                // Set the image source to the PNG data URL
                var img = canvas.toDataURL("image/png");
                var imageContainer = document.getElementById('imageContainer');
                imageContainer.innerHTML = `<img src="${img}" alt="Toggle Button Image">`;

                // Open the modal
                modal.style.display = "block";
            });
        });


        document.getElementById('downloadPngButton').addEventListener('click', function() {
            html2canvas(document.getElementById('toggleButton'), { backgroundColor: null }).then(function(canvas) {
                // Create a link element and trigger download
                var link = document.createElement('a');
                link.href = canvas.toDataURL("image/png");
                link.download = 'button.png';
                link.click();
            });
        });*/

    // When the user clicks the button, open the modal
    document.getElementById('showPngButton').addEventListener('click', function() {
        htmlToImage.toPng(document.getElementById('toggleButton'), { backgroundColor: null })
            .then(function(dataUrl) {
                // Set the image source to the PNG data URL
                var imageContainer = document.getElementById('imageContainer');
                imageContainer.innerHTML = `<img src="${dataUrl}" alt="Toggle Button Image">`;

                // Open the modal
                var modal = document.getElementById('myModal'); // Correctly reference the modal element
                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) {
                // Create a link element and trigger download
                var link = document.createElement('a');
                link.href = dataUrl;
                link.download = 'button.png';
                link.click();
            })
            .catch(function(error) {
                console.error('oops, something went wrong!', error);
            });
    });


    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    </script>
</body>

</html>