AIdeaText commited on
Commit
9e4fd36
verified
1 Parent(s): 1dc293c

Update modules/ui/views/landing_view.py

Browse files
Files changed (1) hide show
  1. modules/ui/views/landing_view.py +37 -91
modules/ui/views/landing_view.py CHANGED
@@ -22,70 +22,21 @@ def get_asset_path(filename, asset_type='img_logo'):
22
  asset_path = current_dir / 'assets' / asset_type / filename
23
  return str(asset_path)
24
 
25
- custom_css = """
26
- /* Variables de color corporativo */
27
- :root {
28
- --color-primary: rgb(174, 0, 37); /* Rojo corporativo */
29
- --color-secondary: rgb(7, 60, 99); /* Azul corporativo */
30
- --color-background: #ffffff;
31
- --color-border: #e0e0e0;
32
- }
33
-
34
- /* Sobreescribir los estilos por defecto de Gradio */
35
- .dark button.primary-btn,
36
- button.primary-btn {
37
- background-color: var(--color-primary) !important;
38
- border-color: var(--color-primary) !important;
39
- color: white !important;
40
- }
41
-
42
- .dark button.secondary-btn,
43
- button.secondary-btn {
44
- background-color: var(--color-secondary) !important;
45
- border-color: var(--color-secondary) !important;
46
- color: white !important;
47
- }
48
-
49
- /* Sobreescribir los estilos de los tabs */
50
- .tabs.svelte-1g805jl .tabitem.svelte-1g805jl.selected {
51
- color: var(--color-primary) !important;
52
- border-color: var(--color-primary) !important;
53
- }
54
-
55
- .tabs.svelte-1g805jl {
56
- border-bottom-color: var(--color-secondary) !important;
57
- }
58
-
59
- /* Asegurar que los botones mantengan los colores al hacer hover */
60
- .dark button.primary-btn:hover,
61
- button.primary-btn:hover {
62
- background-color: rgb(144, 0, 27) !important; /* Versi贸n m谩s oscura del rojo */
63
- border-color: rgb(144, 0, 27) !important;
64
- }
65
-
66
- .dark button.secondary-btn:hover,
67
- button.secondary-btn:hover {
68
- background-color: rgb(5, 40, 79) !important; /* Versi贸n m谩s oscura del azul */
69
- border-color: rgb(5, 40, 79) !important;
70
- }
71
- """
72
-
73
- # En los botones, aseg煤rate de que las clases se apliquen correctamente
74
- login_button = gr.Button(
75
- "Ingresar",
76
- elem_classes="primary-btn",
77
- variant="primary"
78
- )
79
-
80
- register_button = gr.Button(
81
- "Enviar Solicitud",
82
- elem_classes="secondary-btn",
83
- variant="secondary"
84
- )
85
 
86
- with gr.Blocks(css=custom_css) as view:
87
- # El resto del c贸digo permanece igual pero con algunas modificaciones en las clases
88
-
 
 
 
 
 
89
  # Header con logo
90
  with gr.Column(elem_id="header-logo"):
91
  gr.Image(
@@ -95,9 +46,10 @@ def get_asset_path(filename, asset_type='img_logo'):
95
  container=False,
96
  height=200
97
  )
 
98
 
99
  with gr.Row(elem_classes="container"):
100
- # Primera columna (25%)
101
  with gr.Column(scale=1):
102
  with gr.Tabs() as tabs:
103
  # Tab de Login
@@ -115,11 +67,11 @@ def get_asset_path(filename, asset_type='img_logo'):
115
  login_button = gr.Button(
116
  "Ingresar",
117
  variant="primary",
118
- elem_classes="primary-btn"
119
  )
120
  login_message = gr.Markdown()
121
 
122
- # Tab de Registro #####################################################################
123
  with gr.TabItem("Solicitud de Acceso", elem_classes="gr-form"):
124
  with gr.Column():
125
  name = gr.Textbox(
@@ -187,36 +139,30 @@ def get_asset_path(filename, asset_type='img_logo'):
187
  outputs=register_message
188
  )
189
 
190
- # Segunda columna (75%)
191
- with gr.Column(scale=3):
192
- with gr.Tabs(elem_classes="content-tabs"):
193
  with gr.TabItem("Introducci贸n"):
194
- # Reemplazar gr.Box con gr.Column
195
- with gr.Column(elem_classes="media-box"):
196
- gr.Markdown("""
197
- ### 驴Qu茅 es AIdeaText?
198
- AIdeaText es una avanzada aplicaci贸n web dise帽ada para mejorar
199
- las habilidades de redacci贸n y comprensi贸n lectora a trav茅s
200
- del an谩lisis visual de textos potenciado por distintas tecnolog铆as
201
- de inteligencia artificial.
202
- """)
203
- # Aqu铆 puedes agregar im谩genes o videos con mejor dise帽o
204
 
205
  with gr.TabItem("Tutorial"):
206
- with gr.Column(elem_classes="media-box"):
207
- gr.Markdown("""
208
- ### C贸mo usar AIdeaText
209
- Aprende a utilizar todas las funcionalidades de AIdeaText
210
- para mejorar tu escritura acad茅mica.
211
- """)
212
 
213
  with gr.TabItem("Ejemplos"):
214
- with gr.Column(elem_classes="media-box"):
215
- gr.Markdown("""
216
- ### Ejemplos de Uso
217
- Mira ejemplos pr谩cticos de c贸mo AIdeaText puede ayudarte
218
- en tus tareas de escritura.
219
- """)
220
 
221
  # Mantener la funcionalidad de navegaci贸n existente
222
  start_button = gr.Button(visible=False)
 
22
  asset_path = current_dir / 'assets' / asset_type / filename
23
  return str(asset_path)
24
 
25
+ def create_landing_view():
26
+ """Crea la vista de landing con tres columnas y header"""
27
+ # Para el logo
28
+ logo_path = get_asset_path('Logo_300x300.png', 'img_logo')
29
+ # Para iconos de social media.
30
+ social_icon_path = get_asset_path('twitter.png', 'img_social-media')
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
 
32
+ with gr.Blocks(
33
+ css="""
34
+ #header-logo {text-align: center; padding: 2rem 0;}
35
+ #header-logo img {max-width: 200px; height: auto;}
36
+ .container {max-width: 1200px; margin: 0 auto;}
37
+ .gr-form {border: 1px solid #e0e0e0; padding: 20px; border-radius: 8px;}
38
+ """
39
+ ) as view:
40
  # Header con logo
41
  with gr.Column(elem_id="header-logo"):
42
  gr.Image(
 
46
  container=False,
47
  height=200
48
  )
49
+ #gr.Markdown("# Bienvenido a AIdeaText")
50
 
51
  with gr.Row(elem_classes="container"):
52
+ # Primera columna - Tabs de Login y Registro (50%)
53
  with gr.Column(scale=1):
54
  with gr.Tabs() as tabs:
55
  # Tab de Login
 
67
  login_button = gr.Button(
68
  "Ingresar",
69
  variant="primary",
70
+ scale=0
71
  )
72
  login_message = gr.Markdown()
73
 
74
+ # Tab de Registro
75
  with gr.TabItem("Solicitud de Acceso", elem_classes="gr-form"):
76
  with gr.Column():
77
  name = gr.Textbox(
 
139
  outputs=register_message
140
  )
141
 
142
+ # Segunda columna - Videos (50%)
143
+ with gr.Column(scale=1):
144
+ with gr.Tabs():
145
  with gr.TabItem("Introducci贸n"):
146
+ gr.Markdown("""
147
+ ### 驴Qu茅 es AIdeaText?
148
+ AIdeaText es una avanzada aplicaci贸n web dise帽ada para mejorar las habilidades de redacci贸n
149
+ y comprensi贸n lectora a trav茅s del an谩lisis visual de textos potenciado por distintas tecnolog铆as
150
+ de inteligencia artificial.
151
+ """)
 
 
 
 
152
 
153
  with gr.TabItem("Tutorial"):
154
+ gr.Markdown("""
155
+ ### C贸mo usar AIdeaText
156
+ Aprende a utilizar todas las funcionalidades de AIdeaText
157
+ para mejorar tu escritura acad茅mica.
158
+ """)
 
159
 
160
  with gr.TabItem("Ejemplos"):
161
+ gr.Markdown("""
162
+ ### Ejemplos de Uso
163
+ Mira ejemplos pr谩cticos de c贸mo AIdeaText puede ayudarte
164
+ en tus tareas de escritura.
165
+ """)
 
166
 
167
  # Mantener la funcionalidad de navegaci贸n existente
168
  start_button = gr.Button(visible=False)