DavidDevGt
95402040eb
Some checks failed
Simple CI Pipeline for PHP / build (push) Has been cancelled
74 lines
3.2 KiB
HTML
74 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Convertir formatos XML, JSON y Objetos serializados de PHP">
|
|
<title>Serial2Format</title>
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
</head>
|
|
<body :class="{ 'dark-mode': darkMode }">
|
|
|
|
<div id="app" class="container">
|
|
<div class="row switch-container">
|
|
<div class="col-md-12 text-right">
|
|
<button @click="toggleDarkMode" class="btn btn-secondary dark-switch">
|
|
<i :class="darkMode ? 'fas fa-moon' : 'fas fa-sun'"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="display-4 fw-bold mb-3">Serial2Format</h1>
|
|
|
|
<div class="mb-3">
|
|
<label for="inputData" class="form-label">Datos de Entrada:</label>
|
|
<textarea class="form-control" v-model="inputData" rows="6" placeholder="Ingrese sus datos aquí..."></textarea>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col">
|
|
<label for="inputFormat" class="form-label">Formato de Entrada:</label>
|
|
<select class="form-select" v-model="inputFormat" @change="highlightCode">
|
|
<option value="auto">Auto-detectar</option>
|
|
<option value="json">JSON</option>
|
|
<option value="xml">XML</option>
|
|
<option value="phpSerialized">PHP Serializado</option>
|
|
</select>
|
|
</div>
|
|
<div class="col">
|
|
<label for="outputFormat" class="form-label">Formato de Salida:</label>
|
|
<select class="form-select" v-model="outputFormat">
|
|
<option value="json">JSON</option>
|
|
<option value="xml">XML</option>
|
|
<option value="phpSerialized">PHP Serializado</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<button class="btn btn-primary mt-3 mb-3" @click="convertData" :disabled="loading">
|
|
<i :class="[loading ? 'fas fa-spinner fa-spin' : 'fas fa-exchange-alt']"></i>
|
|
<span v-if="!loading">Convertir</span>
|
|
<span v-else>Convirtiendo...</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="output-container">
|
|
<label for="outputData" class="mt-4 form-label">Datos Convertidos:</label>
|
|
<textarea class="form-control" v-model="outputData" rows="16" readonly></textarea>
|
|
</div>
|
|
|
|
<div v-if="message" :class="{'text-success': success, 'text-danger': !success}" class="mt-1">
|
|
{{ message }}
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="js/index.js"></script>
|
|
</body>
|
|
</html>
|