Я работал над созданием веб-сайта с некоторыми базовыми функциями, которые я мог бы добавить позже, если потребуется.
Я бы хотел, чтобы пользователи могли вводить текст в поле ввода "Введите здесь ...", а когда они нажимают, введите его, добавьте новая строка на их сайте, основанная на только что набранной команде.
Например, если они введут «help», будет выведено несколько новых строк, объясняющих, что делает сайт, и некоторые начальные команды. Моя идея состоит в том, чтобы продолжать добавлять команды, для этого потребуется некоторая масштабируемость. У меня есть веб-сайт + поле ввода, работающее так, как я хочу.
.headTag {
background-color: lightgrey;
display: inline-block;
width: 100%;
height: 26px;
}
.topPageTitle {
color: black;
font-size: 18px;
float: left;
background-color: lightgrey;
margin-top: 0px;
}
.mainPageText {
color: black;
font-size: 18px;
float: right;
margin-right:10px;
margin-top: 0px;
}
.userInput {
width: 100%;
position: absolute;
bottom: 10px;
}
.mainWindow {
margin-top: 24px;
font-family: typewriter;
font-size: 18px;
color: green;
width: 100%
}
.mainWindow p {
margin-top: -18px;
}
input[type=text] {
width: 100%;
border: none;
background-color: black;
font-size: 18px;
font-family: typewriter;
color: green;
outline: none !important;
}
@font-face {
font-family: typewriter;
src: url('../assets/typewriter.ttf');
}
body {
background-color: black;
font-family: typewriter;
color: lightgrey;
background:#000;
}
.easyMenu {
position: absolute;
bottom: 5px;
font-family: typewriter;
font-size: 18px;
width: 100%;
}
.easyMenu a {
color: lightgrey;
width: 24.5%;
display:inline-block;
}
.easyMenu a:hover {
color: black;
background-color: lightgrey;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body>
<div class="headTag">
<p class="mainPageText">13.04.2020</p>
</div>
<div class="mainWindow">
<p>system>: Welcome to the Website.</p>
<p>system>: If you are stuck or don't know what to do type "Help"</p>
</div>
<div class="userInput">
<form>
<input type="text" autocomplete="off" spellcheck="false" id="fname" name="fname" value ="Type here..." onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue">
</form>
</div>
<div class="easyMenu">
<a>>: Back</a>
<a>>: Create Private Chat</a>
<a>>: Join Private Chat</a>
<a>>: Information</a>
</div>
</body>
</html>
В идеале я хотел бы придерживаться чистого HTML + CSS, однако, если JS, если потребуется, с удовольствием его использую. Я также открыт для идеи использования Python WSGI для этого, но я не уверен, начну ли это.
Любая помощь / совет очень ценятся.
С уважением Джеймс