from pywebio import *
from pywebio.output import *

css = """body{
      background-color: #ebebeb;
      font-family: -apple-system;
      font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
    }
    .chat-sender{
      clear:both;
      font-size: 80%;
    }
    .chat-sender div:nth-of-type(1){
      float: left;
    }
    .chat-sender div:nth-of-type(2){
      margin: 0 50px 2px 50px;
      padding: 0px;
      color: #848484;
      font-size: 70%;
      text-align: left;
    }
    .chat-sender div:nth-of-type(3){
      background-color: white;
      /*float: left;*/
      margin: 0 50px 10px 50px;
      padding: 10px 10px 10px 10px;
      border-radius:7px;
      text-indent: -12px;
    }

    .chat-receiver{
      clear:both;
      font-size: 80%;
    }
    .chat-receiver div:nth-of-type(1){
      float: right;
    }
    .chat-receiver div:nth-of-type(2){
      margin: 0px 50px 2px 50px;
      padding: 0px;
      color: #848484;
      font-size: 70%;
      text-align: right;
    }
    .chat-receiver div:nth-of-type(3){
      /*float:right;*/
      background-color: #b2e281;
      margin: 0px 50px 10px 50px;
      padding: 10px 10px 10px 10px;
      border-radius:7px;
    }

    .chat-receiver div:first-child img,
    .chat-sender div:first-child img{
      width: 40px;
      height: 40px;
      /*border-radius: 10%;*/
    }

    .chat-left_triangle{
      height: 0px;
      width: 0px;
      border-width: 6px;
      border-style: solid;
      border-color: transparent white transparent transparent;
      position: relative;
      left: -22px;
      top: 3px;
    }
    .chat-right_triangle{
      height: 0px;
      width: 0px;
      border-width: 6px;
      border-style: solid;
      border-color: transparent transparent transparent #b2e281;
      position: relative;
      right:-22px;
      top:3px;
    }

    .chat-notice{
      clear: both;
      font-size: 70%;
      color: white;
      text-align: center;
      margin-top: 15px;
      margin-bottom: 15px;
    }
    .chat-notice span{
      background-color: #cecece;
      line-height: 25px;
      border-radius: 5px;
      padding: 5px 10px;

    }"""

config(title="聊天记录", css_style=css)
html_left = """
<!-- Left -->
<div class="chat-sender">
  <div><img src="static/Accent_4_discrete.png"></div>
  <div>{}</div>
  <div>
    <div class="chat-left_triangle"></div>
    <span>{}</span>
  </div>
</div>
"""

html_right = """
<!-- Right -->
<div class="chat-receiver">
  <div><img src="static/Accent_3_discrete.png"></div>
  <div>{}</div>
  <div>
    <div class="chat-right_triangle"></div>
    <span> {}</span>
  </div>
</div>
"""


def main():
    # 首先要区分说话对对象

    liao_ji_lu = [["name", "内容"], ["name", "内容"]] * 100
    html_list = []

    for i, content in enumerate(liao_ji_lu):

        if i + 1 == len(liao_ji_lu):
            break
        if content[0] == liao_ji_lu[i + 1][0]:
            html_list.append(put_html(html_left.format(content[0], content[1])))
        else:
            html_list.append(put_html(html_right.format(content[0], content[1])))
    put_column(html_list)


if __name__ == '__main__':
    start_server(applications=main, port=8888, static_dir="./color_list_png",auto_open_webbrowser=True)

from pywebio import *
from pywebio.output import *

css="""
.sender{
    clear:both;
}
.sender div:nth-of-type(1){
    float: left;
}
.sender div:nth-of-type(2){
    background-color: aquamarine;
    float: left;
    margin: 0 20px 10px 15px;
    padding: 10px 10px 10px 0px;
    border-radius:7px;
}

.receiver div:first-child img,
.sender div:first-child img{
    width:50px;
    height: 50px;
}

.receiver{
    clear:both;
}
.receiver div:nth-child(1){
    float: right;
}
.receiver div:nth-of-type(2){
    float:right;
    background-color: gold;
    margin: 0 10px 10px 20px;
    padding: 10px 0px 10px 10px;
    border-radius:7px;
}

.left_triangle{
    height:0px;  
    width:0px;  
    border-width:8px;  
    border-style:solid;  
    border-color:transparent aquamarine transparent transparent;  
    position: relative;
    left:-16px;
    top:3px;
}

.right_triangle{
    height:0px;  
    width:0px;  
    border-width:8px;  
    border-style:solid;  
    border-color:transparent transparent transparent gold;  
    position: relative;
    right:-16px;
    top:3px;
}
"""
html_right="""


<!-- Right -->
  <div class="receiver">
      <div>
          <img src="{}">
      </div>
   <div>
        <div class="right_triangle"></div>
        <span> {} </span>
   </div>
  </div>  
"""
html_left="""
<!-- Left -->
<div class="sender">
      <div>
          <img src="{}">
      </div>
  <div>
      <div class="left_triangle"></div>
      <span> {}</span>
   </div>
  </div>
"""
config(title="聊天记录", css_style=css)

def main():
    # 首先要区分说话对对象

    liao_ji_lu = [["static/Acton_3_discrete.png", "内容"], ["static/Acton_3_discrete.png", "内容"]] * 100
    html_list = []

    for i, content in enumerate(liao_ji_lu):

        if i + 1 == len(liao_ji_lu):
            break
        if content[0] == liao_ji_lu[i + 1][0]:
            html_list.append(put_html(html_left.format(content[0], content[1])))
        else:
            html_list.append(put_html(html_right.format(content[0], content[1])))
    put_column(html_list)


if __name__ == '__main__':
    start_server(applications=main, port=8888, static_dir="./color_list_png",auto_open_webbrowser=True)