Select Text read_text.html
index_code.html
<!-- templates/index_y.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Suggestions</title>
<style>
html,
body {
margin: 0;
padding: 1%;
height: 100%;
font-family: Arial, sans-serif;
}
body {
background-color: black;
background-image: url('../static/assets/MemMaker_background.png');
background-repeat: repeat-y;
background-size: cover;
/* Use 'cover' to make the image cover the entire body */
background-position: top;
color: rgb(61, 195, 12);
}
video {
margin: 10px, auto;
width: 250px;
height: auto;
}
.wrapper {
display: flex;
width: 100%;
margin-left: auto;
margin-right: auto;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 70vh;
border: 1px solid darkgray;
}
.columns {
display: flex;
width: 100%;
margin-top: 10px;
}
.column {
padding: 5px;
box-sizing: border-box;
}
.column.left {
width: 50%;
border: 1px solid #3b3232;
}
.column.right {
margin: 0 auto;
/* Center horizontally */
width: 50%;
/* Adjusted width to make space for wrapped text */
border: 1px solid #3b3232;
text-align: left;
font-size: 20px;
/* Allow text wrapping */
word-wrap: break-word;
white-space: pre-wrap;
}
.column.right video {
max-width: 100%;
height: auto;
}
.footer {
width: 98%;
padding: 20px;
background-color: #333;
color: white;
text-align: center;
position: relative;
/* Make it relative to the container */
bottom: 0;
/* Push it to the bottom */
}
#code {
font-size: 18px;
font-family: monospace;
}
.notes {
margin-top: 0px auto;
font-size: 18px;
color: rgb(105, 178, 230);
}
pre {
white-space: pre-wrap;
}
.sticky {
position: sticky;
top: 0;
z-index: 100;
background-color: #760909;
}
.header {
display: flex;
align-items: left;
margin: 0 auto;
width: 98%;
padding: 5px;
text-align: center;
background-color: #760909;
color: rgb(238, 232, 201);
padding: 10px;
text-align: center;
font-size: 20px;
font-weight: bold;
margin-left: auto;
margin-right: auto;
}
.header h2 {
margin-left: 20px;
}
.header button {
margin-left: 20px;
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
height: 32px;
font-size: 16px;
transition: background-color 0.3s ease;
width: 200px;
}
.header button:hover {
background-color: #45a049;
height: 36px;
}
#search_input {
height: 30px;
width: 300px;
font-size: 16px;
border: 1px solid #f8e4c4;
border-radius: 4px;
margin-left: 20px;
}
</style>
<script>
// Function to find and highlight the search string
function findString(str) {
if (parseInt(navigator.appVersion) < 4) return;
// Check if find method is supported
if (window.find) {
// Find the search string
var strFound = window.find(str);
if (!strFound) {
// If not found, try to find from the beginning
window.find(str, 0, 1);
}
if (strFound) {
// Highlight the found text
var range = window.getSelection().getRangeAt(0);
var span = document.createElement('span');
span.style.backgroundColor = 'yellow';
range.surroundContents(span);
}
} else if (navigator.appName.indexOf("Microsoft") != -1) {
// Handle Microsoft browsers
// Not implemented for brevity
} else if (navigator.appName == "Opera") {
// Handle Opera browsers
alert("Opera browsers not supported, sorry...");
return;
}
// If not found, show alert
if (!strFound) alert("String '" + str + "' not found!");
}
// Function to move cursor to next occurrence of search input
function moveToNextOccurrence() {
var search_str = document.getElementById("search_input").value;
findString(search_str);
}
</script>
</head>
<body>
<div class="wrapper">
<div class="header sticky">
<h2>Code Suggestions: text_completion/templates/index_code.html |</h2>
<button id="search_submit" onclick="moveToNextOccurrence()">Find Next</button>
<input type="text" id="search_input"><a href="/view_functions" target="_blank">view_functions</a>
</div>
<div class="columns">
<div class="column left">
<pre class="notes">
{{functions}}
</pre>
<a style="font-size: 24px;
color: antiquewhite;" href="/readlog" target="_blank">readlog</a>
<form id="codeForm">
<label for="code">Enter your code:</label><br>
<textarea id="code" name="code" rows="10" cols="55"></textarea><br>
<button type="button" onclick="submitForm()">Generate Suggestions</button>
</form>
</div>
<div class="column right">
<div id="suggestions">
<!-- Suggestions will be displayed here -->
</div>
<script>
function submitForm() {
var code = document.getElementById('code').value;
var formData = new FormData();
formData.append('code', code);
fetch('/save', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(data => {
displaySuggestions(data.suggestions);
})
.catch((error) => {
console.error('Error:', error);
});
}
function displaySuggestions(suggestions) {
var suggestionsDiv = document.getElementById('suggestions');
suggestionsDiv.innerHTML = '<h2>Suggestions:</h2>';
suggestions.forEach(function (suggestion) {
suggestionsDiv.innerHTML += '<p>' + suggestion + '</p>';
});
}
</script>
</div>
</div>
</div>
<footer class="footer">
<p>Code Suggestions</p>
<p>Append suggestions to the completion source</p>
<!-- Footer content with textarea -->
<textarea id="userCode" placeholder="Your message here" rows="25" cols="120"></textarea>
<button onclick="saveCode()">Submit</button>
<script> function saveCode() {
var code = document.getElementById('userCode').value;
fetch('/save_code', {
method: 'POST',
body: code, // Send the code directly without JSON.stringify
})
.then(response => {
if (response.ok) {
alert('Code saved successfully!');
} else {
alert('Failed to save code.');
}
})
.catch((error) => {
console.error('Error:', error);
alert('Failed to save code.');
});
}
</script>
</footer>
</body>
</html>
Back to file list