add examples dir and the first example

This commit is contained in:
XBsleepy 2025-03-08 00:01:29 +08:00
parent d921fc4248
commit e70332bfa2
5 changed files with 601 additions and 0 deletions

View File

@ -0,0 +1,62 @@
JAPAN TRAVEL HANDBOOK - GUIDE TO VERSIONS
Location: D:/OpenManus/
1. DETAILED DIGITAL VERSION
File: japan_travel_handbook.html
Best for: Desktop/laptop viewing
Features:
- Complete comprehensive guide
- Detailed itinerary
- Full proposal planning section
- All hotel recommendations
- Comprehensive budget breakdown
Usage: Open in web browser for trip planning and detailed reference
2. PRINT-FRIENDLY VERSION
File: japan_travel_handbook_print.html
Best for: Physical reference during travel
Features:
- Condensed essential information
- Optimized for paper printing
- Clear, printer-friendly formatting
- Quick reference tables
Usage: Print and keep in travel documents folder
3. MOBILE-OPTIMIZED VERSION
File: japan_travel_handbook_mobile.html
Best for: On-the-go reference during trip
Features:
- Touch-friendly interface
- Collapsible sections
- Quick access emergency buttons
- Dark mode support
- Responsive design
Usage: Save to phone's browser bookmarks for quick access
RECOMMENDED SETUP:
1. Before Trip:
- Use detailed version for planning
- Print the print-friendly version
- Save mobile version to phone
2. During Trip:
- Keep printed version with travel documents
- Use mobile version for daily reference
- Access detailed version when needed for specific information
3. Emergency Access:
- Mobile version has quick-access emergency information
- Keep printed version as backup
- All emergency numbers and contacts in both versions
Note: All versions contain the same core information but are formatted differently for optimal use in different situations.
IMPORTANT DATES:
- Trip Duration: April 15-23, 2024
- Proposal Day: April 19, 2024
- Key Reservation Deadlines:
* Flights: Book by January 2024
* Hotels: Book by February 2024
* Restaurant Reservations: Book by January 2024
* JR Pass: Purchase by March 2024

View File

@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Japan Travel Handbook - April 15-23, 2024</title>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; }
.container { max-width: 1000px; margin: 0 auto; }
h1, h2, h3 { color: #333; }
.day-item { background: #f9f9f9; padding: 15px; margin: 10px 0; border-radius: 5px; }
.important-note { background: #ffe6e6; padding: 10px; border-radius: 5px; }
.phrase-table { width: 100%; border-collapse: collapse; }
.phrase-table td, .phrase-table th { border: 1px solid #ddd; padding: 8px; }
.proposal-spot { background: #e6ffe6; padding: 15px; margin: 10px 0; border-radius: 5px; }
.flight-info { background: #e6f3ff; padding: 15px; margin: 10px 0; border-radius: 5px; }
.checklist { background: #fff3e6; padding: 15px; margin: 10px 0; border-radius: 5px; }
.hotels { background: #e6e6ff; padding: 15px; margin: 10px 0; border-radius: 5px; }
.proposal-plan { background: #ffe6ff; padding: 15px; margin: 10px 0; border-radius: 5px; }
.checkbox-list li { list-style-type: none; margin-bottom: 8px; }
.checkbox-list li:before { content: "☐ "; }
.warning { color: #ff4444; }
</style>
</head>
<body>
<div class="container">
[Previous content remains the same...]
<div class="proposal-plan">
<h2>🌸 Proposal Planning Guide 🌸</h2>
<h3>Ring Security & Transport</h3>
<ul>
<li><strong>Carrying the Ring:</strong>
<ul>
<li>Always keep the ring in your carry-on luggage, never in checked bags</li>
<li>Use a discrete, non-branded box or case</li>
<li>Consider travel insurance that covers jewelry</li>
<li>Keep receipt/appraisal documentation separate from the ring</li>
</ul>
</li>
<li><strong>Airport Security Tips:</strong>
<ul>
<li>No need to declare the ring unless value exceeds ¥1,000,000 (~$6,700)</li>
<li>If asked, simply state it's "personal jewelry"</li>
<li>Consider requesting private screening to maintain surprise</li>
<li>Keep ring in original box until through security, then transfer to more discrete case</li>
</ul>
</li>
</ul>
<h3>Proposal Location Details - Maruyama Park</h3>
<ul>
<li><strong>Best Timing:</strong>
<ul>
<li>Date: April 19 (Day 5)</li>
<li>Time: 5:30 PM (30 minutes before sunset)</li>
<li>Park closes at 8:00 PM in April</li>
</ul>
</li>
<li><strong>Specific Spot Recommendations:</strong>
<ul>
<li>Primary Location: Near the famous weeping cherry tree
<br>- Less crowded in early evening
<br>- Beautiful illumination starts at dusk
<br>- Iconic Kyoto backdrop
</li>
<li>Backup Location: Gion Shirakawa area
<br>- Atmospheric stone-paved street
<br>- Traditional buildings and cherry trees
<br>- Beautiful in light rain
</li>
</ul>
</li>
</ul>
<h3>Proposal Day Planning</h3>
<ul>
<li><strong>Morning Preparation:</strong>
<ul>
<li>Confirm weather forecast</li>
<li>Transfer ring to secure pocket/bag</li>
<li>Have backup indoor location details ready</li>
</ul>
</li>
<li><strong>Suggested Timeline:</strong>
<ul>
<li>4:00 PM: Start heading to Maruyama Park area</li>
<li>4:30 PM: Light refreshments at nearby tea house</li>
<li>5:15 PM: Begin walk through park</li>
<li>5:30 PM: Arrive at proposal spot</li>
<li>6:00 PM: Sunset and illumination begins</li>
<li>7:00 PM: Celebratory dinner reservation</li>
</ul>
</li>
</ul>
<h3>Celebration Dinner Options</h3>
<ul>
<li><strong>Traditional Japanese:</strong> Kikunoi Roan
<br>- Intimate 2-star Michelin restaurant
<br>- Advance reservation required (3 months)
<br>- Price: ¥15,000-20,000 per person
</li>
<li><strong>Modern Fusion:</strong> The Sodoh
<br>- Beautiful garden views
<br>- Western-style seating available
<br>- Price: ¥12,000-15,000 per person
</li>
</ul>
<div class="warning">
<h3>Important Notes:</h3>
<ul>
<li>Keep proposal plans in separate notes from shared itinerary</li>
<li>Have a backup plan in case of rain (indoor locations listed above)</li>
<li>Consider hiring a local photographer to capture the moment</li>
<li>Save restaurant staff contact info in case of timing changes</li>
</ul>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,254 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Japan Travel Guide (Mobile)</title>
<style>
* { box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
margin: 0;
padding: 10px;
line-height: 1.6;
font-size: 16px;
}
.container {
max-width: 100%;
margin: 0 auto;
}
h1 { font-size: 1.5em; margin: 10px 0; }
h2 { font-size: 1.3em; margin: 8px 0; }
h3 { font-size: 1.1em; margin: 6px 0; }
/* Mobile-friendly cards */
.card {
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin: 10px 0;
padding: 15px;
}
/* Collapsible sections */
.collapsible {
background: #f8f9fa;
border: none;
border-radius: 8px;
width: 100%;
padding: 15px;
text-align: left;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
margin: 5px 0;
}
.content {
display: none;
padding: 10px;
}
.active {
background: #e9ecef;
}
/* Mobile-friendly tables */
.table-wrapper {
overflow-x: auto;
margin: 10px 0;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 300px;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
th {
background: #f8f9fa;
}
/* Touch-friendly lists */
ul, ol {
padding-left: 20px;
margin: 10px 0;
}
li {
margin: 8px 0;
padding: 5px 0;
}
/* Emergency info styling */
.emergency {
background: #ffe6e6;
border-left: 4px solid #ff4444;
padding: 10px;
margin: 10px 0;
}
/* Quick access buttons */
.quick-access {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 10px 0;
}
.quick-btn {
background: #007bff;
color: white;
border: none;
border-radius: 20px;
padding: 10px 20px;
font-size: 0.9em;
cursor: pointer;
flex: 1 1 auto;
text-align: center;
min-width: 120px;
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
body {
background: #1a1a1a;
color: #fff;
}
.card {
background: #2d2d2d;
}
.collapsible {
background: #333;
color: #fff;
}
.active {
background: #404040;
}
th {
background: #333;
}
td, th {
border-color: #404040;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Japan Travel Guide</h1>
<p><strong>April 15-23, 2024</strong></p>
<div class="quick-access">
<button class="quick-btn" onclick="showSection('emergency')">Emergency</button>
<button class="quick-btn" onclick="showSection('phrases')">Phrases</button>
<button class="quick-btn" onclick="showSection('transport')">Transport</button>
<button class="quick-btn" onclick="showSection('proposal')">Proposal</button>
</div>
<div class="emergency card" id="emergency">
<h2>Emergency Contacts</h2>
<ul>
<li>🚑 Emergency: 119</li>
<li>👮 Police: 110</li>
<li>🏢 US Embassy: +81-3-3224-5000</li>
<li> Tourist Info: 03-3201-3331</li>
</ul>
</div>
<button class="collapsible">📅 Daily Itinerary</button>
<div class="content">
<div class="table-wrapper">
<table>
<tr><th>Date</th><th>Location</th><th>Activities</th></tr>
<tr><td>Apr 15</td><td>Tokyo</td><td>Arrival, Shinjuku</td></tr>
<tr><td>Apr 16</td><td>Tokyo</td><td>Meiji, Harajuku, Senso-ji</td></tr>
<tr><td>Apr 17</td><td>Tokyo</td><td>Tea Ceremony, Budokan</td></tr>
<tr><td>Apr 18</td><td>Kyoto</td><td>Travel, Kinkaku-ji</td></tr>
<tr><td>Apr 19</td><td>Kyoto</td><td>Fushimi Inari, Proposal</td></tr>
<tr><td>Apr 20</td><td>Nara</td><td>Deer Park, Temples</td></tr>
<tr><td>Apr 21</td><td>Tokyo</td><td>Return, Bay Cruise</td></tr>
</table>
</div>
</div>
<button class="collapsible">🗣️ Essential Phrases</button>
<div class="content">
<div class="table-wrapper">
<table>
<tr><th>English</th><th>Japanese</th></tr>
<tr><td>Thank you</td><td>ありがとう</td></tr>
<tr><td>Excuse me</td><td>すみません</td></tr>
<tr><td>Please</td><td>お願いします</td></tr>
<tr><td>Where is...</td><td>...はどこですか</td></tr>
<tr><td>Help!</td><td>助けて!</td></tr>
</table>
</div>
</div>
<button class="collapsible">🚅 Transportation</button>
<div class="content">
<div class="card">
<h3>Key Routes</h3>
<ul>
<li>Tokyo-Kyoto: 2h15m</li>
<li>Kyoto-Nara: 45m</li>
<li>Last trains: ~midnight</li>
</ul>
<p><strong>JR Pass:</strong> Activate April 15</p>
</div>
</div>
<button class="collapsible">💍 Proposal Plan</button>
<div class="content">
<div class="card">
<h3>April 19 Timeline</h3>
<ul>
<li>4:00 PM: Head to Maruyama Park</li>
<li>5:30 PM: Arrive at spot</li>
<li>7:00 PM: Dinner at Kikunoi Roan</li>
</ul>
<p><strong>Backup:</strong> Gion Shirakawa area</p>
</div>
</div>
<button class="collapsible">💰 Budget Tracker</button>
<div class="content">
<div class="table-wrapper">
<table>
<tr><th>Item</th><th>Budget</th></tr>
<tr><td>Hotels</td><td>$1500-2000</td></tr>
<tr><td>Transport</td><td>$600-800</td></tr>
<tr><td>Food</td><td>$800-1000</td></tr>
<tr><td>Activities</td><td>$600-800</td></tr>
<tr><td>Shopping</td><td>$500-400</td></tr>
</table>
</div>
</div>
</div>
<script>
// Add click handlers for collapsible sections
var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
// Function to show specific section
function showSection(id) {
document.getElementById(id).scrollIntoView({
behavior: 'smooth'
});
}
</script>
</body>
</html>

View File

@ -0,0 +1,158 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Japan Travel Handbook (Print Version) - April 15-23, 2024</title>
<style>
@media print {
body {
font-family: Arial, sans-serif;
font-size: 11pt;
line-height: 1.4;
margin: 0.5in;
}
h1 { font-size: 16pt; }
h2 { font-size: 14pt; }
h3 { font-size: 12pt; }
.section {
margin: 10px 0;
padding: 5px;
border: 1px solid #ccc;
page-break-inside: avoid;
}
.no-break {
page-break-inside: avoid;
}
table {
border-collapse: collapse;
width: 100%;
margin: 10px 0;
}
td, th {
border: 1px solid #000;
padding: 4px;
font-size: 10pt;
}
ul, ol {
margin: 5px 0;
padding-left: 20px;
}
li {
margin: 3px 0;
}
.page-break {
page-break-before: always;
}
}
/* Screen styles */
body {
font-family: Arial, sans-serif;
line-height: 1.4;
margin: 20px;
max-width: 800px;
margin: 0 auto;
}
.section {
margin: 15px 0;
padding: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
table {
border-collapse: collapse;
width: 100%;
margin: 10px 0;
}
td, th {
border: 1px solid #000;
padding: 8px;
}
@media screen {
.page-break {
margin: 30px 0;
border-top: 2px dashed #ccc;
}
}
</style>
</head>
<body>
<h1>Japan Travel Handbook (Print Version)</h1>
<p><strong>Trip Dates:</strong> April 15-23, 2024</p>
<div class="section">
<h2>Emergency Contacts & Important Information</h2>
<ul>
<li>Emergency in Japan: 119 (Ambulance/Fire) / 110 (Police)</li>
<li>US Embassy Tokyo: +81-3-3224-5000</li>
<li>Tourist Information Hotline: 03-3201-3331</li>
<li>Your Travel Insurance: [Write number here]</li>
</ul>
</div>
<div class="section">
<h2>Daily Itinerary Summary</h2>
<table>
<tr><th>Date</th><th>Location</th><th>Key Activities</th></tr>
<tr><td>Apr 15</td><td>Tokyo</td><td>Arrival, Shinjuku area exploration</td></tr>
<tr><td>Apr 16</td><td>Tokyo</td><td>Meiji Shrine, Harajuku, Senso-ji, Skytree</td></tr>
<tr><td>Apr 17</td><td>Tokyo</td><td>Tea Ceremony, Budokan, Yanaka Ginza</td></tr>
<tr><td>Apr 18</td><td>Kyoto</td><td>Travel to Kyoto, Kinkaku-ji, Gion</td></tr>
<tr><td>Apr 19</td><td>Kyoto</td><td>Fushimi Inari, Arashiyama, Evening Proposal</td></tr>
<tr><td>Apr 20</td><td>Nara/Kyoto</td><td>Nara Park day trip, deer feeding</td></tr>
<tr><td>Apr 21</td><td>Tokyo</td><td>Return to Tokyo, bay cruise</td></tr>
</table>
</div>
<div class="page-break"></div>
<div class="section">
<h2>Essential Japanese Phrases</h2>
<table>
<tr><th>English</th><th>Japanese</th><th>When to Use</th></tr>
<tr><td>Arigatou gozaimasu</td><td>ありがとうございます</td><td>Thank you (formal)</td></tr>
<tr><td>Sumimasen</td><td>すみません</td><td>Excuse me/Sorry</td></tr>
<tr><td>Onegaishimasu</td><td>お願いします</td><td>Please</td></tr>
<tr><td>Toire wa doko desu ka?</td><td>トイレはどこですか?</td><td>Where is the bathroom?</td></tr>
<tr><td>Eigo ga hanasemasu ka?</td><td>英語が話せますか?</td><td>Do you speak English?</td></tr>
</table>
</div>
<div class="section">
<h2>Transportation Notes</h2>
<ul>
<li>JR Pass: Activate on April 15</li>
<li>Tokyo-Kyoto Shinkansen: ~2h15m</li>
<li>Kyoto-Nara Local Train: ~45m</li>
<li>Last trains: Usually around midnight</li>
<li>Keep ¥3000 for unexpected taxi rides</li>
</ul>
</div>
<div class="page-break"></div>
<div class="section no-break">
<h2>Proposal Day Timeline (April 19)</h2>
<table>
<tr><th>Time</th><th>Activity</th><th>Notes</th></tr>
<tr><td>4:00 PM</td><td>Head to Maruyama Park</td><td>Check weather first</td></tr>
<tr><td>4:30 PM</td><td>Tea house visit</td><td>Light refreshments</td></tr>
<tr><td>5:15 PM</td><td>Park walk begins</td><td>Head to weeping cherry tree</td></tr>
<tr><td>5:30 PM</td><td>Arrive at spot</td><td>Find quiet area</td></tr>
<tr><td>7:00 PM</td><td>Dinner reservation</td><td>Kikunoi Roan</td></tr>
</table>
<p><strong>Backup Location:</strong> Gion Shirakawa area (in case of rain)</p>
</div>
<div class="section">
<h2>Quick Reference Budget</h2>
<table>
<tr><th>Item</th><th>Budget (USD)</th><th>Notes</th></tr>
<tr><td>Hotels</td><td>1500-2000</td><td>Pre-booked</td></tr>
<tr><td>Transport</td><td>600-800</td><td>Including JR Pass</td></tr>
<tr><td>Food</td><td>800-1000</td><td>~$60/person/day</td></tr>
<tr><td>Activities</td><td>600-800</td><td>Including tea ceremony</td></tr>
<tr><td>Shopping</td><td>500-400</td><td>Souvenirs/gifts</td></tr>
</table>
</div>
</body>
</html>

3
examples/readme.md Normal file
View File

@ -0,0 +1,3 @@
# Examples
We put some examples in the `examples` directory. All the examples use the same prompt as `Manus`.
The Model we use is `claude3.5`.