Hugging Face's logo

Spaces:
progitanas1
/
textiletech-wizardry
Running

App Files Community
progitanas1 commited on
Commit
32738c4
·
verified ·
1 Parent(s): 7d01bfd

2000 ligne de code

Browse files
Files changed (5) hide show
  1. README.md +8 -5
  2. about.html +122 -0
  3. components/footer.js +123 -0
  4. components/navbar.js +101 -0
  5. index.html +122 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Textiletech Wizardry
3
- emoji: 🌖
4
- colorFrom: blue
5
- colorTo: blue
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: TextileTech Wizardry 🧙‍♂️
3
+ colorFrom: gray
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
about.html ADDED
@@ -0,0 +1,122 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```html
2
+ <!DOCTYPE html>
3
+ <html lang="fr">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>À propos - TextileTech</title>
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ </head>
12
+ <body class="bg-gray-50">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
16
+ <section class="mb-20">
17
+ <div class="text-center mb-16">
18
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Notre mission</h1>
19
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
20
+ Transformer l'industrie textile marocaine grâce à l'intelligence artificielle.
21
+ </p>
22
+ </div>
23
+
24
+ <div class="grid md:grid-cols-2 gap-12 items-center">
25
+ <div>
26
+ <h2 class="text-3xl font-bold text-gray-900 mb-6">Qui sommes-nous ?</h2>
27
+ <p class="text-gray-600 mb-6">
28
+ TextileTech est une startup marocaine fondée en 2023 avec pour objectif de moderniser
29
+ l'industrie textile locale grâce aux technologies d'intelligence artificielle.
30
+ </p>
31
+ <p class="text-gray-600 mb-6">
32
+ Notre équipe est composée d'experts en IA, en développement logiciel et en industrie textile,
33
+ unis par la volonté de rendre le secteur plus compétitif à l'échelle internationale.
34
+ </p>
35
+ <div class="bg-indigo-50 p-6 rounded-lg border-l-4 border-indigo-600">
36
+ <p class="text-indigo-800 font-medium">
37
+ "Notre vision est de positionner le Maroc comme leader africain de l'industrie textile 4.0."
38
+ </p>
39
+ </div>
40
+ </div>
41
+ <div>
42
+ <img src="http://static.photos/office/1024x576/42" alt="Équipe TextileTech" class="rounded-lg shadow-xl w-full">
43
+ </div>
44
+ </div>
45
+ </section>
46
+
47
+ <section class="py-16 bg-white rounded-xl shadow-sm p-8 mb-20">
48
+ <div class="text-center mb-16">
49
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Nos valeurs</h2>
50
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
51
+ Les principes qui guident chacune de nos décisions
52
+ </p>
53
+ </div>
54
+
55
+ <div class="grid md:grid-cols-3 gap-8">
56
+ <div class="bg-gray-50 p-8 rounded-lg">
57
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
58
+ <i data-feather="target" class="text-indigo-600" width="24" height="24"></i>
59
+ </div>
60
+ <h3 class="text-xl font-semibold mb-3">Innovation</h3>
61
+ <p class="text-gray-600">
62
+ Nous repoussons constamment les limites technologiques pour offrir des solutions avant-gardistes.
63
+ </p>
64
+ </div>
65
+ <div class="bg-gray-50 p-8 rounded-lg">
66
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
67
+ <i data-feather="users" class="text-indigo-600" width="24" height="24"></i>
68
+ </div>
69
+ <h3 class="text-xl font-semibold mb-3">Collaboration</h3>
70
+ <p class="text-gray-600">
71
+ Nous travaillons main dans la main avec nos clients pour comprendre et résoudre leurs défis.
72
+ </p>
73
+ </div>
74
+ <div class="bg-gray-50 p-8 rounded-lg">
75
+ <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
76
+ <i data-feather="globe" class="text-indigo-600" width="24" height="24"></i>
77
+ </div>
78
+ <h3 class="text-xl font-semibold mb-3">Impact local</h3>
79
+ <p class="text-gray-600">
80
+ Nous croyons en un développement technologique qui profite d'abord à notre écosystème national.
81
+ </p>
82
+ </div>
83
+ </div>
84
+ </section>
85
+
86
+ <section>
87
+ <div class="text-center mb-16">
88
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Notre équipe</h2>
89
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
90
+ Rencontrez les esprits brillants derrière TextileTech
91
+ </p>
92
+ </div>
93
+
94
+ <div class="grid md:grid-cols-4 gap-8">
95
+ <div class="text-center">
96
+ <img src="http://static.photos/people/400x400/1" alt="CEO" class="w-32 h-32 rounded-full mx-auto mb-4">
97
+ <h3 class="text-xl font-semibold">Amine Kabbaj</h3>
98
+ <p class="text-indigo-600 mb-2">CEO & Fondateur</p>
99
+ <p class="text-gray-600 text-sm">
100
+ Expert en IA avec 10 ans d'expérience dans le secteur textile.
101
+ </p>
102
+ </div>
103
+ <div class="text-center">
104
+ <img src="http://static.photos/people/400x400/2" alt="CTO" class="w-32 h-32 rounded-full mx-auto mb-4">
105
+ <h3 class="text-xl font-semibold">Leila Benjelloun</h3>
106
+ <p class="text-indigo-600 mb-2">CTO</p>
107
+ <p class="text-gray-600 text-sm">
108
+ Spécialiste en machine learning et vision par ordinateur.
109
+ </p>
110
+ </div>
111
+ <div class="text-center">
112
+ <img src="http://static.photos/people/400x400/3" alt="COO" class="w-32 h-32 rounded-full mx-auto mb-4">
113
+ <h3 class="text-xl font-semibold">Youssef El Fassi</h3>
114
+ <p class="text-indigo-600 mb-2">COO</p>
115
+ <p class="text-gray-600 text-sm">
116
+ Ancien directeur d'usine textile reconverti dans la tech.
117
+ </p>
118
+ </div>
119
+ <div class="text-center">
120
+ <img src="http://static.photos/people/400x400/4" alt="Lead Developer" class="w-32 h-32 rounded-full mx-auto mb-4">
121
+ <h3 class="text-xl font-semibold">Nadia Zerouali</h3>
122
+ <p class="text-indigo-600 mb-2
components/footer.js ADDED
@@ -0,0 +1,123 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ footer {
7
+ background: #111827;
8
+ color: white;
9
+ padding: 4rem 1rem;
10
+ }
11
+ .footer-container {
12
+ max-width: 1200px;
13
+ margin: 0 auto;
14
+ display: grid;
15
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
16
+ gap: 2rem;
17
+ }
18
+ .footer-logo {
19
+ font-size: 1.5rem;
20
+ font-weight: bold;
21
+ margin-bottom: 1rem;
22
+ color: #818CF8;
23
+ }
24
+ .footer-description {
25
+ color: #9CA3AF;
26
+ line-height: 1.6;
27
+ margin-bottom: 1.5rem;
28
+ }
29
+ .social-links {
30
+ display: flex;
31
+ gap: 1rem;
32
+ }
33
+ .social-link {
34
+ color: #9CA3AF;
35
+ transition: color 0.2s;
36
+ }
37
+ .social-link:hover {
38
+ color: #818CF8;
39
+ }
40
+ .footer-heading {
41
+ font-size: 1.125rem;
42
+ font-weight: 600;
43
+ margin-bottom: 1.5rem;
44
+ color: white;
45
+ }
46
+ .footer-links {
47
+ display: flex;
48
+ flex-direction: column;
49
+ gap: 0.75rem;
50
+ }
51
+ .footer-link {
52
+ color: #9CA3AF;
53
+ text-decoration: none;
54
+ transition: color 0.2s;
55
+ }
56
+ .footer-link:hover {
57
+ color: #818CF8;
58
+ }
59
+ .copyright {
60
+ text-align: center;
61
+ margin-top: 4rem;
62
+ color: #6B7280;
63
+ font-size: 0.875rem;
64
+ }
65
+ </style>
66
+ <footer>
67
+ <div class="footer-container">
68
+ <div>
69
+ <div class="footer-logo">TextileTech</div>
70
+ <p class="footer-description">
71
+ L'intelligence artificielle au service de la compétitivité et de la durabilité du Made in Morocco.
72
+ </p>
73
+ <div class="social-links">
74
+ <a href="#" class="social-link">
75
+ <i data-feather="facebook"></i>
76
+ </a>
77
+ <a href="#" class="social-link">
78
+ <i data-feather="twitter"></i>
79
+ </a>
80
+ <a href="#" class="social-link">
81
+ <i data-feather="linkedin"></i>
82
+ </a>
83
+ <a href="#" class="social-link">
84
+ <i data-feather="instagram"></i>
85
+ </a>
86
+ </div>
87
+ </div>
88
+ <div>
89
+ <h3 class="footer-heading">Solution</h3>
90
+ <div class="footer-links">
91
+ <a href="#" class="footer-link">Fonctionnalités</a>
92
+ <a href="#" class="footer-link">Modules</a>
93
+ <a href="#" class="footer-link">Tarification</a>
94
+ <a href="#" class="footer-link">Documentation</a>
95
+ </div>
96
+ </div>
97
+ <div>
98
+ <h3 class="footer-heading">Entreprise</h3>
99
+ <div class="footer-links">
100
+ <a href="#" class="footer-link">À propos</a>
101
+ <a href="#" class="footer-link">Blog</a>
102
+ <a href="#" class="footer-link">Carrières</a>
103
+ <a href="#" class="footer-link">Partenaires</a>
104
+ </div>
105
+ </div>
106
+ <div>
107
+ <h3 class="footer-heading">Support</h3>
108
+ <div class="footer-links">
109
+ <a href="#" class="footer-link">Centre d'aide</a>
110
+ <a href="#" class="footer-link">Contact</a>
111
+ <a href="#" class="footer-link">Statut</a>
112
+ <a href="#" class="footer-link">Confidentialité</a>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ <div class="copyright">
117
+ © 2023 TextileTech. Tous droits réservés.
118
+ </div>
119
+ </footer>
120
+ `;
121
+ }
122
+ }
123
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,101 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ background: white;
8
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
9
+ position: fixed;
10
+ width: 100%;
11
+ z-index: 10;
12
+ }
13
+ .container {
14
+ max-width: 1200px;
15
+ margin: 0 auto;
16
+ padding: 0 1rem;
17
+ display: flex;
18
+ justify-content: space-between;
19
+ align-items: center;
20
+ height: 4rem;
21
+ }
22
+ .logo {
23
+ display: flex;
24
+ align-items: center;
25
+ font-weight: bold;
26
+ font-size: 1.25rem;
27
+ color: #4F46E5;
28
+ }
29
+ .logo-icon {
30
+ margin-right: 0.5rem;
31
+ }
32
+ .nav-links {
33
+ display: flex;
34
+ gap: 2rem;
35
+ }
36
+ .nav-link {
37
+ color: #4B5563;
38
+ text-decoration: none;
39
+ font-weight: 500;
40
+ position: relative;
41
+ padding: 0.5rem 0;
42
+ }
43
+ .nav-link:hover {
44
+ color: #1F2937;
45
+ }
46
+ .nav-link::after {
47
+ content: '';
48
+ position: absolute;
49
+ width: 100%;
50
+ transform: scaleX(0);
51
+ height: 2px;
52
+ bottom: 0;
53
+ left: 0;
54
+ background-color: #EC4899;
55
+ transform-origin: bottom right;
56
+ transition: transform 0.25s ease-out;
57
+ }
58
+ .nav-link:hover::after {
59
+ transform: scaleX(1);
60
+ transform-origin: bottom left;
61
+ }
62
+ .demo-btn {
63
+ background: #4F46E5;
64
+ color: white;
65
+ padding: 0.5rem 1rem;
66
+ border-radius: 0.375rem;
67
+ font-weight: 500;
68
+ transition: all 0.2s;
69
+ }
70
+ .demo-btn:hover {
71
+ background: #4338CA;
72
+ transform: translateY(-1px);
73
+ }
74
+ @media (max-width: 768px) {
75
+ .nav-links {
76
+ display: none;
77
+ }
78
+ }
79
+ </style>
80
+ <nav>
81
+ <div class="container">
82
+ <a href="/" class="logo">
83
+ <svg class="logo-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
84
+ <path d="M12 2L3 12L12 22L21 12L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
85
+ <path d="M7 12H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
86
+ </svg>
87
+ TextileTech
88
+ </a>
89
+ <div class="nav-links">
90
+ <a href="#solution" class="nav-link">Solution</a>
91
+ <a href="#modules" class="nav-link">Modules</a>
92
+ <a href="#avantages" class="nav-link">Avantages</a>
93
+ <a href="#contact" class="nav-link">Contact</a>
94
+ </div>
95
+ <button class="demo-btn">Demander une démo</button>
96
+ </div>
97
+ </nav>
98
+ `;
99
+ }
100
+ }
101
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,122 @@
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>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>TissAI - Plateforme SaaS pour l'industrie textile marocaine</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
12
+
13
+ :root {
14
+ --primary: #6C63FF;
15
+ --secondary: #FF6584;
16
+ --dark: #2D3748;
17
+ --light: #F7FAFC;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Montserrat', sans-serif;
22
+ scroll-behavior: smooth;
23
+ }
24
+
25
+ .hero-gradient {
26
+ background: linear-gradient(135deg, var(--primary) 0%, #4F46E5 100%);
27
+ }
28
+
29
+ .module-card:hover {
30
+ transform: translateY(-10px);
31
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
32
+ }
33
+
34
+ .feature-icon {
35
+ width: 80px;
36
+ height: 80px;
37
+ background-color: rgba(108, 99, 255, 0.1);
38
+ }
39
+
40
+ .animated-underline {
41
+ position: relative;
42
+ display: inline-block;
43
+ }
44
+
45
+ .animated-underline::after {
46
+ content: '';
47
+ position: absolute;
48
+ width: 100%;
49
+ transform: scaleX(0);
50
+ height: 3px;
51
+ bottom: -5px;
52
+ left: 0;
53
+ background-color: var(--secondary);
54
+ transform-origin: bottom right;
55
+ transition: transform 0.25s ease-out;
56
+ }
57
+
58
+ .animated-underline:hover::after {
59
+ transform: scaleX(1);
60
+ transform-origin: bottom left;
61
+ }
62
+
63
+ .svg-wave {
64
+ position: absolute;
65
+ bottom: 0;
66
+ left: 0;
67
+ width: 100%;
68
+ height: 80px;
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="bg-gray-50 text-gray-800">
73
+ <custom-navbar></custom-navbar>
74
+ <!-- Hero Section -->
75
+ <section class="hero-gradient text-white pt-32 pb-20 relative overflow-hidden">
76
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
77
+ <div class="md:flex md:items-center md:justify-between">
78
+ <div class="md:w-1/2 mb-10 md:mb-0">
79
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb5">Révolutionnez l'industrie textile marocaine</h1>
80
+ <p class="text-xl mt-6 mb-8">L'intelligence artificielle au service de la compétitivité et de la durabilité du Made in Morocco</p>
81
+ <div class="flex space-x-4">
82
+ <button class="bg-white text-indigo-600 px-6 py-3 rounded-md text-lg font-semibold hover:bg-gray-100 transition duration-300">
83
+ Démarrer l'essai gratuit
84
+ </button>
85
+ <button class="border-2 border-white text-white px-6 py-3 rounded-md text-lg font-semibold hover:bg-white hover:text-indigo-600 transition duration-300">
86
+ Voir la démo
87
+ </button>
88
+ </div>
89
+ </div>
90
+ <div class="md:w-1/2 relative">
91
+ <img src="http://static.photos/textile/1200x630/5" alt="Industrie textile marocaine" class="rounded-lg shadow-2xl w-full">
92
+ <div class="absolute -bottom-10 -left-10 bg-white p-4 rounded-lg shadow-lg">
93
+ <div class="text-indigo-600 font-bold">+87%</div>
94
+ <div class="text-gray-600 text-sm">Efficacité accrue</div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ <svg class="svg-wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffffff" fill-opacity="1" d="M0,160L48,154.7C96,149,192,139,288,154.7C384,171,480,213,576,213.3C672,213,768,171,864,144C960,117,1056,107,1152,112C1248,117,1344,139,1392,149.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
100
+ </section>
101
+
102
+ <!-- Solution Section -->
103
+ <section id="solution" class="py-20 bg-white">
104
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
105
+ <div class="text-center mb-16">
106
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Une solution intégrée pour toute la chaîne de valeur</h2>
107
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">TissAI combine les dernières innovations en intelligence artificielle pour transformer chaque étape du processus textile, de la conception à la distribution.</p>
108
+ </div>
109
+
110
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
111
+ <div class="bg-gray-50 p-8 rounded-xl text-center">
112
+ <div class="feature-icon rounded-full flex items-center justify-center mx-auto mb-6">
113
+ <i data-feather="eye" class="text-indigo-600" width="40" height="40"></i>
114
+ </div>
115
+ <h3 class="text-xl font-semibold mb-3">Anticipation des tendances</h3>
116
+ <p class="text-gray-600">Analyse en temps réel des tendances mondiales pour guider
117
+ <custom-footer></custom-footer>
118
+ <script src="components/navbar.js"></script>
119
+ <script src="components/footer.js"></script>
120
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
121
+ </body>
122
+ </html>