message.html - AWS Code Sample

message.html

<!DOCTYPE HTML> <html xmlns:th="https://www.thymeleaf.org"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script th:src="|https://code.jquery.com/jquery-1.12.4.min.js|"></script> <script th:src="|https://code.jquery.com/ui/1.11.4/jquery-ui.min.js|"></script> <script src="../public/js/message.js" th:src="@{/js/message.js}"></script> <link rel="stylesheet" th:href="|https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css|"/> <link rel="stylesheet" href="../public/css/styles.css" th:href="@{/css/styles.css}" /> <link rel="icon" href="../public/images/favicon.ico" th:href="@{/images/favicon.ico}" /> <style> .messageelement { margin: auto; border: 2px solid #dedede; background-color: #D7D1D0 ; border-radius: 5px; max-width: 800px; padding: 10px; margin: 10px 0; } .messageelement::after { content: ""; clear: both; display: table; } .messageelement img { float: left; max-width: 60px; width: 100%; margin-right: 20px; border-radius: 50%; } .messageelement img.right { float: right; margin-left: 20px; margin-right:0; } </style> </head> <body> <header th:replace="layout :: site-header"/> <div class="container"> <h2>AWS Sample Messaging Application</h2> <div id="messages"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">Sender:</span> </div> <select name="cars" id="username"> <option value="Scott">Scott</option> <option value="Lam">Lam</option> </select> </div> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">Message:</span> </div> <textarea class="form-control" id="textarea" aria-label="With textarea"></textarea> <button type="button" onclick="pushMessage()" id="send" class="btn btn-success">Send</button> <button type="button" onclick="purge()" id="refresh" class="btn btn-success">Purge</button> </div> </div> <!-- All of these child items are hidden and only displayed in a FancyBox ------------------------------------------------------> <div id="hide" style="display: none"> <div id="base" class="messageelement"> <img src="../public/images/av2.png" th:src="@{/images/av2.png}" alt="Avatar" class="right" style="width:100%;"> <p id="text">Sweet! So, what do you wanna do today?</p> <span class="time-right">11:02</span> </div> </div> </body> </html>