0% found this document useful (0 votes)

3 views20 pages

Text Fancy

The document is an HTML template for a web application that allows users to generate and copy decorative Arabic text and emojis. It includes various styled buttons, an emoji section, and animations to enhance user interaction. The layout is designed with a gradient background and responsive elements using Tailwind CSS for styling.

Uploaded by

princefahd2005

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

3 views20 pages

Text Fancy

Uploaded by

princefahd2005

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

You are on page 1/ 20

<!

DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>‫<مزخرف النصوص العربية‬/title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Tajawal', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.copy-animation {
animation: pulse 1s;
}
@keyframes pulse {
0% { background-color: #4338ca; }
50% { background-color: #6366f1; }
100% { background-color: #4338ca; }
}
.output-box {
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
padding: 12px;
margin-bottom: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: relative;
transition: all 0.3s ease;
border: 1px solid rgba(79, 70, 229, 0.2);
}
.output-box:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
border-color: rgba(79, 70, 229, 0.5);
}
.copy-btn {
position: absolute;
right: 8px;
top: 8px;
background: rgba(79, 70, 229, 0.1);
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.2s ease;
}
.copy-btn:hover {
background: rgba(79, 70, 229, 0.2);
}
.copy-btn:active {
transform: scale(0.95);
}
.style-label {
position: absolute;
left: 8px;
top: 8px;
background: linear-gradient(135deg, #4f46e5, #6366f1);
color: white;
border-radius: 10px;
padding: 2px 8px;
font-size: 0.7rem;
font-weight: 600;
}
.emoji-btn {
transition: all 0.3s ease;
border-radius: 12px;
overflow: hidden;
position: relative;
user-select: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.emoji-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.emoji-btn:hover::before {
opacity: 1;
}
.emoji-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.emoji-btn:active {
transform: scale(0.95);
}
.emoji-btn.copied {
animation: copied-animation 0.5s ease;
}
@keyframes copied-animation {
0% { background-color: rgba(79, 70, 229, 0.2); }
50% { background-color: rgba(79, 70, 229, 0.4); }
100% { background-color: rgba(79, 70, 229, 0.2); }
}
.main-container {
background: rgba(255, 255, 255, 0.9);
border-radius: 24px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.header {
background: linear-gradient(135deg, #4f46e5, #6366f1);
padding: 20px;
text-align: center;
position: relative;
}
.header h1 {
font-size: 2rem;
font-weight: 700;
color: white;
margin-bottom: 5px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header p {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
.floating {
animation: float 3s ease-in-out infinite;
}
.input-field {
background: rgba(255, 255, 255, 0.9);
border: 2px solid rgba(79, 70, 229, 0.3);
border-radius: 12px;
padding: 12px;
font-size: 1.2rem;
transition: all 0.3s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.input-field:focus {
border-color: rgba(79, 70, 229, 0.7);
box-shadow: 0 4px 10px rgba(79, 70, 229, 0.1);
outline: none;
}
.clear-btn {
background: linear-gradient(135deg, #f43f5e, #e11d48);
color: white;
border-radius: 10px;
padding: 10px 16px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.clear-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.clear-btn:active {
transform: translateY(1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.emoji-section {
background: rgba(255, 255, 255, 0.5);
border-radius: 16px;
padding: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
display: none;
max-height: 400px;
overflow-y: auto;
}
.emoji-section.active {
display: block;
}
.emoji-section h3 {
font-size: 1.1rem;
font-weight: 600;
color: #4f46e5;
margin-bottom: 10px;
text-align: center;
}
.emoji-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.emoji-category {
margin-bottom: 15px;
border-bottom: 1px solid rgba(79, 70, 229, 0.2);
padding-bottom: 10px;
}
.emoji-category:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.7rem;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.emoji-btn:hover .tooltip {
opacity: 1;
}
.emoji-toggle-btn {
background: linear-gradient(135deg, #4f46e5, #6366f1);
color: white;
border-radius: 10px;
padding: 10px 16px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.emoji-toggle-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.emoji-toggle-btn:active {
transform: translateY(1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="p-4 md:p-8">
<div class="max-w-4xl mx-auto main-container">
<div class="header">
<h1 class="floating">‫<مزخرف النصوص العربية‬/h1>
<p>‫<اكتب نصك واحصل على تنسيقات مزخرفة متعددة‬/p>
</div>

<div class="p-6">

<div class="flex justify-between mb-4">
<button id="emojiToggleBtn" class="emoji-toggle-btn">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0
11-18 0 9 9 0 0118 0z" />
</svg>
‫عرض الرموز‬
</button>
<button id="clearAllBtn" class="clear-btn flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-
1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
‫مسح الكل‬
</button>
</div>

<div id="emojiSection" class="emoji-section">
<h3>‫<الرموز والإيموجيات‬/h3>
<p class="text-center text-sm text-gray-600 mb-4"> ‫اضغط ضغطة مطولة‬
‫<لنسخ الرمز‬/p>

<div class="bg-gradient-to-r from-indigo-50 to-purple-50 p-4 text-center

text-indigo-800 text-sm">
2023 © ‫مزخرف النصوص العربية‬
</div>
</div>

// Output fields
const output1 = document.getElementById('output-1');
const output2 = document.getElementById('output-2');
const output3 = document.getElementById('output-3');
const output4 = document.getElementById('output-4');
const output5 = document.getElementById('output-5');
const output6 = document.getElementById('output-6');

// Toggle emoji section

emojiToggleBtn.addEventListener('click', function() {
emojiSection.classList.toggle('active');
if (emojiSection.classList.contains('active')) {
emojiToggleBtn.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
‫إخفاء الرموز‬
`;
} else {
emojiToggleBtn.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0
11-18 0 9 9 0 0118 0z" />
</svg>
‫عرض الرموز‬
`;
}
});

// Define the decoration styles

// Function to update all outputs

function updateOutputs() {
const text = inputField.value;

// Update each output with its style

output1.textContent = applyStyle(text, 1);
output2.textContent = applyStyle(text, 2);
output3.textContent = applyStyle(text, 3);
output4.textContent = applyStyle(text, 4);
output5.textContent = applyStyle(text, 5);
output6.textContent = applyStyle(text, 6);
}

// Apply a specific style to text

function applyStyle(text, styleNumber) {
const style = decorationStyles[styleNumber];
let result = '';

for (let i = 0; i < text.length; i++) {

const char = text[i];
result += style[char] || char;
}

return result;
}

// Add click event to emoji buttons

emojiButtons.forEach(btn => {
// Normal click to add to input
btn.addEventListener('click', function() {
const emoji = this.getAttribute('data-emoji');
inputField.value += emoji;
updateOutputs();

// Visual feedback
this.classList.add('bg-indigo-100');
setTimeout(() => {
this.classList.remove('bg-indigo-100');
}, 200);
});

// Long press to copy

let pressTimer;

btn.addEventListener('mousedown', function() {
const emoji = this.getAttribute('data-emoji');
pressTimer = window.setTimeout(() => {
copyToClipboard(emoji);

// Visual feedback for copy

this.classList.add('copied');
setTimeout(() => {
this.classList.remove('copied');
}, 500);
}, 500);
});

btn.addEventListener('mouseup', function() {
clearTimeout(pressTimer);
});

btn.addEventListener('mouseleave', function() {
clearTimeout(pressTimer);
});

// Touch events for mobile

btn.addEventListener('touchstart', function(e) {
const emoji = this.getAttribute('data-emoji');
pressTimer = window.setTimeout(() => {
copyToClipboard(emoji);

// Visual feedback for copy

this.classList.add('copied');
setTimeout(() => {
this.classList.remove('copied');
}, 500);
e.preventDefault(); // Prevent default touch behavior
}, 500);
});

btn.addEventListener('touchend', function() {
clearTimeout(pressTimer);
});

btn.addEventListener('touchmove', function() {
clearTimeout(pressTimer);
});
});

// Copy to clipboard function

function copyToClipboard(text) {
// Create a temporary textarea to copy from
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);

// Show a toast or notification

showToast('‫تم نسخ‬: ' + text);
}

// Simple toast notification

function showToast(message) {
// Check if a toast already exists and remove it
const existingToast = document.querySelector('.toast-
notification');
if (existingToast) {
document.body.removeChild(existingToast);
}

// Create and show new toast

const toast = document.createElement('div');
toast.className = 'toast-notification';
toast.textContent = message;
toast.style.position = 'fixed';
toast.style.bottom = '20px';
toast.style.left = '50%';
toast.style.transform = 'translateX(-50%)';
toast.style.backgroundColor = 'rgba(79, 70, 229, 0.9)';
toast.style.color = 'white';
toast.style.padding = '10px 20px';
toast.style.borderRadius = '8px';
toast.style.zIndex = '1000';
toast.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';

document.body.appendChild(toast);

// Remove toast after 2 seconds

setTimeout(() => {
if (document.body.contains(toast)) {
document.body.removeChild(toast);
}
}, 2000);
}

// Copy buttons
copyButtons.forEach(btn => {
btn.addEventListener('click', function() {
const index = parseInt(this.dataset.index);
let textToCopy = '';

switch(index) {
case 0: textToCopy = output1.textContent; break;
case 1: textToCopy = output2.textContent; break;
case 2: textToCopy = output3.textContent; break;
case 3: textToCopy = output4.textContent; break;
case 4: textToCopy = output5.textContent; break;
case 5: textToCopy = output6.textContent; break;
}

// Copy to clipboard
copyToClipboard(textToCopy);

// Visual feedback
this.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
`;

setTimeout(() => {
this.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0
002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0
012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
</svg>
`;
}, 2000);
});
});

// Clear All button

clearAllBtn.addEventListener('click', function() {
inputField.value = '';
updateOutputs();

// Visual feedback
this.classList.add('bg-red-700');
setTimeout(() => {
this.classList.remove('bg-red-700');
}, 200);
});

// Input field event

inputField.addEventListener('input', updateOutputs);

// Initialize with empty outputs

updateOutputs();
});
</script>
</body>
</html>

HTML
No ratings yet
HTML
24 pages
Happy Valentine's Day Script (Blogger - Based)
No ratings yet
Happy Valentine's Day Script (Blogger - Based)
20 pages
Happy New Year Script.2
No ratings yet
Happy New Year Script.2
21 pages
Documento (7) Código Gold
No ratings yet
Documento (7) Código Gold
132 pages
Code Games صفحة الهبوط
No ratings yet
Code Games صفحة الهبوط
46 pages
APP Linux
No ratings yet
APP Linux
113 pages
Text
No ratings yet
Text
115 pages
Branch Bound Knapsack12
No ratings yet
Branch Bound Knapsack12
5 pages
Documento (8) RPG
No ratings yet
Documento (8) RPG
78 pages
Gös 2
No ratings yet
Gös 2
51 pages
Index
No ratings yet
Index
60 pages
Create Canva Design
No ratings yet
Create Canva Design
27 pages
New One
No ratings yet
New One
51 pages
MÃ NGUỒN V1 .TX - HTML
No ratings yet
MÃ NGUỒN V1 .TX - HTML
49 pages
Blackbox Output Code BPQKRWT7H3
No ratings yet
Blackbox Output Code BPQKRWT7H3
21 pages
Htmlgamedemojualancoin
No ratings yet
Htmlgamedemojualancoin
17 pages
Document
No ratings yet
Document
24 pages
Pillar 1
No ratings yet
Pillar 1
26 pages
Message
No ratings yet
Message
27 pages
Have You Eaten A Good Morning Ma For The Course Registration
No ratings yet
Have You Eaten A Good Morning Ma For The Course Registration
19 pages
Code
No ratings yet
Code
18 pages
People Who Are in The Same Area As A Working On Earlier
No ratings yet
People Who Are in The Same Area As A Working On Earlier
20 pages
Index
No ratings yet
Index
15 pages
Script
No ratings yet
Script
16 pages
Wifi
No ratings yet
Wifi
20 pages
VF
No ratings yet
VF
8 pages
Cahtpage
No ratings yet
Cahtpage
13 pages
Message
No ratings yet
Message
33 pages
Zeknardv 1
No ratings yet
Zeknardv 1
16 pages
Bot
No ratings yet
Bot
11 pages
Index HTML
No ratings yet
Index HTML
14 pages
Text
No ratings yet
Text
14 pages
4panel DNS Vip 100%
No ratings yet
4panel DNS Vip 100%
10 pages
File
No ratings yet
File
11 pages
First Try
No ratings yet
First Try
9 pages
PDF1
No ratings yet
PDF1
12 pages
Whiteboard Css
No ratings yet
Whiteboard Css
12 pages
Indexhtml
No ratings yet
Indexhtml
13 pages
Index
No ratings yet
Index
9 pages
4969dcc8-6334-4f74-bd22-78596a4c6ae0
No ratings yet
4969dcc8-6334-4f74-bd22-78596a4c6ae0
18 pages
WALMART GIFT CARD Landing Page
No ratings yet
WALMART GIFT CARD Landing Page
11 pages
Message
No ratings yet
Message
15 pages
!doctype
No ratings yet
!doctype
9 pages
19l 4teaxt
No ratings yet
19l 4teaxt
12 pages
Style
No ratings yet
Style
9 pages
Seori Stellular Code
No ratings yet
Seori Stellular Code
2 pages
Lovely Letter - HTML 4
No ratings yet
Lovely Letter - HTML 4
7 pages
Rulesnew 3
No ratings yet
Rulesnew 3
7 pages
Doctype HTML
No ratings yet
Doctype HTML
7 pages
Valentine HTML
No ratings yet
Valentine HTML
5 pages
Lovely Letter - HTML 5
No ratings yet
Lovely Letter - HTML 5
7 pages
Comprovante PDF
No ratings yet
Comprovante PDF
4 pages
CSS
No ratings yet
CSS
6 pages
Css
No ratings yet
Css
5 pages
redirectToURL Chrome Tiktok 1
No ratings yet
redirectToURL Chrome Tiktok 1
6 pages
Index HTML
No ratings yet
Index HTML
3 pages
Chat Project
No ratings yet
Chat Project
6 pages
Angular Shopping Store: From Scratch to Successful Payment
From Everand
Angular Shopping Store: From Scratch to Successful Payment
Abdelfattah Ragab
No ratings yet
Comprehensive CSS3 Command List, With Descriptions And Typical Mark Up
From Everand
Comprehensive CSS3 Command List, With Descriptions And Typical Mark Up
Online Trainees
No ratings yet
Digital and Microprocessor Techniques V10
From Everand
Digital and Microprocessor Techniques V10
Clive W. Humphris
No ratings yet

Text Fancy

Uploaded by

Text Fancy

Uploaded by

<!

<div class="bg-gradient-to-r from-indigo-50 to-purple-50 p-4 text-center

// Toggle emoji section

// Define the decoration styles

// Function to update all outputs

// Update each output with its style

// Apply a specific style to text

for (let i = 0; i < text.length; i++) {

// Add click event to emoji buttons

// Long press to copy

// Visual feedback for copy

// Touch events for mobile

// Visual feedback for copy

// Copy to clipboard function

// Show a toast or notification

// Simple toast notification

// Create and show new toast

// Remove toast after 2 seconds

// Clear All button

// Input field event

// Initialize with empty outputs

You might also like