Skip to content

Commit 0a1671f

Browse files
PrashantUnityPrashantUnity
committed
Upper Case
1 parent 8d45d9d commit 0a1671f

File tree

2 files changed

+424
-65
lines changed

2 files changed

+424
-65
lines changed

‎TextHub/Pages/Uppercase.razor‎

Lines changed: 64 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -10,76 +10,77 @@
1010

1111
<DynamicJsonLd JsonLdContent="@_jsonLdContent" Id="uppercase-jsonld" />
1212

13-
<div class="min-h-screen flex flex-col">
14-
<main class="flex-1 py-8 px-4">
15-
<div class="container mx-auto max-w-4xl">
16-
<!-- Page Header -->
17-
<div class="text-center mb-8">
18-
<h1 class="text-4xl font-bold mb-4">Uppercase Converter</h1>
19-
<p class="text-xl text-muted-foreground">Convert any text to UPPERCASE instantly</p>
20-
</div>
21-
22-
<!-- Tool Interface -->
23-
<div class="bg-card rounded-lg border p-6 mb-8">
24-
<div class="space-y-4">
25-
<div>
26-
<label class="block text-sm font-medium mb-2">Enter your text:</label>
27-
<textarea
28-
@bind="_inputText"
29-
@oninput="ConvertToUppercase"
30-
class="w-full h-32 p-3 border rounded-md resize-none"
31-
placeholder="Type or paste your text here..."></textarea>
32-
</div>
33-
34-
<div class="flex gap-2">
35-
<button @onclick="ConvertToUppercase"
36-
class="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary-hover">
37-
Convert to UPPERCASE
38-
</button>
39-
<button @onclick="ClearText"
40-
class="px-4 py-2 border border-border rounded-md hover:bg-muted">
41-
Clear
42-
</button>
43-
<button @onclick="CopyResult"
44-
class="px-4 py-2 border border-border rounded-md hover:bg-muted">
45-
Copy Result
46-
</button>
47-
</div>
48-
49-
<div>
50-
<label class="block text-sm font-medium mb-2">Result:</label>
51-
<textarea
52-
@bind="_outputText"
53-
class="w-full h-32 p-3 border rounded-md resize-none bg-muted"
54-
readonly></textarea>
55-
</div>
13+
<main class="flex-1">
14+
<div class="container mx-auto px-4 py-8 md:py-12 animate-fade-in">
15+
<div class="max-w-4xl mx-auto">
16+
<div class="text-center mb-8 md:mb-10">
17+
<div class="inline-flex items-center justify-center p-2.5 sm:p-3 bg-primary/10 rounded-lg mb-3 md:mb-4">
18+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-type w-6 h-6 sm:w-8 sm:h-8 text-primary">
19+
<polyline points="4 7 4 4 20 4 20 7"></polyline>
20+
<line x1="9" x2="15" y1="20" y2="20"></line>
21+
<line x1="12" x2="12" y1="4" y2="20"></line>
22+
</svg>
5623
</div>
24+
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-3 md:mb-4">
25+
<span class="text-gradient">Uppercase Converter</span>
26+
</h1>
27+
<p class="text-base sm:text-lg text-muted-foreground px-4">Convert any text to UPPERCASE letters instantly</p>
5728
</div>
58-
59-
<!-- Tool Information -->
60-
<div class="grid md:grid-cols-2 gap-6">
61-
<div class="bg-card rounded-lg border p-6">
62-
<h3 class="text-lg font-semibold mb-3">How to use:</h3>
63-
<ol class="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
64-
<li>Enter or paste your text in the input field</li>
65-
<li>Click "Convert to UPPERCASE" or the text will convert automatically</li>
66-
<li>Copy the result using the "Copy Result" button</li>
67-
</ol>
29+
30+
<div class="grid gap-4 md:gap-6">
31+
<div class="animate-fade-in" style="animation-delay: 100ms;">
32+
<label class="block text-sm font-medium mb-2">Input Text</label>
33+
<textarea
34+
@bind="_inputText"
35+
@oninput="ConvertToUppercase"
36+
placeholder="Enter or paste your text here..."
37+
class="input-area min-h-[150px] sm:min-h-[200px] text-sm sm:text-base"></textarea>
6838
</div>
6939

70-
<div class="bg-card rounded-lg border p-6">
71-
<h3 class="text-lg font-semibold mb-3">Features:</h3>
72-
<ul class="list-disc list-inside space-y-2 text-sm text-muted-foreground">
73-
<li>Instant conversion to uppercase</li>
74-
<li>Preserves line breaks and formatting</li>
75-
<li>No character limit</li>
76-
<li>Works with any language</li>
77-
</ul>
40+
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center animate-fade-in" style="animation-delay: 200ms;">
41+
<button @onclick="ConvertToUppercase" class="btn-primary w-full sm:w-auto text-sm sm:text-base">Convert to UPPERCASE</button>
42+
<button @onclick="ClearText" class="btn-secondary w-full sm:w-auto text-sm sm:text-base">
43+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw w-4 h-4 mr-2 inline">
44+
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
45+
<path d="M3 3v5h5"></path>
46+
</svg>
47+
Reset
48+
</button>
7849
</div>
50+
51+
@if (!string.IsNullOrEmpty(_outputText))
52+
{
53+
<div class="animate-fade-in" style="animation-delay: 300ms;">
54+
<label class="block text-sm font-medium mb-2">Result</label>
55+
<div class="relative">
56+
<textarea
57+
@bind="_outputText"
58+
class="input-area min-h-[150px] sm:min-h-[200px] text-sm sm:text-base bg-muted"
59+
readonly></textarea>
60+
<button @onclick="CopyResult"
61+
class="absolute top-2 right-2 p-2 bg-primary/10 hover:bg-primary/20 rounded-md transition-colors">
62+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy">
63+
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
64+
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
65+
</svg>
66+
</button>
67+
</div>
68+
</div>
69+
}
70+
</div>
71+
72+
<div class="mt-8 md:mt-12 p-4 md:p-6 bg-muted/30 rounded-lg animate-fade-in" style="animation-delay: 300ms;">
73+
<h2 class="text-lg md:text-xl font-semibold mb-2 md:mb-3">How it works</h2>
74+
<ul class="space-y-1.5 md:space-y-2 text-sm md:text-base text-muted-foreground">
75+
<li>• Simply paste or type your text in the input box</li>
76+
<li>• Click "Convert to UPPERCASE" to transform your text</li>
77+
<li>• Copy the result to your clipboard with one click</li>
78+
<li>• Perfect for headings, titles, or emphasis</li>
79+
</ul>
7980
</div>
8081
</div>
81-
</main>
82-
</div>
82+
</div>
83+
</main>
8384

8485
@code {
8586
private string _inputText = string.Empty;

0 commit comments

Comments
 (0)