服务器有点不稳定，现在直接上本地的代码，希望大佬看看，谢谢：
以下是index.html文件中的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reverse Dictionary</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 100vh;
margin: 0;
}
#title {
margin-top: 20px;
text-align: center;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<div id="title">
<h1>Mongolian Reverse Dictionary</h1>
</div>
<!-- Including search.html using iframe -->
<iframe src="/search" name="searchFrame"></iframe>
</body>
</html>
以下是search.html文件中的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mongolian Reverse Dictionary</title>
<link rel="stylesheet">
<link rel="stylesheet" >
<style>
@font-face {
font-family: 'MongolianFont';
src: url('/static/fonts/MQG8F02.ttf') format('truetype');
}
body {
display: flex;
flex-direction: column;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-moz-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
font-family: 'MongolianFont', sans-serif;
}
.content-wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.search-container {
transform: rotate(90deg);
transform-origin: left top;
margin-left: 200px;
margin-top: 15px;
}
#search-box {
writing-mode: horizontal-tb;
width: 87vh;
height: 1.5cm;
}
#results {
writing-mode: horizontal-tb;
margin-top: -65px;
margin-left: 7.2cm;
display: flex;
flex-direction: column;
}
.item {
writing-mode: vertical-lr;
font-size: 25px;
}
.word-box {
padding: 5px;
}
#search-button {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 5px;
padding-right: 5px;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.item-container {
display: flex;
flex-direction: column; /* Adjust direction for vertical alignment */
align-items: center; /* Center items for consistent appearance */
}
.order-number {
margin-bottom: 5px; /* Space between order number and word box */
font-size: 25px;
}
.word-box {
/* Styles remain unchanged, ensure it's suitable for vertical text */
display: inline-block; /* Adjust display to accommodate vertical text */
padding: 5px;
writing-mode: vertical-lr; /* Ensure text orientation is vertical */
flex-grow: 1;
font-size: 25px;
cursor: pointer;
}
.translation-layer {
position: absolute;
display: none;
background-color: white;
border: 1px solid #ccc;
z-index: 1000;
padding: 10px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.translation-box {
background-color: white;
padding: 20px;
writing-mode: horizontal-tb;
display: flex; /* Ensure it's still a flex container */
flex-direction: column; /* Stack children vertically */
justify-content: space-between; /* Space out children */
height: 100%; /* Ensure it takes full height */
}
</style>
</head>
<body>
<div class="content-wrapper">
<div class="search-container">
<input type="text" id="search-box" class="form-control" placeholder="ᠡᠷᠢᠬᠦ ᠦᠭᠡ ᠶᠢᠨ ᠢᠶᠡᠨ ᠳᠦᠷᠰᠦᠯᠡᠯ ᠢ ᠣᠷᠣᠭᠤᠯᠤᠭᠠᠷᠠᠢ᠂ ᠡᠰᠡᠪᠡᠯ 🔍 ᠳᠠᠷᠤᠪᠴᠢ ᠶᠢ ᠳᠠᠷᠤᠵᠤ ᠵᠢᠱᠢᠶᠡ ᠶᠢ ᠦᠵᠡᠭᠡᠷᠡᠢ">
<button class="btn btn-primary" id="search-button">
<i class="fa fa-search"></i>
</button>
</div>
<div id="results" class="d-flex flex-column">
<!-- Predefined columns for results -->
<div id="column1" class="flex-row"></div>
<div id="column2" class="flex-row"></div>
<div id="column3" class="flex-row"></div>
<div id="column4" class="flex-row"></div>
</div>
</div>
<div id="translation-layer" class="translation-layer">
<div id="translation-box" class="translation-box"></div>
</div>
<!-- Loading Spinner -->
<div id="loading" style="display: none;">
<div class="d-flex justify-content-center">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#loading").hide();
if(sessionStorage.getItem('example_index') == undefined) sessionStorage.setItem('example_index', 0);
else sessionStorage.setItem('example_index', (sessionStorage.getItem('example_index') + 1) % 4);
// Function to create default items with colors
function createDefaultItems() {
for (var i = 0; i < 100; i++) {
var columnIndex = Math.floor(i / 25);
var column = $("#column" + (columnIndex + 1));
var color = `rgba(0, 90, 255, ${0.5 - i/100 * 0.45})`;
var itemStyle = 'background-color: ' + color + ';';
var itemContainer = $('<div class="item-container"></div>');
itemContainer.append($('<span class="order-number">' + (i + 1) + '. </span>'));
var item = $('<span class="word-box" style="' + itemStyle + '"> </span>'); // Empty content
itemContainer.append(item);
column.append(itemContainer);
}
}
// Create default items on page load
createDefaultItems();
$("#search-button").click(function(){
$("#loading").show();
var description = $("#search-box").val();
let examples = ['ᠲᠡᠩᠬᠡᠭᠡ ᠪᠦᠬᠦᠢ᠂ ᠴᠢᠳᠠᠯ ᠲᠡᠩᠬᠡᠭᠡ ᠶᠡᠬᠡᠲᠡᠢ᠂ ᠪᠢᠷᠠ ᠴᠢᠳᠠᠯ ᠲᠠᠢ᠃', 'ᠰᠠᠨᠠᠭᠠ ᠪᠤᠳᠤᠯ ᠢ ᠲᠠᠶᠢᠳᠬᠤᠷᠠᠭᠤᠯᠬᠤ᠂ ᠰᠡᠳᠬᠢᠯ ᠰᠠᠨᠠᠭᠠ ᠶᠢ ᠠᠭᠤᠵᠢᠮ ᠪᠣᠯᠭᠠᠬᠤ᠃', 'ᠤᠴᠢᠷ ᠶᠠᠪᠤᠳᠠᠯ ᠤᠨ ᠮᠠᠰᠢ ᠪᠦᠲᠦᠮᠵᠢ ᠲᠠᠢ ᠪᠠᠷ ᠥᠭᠡᠳᠡᠯᠡᠨ ᠳᠠᠪᠰᠢᠬᠤ', 'ᠰᠡᠴᠡᠨ ᠰᠡᠷᠭᠦᠯᠡᠩ']
if(description == '')
{
description = examples[sessionStorage.getItem('example_index')];
$("#search-box").val(description);
}
// Clear existing results in each column
$("#results .flex-row").empty();
$.get("/getWords?description=" + description, function(data){
var words = data; // Assuming data is a list of strings
// Distribute words across columns
for (var i = 0; i < words.length; i++) {
var columnIndex = Math.floor(i / 25);
var column = $("#column" + (columnIndex + 1));
var itemNumber = i % 25 + 1;
var color = `rgba(0, 90, 255, ${0.5 - i/100 * 0.45})`;
var itemStyle = 'background-color: ' + color + ';';
var itemContainer = $('<div class="item-container"></div>');
itemContainer.append($('<span class="order-number">' + (i + 1) + '. </span>'));
var item = $('<span class="word-box" style="' + itemStyle + '">' + words[i] + '</span>');
itemContainer.append(item);
column.append(itemContainer);
}
$("#loading").hide();
});
});
$(document).click(function(event) {
if (!$(event.target).closest('.translation-layer, .word-box').length) {
$('#translation-layer').hide();
}
});
function getTranslations(word, position) {
$.get('/getTranslations?word=' + word, function(response) {
if (response.result === 'success') {
const groupedTranslations = {};
var translationsHtml = '';
// 遍历所有翻译，并按origin分组
Object.keys(response).forEach(key => {
if (key !== "result") {
translationsHtml += '<div style="flex-grow: 1;">'; // Flex container for translations
response[key].forEach((translation, index) => {
translationsHtml += (index + 1) + '. ' + translation + '<br>';
});
translationsHtml += '</div><div style="text-align: right;"><u>' + key + '</u></div>'; // New div for origin, aligned right
}
});
var $translationLayer = $('#translation-layer');
$translationLayer.html(translationsHtml)
.css({
'left': position.left + position.width + 10 + 'px',
'top': position.top + 'px'
})
.show();
}
});
}
$('#results').on('click', '.word-box', function() {
var word = $(this).text().trim();
var wordPosition = $(this).offset();
wordPosition.width = $(this).width(); // Add width to the position object
getTranslations(word, wordPosition);
});
});
</script>
</body>
</html>
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2024-8-22 23:49:36
置顶卡
千斤顶
显身卡
发表于 2024-8-22 23:49:51
楼主