Skip to content

Commit d7d2c81

Browse files
authored
Merge branch 'thinkswell:master' into master
2 parents b9efa4d + 4d94510 commit d7d2c81

File tree

76 files changed

+3241
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+3241
-2
lines changed
-128 KB
Loading

CropImage/harshhere905/index.html

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Image Crop</title>
7+
<style>
8+
body {
9+
font-family: 'Arial', sans-serif;
10+
background-color: #f5f5f5;
11+
text-align: center;
12+
margin: 0;
13+
display: flex;
14+
flex-direction: column;
15+
align-items: center;
16+
justify-content: center;
17+
height: 100vh;
18+
}
19+
20+
#canvasContainer {
21+
position: relative;
22+
margin-top: 20px;
23+
}
24+
25+
#canvas {
26+
border: 2px solid #333;
27+
cursor: crosshair;
28+
background-color: #fff;
29+
}
30+
31+
.input-group {
32+
display: flex;
33+
align-items: center;
34+
margin-bottom: 20px;
35+
}
36+
37+
.input-group input {
38+
padding: 10px;
39+
font-size: 16px;
40+
margin-right: 10px;
41+
border: 2px solid #ccc;
42+
border-radius: 5px;
43+
}
44+
45+
.input-group button {
46+
padding: 10px;
47+
font-size: 16px;
48+
cursor: pointer;
49+
background-color: #3498db;
50+
color: white;
51+
border: none;
52+
border-radius: 5px;
53+
transition: background-color 0.3s;
54+
}
55+
56+
.input-group button:hover {
57+
background-color: #2980b9;
58+
}
59+
60+
.action-buttons button {
61+
margin-top: 10px;
62+
padding: 10px;
63+
font-size: 16px;
64+
cursor: pointer;
65+
background-color: #27ae60;
66+
color: white;
67+
border: none;
68+
border-radius: 5px;
69+
transition: background-color 0.3s;
70+
}
71+
72+
.action-buttons button:hover {
73+
background-color: #219653;
74+
}
75+
76+
#downloadButton {
77+
background-color: #e74c3c;
78+
}
79+
80+
#downloadButton:hover {
81+
background-color: #c0392b;
82+
}
83+
84+
#cropDimensions {
85+
display: flex;
86+
align-items: center;
87+
}
88+
89+
#cropDimensions input {
90+
width: 50px;
91+
margin-right: 10px;
92+
}
93+
</style>
94+
</head>
95+
<body>
96+
97+
<div class="input-group">
98+
<input type="text" id="imageUrl" placeholder="Enter image URL">
99+
<button id="loadImageButton">Load Image</button>
100+
</div>
101+
102+
<div id="cropDimensions">
103+
<span>Crop Dimensions:</span>
104+
<input type="number" id="cropWidth" placeholder="Width">
105+
<input type="number" id="cropHeight" placeholder="Height">
106+
</div>
107+
108+
<div id="canvasContainer">
109+
<canvas id="canvas" width="600" height="400"></canvas>
110+
</div>
111+
112+
<div class="action-buttons">
113+
<button id="cropButton">Crop Image</button>
114+
<button id="resetButton">Reset Canvas</button>
115+
<button id="downloadButton">Download Cropped Image</button>
116+
</div>
117+
118+
<script>
119+
document.addEventListener('DOMContentLoaded', () => {
120+
const canvas = document.getElementById('canvas');
121+
const ctx = canvas.getContext('2d');
122+
let img = new Image();
123+
let crop = false;
124+
let cropWidth = 400;
125+
let cropHeight = 300;
126+
127+
document.getElementById('loadImageButton').addEventListener('click', () => {
128+
const imageUrl = document.getElementById('imageUrl').value;
129+
img.src = imageUrl;
130+
});
131+
132+
document.getElementById('cropButton').addEventListener('click', () => {
133+
crop = true;
134+
drawImage();
135+
});
136+
137+
document.getElementById('resetButton').addEventListener('click', () => {
138+
crop = false;
139+
drawImage();
140+
});
141+
142+
document.getElementById('downloadButton').addEventListener('click', () => {
143+
if (crop) {
144+
const dataUrl = canvas.toDataURL();
145+
const a = document.createElement('a');
146+
a.href = dataUrl;
147+
a.download = 'cropped_image.png';
148+
a.click();
149+
}
150+
});
151+
152+
document.getElementById('cropWidth').addEventListener('change', (event) => {
153+
cropWidth = parseInt(event.target.value) || 0;
154+
drawImage();
155+
});
156+
157+
document.getElementById('cropHeight').addEventListener('change', (event) => {
158+
cropHeight = parseInt(event.target.value) || 0;
159+
drawImage();
160+
});
161+
162+
img.onload = function() {
163+
drawImage();
164+
};
165+
166+
function drawImage() {
167+
ctx.clearRect(0, 0, canvas.width, canvas.height);
168+
if (crop) {
169+
// Draw a resizable rectangle for cropping
170+
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
171+
ctx.fillRect((canvas.width - cropWidth) / 2, (canvas.height - cropHeight) / 2, cropWidth, cropHeight);
172+
ctx.clearRect((canvas.width - cropWidth) / 2, (canvas.height - cropHeight) / 2, cropWidth, cropHeight);
173+
ctx.drawImage(img, (canvas.width - cropWidth) / 2, (canvas.height - cropHeight) / 2, cropWidth, cropHeight,
174+
(canvas.width - cropWidth) / 2, (canvas.height - cropHeight) / 2, cropWidth, cropHeight);
175+
} else {
176+
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
177+
}
178+
}
179+
});
180+
</script>
181+
182+
</body>
183+
</html>
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="styles.css">
7+
<title>Currency Converter</title>
8+
</head>
9+
<body>
10+
<div class="converter">
11+
<h2>Currency Converter</h2>
12+
<div class="input-container">
13+
<label for="amount">Amount:</label>
14+
<input type="number" id="amount" placeholder="Enter amount">
15+
</div>
16+
<div class="input-container">
17+
<label for="fromCurrency">From:</label>
18+
<select id="fromCurrency"></select>
19+
</div>
20+
<div class="input-container">
21+
<label for="toCurrency">To:</label>
22+
<select id="toCurrency"></select>
23+
</div>
24+
<button onclick="convert()">Convert</button>
25+
<h3>Result: <span id="result">0.00</span></h3>
26+
</div>
27+
<script src="https://openexchangerates.org/api/latest.json?app_id=YOUR_API_KEY&callback=initCurrencies"></script>
28+
<script src="script.js"></script>
29+
</body>
30+
</html>
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
let currencies;
2+
const apiKey = 'YOUR_API_KEY'; // Replace with your API key
3+
4+
function initCurrencies(data) {
5+
currencies = Object.keys(data.rates);
6+
7+
// Populate currency dropdowns
8+
const fromCurrencyDropdown = document.getElementById('fromCurrency');
9+
const toCurrencyDropdown = document.getElementById('toCurrency');
10+
11+
currencies.forEach(currency => {
12+
const option = document.createElement('option');
13+
option.value = currency;
14+
option.text = currency;
15+
fromCurrencyDropdown.add(option);
16+
17+
const optionTo = document.createElement('option');
18+
optionTo.value = currency;
19+
optionTo.text = currency;
20+
toCurrencyDropdown.add(optionTo);
21+
});
22+
}
23+
24+
function convert() {
25+
const amount = parseFloat(document.getElementById('amount').value);
26+
const fromCurrency = document.getElementById('fromCurrency').value;
27+
const toCurrency = document.getElementById('toCurrency').value;
28+
29+
fetch(`https://openexchangerates.org/api/convert/${amount}?from=${fromCurrency}&to=${toCurrency}&app_id=${apiKey}`)
30+
.then(response => response.json())
31+
.then(data => {
32+
const convertedAmount = data.result;
33+
document.getElementById('result').innerText = convertedAmount.toFixed(2);
34+
})
35+
.catch(error => console.error('Error:', error));
36+
}
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
body {
2+
font-family: 'Arial', sans-serif;
3+
display: flex;
4+
align-items: center;
5+
justify-content: center;
6+
height: 100vh;
7+
margin: 0;
8+
background: linear-gradient(135deg, #3498db, #8e44ad, #e74c3c, #f39c12);
9+
background-size: 400% 400%;
10+
animation: gradientAnimation 15s infinite;
11+
}
12+
13+
@keyframes gradientAnimation {
14+
0% {
15+
background-position: 0% 50%;
16+
}
17+
50% {
18+
background-position: 100% 50%;
19+
}
20+
100% {
21+
background-position: 0% 50%;
22+
}
23+
}
24+
25+
.converter {
26+
text-align: center;
27+
border: 1px solid #ccc;
28+
padding: 20px;
29+
border-radius: 8px;
30+
background: rgba(255, 255, 255, 0.9);
31+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
32+
}
33+
34+
.input-container {
35+
margin: 10px 0;
36+
}
37+
38+
input, select, button {
39+
padding: 10px;
40+
margin: 5px;
41+
border: 1px solid #ddd;
42+
border-radius: 4px;
43+
box-sizing: border-box;
44+
}
45+
46+
button {
47+
background: linear-gradient(45deg, #3498db, #8e44ad, #e74c3c, #f39c12);
48+
color: white;
49+
cursor: pointer;
50+
border: none;
51+
border-radius: 4px;
52+
padding: 10px 20px;
53+
font-size: 1em;
54+
transition: background 0.3s ease;
55+
}
56+
57+
button:hover {
58+
background: linear-gradient(45deg, #f39c12, #e74c3c, #8e44ad, #3498db);
59+
}
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>EncrypterDecrypterApp</title>
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<h2>EncrypterDecrypterApp</h2>
14+
<textarea id="input" placeholder="Enter your text here..."></textarea>
15+
16+
<div class="buttons">
17+
<button onclick="convert('encode', 'uri')">URL Encode</button>
18+
<button onclick="convert('decode', 'uri')">URL Decode</button>
19+
<button onclick="convert('encode', 'base64')">Base64 Encode</button>
20+
<button onclick="convert('decode', 'base64')">Base64 Decode</button>
21+
<button onclick="convert('encode', 'html')">HTML Entity Encode</button>
22+
<button onclick="convert('decode', 'html')">HTML Entity Decode</button>
23+
<button onclick="convert('encode', 'unicode')">Unicode Escape</button>
24+
<button onclick="convert('decode', 'unicode')">Unicode Unescape</button>
25+
<button onclick="convert('encode', 'hex')">Hex Encode</button>
26+
<button onclick="convert('decode', 'hex')">Hex Decode</button>
27+
<button onclick="convert('encode', 'binary')">Binary Encode</button>
28+
<button onclick="convert('decode', 'binary')">Binary Decode</button>
29+
</div>
30+
31+
<textarea id="output" readonly placeholder="Output will appear here..."></textarea>
32+
<div class="author">
33+
Made by M3hank
34+
</div>
35+
</body>
36+
</html>
37+
</div>
38+
<script src="scripts.js"></script>
39+
</body>
40+
41+
</html>
Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* EncrypterDecrypterApp Script
3+
* Author: M3hank
4+
*/
5+
6+
function convert(type, method) {
7+
const input = document.getElementById('input').value;
8+
let output = '';
9+
10+
switch (method) {
11+
case 'uri':
12+
output = (type === 'encode') ? encodeURIComponent(input) : decodeURIComponent(input);
13+
break;
14+
case 'base64':
15+
output = (type === 'encode') ? btoa(unescape(encodeURIComponent(input))) : decodeURIComponent(escape(atob(input)));
16+
break;
17+
case 'html':
18+
const textArea = document.createElement('textarea');
19+
if (type === 'encode') {
20+
textArea.innerText = input;
21+
output = textArea.innerHTML;
22+
} else {
23+
textArea.innerHTML = input;
24+
output = textArea.value;
25+
}
26+
break;
27+
case 'unicode':
28+
output = (type === 'encode') ? input.split('').map(char => '\\u' + char.charCodeAt(0).toString(16).padStart(4, '0')).join('') : input.replace(/\\u([\d\w]{4})/gi, (match, grp) => String.fromCharCode(parseInt(grp, 16)));
29+
break;
30+
case 'hex':
31+
output = (type === 'encode') ? Array.from(input).map(ch => ch.charCodeAt(0).toString(16)).join('') : String.fromCharCode(...input.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
32+
break;
33+
case 'binary':
34+
output = (type === 'encode') ? Array.from(input).map(ch => ch.charCodeAt(0).toString(2).padStart(8, '0')).join('') : String.fromCharCode(...input.match(/.{1,8}/g).map(byte => parseInt(byte, 2)));
35+
break;
36+
}
37+
38+
document.getElementById('output').value = output;
39+
}

0 commit comments

Comments
 (0)