Hugging Face's logo

Spaces:
Guymy97
/
iptv-stream
Running

App Files Community
Guymy97 commited on
Commit
c83b46d
·
verified ·
1 Parent(s): 843870c

animation de démarage - Initial Deployment

Browse files
Files changed (5) hide show
  1. README.md +7 -5
  2. index.html +0 -19
  3. iptv-setup.html +115 -0
  4. netflix.html +169 -0
  5. prompts.txt +14 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Iptv Stream
3
- emoji: 📊
4
- colorFrom: green
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: iptv-stream
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
iptv-setup.html ADDED
@@ -0,0 +1,115 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Configuration IPTV - FLIPP Clone</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <style>
13
+ .hero-gradient {
14
+ background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.8) 100%);
15
+ }
16
+ </style>
17
+ </head>
18
+ <body class="bg-black text-white">
19
+ <!-- Navigation -->
20
+ <nav class="flex justify-between items-center px-8 py-4">
21
+ <div class="text-red-600 text-4xl font-bold">FLIPP</div>
22
+ <div class="flex space-x-6">
23
+ <a href="netflix.html" class="hover:text-gray-300">Accueil</a>
24
+ <a href="iptv-setup.html" class="text-gray-300">Configuration IPTV</a>
25
+ </div>
26
+ </nav>
27
+
28
+ <!-- IPTV Setup Section -->
29
+ <section class="py-12 px-8 max-w-4xl mx-auto">
30
+ <h1 class="text-3xl font-bold mb-8 text-center">Configuration IPTV</h1>
31
+
32
+ <div class="bg-gray-900 rounded-lg p-8 mb-8">
33
+ <h2 class="text-2xl font-bold mb-4">Connexion avec code MAC</h2>
34
+ <form id="iptv-form" class="space-y-6">
35
+ <div>
36
+ <label class="block text-gray-300 mb-2">URL du serveur IPTV</label>
37
+ <input type="url" id="server-url"
38
+ placeholder="http://votre-serveur-iptv.com:8080"
39
+ class="w-full p-3 bg-gray-800 border border-gray-700 rounded text-white">
40
+ </div>
41
+
42
+ <div>
43
+ <label class="block text-gray-300 mb-2">Code MAC</label>
44
+ <input type="text" id="mac-code"
45
+ placeholder="XX:XX:XX:XX:XX:XX"
46
+ class="w-full p-3 bg-gray-800 border border-gray-700 rounded text-white"
47
+ pattern="^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$">
48
+ </div>
49
+
50
+ <div>
51
+ <label class="block text-gray-300 mb-2">Nom d'utilisateur (optionnel)</label>
52
+ <input type="text" id="username"
53
+ class="w-full p-3 bg-gray-800 border border-gray-700 rounded text-white">
54
+ </div>
55
+
56
+ <div>
57
+ <label class="block text-gray-300 mb-2">Mot de passe (optionnel)</label>
58
+ <input type="password" id="password"
59
+ class="w-full p-3 bg-gray-800 border border-gray-700 rounded text-white">
60
+ </div>
61
+
62
+ <button type="submit"
63
+ class="w-full bg-red-600 hover:bg-red-700 text-white py-3 px-6 rounded font-bold">
64
+ Connecter IPTV
65
+ </button>
66
+ </form>
67
+ </div>
68
+
69
+
70
+ <div id="connection-status" class="mt-8 p-4 rounded-lg hidden">
71
+ <h3 class="text-xl font-bold mb-2">Statut de connexion</h3>
72
+ <p id="status-message"></p>
73
+ </div>
74
+ </section>
75
+
76
+ <script>
77
+ AOS.init();
78
+ feather.replace();
79
+
80
+ document.getElementById('iptv-form').addEventListener('submit', function(e) {
81
+ e.preventDefault();
82
+
83
+ const serverUrl = document.getElementById('server-url').value;
84
+ const macCode = document.getElementById('mac-code').value;
85
+ const username = document.getElementById('username').value;
86
+ const password = document.getElementById('password').value;
87
+
88
+ const statusDiv = document.getElementById('connection-status');
89
+ const statusMessage = document.getElementById('status-message');
90
+
91
+ // Simulation de connexion IPTV
92
+ statusDiv.classList.remove('hidden', 'bg-red-900', 'bg-green-900');
93
+ statusDiv.classList.add('bg-blue-900');
94
+ statusMessage.textContent = 'Connexion en cours...';
95
+
96
+ setTimeout(() => {
97
+ if (serverUrl && macCode) {
98
+ statusDiv.classList.remove('bg-blue-900');
99
+ statusDiv.classList.add('bg-green-900');
100
+ statusMessage.textContent = 'Connexion IPTV réussie! Redirection vers le contenu...';
101
+
102
+ // Redirection vers la page principale après succès
103
+ setTimeout(() => {
104
+ window.location.href = 'netflix.html';
105
+ }, 2000);
106
+ } else {
107
+ statusDiv.classList.remove('bg-blue-900');
108
+ statusDiv.classList.add('bg-red-900');
109
+ statusMessage.textContent = 'Erreur: Veuillez remplir tous les champs obligatoires';
110
+ }
111
+ }, 1500);
112
+ });
113
+ </script>
114
+ </body>
115
+ </html>
netflix.html ADDED
@@ -0,0 +1,169 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FLIPP Clone</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <style>
13
+ .hero-gradient {
14
+ background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.8) 100%);
15
+ }
16
+ .movie-card:hover {
17
+ transform: scale(1.05);
18
+ transition: transform 0.3s ease;
19
+ }
20
+ .category-scroll::-webkit-scrollbar {
21
+ display: none;
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="bg-black text-white">
26
+ <!-- Navigation -->
27
+ <nav class="flex justify-between items-center px-8 py-4 absolute w-full z-50">
28
+ <div class="text-red-600 text-4xl font-bold">FLIPP</div>
29
+ <div class="flex space-x-6">
30
+ <a href="#" class="hover:text-gray-300">TV</a>
31
+ <a href="#" class="hover:text-gray-300">Séries</a>
32
+ <a href="#" class="hover:text-gray-300">Films</a>
33
+ <a href="#" class="hover:text-gray-300">Nouveautés</a>
34
+ <a href="#" class="hover:text-gray-300">Ma liste</a>
35
+ <a href="iptv-setup.html" class="hover:text-gray-300">Paramètre</a>
36
+ </div>
37
+ <div class="flex items-center space-x-4">
38
+ <button class="hover:text-gray-300">
39
+ <i data-feather="search"></i>
40
+ </button>
41
+ <button class="hover:text-gray-300">
42
+ <i data-feather="bell"></i>
43
+ </button>
44
+ </div>
45
+ </nav>
46
+
47
+ <!-- Hero Section -->
48
+ <section class="relative h-screen">
49
+ <img src="http://static.photos/movie/1200x630/1" alt="Featured Movie" class="w-full h-full object-cover">
50
+ <div class="absolute inset-0 hero-gradient"></div>
51
+ <div class="absolute bottom-1/4 left-8 max-w-lg">
52
+ <h1 class="text-5xl font-bold mb-4">Stranger Things</h1>
53
+ <p class="text-lg mb-6">Quand un jeune garçon disparaît, une petite ville découvre un mystère impliquant des expériences secrètes, des forces surnaturelles terrifiantes et une étrange petite fille.</p>
54
+ <div class="flex space-x-4">
55
+ <button class="bg-white text-black px-8 py-2 rounded flex items-center">
56
+ <i data-feather="play" class="mr-2"></i> Lecture
57
+ </button>
58
+ <button class="bg-gray-600 bg-opacity-50 text-white px-8 py-2 rounded flex items-center">
59
+ <i data-feather="info" class="mr-2"></i> Plus d'infos
60
+ </button>
61
+ </div>
62
+ </div>
63
+ </section>
64
+
65
+ <!-- Content Categories -->
66
+ <section class="py-8 px-8">
67
+ <h2 class="text-2xl font-bold mb-6">Tendances actuelles</h2>
68
+ <div class="flex space-x-4 overflow-x-auto category-scroll pb-4">
69
+ <!-- Movie Cards -->
70
+ <div class="movie-card flex-shrink-0 w-64 h-36 bg-gray-800 rounded overflow-hidden">
71
+ <img src="http://static.photos/movie/640x360/2" alt="Movie 1" class="w-full h-full object-cover">
72
+ </div>
73
+ <div class="movie-card flex-shrink-0 w-64 h-36 bg-gray-800 rounded overflow-hidden">
74
+ <img src="http://static.photos/movie/640x360/3" alt="Movie 2" class="w-full h-full object-cover">
75
+ </div>
76
+ <div class="movie-card flex-shrink-0 w-64 h-36 bg-gray-800 rounded overflow-hidden">
77
+ <img src="http://static.photos/movie/640x360/4" alt="Movie 3" class="w-full h-full object-cover">
78
+ </div>
79
+ <div class="movie-card flex-shrink-0 w-64 h-36 bg-gray-800 rounded overflow-hidden">
80
+ <img src="http://static.photos/movie/640x360/5" alt="Movie 4" class="w-full h-full object-cover">
81
+ </div>
82
+ <div class="movie-card flex-shrink-0 w-64 h-36 bg-gray-800 rounded overflow-hidden">
83
+ <img src="http://static.photos/movie/640x360/6" alt="Movie 5" class="w-full h-full object-cover">
84
+ </div>
85
+ </div>
86
+ </section>
87
+
88
+ <section class="py-8 px-8">
89
+ <h2 class="text-2xl font-bold mb-6">Populaire sur Netflix</h2>
90
+ <div class="flex space-x-4 overflow-x-auto category-scroll pb-4">
91
+ <div class="movie-card flex-shrink-0 w-64 h-36 bg-gray-800 rounded overflow-hidden">
92
+ <img src="http://static.photos/movie/640x360/7" alt="Popular 1" class="w-full h-full object-cover">
93
+ </div>
94
+ <div class="movie-card flex-shrink-0 w-64 h-36 bg-gray-800 rounded overflow-hidden">
95
+ <img src="http://static.photos/movie/640x360/8" alt="Popular 2" class="w-full h-full object-cover">
96
+ </div>
97
+ <div class="movie-card flex-shrink-0 w-64 h-36 bg-gray-800 rounded overflow-hidden">
98
+ <img src="http://static.photos/movie/640x360/9" alt="Popular 3" class="w-full h-full object-cover">
99
+ </div>
100
+ <div class="movie-card flex-shrink-0 w-64 h-36 bg-gray-800 rounded overflow-hidden">
101
+ <img src="http://static.photos/movie/640x360/10" alt="Popular 4" class="w-full h-full object-cover">
102
+ </div>
103
+ </div>
104
+ </section>
105
+
106
+ <script>
107
+ // Loading animation
108
+ document.addEventListener('DOMContentLoaded', function() {
109
+ const loadingScreen = document.getElementById('loading-screen');
110
+ const flippLogo = document.getElementById('flipp-logo');
111
+ const dots = [document.getElementById('dot1'), document.getElementById('dot2'), document.getElementById('dot3')];
112
+
113
+ // Main animation timeline
114
+ const timeline = anime.timeline({
115
+ complete: function() {
116
+ loadingScreen.style.display = 'none';
117
+ AOS.init();
118
+ feather.replace();
119
+ }
120
+ });
121
+
122
+ timeline
123
+ .add({
124
+ targets: flippLogo,
125
+ opacity: [0, 1],
126
+ translateY: [50, 0],
127
+ duration: 1000,
128
+ easing: 'easeOutExpo'
129
+ })
130
+ .add({
131
+ targets: dots[0],
132
+ opacity: [0, 1],
133
+ scale: [0, 1],
134
+ duration: 500,
135
+ easing: 'easeOutExpo'
136
+ })
137
+ .add({
138
+ targets: dots[1],
139
+ opacity: [0, 1],
140
+ scale: [0, 1],
141
+ duration: 500,
142
+ easing: 'easeOutExpo'
143
+ })
144
+ .add({
145
+ targets: dots[2],
146
+ opacity: [0, 1],
147
+ scale: [0, 1],
148
+ duration: 500,
149
+ easing: 'easeOutExpo'
150
+ })
151
+ .add({
152
+ targets: dots,
153
+ opacity: [1, 0.3],
154
+ scale: [1, 0.8],
155
+ duration: 600,
156
+ delay: anime.stagger(100),
157
+ easing: 'easeInOutSine',
158
+ loop: 3
159
+ })
160
+ .add({
161
+ targets: loadingScreen,
162
+ opacity: [1, 0],
163
+ duration: 800,
164
+ easing: 'easeOutExpo'
165
+ });
166
+ });
167
+ </script>
168
+ </body>
169
+ </html>
prompts.txt ADDED
@@ -0,0 +1,14 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ crée moi une application netflix
2
+ connection avec lien iptv et code mac
3
+ remplace acceuil par tv
4
+ efface
5
+ efface Configuration IPTV
6
+ NETFLIX remplace par FLIPP
7
+ efface
8
+ paramétréConfiguration IPTV
9
+ Paramétré remplace par paramètre
10
+
11
+
12
+
13
+ efface
14
+ animation de démarage