129 lines
3.5 KiB
PHP
129 lines
3.5 KiB
PHP
<div class="tomljson-container">
|
|
<div class="tomljson-box">
|
|
<h2 class="tomljson-title">TOML to JSON Converter</h2>
|
|
<textarea cols="45" rows="8" class="tomljson-input" placeholder="Paste TOML here..."></textarea>
|
|
<div class="tomljson-button-group">
|
|
<button class="tomljson-convert-btn">Convert</button>
|
|
<button class="tomljson-copy-btn">Copy JSON</button>
|
|
</div>
|
|
|
|
<h3 class="tomljson-output-title">JSON Output:</h3>
|
|
<pre class="tomljson-output"></pre>
|
|
</div>
|
|
</div>
|
|
<script type="module">
|
|
import * as TOML from 'https://cdn.jsdelivr.net/npm/toml@3.0.0/+esm';
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
document.querySelector(".tomljson-convert-btn").addEventListener("click", () => {
|
|
try {
|
|
const tomlData = document.querySelector(".tomljson-input").value;
|
|
const jsonData = TOML.parse(tomlData);
|
|
document.querySelector(".tomljson-output").textContent = JSON.stringify(jsonData, null, 2);
|
|
} catch (error) {
|
|
document.querySelector(".tomljson-output").textContent = "Error: " + error.message;
|
|
}
|
|
});
|
|
|
|
document.querySelector(".tomljson-copy-btn").addEventListener("click", () => {
|
|
const jsonOutput = document.querySelector(".tomljson-output").textContent;
|
|
navigator.clipboard.writeText(jsonOutput).then(() => {
|
|
document.querySelector(".tomljson-copy-btn").textContent = "Copied!";
|
|
setTimeout(() => document.querySelector(".tomljson-copy-btn").textContent = "Copy JSON", 2000);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.tomljson-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin: 100px 0
|
|
}
|
|
|
|
.tomljson-box {
|
|
background: #2c2c2c;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
|
|
max-width: 450px;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.tomljson-title {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.tomljson-input {
|
|
/* width: 100%; */
|
|
background: #3c3c3c;
|
|
color: #ffffff;
|
|
border: 1px solid #555;
|
|
border-radius: 5px;
|
|
/* padding: 12px; */
|
|
font-size: 14px;
|
|
resize: none;
|
|
}
|
|
|
|
.tomljson-button-group {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.tomljson-convert-btn, .tomljson-copy-btn {
|
|
background: #007bff;
|
|
border: none;
|
|
padding: 10px 18px;
|
|
border-radius: 5px;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.tomljson-copy-btn {
|
|
background: #28a745;
|
|
}
|
|
|
|
.tomljson-convert-btn:hover {
|
|
background: #0056b3;
|
|
}
|
|
|
|
.tomljson-copy-btn:hover {
|
|
background: #218838;
|
|
}
|
|
|
|
.tomljson-output-title {
|
|
font-size: 18px;
|
|
margin-top: 20px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.tomljson-output {
|
|
background: #3c3c3c;
|
|
padding: 12px;
|
|
border-radius: 5px;
|
|
text-align: left;
|
|
font-size: 14px;
|
|
height: 160px;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
border: 1px solid #555;
|
|
color: #ffffff;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
</style>
|