You've already forked random-web-tools
Add phpinfo
This commit is contained in:
@ -1,35 +1,63 @@
|
||||
<template>
|
||||
<h2 class="tool-title">Dummy image</h2>
|
||||
<hr class="mt-5 mb-5">
|
||||
<hr class="mt-5 mb-5" />
|
||||
|
||||
<div class="input-group">
|
||||
<label>Dimensions</label>
|
||||
<div style="display: flex">
|
||||
<input class="input" v-model="toolData.width" v-on:keyup="result" v-on:change="result" placeholder="500"
|
||||
type="number" style="width: 70px">px
|
||||
<input
|
||||
class="input"
|
||||
v-model="toolData.width"
|
||||
v-on:keyup="result"
|
||||
v-on:change="result"
|
||||
placeholder="500"
|
||||
type="number"
|
||||
style="width: 70px"
|
||||
/>px
|
||||
<span style="padding: 0 10px">x</span>
|
||||
<input class="input" v-model="toolData.height" v-on:keyup="result" v-on:change="result" placeholder="500"
|
||||
type="number" style="width: 70px">px
|
||||
<input
|
||||
class="input"
|
||||
v-model="toolData.height"
|
||||
v-on:keyup="result"
|
||||
v-on:change="result"
|
||||
placeholder="500"
|
||||
type="number"
|
||||
style="width: 70px"
|
||||
/>px
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="result">Background colour</label>
|
||||
<input class="input" v-model="toolData.color_bg" v-on:change="result" type="color">
|
||||
<input
|
||||
class="input"
|
||||
v-model="toolData.color_bg"
|
||||
v-on:change="result"
|
||||
type="color"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="result">Text colour</label>
|
||||
<input class="input" v-model="toolData.color_text" v-on:change="result" type="color">
|
||||
<input
|
||||
class="input"
|
||||
v-model="toolData.color_text"
|
||||
v-on:change="result"
|
||||
type="color"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr class="mt-5 mb-5">
|
||||
<hr class="mt-5 mb-5" />
|
||||
|
||||
<div class="input-group">
|
||||
<label for="result">Result</label>
|
||||
<div :style="{'width': toolData.width, 'height': toolData.height}">
|
||||
<canvas ref="canvas" :width="toolData.width" :height="toolData.height"
|
||||
style="max-width: 50vw; max-height: 50vh;"></canvas>
|
||||
<div :style="{ width: toolData.width, height: toolData.height }">
|
||||
<canvas
|
||||
ref="canvas"
|
||||
:width="toolData.width"
|
||||
:height="toolData.height"
|
||||
style="max-width: 50vw; max-height: 50vh"
|
||||
></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -42,9 +70,9 @@ export default {
|
||||
width: 500,
|
||||
height: 500,
|
||||
color_bg: "#000000",
|
||||
color_text: "#ffffff"
|
||||
color_text: "#ffffff",
|
||||
},
|
||||
toolResult: ""
|
||||
toolResult: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -68,11 +96,9 @@ export default {
|
||||
const x = (this.toolData.width - textWidth) / 2;
|
||||
const y = this.toolData.height / 2 + 10;
|
||||
ctx.fillText(text, x, y);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
<style lang="scss"></style>
|
||||
|
||||
@ -1,24 +1,32 @@
|
||||
<template>
|
||||
<h2 class="tool-title">IBAN generator</h2>
|
||||
<hr class="mt-5 mb-5">
|
||||
<hr class="mt-5 mb-5" />
|
||||
|
||||
<div class="input-group">
|
||||
<label for="style">Country</label>
|
||||
<div>
|
||||
<select id="style" v-model="toolData.country" v-on:change="result">
|
||||
<option value="">Select Country</option>
|
||||
<option v-for="(structure, code) in ibanStructure" :key="code" :value="code">
|
||||
<option
|
||||
v-for="(structure, code) in ibanStructure"
|
||||
:key="code"
|
||||
:value="code"
|
||||
>
|
||||
{{ structure.country }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mt-5 mb-5">
|
||||
<hr class="mt-5 mb-5" />
|
||||
|
||||
<div class="input-group">
|
||||
<label for="result">Result</label>
|
||||
<MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
|
||||
<MonacoEditor
|
||||
name="result"
|
||||
language="text"
|
||||
:value="toolResult"
|
||||
></MonacoEditor>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -34,8 +42,8 @@ function generateRandomNumber(length) {
|
||||
}
|
||||
|
||||
function generateRandomString(length) {
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
let result = '';
|
||||
const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
let result = "";
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += characters.charAt(Math.floor(Math.random() * characters.length));
|
||||
}
|
||||
@ -45,26 +53,31 @@ function generateRandomString(length) {
|
||||
function mod97(string) {
|
||||
let checksum = string.slice(0, 2);
|
||||
for (let i = 2; i < string.length; i += 7) {
|
||||
checksum = (parseInt(checksum + string.slice(i, i + 7), 10) % 97).toString().padStart(2, '0');
|
||||
checksum = (parseInt(checksum + string.slice(i, i + 7), 10) % 97)
|
||||
.toString()
|
||||
.padStart(2, "0");
|
||||
}
|
||||
return parseInt(checksum);
|
||||
}
|
||||
|
||||
function calculateCheckDigits(iban) {
|
||||
const rearranged = iban.slice(4) + iban.slice(0, 4);
|
||||
const digits = rearranged.split('').map(char => {
|
||||
if (char >= 'A' && char <= 'Z') {
|
||||
return (char.charCodeAt(0) - 55).toString();
|
||||
}
|
||||
return char;
|
||||
}).join('');
|
||||
const digits = rearranged
|
||||
.split("")
|
||||
.map((char) => {
|
||||
if (char >= "A" && char <= "Z") {
|
||||
return (char.charCodeAt(0) - 55).toString();
|
||||
}
|
||||
return char;
|
||||
})
|
||||
.join("");
|
||||
const remainder = mod97(digits);
|
||||
return ('0' + (98 - remainder)).slice(-2);
|
||||
return ("0" + (98 - remainder)).slice(-2);
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MonacoEditor
|
||||
MonacoEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -74,9 +87,17 @@ export default {
|
||||
toolResult: "",
|
||||
ibanStructure: {
|
||||
AD: { country: "Andorra", length: 24, structure: "F04F04F12" },
|
||||
AE: { country: "United Arab Emirates", length: 23, structure: "F03F16" },
|
||||
AE: {
|
||||
country: "United Arab Emirates",
|
||||
length: 23,
|
||||
structure: "F03F16",
|
||||
},
|
||||
AT: { country: "Austria", length: 20, structure: "F05F11" },
|
||||
BA: { country: "Bosnia and Herzegovina", length: 20, structure: "F03F03F08F02" },
|
||||
BA: {
|
||||
country: "Bosnia and Herzegovina",
|
||||
length: 20,
|
||||
structure: "F03F03F08F02",
|
||||
},
|
||||
BE: { country: "Belgium", length: 16, structure: "F03F07F02" },
|
||||
BG: { country: "Bulgaria", length: 22, structure: "U04F04F02F08" },
|
||||
BH: { country: "Bahrain", length: 22, structure: "U04F14" },
|
||||
@ -114,7 +135,11 @@ export default {
|
||||
MK: { country: "North Macedonia", length: 19, structure: "F03U10F02" },
|
||||
MR: { country: "Mauritania", length: 27, structure: "F05F05F11F02" },
|
||||
MT: { country: "Malta", length: 31, structure: "U04F05U18" },
|
||||
MU: { country: "Mauritius", length: 30, structure: "U04F02F02F12F03U03" },
|
||||
MU: {
|
||||
country: "Mauritius",
|
||||
length: 30,
|
||||
structure: "U04F02F02F12F03U03",
|
||||
},
|
||||
NL: { country: "Netherlands", length: 18, structure: "U04F10" },
|
||||
NO: { country: "Norway", length: 15, structure: "F04F06F01" },
|
||||
PK: { country: "Pakistan", length: 24, structure: "U04U16" },
|
||||
@ -137,17 +162,17 @@ export default {
|
||||
methods: {
|
||||
result() {
|
||||
if (!this.toolData.country.length) {
|
||||
this.toolResult = 'Select a country';
|
||||
this.toolResult = "Select a country";
|
||||
return;
|
||||
}
|
||||
|
||||
const structure = this.ibanStructure[this.toolData.country];
|
||||
if (!structure) {
|
||||
this.toolResult = 'Unsupported country';
|
||||
this.toolResult = "Unsupported country";
|
||||
return;
|
||||
}
|
||||
|
||||
let iban = this.toolData.country + '00'; // Add placeholder check digits
|
||||
let iban = this.toolData.country + "00"; // Add placeholder check digits
|
||||
const parts = structure.structure.match(/([FU])(\d+)/g);
|
||||
|
||||
for (const part of parts) {
|
||||
@ -155,10 +180,10 @@ export default {
|
||||
const length = parseInt(part.slice(1));
|
||||
|
||||
switch (type) {
|
||||
case 'F':
|
||||
case "F":
|
||||
iban += generateRandomNumber(length);
|
||||
break;
|
||||
case 'U':
|
||||
case "U":
|
||||
iban += generateRandomString(length);
|
||||
break;
|
||||
}
|
||||
@ -169,11 +194,9 @@ export default {
|
||||
iban = iban.slice(0, 2) + checkDigits + iban.slice(4);
|
||||
|
||||
this.toolResult = iban;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
<style lang="scss"></style>
|
||||
|
||||
@ -1,34 +1,59 @@
|
||||
<template>
|
||||
<h2 class="tool-title">QR code</h2>
|
||||
<hr class="mt-5 mb-5">
|
||||
<hr class="mt-5 mb-5" />
|
||||
|
||||
<!-- Type options -->
|
||||
<div class="input-group">
|
||||
<label for="text">Data:</label>
|
||||
<textarea id="data" v-model="toolData.options.text" v-on:keyup="result"></textarea>
|
||||
<textarea
|
||||
id="data"
|
||||
v-model="toolData.options.text"
|
||||
v-on:keyup="result"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Basic options -->
|
||||
<div class="input-group">
|
||||
<label for="width">Width:</label>
|
||||
<input id="width" v-model.number="toolData.options.width" v-on:change="result" v-on:keyup="result" type="number">
|
||||
<input
|
||||
id="width"
|
||||
v-model.number="toolData.options.width"
|
||||
v-on:change="result"
|
||||
v-on:keyup="result"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="height">Height:</label>
|
||||
<input id="height" v-model.number="toolData.options.height" v-on:change="result" v-on:keyup="result" type="number">
|
||||
<input
|
||||
id="height"
|
||||
v-model.number="toolData.options.height"
|
||||
v-on:change="result"
|
||||
v-on:keyup="result"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="height">White border:</label>
|
||||
<input id="quietZone" v-model.number="toolData.options.quietZone" v-on:change="result" v-on:keyup="result"
|
||||
type="number">
|
||||
<input
|
||||
id="quietZone"
|
||||
v-model.number="toolData.options.quietZone"
|
||||
v-on:change="result"
|
||||
v-on:keyup="result"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="correctLevel">Correct Level:</label>
|
||||
<div>
|
||||
<select id="correctLevel" v-model="toolData.options.correctLevel" v-on:change="result">
|
||||
<select
|
||||
id="correctLevel"
|
||||
v-model="toolData.options.correctLevel"
|
||||
v-on:change="result"
|
||||
>
|
||||
<option value="L">L</option>
|
||||
<option value="M">M</option>
|
||||
<option value="Q">Q</option>
|
||||
@ -41,7 +66,13 @@
|
||||
<div class="input-group">
|
||||
<label for="logoUpload">Logo Upload:</label>
|
||||
<div>
|
||||
<input type="file" id="logoUpload" ref="logoUpload" @change="handleLogoUpload" accept="image/*">
|
||||
<input
|
||||
type="file"
|
||||
id="logoUpload"
|
||||
ref="logoUpload"
|
||||
@change="handleLogoUpload"
|
||||
accept="image/*"
|
||||
/>
|
||||
<button @click="removeLogo">🞩</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -50,16 +81,29 @@
|
||||
<div class="input-group">
|
||||
<label for="backgroundImageUpload">Background Image Upload:</label>
|
||||
<div>
|
||||
<input type="file" id="backgroundImageUpload" ref="backgroundImageUpload" @change="handleBackgroundImageUpload"
|
||||
accept="image/*">
|
||||
<input
|
||||
type="file"
|
||||
id="backgroundImageUpload"
|
||||
ref="backgroundImageUpload"
|
||||
@change="handleBackgroundImageUpload"
|
||||
accept="image/*"
|
||||
/>
|
||||
<button @click="removeBackgroundImage">🞩</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="backgroundImageAlpha">Background Image Alpha:</label>
|
||||
<input id="backgroundImageAlpha" v-model.number="toolData.options.backgroundImageAlpha" step="0.1" min="0" max="1"
|
||||
v-on:change="result" v-on:keyup="result" type="number">
|
||||
<input
|
||||
id="backgroundImageAlpha"
|
||||
v-model.number="toolData.options.backgroundImageAlpha"
|
||||
step="0.1"
|
||||
min="0"
|
||||
max="1"
|
||||
v-on:change="result"
|
||||
v-on:keyup="result"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
@ -82,7 +126,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mt-5 mb-5">
|
||||
<hr class="mt-5 mb-5" />
|
||||
|
||||
<div class="input-group">
|
||||
<label>Result</label>
|
||||
@ -110,9 +154,9 @@ export default {
|
||||
backgroundImage: "",
|
||||
backgroundImageAlpha: 1,
|
||||
autoColor: true,
|
||||
drawer: "canvas"
|
||||
}
|
||||
}
|
||||
drawer: "canvas",
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -129,10 +173,10 @@ export default {
|
||||
|
||||
// convert correction levels
|
||||
options.correctLevel = {
|
||||
"L": QRCode.CorrectLevel.L,
|
||||
"M": QRCode.CorrectLevel.M,
|
||||
"Q": QRCode.CorrectLevel.Q,
|
||||
"H": QRCode.CorrectLevel.H
|
||||
L: QRCode.CorrectLevel.L,
|
||||
M: QRCode.CorrectLevel.M,
|
||||
Q: QRCode.CorrectLevel.Q,
|
||||
H: QRCode.CorrectLevel.H,
|
||||
}[options.correctLevel];
|
||||
|
||||
console.log(options.correctLevel);
|
||||
@ -171,11 +215,9 @@ export default {
|
||||
removeBackgroundImage() {
|
||||
this.toolData.options.backgroundImage = "";
|
||||
this.result();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
<style lang="scss"></style>
|
||||
|
||||
Reference in New Issue
Block a user