@codewithdan/ai-repo-adventure-generator
Version:
Generate beautiful HTML adventure websites from your codebase
74 lines (65 loc) • 3.35 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{PAGE_TITLE}}</title>
<link rel="stylesheet" href="assets/theme.css">
<link rel="stylesheet" href="{{NAVIGATOR_ASSETS_PATH}}/quest-navigator.css">
<link rel="stylesheet" href="{{TOGGLE_ASSETS_PATH}}/theme-toggle.css">
</head>
<body class="theme-{{CURRENT_THEME}}">
<nav class="navbar">
<div class="nav-content">
<div class="nav-left">
<a href="{{REPO_URL}}" target="_blank" rel="noopener noreferrer" class="github-link">
<img src="{{GITHUB_LOGO}}" alt="GitHub" width="24" height="24">
</a>
<a href="index.html">{{ADVENTURE_TITLE}}</a>
</div>
<div class="nav-middle">
</div>
<div class="nav-right">
{{CHANGE_THEME_LINK}}
<a href="#" class="nav-link quest-map-trigger">Quests</a>
<button class="theme-toggle-btn" aria-label="Switch to light mode" type="button">
<div class="theme-toggle-slider">
<svg class="toggle-icon sun-icon" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="4" fill="currentColor"/>
<path d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<svg class="toggle-icon moon-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
</svg>
</div>
</button>
</div>
</div>
</nav>
<div class="container">
<div class="quest-content">
<h1>Adventure Complete!</h1>
<hr>
<h2>Adventure Recap</h2>
<p>{{JOURNEY_SUMMARY}}</p>
<h2>Key Concepts Learned</h2>
{{QUEST_SUMMARY_LIST}}
<hr>
<p><strong>Congratulations!</strong> You've successfully explored the codebase and learned key architectural patterns. The adventure may be complete, but your understanding of this system will serve you well in future explorations.</p>
</div>
<div class="quest-navigation quest-navigation-bottom">
<a href="{{LAST_QUEST_FILENAME}}" class="prev-quest-btn">← Back to {{LAST_QUEST_TITLE}}</a>
<a href="index.html" class="next-quest-btn">Return to Adventure →</a>
</div>
</div>
<footer class="footer">
<div class="footer-content">
<span>Created using <a href="https://github.com/DanWahlin/ai-repo-adventures" target="_blank" rel="noopener noreferrer" class="repo-link">AI Repo Adventures</a></span>
</div>
</footer>
<!-- Quest Navigator Script (for navbar Quests button functionality) -->
<script src="{{NAVIGATOR_ASSETS_PATH}}/quest-navigator.js"></script>
<!-- Theme Toggle Script -->
<script src="{{TOGGLE_ASSETS_PATH}}/theme-toggle.js"></script>
</body>
</html>