Aiohttp response with html page?

V

Vladislav the Wise2020-09-25 18:16:49

Python

Vladislav the Wise, 2020-09-25 18:16:49

I have a page in the "web.html" file, I need to send it via aiohttp to the client so that css styles are applied to it in a separate "web.css" file, how to do this?

html file

<html>
<script type='text/javascript'>
function get_warning() {
  return 'Через некоторое время сервис уйдёт на доработку. В это время сервис будет недоступен.'
};
function new_warning() {
  console.log('warning: '+get_warning());
  document.getElementById('warning').value = get_warning();
};
function s_close() {
  document.getElementsByClassName('warn').item(0).hidden = true;
};


</script>
  <head>
    <link rel='icon' type='image/png' href='https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/OOjs_UI_icon_alert-warning.svg/480px-OOjs_UI_icon_alert-warning.svg.png'>
    <link rel='stylesheet' type='text/css' href='/web.css'>
    <meta charset="UTF-8">
    <title>Warning!</title>
  </head>
  <body>
    <div class='warn'>
      <label id='warning_label'>Предупреждение:</label>
      <textarea id='warning' placeholder='An warning message should appear here'></textarea>
      <input id='btn_close' type='button' value='Okay' onclick="s_close()">
      <script>
      new_warning()
      </script>
    </div>
  </body>
<html>

css file

body {
  background: white;
}
.warn {
  box-shadow: -10px 10px 17px rgba(0,0,0,255);/*rgba(200,200,200,0.5);*/
  padding-top: 10px;
  padding-bottom: 20;
  padding-left: 10px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40;
  background: rgb(0, 90, 130);
  border-radius: 9px;
}
#btn_close {
  display: block;
  border: none;
  background: rgb(87, 87, 87);/*rgba(45, 45, 45, .10);*/
  border-radius: 9px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: 50;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  
}
#warning {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16;
  height: 2.6in;
  width: 83%;
  margin-left: 0.5in;
  resize: none;
  border: none;
  color: rgb(200, 60, 0);
  background: rgb(0, 46, 84);
  pointer-events: none;
}
#warning_label {
  margin-bottom: 40px;
  margin-left: 47px;
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

#warning::placeholder {
  color: rgb(3, 161, 43);
}


#btn_close:hover {
  transition: background 0.2s linear;
  background: rgb(107, 107, 107);
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

J

javedimka, 2020-09-25
@javedimka

Process the route to the css file by your server and give it to the client