Skip to content

Commit a6655bb

Browse files
ytube-downloaderytube-downloader
authored
Merge pull request #1 from ytube-downloader/dev
Update
2 parents 21dc735 + 66e7c01 commit a6655bb

File tree

3 files changed

+492
-101
lines changed

3 files changed

+492
-101
lines changed

‎resources/views/downloaders/1080p.blade.php‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
@extends('layouts.app')
2+
3+
@section('title', '1080p Video Downloader - Full HD Video Downloads')
4+
@section('description', 'Download videos in crisp Full HD 1080p resolution. Fast, high-quality video downloading from popular platforms.')
5+
6+
@section('content')
7+
<div class="container mx-auto px-5 py-12">
8+
<!-- Page Header -->
9+
<div class="text-center mb-16">
10+
<h1 class="text-5xl font-bold text-gray-900 dark:text-white mb-4">
11+
{{ $pageData['title'] }}
12+
</h1>
13+
<p class="text-xl text-gray-600 dark:text-gray-300 mb-2">
14+
{{ $pageData['subtitle'] }}
15+
</p>
16+
<p class="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">
17+
{{ $pageData['description'] }}
18+
</p>
19+
</div>
20+
21+
<!-- 1080p Download Interface -->
22+
<div class="max-w-4xl mx-auto mb-16">
23+
<div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg overflow-hidden">
24+
<!-- HD Header -->
25+
<div class="bg-gradient-to-r from-blue-500 to-indigo-600 p-8 text-white text-center">
26+
<div class="flex items-center justify-center space-x-4 mb-4">
27+
<div class="bg-white/20 rounded-full p-3">
28+
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
29+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
30+
</svg>
31+
</div>
32+
<div class="text-4xl font-bold">1080p</div>
33+
<div class="bg-white/20 rounded-full px-4 py-2 text-sm font-semibold">FULL HD</div>
34+
</div>
35+
<h2 class="text-2xl font-bold mb-2">Full HD Video Downloads</h2>
36+
<p class="text-lg opacity-90">Crystal clear quality for every screen</p>
37+
</div>
38+
39+
<div class="p-8" x-data="hdDownloader()">
40+
<!-- URL Input -->
41+
<div class="mb-8">
42+
<label class="block text-sm font-medium text-gray-900 dark:text-white mb-4">
43+
Video URL
44+
</label>
45+
<div class="url-input p-1">
46+
<div class="flex">
47+
<input
48+
x-model="videoUrl"
49+
type="url"
50+
placeholder="Paste video URL for 1080p download..."
51+
class="flex-1 px-6 py-4 text-lg border-0 focus:ring-2 focus:ring-blue-500 focus:outline-none text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
52+
@input="validateUrl()"
53+
>
54+
<button
55+
@click="analyzeVideo()"
56+
:disabled="!isValidUrl || loading"
57+
class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white px-8 py-4 font-semibold transition-all duration-300 disabled:cursor-not-allowed rounded-r-lg"
58+
>
59+
<span x-show="!loading">Analyze</span>
60+
<span x-show="loading">Loading...</span>
61+
</button>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<!-- Video Quality Preview -->
67+
<div x-show="showOptions" class="mb-8">
68+
<div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-lg p-6">
69+
<div class="grid md:grid-cols-2 gap-6">
70+
<!-- Video Info -->
71+
<div>
72+
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Video Information</h3>
73+
<div class="space-y-3">
74+
<div class="flex justify-between">
75+
<span class="text-sm text-gray-600 dark:text-gray-400">Resolution:</span>
76+
<span class="text-sm font-medium text-gray-900 dark:text-white">1920×1080</span>
77+
</div>
78+
<div class="flex justify-between">
79+
<span class="text-sm text-gray-600 dark:text-gray-400">Quality:</span>
80+
<span class="text-sm font-medium text-blue-600 dark:text-blue-400">Full HD</span>
81+
</div>
82+
<div class="flex justify-between">
83+
<span class="text-sm text-gray-600 dark:text-gray-400">Bitrate:</span>
84+
<span class="text-sm font-medium text-gray-900 dark:text-white" x-text="selectedBitrate + ' Mbps'"></span>
85+
</div>
86+
<div class="flex justify-between">
87+
<span class="text-sm text-gray-600 dark:text-gray-400">Frame Rate:</span>
88+
<span class="text-sm font-medium text-gray-900 dark:text-white" x-text="selectedFrameRate + ' fps'"></span>
89+
</div>
90+
</div>
91+
</div>
92+
93+
<!-- Download Options -->
94+
<div>
95+
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Download Options</h3>
96+
<div class="space-y-4">
97+
<div>
98+
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Format</label>
99+
<select x-model="selectedFormat" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
100+
<option value="mp4">MP4 (Recommended)</option>
101+
<option value="webm">WEBM (Web Optimized)</option>
102+
<option value="avi">AVI (Compatible)</option>
103+
</select>
104+
</div>
105+
106+
<div>
107+
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Bitrate</label>
108+
<select x-model="selectedBitrate" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
109+
<option value="4">4 Mbps (Standard)</option>
110+
<option value="6">6 Mbps (High)</option>
111+
<option value="8">8 Mbps (Premium)</option>
112+
</select>
113+
</div>
114+
115+
<div>
116+
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Frame Rate</label>
117+
<select x-model="selectedFrameRate" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white">
118+
<option value="30">30 fps (Standard)</option>
119+
<option value="60">60 fps (Smooth)</option>
120+
</select>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
126+
<button
127+
@click="startHDDownload()"
128+
:disabled="downloading"
129+
class="w-full mt-6 bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 disabled:from-gray-400 disabled:to-gray-500 text-white py-4 rounded-lg text-lg font-semibold transition-all duration-300 disabled:cursor-not-allowed"
130+
>
131+
<span x-show="!downloading">Download in 1080p HD</span>
132+
<span x-show="downloading">Preparing HD Download...</span>
133+
</button>
134+
</div>
135+
</div>
136+
137+
<!-- Download Progress -->
138+
<div x-show="downloading" class="mb-8">
139+
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/30 dark:to-indigo-900/30 border border-blue-200 dark:border-blue-700 rounded-lg p-6">
140+
<div class="flex items-center justify-between mb-3">
141+
<span class="text-sm text-gray-900 dark:text-white font-medium">Processing Full HD video...</span>
142+
<span class="text-sm text-gray-600 dark:text-gray-400" x-text="progress + '%'"></span>
143+
</div>
144+
<div class="w-full bg-white dark:bg-slate-700 rounded-full h-3 mb-3">
145+
<div class="bg-gradient-to-r from-blue-500 to-indigo-600 h-3 rounded-full transition-all duration-500" :style="`width: ${progress}%`"></div>
146+
</div>
147+
<div class="text-xs text-gray-600 dark:text-gray-400">
148+
<div>Quality: 1080p • <span x-text="selectedBitrate"></span>Mbps • <span x-text="selectedFrameRate"></span>fps</div>
149+
<div>Format: <span x-text="selectedFormat.toUpperCase()"></span></div>
150+
</div>
151+
</div>
152+
</div>
153+
</div>
154+
</div>
155+
</div>
156+
157+
<!-- 1080p Features -->
158+
<div class="grid md:grid-cols-3 gap-8 mb-16">
159+
@foreach($pageData['features'] as $feature)
160+
<div class="text-center p-8 bg-white dark:bg-slate-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-slate-700/50 transition-all duration-300 hover:scale-105">
161+
<div class="w-20 h-20 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
162+
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
163+
@switch($feature)
164+
@case('Full HD quality')
165+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
166+
@break
167+
@case('Fast downloading')
168+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
169+
@break
170+
@case('Multiple format support')
171+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
172+
@break
173+
@endswitch
174+
</svg>
175+
</div>
176+
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">{{ $feature }}</h3>
177+
<p class="text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
178+
@switch($feature)
179+
@case('Full HD quality')
180+
Experience perfect 1920×1080 resolution with crisp detail and vibrant colors for any screen size.
181+
@break
182+
@case('Fast downloading')
183+
Optimized servers and compression algorithms ensure the fastest possible 1080p download speeds.
184+
@break
185+
@case('Multiple format support')
186+
Choose from MP4, WEBM, and AVI formats to ensure compatibility with all your devices and players.
187+
@break
188+
@endswitch
189+
</p>
190+
</div>
191+
@endforeach
192+
</div>
193+
194+
<!-- Quality Comparison -->
195+
<div class="bg-white dark:bg-slate-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-8">
196+
<h2 class="text-3xl font-bold text-gray-900 dark:text-white text-center mb-8">Why Choose 1080p?</h2>
197+
<div class="grid md:grid-cols-3 gap-6 text-center">
198+
<div class="p-6 bg-gray-50 dark:bg-slate-700 rounded-lg">
199+
<div class="text-3xl font-bold text-gray-400 dark:text-gray-500 mb-2">720p</div>
200+
<div class="text-sm text-gray-600 dark:text-gray-400">1280×720</div>
201+
<div class="text-sm text-gray-500 dark:text-gray-500 mt-2">Standard HD</div>
202+
</div>
203+
<div class="p-6 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-lg transform scale-105">
204+
<div class="text-3xl font-bold mb-2">1080p</div>
205+
<div class="text-sm opacity-90">1920×1080</div>
206+
<div class="text-sm opacity-90 mt-2">Full HD ⭐</div>
207+
</div>
208+
<div class="p-6 bg-gray-50 dark:bg-slate-700 rounded-lg">
209+
<div class="text-3xl font-bold text-gray-600 dark:text-gray-400 mb-2">4K</div>
210+
<div class="text-sm text-gray-600 dark:text-gray-400">3840×2160</div>
211+
<div class="text-sm text-gray-500 dark:text-gray-500 mt-2">Ultra HD</div>
212+
</div>
213+
</div>
214+
<div class="mt-6 text-center">
215+
<p class="text-gray-600 dark:text-gray-400">1080p offers the perfect balance of quality and file size - ideal for most devices and bandwidth requirements.</p>
216+
</div>
217+
</div>
218+
</div>
219+
220+
<script>
221+
function hdDownloader() {
222+
return {
223+
videoUrl: '',
224+
selectedFormat: 'mp4',
225+
selectedBitrate: '6',
226+
selectedFrameRate: '30',
227+
isValidUrl: false,
228+
showOptions: false,
229+
loading: false,
230+
downloading: false,
231+
progress: 0,
232+
233+
validateUrl() {
234+
const urlPattern = /^https?:\/\/.+/;
235+
this.isValidUrl = urlPattern.test(this.videoUrl);
236+
},
237+
238+
async analyzeVideo() {
239+
if (!this.isValidUrl) return;
240+
241+
this.loading = true;
242+
243+
// Simulate analysis
244+
setTimeout(() => {
245+
this.showOptions = true;
246+
this.loading = false;
247+
}, 1500);
248+
},
249+
250+
async startHDDownload() {
251+
this.downloading = true;
252+
this.progress = 0;
253+
254+
const interval = setInterval(() => {
255+
this.progress += Math.random() * 8;
256+
if (this.progress >= 100) {
257+
this.progress = 100;
258+
this.downloading = false;
259+
clearInterval(interval);
260+
alert(`1080p HD video download completed!\nFormat: ${this.selectedFormat.toUpperCase()}\nQuality: ${this.selectedBitrate}Mbps @ ${this.selectedFrameRate}fps`);
261+
}
262+
}, 400);
263+
}
264+
}
265+
}
266+
</script>
267+
@endsection

0 commit comments

Comments
 (0)