Hugging Face's logo

Spaces:
Hass13
/
anati9
Running

App Files Community
anati9
File size: 9,391 Bytes 
112190b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
 
<!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>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
        body {
            font-family: 'Tajawal', sans-serif;
        }
        .floating-btn {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        .feature-card:hover {
            transform: translateY(-5px);
        }
    </style>
</head>
<body class="bg-gradient-to-b from-blue-50 to-purple-50 min-h-screen">
    <div class="container mx-auto px-4 py-12">
        <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="md:flex">
                <div class="md:w-1/2 bg-gradient-to-r from-blue-500 to-purple-600 p-8 flex items-center justify-center">
                    <div class="text-center">
                        <h1 class="text-white text-4xl font-bold mb-4">الناطق</h1>
                        <p class="text-blue-100 text-xl">تحويل النص إلى كلام بجودة احترافية</p>
                    </div>
                </div>
                <div class="md:w-1/2 p-8">
                    <h2 class="text-2xl font-bold text-gray-800 mb-4">خصائص متقدمة</h2>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <div class="w-6 h-6 bg-blue-500 rounded-full"></div>
                            </div>
                            <p class="mr-3 text-gray-700 text-right">تحكم في نبرة الصوت وسرعته</p>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <div class="w-6 h-6 bg-blue-500 rounded-full"></div>
                            </div>
                            <p class="mr-3 text-gray-700 text-right">تعديل الاحاسيس والمشاعر في القراءة</p>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <div class="w-6 h-6 bg-blue-500 rounded-full"></div>
                            </div>
                            <p class="mr-3 text-gray-700 text-right">جودة صوت عالية للقراءة الواضحة</p>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <div class="w-6 h-6 bg-blue-500 rounded-full"></div>
                            </div>
                            <p class="mr-3 text-gray-700 text-right">مكتبة صوتية متنوعة باللهجات العربية</p>
                        </div>
                    </div>
                    <button class="mt-8 floating-btn bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-bold py-3 px-6 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:scale-105">
                        ابدأ الاستخدام المجاني
                    </button>
                </div>
            </div>
        </div>

        <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300 ease-in-out">
                <h3 class="text-xl font-bold text-gray-800 mb-3 text-right">التحكم في النبرة</h3>
                <p class="text-gray-600 text-right">اضبط نبرة الصوت حسب السياق لتتناسب مع المحتوى المطلوب.</p>
            </div>
            <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300 ease-in-out">
                <h3 class="text-xl font-bold text-gray-800 mb-3 text-right">تعديل السرعة</h3>
                <p class="text-gray-600 text-right">تحكم في سرعة القراءة لتتناسب مع احتياجاتك التعليمية أو الترفيهية.</p>
            </div>
            <div class="feature-card bg-white p-6 rounded-xl shadow-md transition duration-300 ease-in-out">
                <h3 class="text-xl font-bold text-gray-800 mb-3 text-right">الاحاسيس والمشاعر</h3>
                <p class="text-gray-600 text-right">اختر نوع المشاعر التي ترغب في إظهارها في القراءة (فرح، حزن، غضب، إلخ).</p>
            </div>
        </div>
        
        <div class="mt-12 bg-white rounded-xl shadow-lg p-8">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">كيف يعمل الناطق؟</h2>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 text-center">
                <div class="p-4">
                    <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
                        <span class="text-white font-bold">1</span>
                    </div>
                    <h3 class="font-bold text-gray-800 mb-2">أدخل النص</h3>
                    <p class="text-gray-600 text-sm">اكتب أو الصق النص العربي الذي ترغب في تحويله إلى كلام</p>
                </div>
                <div class="p-4">
                    <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
                        <span class="text-white font-bold">2</span>
                    </div>
                    <h3 class="font-bold text-gray-800 mb-2">اختر الإعدادات</h3>
                    <p class="text-gray-600 text-sm">اضبط نبرة الصوت، السرعة، والمشاعر حسب رغبتك</p>
                </div>
                <div class="p-4">
                    <div class="w-12 h-12 bg-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4">
                        <span class="text-white font-bold">3</span>
                    </div>
                    <h3 class="font-bold text-gray-800 mb-2">استمع</h3>
                    <p class="text-gray-600 text-sm">استمع للنتيجة النهائية بجودة احترافية</p>
                </div>
                <div class="p-4">
                    <div class="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center mx-auto mb-4">
                        <span class="text-white font-bold">4</span>
                    </div>
                    <h3 class="font-bold text-gray-800 mb-2">احفظ أو شارك</h3>
                    <p class="text-gray-600 text-sm">احفظ الملف الصوتي أو شاركه مع الآخرين</p>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-4 text-center">
            <p>© 2023 الناطق - جميع الحقوق محفوظة.</p>
            <div class="flex justify-center space-x-4 mt-4">
                <a href="#" class="hover:text-blue-300 transition">الخصوصية</a>
                <a href="#" class="hover:text-blue-300 transition">الشروط</a>
                <a href="#" class="hover:text-blue-300 transition">اتصل بنا</a>
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Add animation to greeting text
            const greeting = document.querySelector('h1');
            greeting.addEventListener('mouseover', function() {
                this.classList.add('animate-pulse');
            });
            greeting.addEventListener('mouseout', function() {
                this.classList.remove('animate-pulse');
            });

            // Button click effect
            const startBtn = document.querySelector('button');
            startBtn.addEventListener('click', function() {
                alert('مرحباً بك في الناطق! يمكنك الآن البدء في تحويل النصوص إلى كلام بجودة احترافية.');
            });
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Hass13/anati9" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>