Repository: louislam/uptime-kuma
File: src/components/BadgeGeneratorDialog.vue (Vue)

Code before:
                        <input id="warnDays" v-model="badge.warnDays" type="number" min="0" class="form-control" :placeholder="badgeConstants.defaultCertExpireWarnDays">
                    </div>

                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downDays') " class="mb-3">
                        <label for="downDays" class="form-label">{{ $t("Badge Down Days") }}</label>
                        <input id="downDays" v-model="badge.downDays" type="number" min="0" class="form-control" :placeholder="badgeConstants.defaultCertExpireDownDays">
                    </div>

                    <div class="mb-3">
                        <label for="style" class="form-label">{{ $t("Badge Style") }}</label>
                        <select id="style" v-model="badge.style" class="form-select">
                            <option value="plastic">plastic</option>
                            <option value="flat">flat</option>
                            <option value="flat-square">flat-square</option>
                            <option value="for-the-badge">for-the-badge</option>
                            <option value="social">social</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="value" class="form-label">{{ $t("Badge value (For Testing only.)") }}</label>
                        <input id="value" v-model="badge.value" type="text" class="form-control">
                    </div>

                    <div class="mb-3 pt-3 d-flex justify-content-center">
                        <img :src="badgeURL" alt="Badge Preview">
                    </div>

                    <div class="my-3">
                        <label for="push-url" class="form-label">{{ $t("Badge URL") }}</label>
                        <CopyableInput id="push-url" v-model="badgeURL" type="url" disabled="disabled" />
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">
                        {{ $t("Close") }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Modal } from "bootstrap";
import CopyableInput from "./CopyableInput.vue";
import { default as serverConfig } from "../../server/config.js";

export default {
    components: {

Review comment (suggestion):
In general, I think the preview seems a bit out of place (not a designer, feel free to overrule)

I think the following placements could be better:
- either next to the Badge-URL
- below this with a label `Preview`

![image](https://github.com/louislam/uptime-kuma/assets/26258709/1f01627e-7809-4c9e-9263-12f9c1be3c36)


Code after:
                        <input id="warnDays" v-model="badge.warnDays" type="number" min="0" class="form-control" :placeholder="badgeConstants.defaultCertExpireWarnDays">
                    </div>

                    <div v-if=" (parameters[badge.type || 'null'] || [] ).includes('downDays') " class="mb-3">
                        <label for="downDays" class="form-label">{{ $t("Badge Down Days") }}</label>
                        <input id="downDays" v-model="badge.downDays" type="number" min="0" class="form-control" :placeholder="badgeConstants.defaultCertExpireDownDays">
                    </div>

                    <div class="mb-3">
                        <label for="style" class="form-label">{{ $t("Badge Style") }}</label>
                        <select id="style" v-model="badge.style" class="form-select">
                            <option value="plastic">plastic</option>
                            <option value="flat">flat</option>
                            <option value="flat-square">flat-square</option>
                            <option value="for-the-badge">for-the-badge</option>
                            <option value="social">social</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="value" class="form-label">{{ $t("Badge value (For Testing only.)") }}</label>
                        <input id="value" v-model="badge.value" type="text" class="form-control">
                    </div>

                    <div class="mb-3 pt-3 d-flex justify-content-center">
                        <img :src="badgeURL" :alt="$t('Badge Preview')">
                    </div>

                    <div class="my-3">
                        <label for="badge-url" class="form-label">{{ $t("Badge URL") }}</label>
                        <CopyableInput id="badge-url" v-model="badgeURL" type="url" disabled="disabled" />
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">
                        {{ $t("Close") }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Modal } from "bootstrap";
import CopyableInput from "./CopyableInput.vue";
import { default as serverConfig } from "../../server/config.js";

export default {
    components: {