create frontend of the app

ably · Oct 29, 2019 · 72671b4 · 72671b4
1 parent fd3b1a2
commit 72671b4
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+
+<html>
+    <head>
+        <!-- scripts for the app -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+        <!-- Ably script -->
+        <script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
+        <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
+        <link rel="stylesheet" type="text/css" href="index.css" > 
+    </head>
+    <body>
+        <!--The chat app container-->
+        <div class="chat-container">
+            <div class="chat">
+                <div class="language-select-container">
+
+                    <!--Dropdown menu for the language selector-->
+                    <div class="form-group">
+                        <label for="languageSelector">Please select a language</label>
+                        <select class="form-control" id="languageSelector">
+                        </select>
+                    </div>
+                </div>
+
+                <!--Message container - the chat messages will appear here-->
+                <ul class="row message-container" id="channel-status" ></ul>
+
+                <!--Input container for the input field ans send button-->
+                <div class="input-container">
+                    <div class="row text-input-container">
+                        <input type="text" class="text-input" id="input-field"/>
+                        <input id="publish" class="input-button" type="submit" value="Send">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+    <script src="bundle.js"></script>
+</html>
diff --git a/public/index.css b/public/index.css
@@ -0,0 +1,87 @@
+
+* {
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+}
+body {
+    background: #f2f2f2;
+}
+.chat-container {
+    background-color: #f2f2f2;
+    color: #404040;
+    width: 505px;
+    margin: 40px auto;
+    border: 1px solid #e1e1e8;
+    border-radius: 5px;
+}
+.language-select-container {
+    background-color: #ffffff;
+    padding: 20px 40px 20px;
+    border-radius: 5px 5px 0 0;
+}
+.language-select-container select {
+    height: 30px;
+    margin-left: 20px;
+    font-size: 14px;
+    min-width: 150px;
+}
+.input-container {
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 0 0 5px 5px;
+}
+.text-input-container {
+    background-color: #f2f2f2;
+    border-radius: 20px;
+    width: 100%;
+}
+.text-input {
+    background-color: #f2f2f2;
+    width: 80%;
+    height: 32px;
+    border: 0;
+    border-radius: 20px;
+    outline: none;
+    padding: 0 20px;
+    font-size: 14px;
+}
+.input-button {
+    width: 19%;
+    border-radius: 20px;
+    height: 32px; 
+    outline: none;
+    cursor: pointer;
+}
+
+.message-container {
+    height: 300px;
+    overflow: scroll;
+    list-style-type: none;
+}
+.message-time {
+    float: right;
+    margin-right: 40px;
+}
+.message {
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+}
+.message picture {
+    width: 15%
+}
+.message-info {
+    width: 65%;
+ }
+.message-image {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+}
+.message-name {
+    margin-top: 0;
+    margin-bottom: 5px;
+}
+.message-text {
+    margin-top: 8px;
+}