Skip to content

Commit 482f130

Browse files
otaviojavaotaviojava
committed
Add PrimeFaces travel planner landing page with prompt presets and answer panel
1 parent 03d6ee0 commit 482f130

1 file changed

Lines changed: 159 additions & 0 deletions

File tree

‎src/main/webapp/index.xhtml‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml"
3+
xmlns:h="jakarta.faces.html"
4+
xmlns:f="jakarta.faces.core"
5+
xmlns:p="primefaces">
6+
7+
<h:head>
8+
<title>Travel Planner AI</title>
9+
<h:outputStylesheet library="css" name="travel.css"/>
10+
</h:head>
11+
12+
<h:body>
13+
14+
<div class="hero">
15+
<div class="hero-title">
16+
✈️ Travel Planner AI
17+
</div>
18+
19+
<div class="hero-subtitle">
20+
Explore cities, attractions, and build personalized travel itineraries
21+
using AI, MongoDB, Jakarta Data, and the Planning Pattern.
22+
</div>
23+
</div>
24+
25+
<div class="main-container">
26+
27+
<h:form>
28+
29+
<p:card styleClass="chat-card">
30+
31+
<f:facet name="title">
32+
AI Travel Assistant
33+
</f:facet>
34+
35+
<f:facet name="subtitle">
36+
Ask anything about destinations, attractions, or travel plans
37+
</f:facet>
38+
39+
<p:inputTextarea
40+
id="prompt"
41+
value="#{travelBean.userMessage}"
42+
rows="6"
43+
autoResize="false"
44+
styleClass="prompt-box"
45+
placeholder="Example: Create a two-day historical itinerary in Portugal"/>
46+
47+
<p:spacer height="15"/>
48+
49+
<p:commandButton
50+
value="Generate Itinerary"
51+
icon="pi pi-send"
52+
action="#{travelBean.send}"
53+
update="answer"
54+
styleClass="ui-button-success"/>
55+
56+
</p:card>
57+
58+
<div class="examples">
59+
60+
<p:panel header="Suggested Prompts">
61+
62+
<div class="grid">
63+
64+
<div class="col-12 md:col-3">
65+
<p:card styleClass="example-card">
66+
67+
<p:commandButton
68+
value="🌍 Available Cities"
69+
action="#{travelBean.availableCities}"
70+
update="prompt"
71+
process="@this"
72+
styleClass="ui-button-flat example-button"/>
73+
74+
</p:card>
75+
</div>
76+
77+
<div class="col-12 md:col-3">
78+
<p:card styleClass="example-card">
79+
80+
<p:commandButton
81+
value="🏛️ Historical Tour"
82+
action="#{travelBean.historicalTour}"
83+
update="prompt"
84+
process="@this"
85+
styleClass="ui-button-flat example-button"/>
86+
87+
</p:card>
88+
</div>
89+
90+
<div class="col-12 md:col-3">
91+
<p:card styleClass="example-card">
92+
93+
<p:commandButton
94+
value="🎨 Museum Weekend"
95+
action="#{travelBean.museumWeekend}"
96+
update="prompt"
97+
process="@this"
98+
styleClass="ui-button-flat example-button"/>
99+
100+
</p:card>
101+
</div>
102+
103+
<div class="col-12 md:col-3">
104+
<p:card styleClass="example-card">
105+
106+
<p:commandButton
107+
value="🍷 Food &amp; Culture"
108+
action="#{travelBean.foodAndCulture}"
109+
update="prompt"
110+
process="@this"
111+
styleClass="ui-button-flat example-button"/>
112+
113+
</p:card>
114+
</div>
115+
116+
</div>
117+
118+
</p:panel>
119+
120+
</div>
121+
122+
<h:panelGroup
123+
id="answer"
124+
layout="block"
125+
styleClass="answer-container">
126+
127+
<div class="answer-header">
128+
<i class="pi pi-sparkles"></i>
129+
<span>AI Travel Recommendation</span>
130+
</div>
131+
132+
<div class="answer-content">
133+
134+
<h:panelGroup rendered="#{empty travelBean.answer}">
135+
<div class="empty-answer">
136+
Ask a question or select one of the suggested prompts to generate an itinerary.
137+
</div>
138+
</h:panelGroup>
139+
140+
<h:panelGroup rendered="#{not empty travelBean.answer}">
141+
<h:outputText
142+
value="#{travelBean.answer}"
143+
escape="false"/>
144+
</h:panelGroup>
145+
146+
</div>
147+
148+
</h:panelGroup>
149+
150+
</h:form>
151+
152+
<div class="footer">
153+
Powered by Jakarta EE, PrimeFaces, MongoDB, Jakarta NoSQL, Jakarta Data and AI Planning
154+
</div>
155+
156+
</div>
157+
158+
</h:body>
159+
</html>

0 commit comments

Comments
 (0)