Skip to content

Commit

Permalink
Update to 2.0.0
Browse files Browse the repository at this point in the history 
Update 2.0.0 with Google Material Design
  • Loading branch information
@Zac0511
Zac0511 committed Jul 20, 2024
1 parent 12e59c8 commit 948e509
Show file tree
Hide file tree
Showing 13 changed files with 319 additions and 168 deletions.
Binary file added icons/send.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
110 changes: 77 additions & 33 deletions index-iframe.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,29 @@
<link rel="icon" type="image/vnd.icon" href="favicon.ico">
<script>console.log("Puter AI PWA started, ready to send messages.")</script>
<script>console.warn("Warning: app is in iframe mode. Some functionnalities may be unavailable.")</script>
<!-- Material Design Web CDN -->
<script type="importmap">
{
"imports": {
"@material/web/": "https://esm.run/@material/web/"
}
}
</script>
<script type="module">
import '@material/web/all.js';
import { styles as typescaleStyles } from '@material/web/typography/md-typescale-styles.js';

document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
</script>

<!-- Noto Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans&display=swap" rel="stylesheet">

<style>
body {
font-family: Arial, sans-serif;
font-family: 'Noto Sans', sans-serif;
margin: 0;
padding: 0;
display: flex;
Expand All @@ -28,13 +48,13 @@
margin: auto;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
border-radius: 30px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#messages {
height: 300px;
height: 400px;
overflow-y: auto;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
Expand All @@ -44,7 +64,7 @@
.message {
padding: 5px;
margin: 5px 0;
border-radius: 4px;
border-radius: 10px;
background: #2c7aef;
color: white;
}
Expand All @@ -61,61 +81,79 @@

#chat-input {
display: flex;
align-items: center;
}

#chat-input input {
#chat-input md-outlined-text-field {
flex-grow: 1;
padding: 10px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 4px;
max-width: 489px;
min-height: 78px;
max-height: 686px;
--md-filled-text-field-input-text-font: 'Noto Sans', sans-serif;
--md-filled-text-field-label-text-font: 'Noto Sans', sans-serif;
}

#chat-input button {
#chat-input md-filled-button {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
height: 52px;
}

#chat-input button:hover {
background: #0056b3;
md-filled-button,
md-outlined-button {
--mdc-theme-primary: #007bff;
--mdc-theme-on-primary: white;
font-family: 'Noto Sans', sans-serif;
}

#open-full-button {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
md-outlined-button {
margin-top: 20px;
}

a {
color: #007bff;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

#open-full-button:hover {
background: #0056b3;
:root {
--md-sys-color-primary: #007bff;
--md-sys-color-secondary: #007bffdc;
--md-ref-typeface-brand: 'Noto Sans';
--md-ref-typeface-plain: 'Noto Sans';
}

#open-full-button {
margin-top: 20px;
--mdc-theme-primary: #007bff;
--mdc-theme-on-primary: white;
font-family: 'Noto Sans', sans-serif;
}
</style>
<script src="https://js.puter.com/v2/"></script>

</head>


<body>
<script>
if (typeof navigator.serviceWorker !== 'undefined') {
navigator.serviceWorker.register('offline.js')
}
</script>
</script>
<div id="chat-container">
<div id="messages"></div>
<div id="chat-input">
<input type="text" id="input-message" placeholder="Type a message...">
<button onclick="sendMessage()">Send</button>
<md-outlined-text-field label="Message" placeholder="Type a message..." id="messageInput"
error-text="Please type a message" style="font-family: 'Noto Sans', sans-serif;"></md-outlined-text-field>
<md-filled-button id="sendButton" style="font-family: 'Noto Sans', sans-serif;">Send
<img slot="icon" src="icons/send.png" alt="Send Icon" />
</md-filled-button>
</div>
</div>
<button id="open-full-button" onclick="window.open('https://puter-ai.puter.site', '_blank');">Open full app</button>
<md-filled-button id="open-full-button" onclick="window.open('https://puter-ai.puter.site', '_blank');" style="font-family: 'Noto Sans', sans-serif;">Open full app</md-filled-button>
<p>Powered by <a href="https://puter.com">Puter</a></p>

<script>
Expand All @@ -133,8 +171,9 @@
}

function sendMessage() {
const input = document.getElementById("input-message");
const input = document.querySelector("#messageInput");
const message = input.value.trim();
console.log("Message sent to Puter AI");
if (message) {
addMessage(message, true);
input.value = '';
Expand All @@ -144,20 +183,25 @@
puter.ai.chat(messages).then(response => {
addMessage(response, false);
messages.push(response.message);
console.log("AI response received");
}).catch(error => {
console.error("AI response error:", error);
});
}
}

// Sends the message if enter is pressed
document.getElementById("input-message").addEventListener("keypress", function(event) {
document.querySelector("#messageInput").addEventListener("keypress", function (event) {
if (event.key === "Enter") {
event.preventDefault();
sendMessage();
}
});

document.querySelector('#sendButton').addEventListener('click', function () {
sendMessage();
});
</script>
</body>

</html>
</html>
103 changes: 70 additions & 33 deletions index-puter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,29 @@
<link rel="icon" type="image/vnd.icon" href="favicon.ico">
<script>console.log("Puter AI PWA started, ready to send messages.")</script>
<script>console.warn("Warning: app is in Puter mode. Some functionnalities may be unavailable.")</script>
<!-- Material Design Web CDN -->
<script type="importmap">
{
"imports": {
"@material/web/": "https://esm.run/@material/web/"
}
}
</script>
<script type="module">
import '@material/web/all.js';
import { styles as typescaleStyles } from '@material/web/typography/md-typescale-styles.js';

document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
</script>

<!-- Noto Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans&display=swap" rel="stylesheet">

<style>
body {
font-family: Arial, sans-serif;
font-family: 'Noto Sans', sans-serif;
margin: 0;
padding: 0;
display: flex;
Expand All @@ -28,13 +48,13 @@
margin: auto;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
border-radius: 30px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#messages {
height: 300px;
height: 400px;
overflow-y: auto;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
Expand All @@ -44,7 +64,7 @@
.message {
padding: 5px;
margin: 5px 0;
border-radius: 4px;
border-radius: 10px;
background: #2c7aef;
color: white;
}
Expand All @@ -61,58 +81,69 @@

#chat-input {
display: flex;
align-items: center;
}

#chat-input input {
#chat-input md-outlined-text-field {
flex-grow: 1;
padding: 10px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 4px;
max-width: 489px;
min-height: 78px;
max-height: 686px;
--md-filled-text-field-input-text-font: 'Noto Sans', sans-serif;
--md-filled-text-field-label-text-font: 'Noto Sans', sans-serif;
}

#chat-input button {
#chat-input md-filled-button {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
height: 52px;
}

#chat-input button:hover {
background: #0056b3;
md-filled-button,
md-outlined-button {
--mdc-theme-primary: #007bff;
--mdc-theme-on-primary: white;
font-family: 'Noto Sans', sans-serif;
}

#open-full-button {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
md-outlined-button {
margin-top: 20px;
}

a {
color: #007bff;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

#open-full-button:hover {
background: #0056b3;
:root {
--md-sys-color-primary: #007bff;
--md-sys-color-secondary: #007bffdc;
--md-ref-typeface-brand: 'Noto Sans';
--md-ref-typeface-plain: 'Noto Sans';
}
</style>
<script src="https://js.puter.com/v2/"></script>

</head>


<body>
<script>
if (typeof navigator.serviceWorker !== 'undefined') {
navigator.serviceWorker.register('offline.js')
navigator.serviceWorker.register('offline.js')
}
</script>
</script>
<div id="chat-container">
<div id="messages"></div>
<div id="chat-input">
<input type="text" id="input-message" placeholder="Type a message...">
<button onclick="sendMessage()">Send</button>
<md-outlined-text-field label="Message" placeholder="Type a message..." id="messageInput"
error-text="Please type a message" style="font-family: 'Noto Sans', sans-serif;"></md-outlined-text-field>
<md-filled-button id="sendButton" style="font-family: 'Noto Sans', sans-serif;">Send
<img slot="icon" src="icons/send.png" alt="Send Icon" />
</md-filled-button>
</div>
</div>
<p>Powered by Puter</p>
Expand All @@ -133,8 +164,9 @@
}

function sendMessage() {
const input = document.getElementById("input-message");
const input = document.querySelector("#messageInput");
const message = input.value.trim();
console.log("Message sent to Puter AI");
if (message) {
addMessage(message, true);
input.value = '';
Expand All @@ -144,20 +176,25 @@
puter.ai.chat(messages).then(response => {
addMessage(response, false);
messages.push(response.message);
console.log("AI response received");
}).catch(error => {
console.error("AI response error:", error);
});
}
}

// Sends the message if enter is pressed
document.getElementById("input-message").addEventListener("keypress", function(event) {
document.querySelector("#messageInput").addEventListener("keypress", function (event) {
if (event.key === "Enter") {
event.preventDefault();
sendMessage();
}
});

document.querySelector('#sendButton').addEventListener('click', function () {
sendMessage();
});
</script>
</body>

</html>
</html>
Loading

0 comments on commit 948e509

Please sign in to comment.