Spaces:
Sleeping
Sleeping
File size: 2,942 Bytes
88924d0 edf52d9 88924d0 7e5fad8 edf52d9 88924d0 edf52d9 88924d0 edf52d9 88924d0 edf52d9 88924d0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FinPersona Demonstration</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap" rel="stylesheet">
<style>
body {
background: #ecf0f1;
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 50px auto;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
padding: 20px;
}
h2 {
color: #2c3e50;
text-align: center;
margin-bottom: 5px;
}
p {
color: #34495e;
text-align: center;
margin-top: 0;
}
.card {
padding: 15px;
margin-bottom: 20px;
border-left: 5px solid;
background: #f9f9f9;
border-radius: 5px;
}
/* Override paragraph alignment within cards */
.card p {
text-align: left;
}
.personality {
border-color: #ff9800;
background-color: #fff7e6;
}
.preferences {
border-color: #17a2b8;
background-color: #eaf7f7;
}
.stock {
border-color: #6c63ff;
background-color: #f2f5ff;
}
.caution {
border-color: #e74c3c;
background-color: #fdecea;
text-align: left;
}
.caution h4 {
color: #e74c3c;
margin-top: 0;
}
</style>
</head>
<body>
<div class="container">
<h2>Welcome to the FinPersona Demonstration!</h2>
<p>Please read the instructions carefully before beginning.</p>
<div class="card personality">
<strong>Step 1: Personality Injection</strong>
<p>
Ready to begin? Select your financial advisor’s style: <strong>Optimist (Friendly, Daring, Confident)</strong> or <strong>Pragmatist (Disciplined, Cautious, Practical)</strong>. Your choice sets the tone for the entire FinPersona demo!
</p>
</div>
<div class="card preferences">
<strong>Step 2: User Preference Elicitation</strong>
<p>
It’s question time! Your financial advisors need a snapshot of your investment needs and preferences. Feel free to use the sample user narrative or just answer as yourself—either way, your input will shape the next steps. Let’s dive in!
</p>
</div>
<div class="card stock">
<strong>Step 3: Personalized Stock Assessment</strong>
<p>
You’ll engage in financial discussions with an LLM-powered advisor. Pick one stock you’d like to explore—keeping in mind, this choice is not an official recommendation from the advisor.
</p>
</div>
<div class="card caution">
<h4>Cautionary Guidelines</h4>
<p>
Do not <strong>refresh</strong> or <strong>reload</strong> the page, as this will result in <strong>loss of data</strong> and require you to restart the demonstration.
</p>
</div>
</div>
</body>
</html>
|