bparrino commited on
Commit
b012666
·
verified ·
1 Parent(s): 68c594e

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +155 -296
app.py CHANGED
@@ -17,7 +17,7 @@ st.markdown("""
17
  .main .block-container {
18
  padding-top: 2rem;
19
  padding-bottom: 2rem;
20
- max-width: 1200px;
21
  margin: 0 auto;
22
  }
23
  .stApp {
@@ -25,188 +25,95 @@ st.markdown("""
25
  }
26
  .title-area {
27
  text-align: center;
28
- margin-bottom: 3rem;
29
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
30
- padding: 2rem;
31
- border-radius: 15px;
32
- color: white;
33
- }
34
- .title-area h1 {
35
- color: white !important;
36
- font-size: 2.5rem;
37
- margin-bottom: 1rem;
38
- }
39
- .title-area p {
40
- font-size: 1.2rem;
41
- opacity: 0.9;
42
  }
43
  .custom-subheader {
44
- background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
45
- color: white;
46
- padding: 15px 20px;
47
- border-radius: 10px;
48
- margin-bottom: 20px;
49
  font-weight: 600;
50
- font-size: 1.1rem;
51
- text-align: center;
52
- box-shadow: 0 4px 8px rgba(0,0,0,0.1);
53
  }
54
  .results-container {
55
- border: 2px solid #e0e0e0;
56
- border-radius: 15px;
57
- padding: 25px;
58
- background: white;
59
- margin-bottom: 20px;
60
- box-shadow: 0 6px 20px rgba(0,0,0,0.1);
61
- }
62
- .format-card {
63
- border: 2px solid #e8f4fd;
64
- border-radius: 12px;
65
  padding: 20px;
 
66
  margin-bottom: 20px;
67
- background: linear-gradient(135deg, #f8fbff 0%, #e8f4fd 100%);
68
- transition: all 0.3s ease;
69
- position: relative;
70
  }
71
- .format-card:hover {
72
- transform: translateY(-2px);
73
- box-shadow: 0 8px 25px rgba(0,0,0,0.15);
74
- border-color: #4CAF50;
 
 
75
  }
76
  .format-title {
77
- font-size: 1.4rem;
78
- font-weight: 700;
79
  color: #2c3e50;
80
- margin-bottom: 12px;
81
- display: flex;
82
- justify-content: space-between;
83
- align-items: center;
84
  }
85
  .format-description {
86
  color: #5a6c7d;
87
- margin-bottom: 15px;
88
- font-size: 1.05rem;
89
- line-height: 1.5;
90
  }
91
  .format-details {
92
- font-size: 0.95rem;
93
  color: #7f8c8d;
94
- background-color: rgba(255,255,255,0.7);
95
- padding: 12px;
96
- border-radius: 8px;
97
- border-left: 4px solid #4CAF50;
98
  }
99
  .match-score {
100
- background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
101
- color: white;
102
- padding: 6px 12px;
103
- border-radius: 20px;
104
- font-size: 0.85rem;
105
- font-weight: 700;
106
- box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
107
- }
108
- .roi-metrics {
109
- background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
110
- border: 1px solid #c3e6cb;
111
- padding: 12px;
112
- border-radius: 8px;
113
- margin: 12px 0;
114
- font-size: 0.95rem;
115
- border-left: 4px solid #28a745;
116
  }
117
- .consultation-cta {
118
- background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
119
- border: none;
120
- border-radius: 15px;
121
- padding: 25px;
122
- margin: 25px 0;
123
- text-align: center;
124
- color: white;
125
- box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
126
- border: 3px solid #fff;
127
  }
128
- .consultation-cta h3 {
129
- color: white !important;
130
- margin-bottom: 15px;
131
- font-size: 1.5rem;
132
- font-weight: 700;
133
  }
134
- .consultation-cta p {
135
- font-size: 1.1rem;
 
 
136
  margin-bottom: 20px;
137
- opacity: 0.95;
138
- }
139
- .get-recommendations-btn {
140
- background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
141
- border: none !important;
142
- border-radius: 12px !important;
143
- padding: 15px 30px !important;
144
- font-size: 1.2rem !important;
145
- font-weight: 700 !important;
146
- color: white !important;
147
- box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4) !important;
148
- transform: translateY(0) !important;
149
- transition: all 0.3s ease !important;
150
  }
151
- .get-recommendations-btn:hover {
152
- transform: translateY(-2px) !important;
153
- box-shadow: 0 8px 25px rgba(76, 175, 80, 0.5) !important;
 
 
154
  }
155
  .placeholder-area {
156
- border: 3px dashed #ddd;
157
- border-radius: 15px;
158
- padding: 50px;
159
  text-align: center;
160
- background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
161
  color: #666;
162
  }
163
- .placeholder-area h3 {
164
- color: #495057 !important;
165
- margin-bottom: 15px;
166
- }
167
- .section-spacer {
168
- margin: 25px 0;
169
- }
170
- .additional-rec-card {
171
- border: 1px solid #e0e0e0;
172
- border-radius: 10px;
173
  padding: 15px;
174
- margin-bottom: 15px;
175
- background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
176
- transition: all 0.2s ease;
177
- }
178
- .additional-rec-card:hover {
179
- border-color: #4CAF50;
180
- transform: translateX(5px);
181
- }
182
- .additional-rec-title {
183
- font-weight: 600;
184
- font-size: 1.1rem;
185
- color: #2c3e50;
186
- margin-bottom: 8px;
187
- }
188
- .sample-link {
189
- display: inline-block;
190
- background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
191
- color: white !important;
192
- padding: 6px 12px;
193
- border-radius: 6px;
194
- text-decoration: none !important;
195
- font-size: 0.9rem;
196
- font-weight: 500;
197
- margin-top: 8px;
198
- transition: all 0.2s ease;
199
  }
200
- .sample-link:hover {
201
- transform: translateY(-1px);
202
- box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
203
  }
204
- .form-section {
205
- background: white;
206
- padding: 25px;
207
- border-radius: 15px;
208
- box-shadow: 0 4px 15px rgba(0,0,0,0.1);
209
- margin-bottom: 20px;
210
  }
211
  </style>
212
  """, unsafe_allow_html=True)
@@ -214,7 +121,7 @@ st.markdown("""
214
  # Title and description
215
  st.markdown("""
216
  <div class="title-area">
217
- <h1>🎯 Training Content Format Discovery</h1>
218
  <p>Find the perfect training content format for your audience, budget, and goals. Get personalized recommendations in minutes!</p>
219
  </div>
220
  """, unsafe_allow_html=True)
@@ -379,9 +286,9 @@ def calculate_format_scores(audience_type, budget, objectives, goals, timeline,
379
  scalability_map = {"Low": 1, "Medium": 2, "High": 3, "Very High": 4}
380
  format_scalability = scalability_map.get(format_data["scalability"], 2)
381
 
382
- if user_size >= 3 and format_scalability >= 3:
383
  score += 15
384
- elif user_size <= 2 and format_scalability <= 2:
385
  score += 10
386
 
387
  # Audience type matching
@@ -425,14 +332,14 @@ def calculate_format_scores(audience_type, budget, objectives, goals, timeline,
425
  if abs(format_interaction - user_interaction) <= 1:
426
  score += 10
427
 
428
- # Goals matching - Updated with L&D expertise priorities
429
  goal_matches = {
430
- "Learning Impact & Retention": ["gamified_learning", "simulation_training", "microlearning_modules", "video_tutorials", "blended_learning"],
431
  "Cost Effectiveness": ["microlearning_modules", "pdf_guides", "webinar_series", "elearning_courses", "powerpoint_presentations"],
432
- "Scalability & Reach": ["elearning_courses", "mobile_learning", "webinar_series", "microlearning_modules", "pdf_guides"],
433
- "Speed to Market": ["microlearning_modules", "pdf_guides", "webinar_series", "mobile_learning", "powerpoint_presentations"],
434
- "Engagement & Motivation": ["gamified_learning", "simulation_training", "video_tutorials", "mobile_learning", "blended_learning"],
435
- "Measurable Performance": ["elearning_courses", "gamified_learning", "simulation_training", "blended_learning", "microlearning_modules"]
 
436
  }
437
 
438
  for goal in goals:
@@ -447,12 +354,11 @@ def calculate_format_scores(audience_type, budget, objectives, goals, timeline,
447
  col1, col2 = st.columns([1, 1])
448
 
449
  with col1:
450
- st.markdown('<div class="form-section">', unsafe_allow_html=True)
451
- st.markdown('<div class="custom-subheader">🎯 Tell Us About Your Training Needs</div>', unsafe_allow_html=True)
452
 
453
  # Audience Type
454
  audience_type = st.selectbox(
455
- "👥 Who is your target audience?",
456
  [
457
  "Corporate employees",
458
  "Technical professionals",
@@ -468,7 +374,7 @@ with col1:
468
 
469
  # Budget
470
  budget = st.select_slider(
471
- "💰 What's your budget range?",
472
  options=["Very Low", "Low", "Medium", "High", "Very High"],
473
  value="Medium",
474
  help="Consider development, production, and deployment costs"
@@ -476,7 +382,7 @@ with col1:
476
 
477
  # Team Size
478
  team_size = st.selectbox(
479
- "📊 How many learners will this reach?",
480
  [
481
  "Small team (10-50)",
482
  "Medium team (51-200)",
@@ -489,7 +395,7 @@ with col1:
489
 
490
  # Timeline
491
  timeline = st.selectbox(
492
- "When do you need this deployed?",
493
  [
494
  "ASAP (1-2 weeks)",
495
  "1 month",
@@ -504,7 +410,7 @@ with col1:
504
 
505
  # Simplified Objectives
506
  objectives = st.multiselect(
507
- "📚 What type of training do you need? (Select all that apply)",
508
  [
509
  "Technical Skills",
510
  "Leadership & Management",
@@ -520,23 +426,23 @@ with col1:
520
  help="What specific areas do you need to train on?"
521
  )
522
 
523
- # Updated Goals - More L&D focused
524
  goals = st.multiselect(
525
- "🎯 What's most important to you? (Select your top priorities)",
526
  [
527
- "Learning Impact & Retention",
528
- "Cost Effectiveness",
529
- "Scalability & Reach",
530
- "Speed to Market",
531
- "Engagement & Motivation",
532
- "Measurable Performance"
533
  ],
534
  help="What matters most for your training success?"
535
  )
536
 
537
  # Interaction Level
538
  interaction_level = st.select_slider(
539
- "🤝 How much interaction do you want?",
540
  options=["Low", "Medium", "High", "Very High"],
541
  value="Medium",
542
  help="Level of learner interaction and engagement"
@@ -544,59 +450,46 @@ with col1:
544
 
545
  # Additional Context
546
  additional_context = st.text_area(
547
- "📝 Any additional requirements?",
548
  placeholder="e.g., Must work on mobile devices, need multilingual support, integration with LMS required...",
549
  height=60,
550
  help="Tell us about any special requirements"
551
  )
552
- st.markdown('</div>', unsafe_allow_html=True)
553
 
554
  st.markdown('<div class="section-spacer"></div>', unsafe_allow_html=True)
555
 
556
- # Enhanced Consultation CTA
557
  st.markdown("""
558
  <div class="consultation-cta">
559
- <h3>🚀 Want Expert Guidance?</h3>
560
- <p>Get personalized recommendations from our learning design experts who have helped 500+ organizations create impactful training programs.</p>
561
- <p><strong>✅ Free 30-minute consultation<br>
562
- ✅ Custom training strategy<br>
563
- ✅ ROI projections & timeline</strong></p>
564
  </div>
565
  """, unsafe_allow_html=True)
566
 
567
- if st.button("📞 Schedule Free Consultation", use_container_width=True, type="primary"):
568
  st.markdown('<script>window.open("https://www.motechhq.com/connect/", "_blank");</script>', unsafe_allow_html=True)
569
- st.success("🎉 Opening consultation page in a new tab...")
570
 
571
  st.markdown('<div class="section-spacer"></div>', unsafe_allow_html=True)
572
 
573
- # Generate recommendations button - More prominent
574
  generate_button = st.button(
575
- "🎯 Get My Recommendations",
576
  disabled=not objectives or not goals,
577
- use_container_width=True,
578
- key="get_recommendations",
579
- help="Click to get your personalized training format recommendations"
580
  )
581
 
582
- # Add CSS class to the button
583
- st.markdown("""
584
- <script>
585
- document.querySelector('[data-testid="stButton"] button').classList.add('get-recommendations-btn');
586
- </script>
587
- """, unsafe_allow_html=True)
588
-
589
  if not objectives:
590
- st.info("👆 Please select at least one training type")
591
  elif not goals:
592
- st.info("👆 Please select at least one priority")
593
 
594
  # Display recommendations
595
  with col2:
596
- st.markdown('<div class="custom-subheader">🏆 Your Personalized Recommendations</div>', unsafe_allow_html=True)
597
 
598
  if generate_button and objectives and goals:
599
- with st.spinner("🔍 Analyzing your requirements..."):
600
  # Simulate processing time
601
  time.sleep(1.5)
602
 
@@ -623,7 +516,7 @@ with col2:
623
  }
624
  }
625
 
626
- st.success("Analysis complete! Here are your recommendations:")
627
 
628
  if st.session_state["recommendations"] is not None:
629
  recommendations = st.session_state["recommendations"]
@@ -631,136 +524,102 @@ with col2:
631
  st.markdown('<div class="results-container">', unsafe_allow_html=True)
632
 
633
  # Personalized headline
634
- st.markdown(f'<h3 style="color: #2c3e50; margin-bottom: 25px; text-align: center;"> Perfect Matches for {recommendations["params"]["audience"].title()}</h3>', unsafe_allow_html=True)
635
 
636
  # Show top 3 recommendations
637
  for i, (format_id, score) in enumerate(recommendations["formats"][:3]):
638
  format_data = TRAINING_FORMATS[format_id]
639
 
640
- st.markdown('<div class="format-card">', unsafe_allow_html=True)
641
- st.markdown(f'''
642
- <div class="format-title">
643
- {format_data["name"]}
644
- <span class="match-score">{score}% Match</span>
645
- </div>
646
- ''', unsafe_allow_html=True)
647
-
648
  st.markdown(f'<div class="format-description">{format_data["description"]}</div>', unsafe_allow_html=True)
649
 
650
  # Add sample link if available
651
  if "sample_link" in format_data:
652
- st.markdown(f'<a href="{format_data["sample_link"]}" target="_blank" class="sample-link">👀 View Sample</a>', unsafe_allow_html=True)
 
653
 
654
  # Show ROI metrics
655
  if "roi_metrics" in format_data:
656
- st.markdown(f'<div class="roi-metrics"><strong>📈 Expected Results:</strong> {format_data["roi_metrics"]}</div>', unsafe_allow_html=True)
657
 
658
  # Show key details
659
- st.markdown(f'''
660
  <div class="format-details">
661
- <strong>🎯 Best for:</strong> {', '.join(format_data['best_for'])}<br>
662
- <strong>💰 Budget:</strong> {format_data['budget']} |
663
- <strong>⏱️ Production Time:</strong> {format_data['production_time']} |
664
- <strong>🔥 Engagement:</strong> {format_data['engagement']}
665
  </div>
666
- ''', unsafe_allow_html=True)
667
 
668
  # Add "Get Custom Proposal" button for top recommendation
669
  if i == 0:
670
- st.markdown('<div style="margin-top: 20px;">', unsafe_allow_html=True)
671
- if st.button(f"🚀 Get Custom Proposal for {format_data['name']}", key=f"proposal_{format_id}", use_container_width=True, type="primary"):
672
  st.balloons()
673
- st.success("🎉 Excellent choice! Our learning design experts will be in touch within 24 hours with a custom proposal.")
674
  st.markdown('</div>', unsafe_allow_html=True)
675
 
676
  st.markdown('</div>', unsafe_allow_html=True)
677
 
678
- # Improved "View More Options" section
679
- with st.expander("👀 View Additional Options", expanded=False):
680
  if len(recommendations["formats"]) > 3:
681
- st.markdown("**🔍 Additional Recommendations:**")
682
  for i, (format_id, score) in enumerate(recommendations["formats"][3:5], 4):
683
  format_data = TRAINING_FORMATS[format_id]
684
 
685
- st.markdown('<div class="additional-rec-card">', unsafe_allow_html=True)
686
- st.markdown(f'<div class="additional-rec-title">{format_data["name"]} <span style="color: #28a745; font-weight: 600
 
687
 
688
- st.markdown(f'''
689
- <div class="additional-rec-title">
690
- {format_data["name"]}
691
- <span style="color: #28a745; font-weight: 600;">({score}% Match)</span>
692
- </div>
693
- <div style="color: #666; margin-bottom: 10px; font-size: 0.95rem;">
694
- {format_data["description"]}
695
- </div>
696
- ''', unsafe_allow_html=True)
697
 
698
- # Add sample indicator (remove external links)
699
- st.markdown(f'<div style="margin: 8px 0; padding: 6px 10px; background: rgba(0,123,255,0.1); border-radius: 5px; font-size: 0.85rem; border-left: 2px solid #007bff;"><strong>💡 Sample Available:</strong> {format_data["name"]} examples</div>', unsafe_allow_html=True)
700
-
701
- # Show ROI metrics
702
  if "roi_metrics" in format_data:
703
- st.markdown(f'<div style="background: #f8f9fa; padding: 8px; border-radius: 5px; margin: 8px 0; font-size: 0.9rem; border-left: 3px solid #28a745;"><strong>📈 Expected Results:</strong> {format_data["roi_metrics"]}</div>', unsafe_allow_html=True)
704
 
705
  st.markdown('</div>', unsafe_allow_html=True)
 
 
706
 
707
  st.markdown('</div>', unsafe_allow_html=True)
708
 
709
- # Summary and next steps
710
- st.markdown('<div class="section-spacer"></div>', unsafe_allow_html=True)
711
- st.markdown("""
712
- <div style="background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%); padding: 20px; border-radius: 12px; border-left: 4px solid #28a745; margin-top: 20px;">
713
- <h4 style="color: #2c3e50; margin-bottom: 15px;">🎯 Next Steps</h4>
714
- <p style="margin-bottom: 10px;">✅ <strong>Review your top matches above</strong></p>
715
- <p style="margin-bottom: 10px;">✅ <strong>Click "View Sample" to see examples</strong></p>
716
- <p style="margin-bottom: 10px;">✅ <strong>Get a custom proposal for your favorite format</strong></p>
717
- <p style="margin-bottom: 0;">✅ <strong>Schedule a free consultation for expert guidance</strong></p>
718
- </div>
719
- """, unsafe_allow_html=True)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
720
 
721
  else:
722
- # Placeholder when no recommendations yet
723
- st.markdown("""
724
- <div class="placeholder-area">
725
- <h3>🎯 Ready to Find Your Perfect Training Format?</h3>
726
- <p style="font-size: 1.1rem; margin-bottom: 20px;">Complete the form on the left to get personalized recommendations based on your specific needs, budget, and timeline.</p>
727
- <div style="display: flex; justify-content: center; gap: 20px; margin-top: 25px;">
728
- <div style="text-align: center;">
729
- <div style="font-size: 2rem; margin-bottom: 8px;">🎓</div>
730
- <div style="font-weight: 600;">Expert Analysis</div>
731
- </div>
732
- <div style="text-align: center;">
733
- <div style="font-size: 2rem; margin-bottom: 8px;">📊</div>
734
- <div style="font-weight: 600;">ROI Insights</div>
735
- </div>
736
- <div style="text-align: center;">
737
- <div style="font-size: 2rem; margin-bottom: 8px;">⚡</div>
738
- <div style="font-weight: 600;">Quick Results</div>
739
- </div>
740
- </div>
741
- </div>
742
- """, unsafe_allow_html=True)
743
 
744
  # Footer
745
- st.markdown('<div class="section-spacer"></div>', unsafe_allow_html=True)
746
- st.markdown("""
747
- <div style="text-align: center; padding: 30px 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 15px; margin-top: 30px;">
748
- <h4 style="color: #2c3e50; margin-bottom: 20px;">🚀 Ready to Transform Your Training?</h4>
749
- <p style="font-size: 1.1rem; color: #5a6c7d; margin-bottom: 25px;">Join 500+ organizations who've created impactful learning experiences with our expert guidance.</p>
750
- <div style="display: flex; justify-content: center; gap: 40px; margin-bottom: 20px;">
751
- <div style="text-align: center;">
752
- <div style="font-size: 1.5rem; font-weight: 700; color: #4CAF50;">95%</div>
753
- <div style="font-size: 0.9rem; color: #666;">Client Satisfaction</div>
754
- </div>
755
- <div style="text-align: center;">
756
- <div style="font-size: 1.5rem; font-weight: 700; color: #4CAF50;">500+</div>
757
- <div style="font-size: 0.9rem; color: #666;">Projects Delivered</div>
758
- </div>
759
- <div style="text-align: center;">
760
- <div style="font-size: 1.5rem; font-weight: 700; color: #4CAF50;">50%</div>
761
- <div style="font-size: 0.9rem; color: #666;">Avg. Time Savings</div>
762
- </div>
763
- </div>
764
- <p style="font-size: 0.9rem; color: #7f8c8d; margin: 0;">© 2024 MoTech Training Solutions. Empowering organizations through innovative learning design.</p>
765
- </div>
766
- """, unsafe_allow_html=True)
 
17
  .main .block-container {
18
  padding-top: 2rem;
19
  padding-bottom: 2rem;
20
+ max-width: 1000px;
21
  margin: 0 auto;
22
  }
23
  .stApp {
 
25
  }
26
  .title-area {
27
  text-align: center;
28
+ margin-bottom: 2rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  }
30
  .custom-subheader {
31
+ background-color: #f0f2f6;
32
+ padding: 10px;
33
+ border-radius: 5px;
34
+ margin-bottom: 10px;
 
35
  font-weight: 600;
 
 
 
36
  }
37
  .results-container {
38
+ border: 1px solid #ddd;
39
+ border-radius: 5px;
 
 
 
 
 
 
 
 
40
  padding: 20px;
41
+ background-color: white;
42
  margin-bottom: 20px;
 
 
 
43
  }
44
+ .format-card {
45
+ border: 1px solid #e0e0e0;
46
+ border-radius: 8px;
47
+ padding: 15px;
48
+ margin-bottom: 15px;
49
+ background-color: #fafafa;
50
  }
51
  .format-title {
52
+ font-size: 1.2rem;
53
+ font-weight: 600;
54
  color: #2c3e50;
55
+ margin-bottom: 8px;
 
 
 
56
  }
57
  .format-description {
58
  color: #5a6c7d;
59
+ margin-bottom: 10px;
 
 
60
  }
61
  .format-details {
62
+ font-size: 0.9rem;
63
  color: #7f8c8d;
 
 
 
 
64
  }
65
  .match-score {
66
+ background-color: #e8f5e8;
67
+ color: #2d6a2d;
68
+ padding: 4px 8px;
69
+ border-radius: 12px;
70
+ font-size: 0.8rem;
71
+ font-weight: 600;
72
+ float: right;
 
 
 
 
 
 
 
 
 
73
  }
74
+ .stButton button {
75
+ width: 100%;
 
 
 
 
 
 
 
 
76
  }
77
+ .footnote {
78
+ font-size: 0.8rem;
79
+ color: #6c757d;
80
+ margin-top: 2rem;
 
81
  }
82
+ .settings-section {
83
+ background-color: #f8f9fa;
84
+ padding: 15px;
85
+ border-radius: 5px;
86
  margin-bottom: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
87
  }
88
+ .examples-section {
89
+ background-color: #e9f7fe;
90
+ padding: 15px;
91
+ border-radius: 5px;
92
+ margin-bottom: 20px;
93
  }
94
  .placeholder-area {
95
+ border: 2px dashed #ddd;
96
+ border-radius: 10px;
97
+ padding: 40px;
98
  text-align: center;
99
+ background-color: #f8f9fa;
100
  color: #666;
101
  }
102
+ .consultation-cta {
103
+ background-color: #4CAF50;
104
+ border: none;
105
+ border-radius: 8px;
 
 
 
 
 
 
106
  padding: 15px;
107
+ margin: 20px 0;
108
+ text-align: center;
109
+ color: white;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
110
  }
111
+ .consultation-cta h4 {
112
+ color: white;
113
+ margin-bottom: 10px;
114
  }
115
+ .section-spacer {
116
+ margin: 30px 0;
 
 
 
 
117
  }
118
  </style>
119
  """, unsafe_allow_html=True)
 
121
  # Title and description
122
  st.markdown("""
123
  <div class="title-area">
124
+ <h1>Training Content Format Discovery</h1>
125
  <p>Find the perfect training content format for your audience, budget, and goals. Get personalized recommendations in minutes!</p>
126
  </div>
127
  """, unsafe_allow_html=True)
 
286
  scalability_map = {"Low": 1, "Medium": 2, "High": 3, "Very High": 4}
287
  format_scalability = scalability_map.get(format_data["scalability"], 2)
288
 
289
+ if user_size >= 3 and format_scalability >= 3: # Large teams need scalable solutions
290
  score += 15
291
+ elif user_size <= 2 and format_scalability <= 2: # Small teams can use less scalable solutions
292
  score += 10
293
 
294
  # Audience type matching
 
332
  if abs(format_interaction - user_interaction) <= 1:
333
  score += 10
334
 
335
+ # Goals matching
336
  goal_matches = {
 
337
  "Cost Effectiveness": ["microlearning_modules", "pdf_guides", "webinar_series", "elearning_courses", "powerpoint_presentations"],
338
+ "High Engagement": ["gamified_learning", "simulation_training", "video_tutorials", "mobile_learning"],
339
+ "Scalability": ["elearning_courses", "mobile_learning", "webinar_series", "microlearning_modules"],
340
+ "Quick Deployment": ["microlearning_modules", "pdf_guides", "webinar_series", "mobile_learning", "powerpoint_presentations"],
341
+ "Knowledge Retention": ["gamified_learning", "simulation_training", "microlearning_modules", "video_tutorials"],
342
+ "Measurable Results": ["elearning_courses", "gamified_learning", "simulation_training", "blended_learning"]
343
  }
344
 
345
  for goal in goals:
 
354
  col1, col2 = st.columns([1, 1])
355
 
356
  with col1:
357
+ st.markdown('<div class="custom-subheader">Tell Us About Your Training Needs</div>', unsafe_allow_html=True)
 
358
 
359
  # Audience Type
360
  audience_type = st.selectbox(
361
+ "Who is your target audience?",
362
  [
363
  "Corporate employees",
364
  "Technical professionals",
 
374
 
375
  # Budget
376
  budget = st.select_slider(
377
+ "What's your budget range?",
378
  options=["Very Low", "Low", "Medium", "High", "Very High"],
379
  value="Medium",
380
  help="Consider development, production, and deployment costs"
 
382
 
383
  # Team Size
384
  team_size = st.selectbox(
385
+ "How many learners will this reach?",
386
  [
387
  "Small team (10-50)",
388
  "Medium team (51-200)",
 
395
 
396
  # Timeline
397
  timeline = st.selectbox(
398
+ "When do you need this deployed?",
399
  [
400
  "ASAP (1-2 weeks)",
401
  "1 month",
 
410
 
411
  # Simplified Objectives
412
  objectives = st.multiselect(
413
+ "What type of training do you need? (Select all that apply)",
414
  [
415
  "Technical Skills",
416
  "Leadership & Management",
 
426
  help="What specific areas do you need to train on?"
427
  )
428
 
429
+ # Simplified Goals
430
  goals = st.multiselect(
431
+ "What's most important to you? (Select your top priorities)",
432
  [
433
+ "Cost Effectiveness",
434
+ "High Engagement",
435
+ "Scalability",
436
+ "Quick Deployment",
437
+ "Knowledge Retention",
438
+ "Measurable Results"
439
  ],
440
  help="What matters most for your training success?"
441
  )
442
 
443
  # Interaction Level
444
  interaction_level = st.select_slider(
445
+ "How much interaction do you want?",
446
  options=["Low", "Medium", "High", "Very High"],
447
  value="Medium",
448
  help="Level of learner interaction and engagement"
 
450
 
451
  # Additional Context
452
  additional_context = st.text_area(
453
+ "Any additional requirements?",
454
  placeholder="e.g., Must work on mobile devices, need multilingual support, integration with LMS required...",
455
  height=60,
456
  help="Tell us about any special requirements"
457
  )
 
458
 
459
  st.markdown('<div class="section-spacer"></div>', unsafe_allow_html=True)
460
 
461
+ # Consultation CTA - Updated with link
462
  st.markdown("""
463
  <div class="consultation-cta">
464
+ <h4>Want Expert Guidance?</h4>
465
+ <p style="margin-bottom: 15px;">Get personalized recommendations from our learning design experts</p>
 
 
 
466
  </div>
467
  """, unsafe_allow_html=True)
468
 
469
+ if st.button("Schedule Free Consultation", use_container_width=True, type="primary"):
470
  st.markdown('<script>window.open("https://www.motechhq.com/connect/", "_blank");</script>', unsafe_allow_html=True)
471
+ st.success("Opening consultation page in a new tab...")
472
 
473
  st.markdown('<div class="section-spacer"></div>', unsafe_allow_html=True)
474
 
475
+ # Generate recommendations button
476
  generate_button = st.button(
477
+ "Get My Recommendations",
478
  disabled=not objectives or not goals,
479
+ use_container_width=True
 
 
480
  )
481
 
 
 
 
 
 
 
 
482
  if not objectives:
483
+ st.info("Please select at least one training type")
484
  elif not goals:
485
+ st.info("Please select at least one priority")
486
 
487
  # Display recommendations
488
  with col2:
489
+ st.markdown('<div class="custom-subheader">Your Personalized Recommendations</div>', unsafe_allow_html=True)
490
 
491
  if generate_button and objectives and goals:
492
+ with st.spinner("Analyzing your requirements..."):
493
  # Simulate processing time
494
  time.sleep(1.5)
495
 
 
516
  }
517
  }
518
 
519
+ st.success("Analysis complete! Here are your recommendations:")
520
 
521
  if st.session_state["recommendations"] is not None:
522
  recommendations = st.session_state["recommendations"]
 
524
  st.markdown('<div class="results-container">', unsafe_allow_html=True)
525
 
526
  # Personalized headline
527
+ st.markdown(f'<h3 style="color: #2c3e50; margin-bottom: 20px;">Recommended for {recommendations["params"]["audience"].lower()}:</h3>', unsafe_allow_html=True)
528
 
529
  # Show top 3 recommendations
530
  for i, (format_id, score) in enumerate(recommendations["formats"][:3]):
531
  format_data = TRAINING_FORMATS[format_id]
532
 
533
+ st.markdown(f'<div class="format-card">', unsafe_allow_html=True)
534
+ st.markdown(f'<div class="format-title">{format_data["name"]} <span class="match-score">{score}% Match</span></div>', unsafe_allow_html=True)
 
 
 
 
 
 
535
  st.markdown(f'<div class="format-description">{format_data["description"]}</div>', unsafe_allow_html=True)
536
 
537
  # Add sample link if available
538
  if "sample_link" in format_data:
539
+ st.markdown(f'<a href="{format_data["sample_link"]}" target="_blank" style="color: #1f77b4; text-decoration: none;">View Sample</a>', unsafe_allow_html=True)
540
+ st.markdown("<br>", unsafe_allow_html=True)
541
 
542
  # Show ROI metrics
543
  if "roi_metrics" in format_data:
544
+ st.markdown(f'<div style="background-color: #e8f5e8; padding: 8px; border-radius: 4px; margin: 8px 0; font-size: 0.9rem;"><strong>Expected Results:</strong> {format_data["roi_metrics"]}</div>', unsafe_allow_html=True)
545
 
546
  # Show key details
547
+ st.markdown(f"""
548
  <div class="format-details">
549
+ <strong>Best for:</strong> {', '.join(format_data['best_for'])}<br>
550
+ <strong>Budget:</strong> {format_data['budget']} |
551
+ <strong>Production Time:</strong> {format_data['production_time']} |
552
+ <strong>Engagement:</strong> {format_data['engagement']}
553
  </div>
554
+ """, unsafe_allow_html=True)
555
 
556
  # Add "Get Custom Proposal" button for top recommendation
557
  if i == 0:
558
+ st.markdown('<div style="margin-top: 15px;">', unsafe_allow_html=True)
559
+ if st.button(f"Get Custom Proposal", key=f"proposal_{format_id}", use_container_width=True, type="primary"):
560
  st.balloons()
561
+ st.success("Excellent choice! Our learning design experts will be in touch within 24 hours.")
562
  st.markdown('</div>', unsafe_allow_html=True)
563
 
564
  st.markdown('</div>', unsafe_allow_html=True)
565
 
566
+ # Expandable "View More Options" section
567
+ with st.expander("View More Options", expanded=False):
568
  if len(recommendations["formats"]) > 3:
569
+ st.markdown("**Additional Recommendations:**")
570
  for i, (format_id, score) in enumerate(recommendations["formats"][3:5], 4):
571
  format_data = TRAINING_FORMATS[format_id]
572
 
573
+ st.markdown(f'<div style="border: 1px solid #e0e0e0; border-radius: 5px; padding: 10px; margin-bottom: 10px; background-color: #f9f9f9;">', unsafe_allow_html=True)
574
+ st.markdown(f'<strong>{format_data["name"]}</strong> <span style="color: #666;">({score}% Match)</span>')
575
+ st.markdown(f'{format_data["description"]}')
576
 
577
+ if "sample_link" in format_data:
578
+ st.markdown(f'<a href="{format_data["sample_link"]}" target="_blank" style="color: #1f77b4; text-decoration: none; font-size: 0.9rem;">View Sample</a>', unsafe_allow_html=True)
 
 
 
 
 
 
 
579
 
 
 
 
 
580
  if "roi_metrics" in format_data:
581
+ st.markdown(f'<div style="font-size: 0.85rem; color: #666; margin-top: 5px;"><strong>Expected Results:</strong> {format_data["roi_metrics"]}</div>', unsafe_allow_html=True)
582
 
583
  st.markdown('</div>', unsafe_allow_html=True)
584
+ else:
585
+ st.markdown("*All relevant options are shown above.*")
586
 
587
  st.markdown('</div>', unsafe_allow_html=True)
588
 
589
+ # Action buttons
590
+ col_b1, col_b2 = st.columns(2)
591
+
592
+ with col_b1:
593
+ # Generate report
594
+ report_data = {
595
+ "timestamp": time.strftime("%Y-%m-%d %H:%M:%S"),
596
+ "recommendations": recommendations
597
+ }
598
+
599
+ report_json = json.dumps(report_data, indent=2)
600
+
601
+ st.download_button(
602
+ label="Download Report",
603
+ data=report_json,
604
+ file_name=f"training_recommendations_{int(time.time())}.json",
605
+ mime="application/json",
606
+ use_container_width=True
607
+ )
608
+
609
+ with col_b2:
610
+ # New analysis button
611
+ if st.button("New Analysis", use_container_width=True):
612
+ st.session_state["recommendations"] = None
613
+ st.rerun()
614
 
615
  else:
616
+ # Placeholder content when no recommendations yet
617
+ st.markdown('<div class="placeholder-area">', unsafe_allow_html=True)
618
+ st.markdown('<h3>Your Recommendations Will Appear Here</h3>')
619
+ st.markdown('<p>Complete the form and click "Get My Recommendations" to see your personalized training format suggestions.</p>')
620
+ st.markdown('</div>', unsafe_allow_html=True)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
621
 
622
  # Footer
623
+ st.markdown('<div class="footnote">', unsafe_allow_html=True)
624
+ st.markdown('*This tool uses advanced algorithms to match your requirements with optimal training formats based on industry best practices.*')
625
+ st.markdown('</div>', unsafe_allow_html=True)