Ark/terminal.css
1
0
Fork 0
mirror of https://github.com/letieu/terminal.css.git synced 2026-03-15 02:04:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

add prompt

Browse Source
This commit is contained in:
letieu
2025-12-10 05:09:31 +07:00
parent 050c760315
commit d2094cab14
2 changed files with 36 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
index.html
View File

@@ -6,13 +6,16 @@
<title>terminal.css - Terminal CSS Component Library</title> <title>terminal.css - Terminal CSS Component Library</title>
<!-- terminal.css Components (Bulma-style) --> <!-- terminal.css Components (Bulma-style) -->
<link rel="stylesheet" href="./index.css" /> <link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.2/index.css"
/>
<!-- Tailwind for layout (optional) --> <!-- Tailwind for layout (optional) -->
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<!-- terminal.css JavaScript --> <!-- terminal.css JavaScript -->
<script src="./index.js"></script> <script src="https://cdn.jsdelivr.net/gh/letieu/terminal.css@v0.0.2/index.js"></script>
</head> </head>
<body class="min-h-screen p-0 md:p-8"> <body class="min-h-screen p-0 md:p-8">
<!-- MAIN TERMINAL WINDOW --> <!-- MAIN TERMINAL WINDOW -->
@@ -41,9 +44,16 @@
>Installation Guide</a >Installation Guide</a
> >
<a class="button is-info" href="./showcase.html">Showcase</a> <a class="button is-info" href="./showcase.html">Showcase</a>
<a class="button is-ghost" href="https://github.com/letieu/terminal.css">GitHub</a> <a
class="button is-ghost"
href="https://github.com/letieu/terminal.css"
>GitHub</a
>
</div> </div>
<hr class="mt-6" /> <hr class="mt-6" />
<div class="mt-4 has-text-primary button" onclick="copyAIPrompt()">
Copy AI Prompt
</div>
</div> </div>
<!-- SECTION 1: TYPOGRAPHY --> <!-- SECTION 1: TYPOGRAPHY -->
@@ -862,4 +872,18 @@
<!-- Toast Container --> <!-- Toast Container -->
<div class="toast-container" id="toastContainer"></div> <div class="toast-container" id="toastContainer"></div>
</body> </body>
<script>
async function copyAIPrompt() {
const htmlText = document.querySelector("html").innerHTML;
const textToCopy = htmlText;
await navigator.clipboard.writeText(`
This is terminal-like css framework, this is full html example, please check and build a landing page about my SaaS product use this css framework:
${htmlText}
`);
showToast("primary", "Primary", "Copied the propmt");
}
</script>
</html> </html>

10
installation.html
View File

@@ -129,13 +129,21 @@
>Components page</a >Components page</a
> >
</li> </li>
<li class="mb-2">Find the component you want to use</li>
<li class="mb-2">Press <kbd>F12</kbd> to open DevTools</li> <li class="mb-2">Press <kbd>F12</kbd> to open DevTools</li>
<li class="mb-2"> <li class="mb-2">
Inspect the component and copy the HTML code Inspect the component and copy the HTML code
</li> </li>
<li>Paste it into your project</li> <li>Paste it into your project</li>
</ol> </ol>
<p class="has-text-muted text-sm mt-8 mb-2">Or Vibe coding</p>
<p>
Just drop the full
<a href="./index.html" class="has-text-primary"
>Components page</a
>
html code to the AI Model, tell it that flow the component
usage
</p>
</div> </div>
</div> </div>