Home Esplora Aiuto
Accedi
harlanji
/
dev-practice
mirror da https://github.com/harlanji/dev-practice.git
1
0
Forka 0
File Problemi 0 Wiki
Sfoglia il codice sorgente

added Bootstrap Chat UI demo. focus: cloning a popular mobile chat UI, live streaming asmr format

Harlan J. Iverson 1 anno fa
parent
affa0529a5
commit
7ec10fc964
2 ha cambiato i file con 421 aggiunte e 0 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 16 0
      2023-02-03/chat-ui_bootstrap/README.md
  2. 405 0
      2023-02-03/chat-ui_bootstrap/chat-ui_bootstrap.html

+ 16 - 0
2023-02-03/chat-ui_bootstrap/README.md
Vedi File 

@@ -0,0 +1,16 @@
 
+# Boostrap Chat UI Demo
 
+
 
+Refreshing Bootstrap skills with version 5, using iMessage as a guide..
 
+
 
+One of several demos I live streamed in ASMR format, about the 5th in the series on Bootstrap UI clones.
 
+
 
+Stream link: https://www.youtube.com/watch?v=nyacMSGc--M&list=PLD5lYPY-uZpo70dsd8eR8fPpd55Eqbvef&index=11&pp=gAQBiAQB
 
+
 
+Playlist: https://www.youtube.com/playlist?list=PLD5lYPY-uZpo70dsd8eR8fPpd55Eqbvef
 
+
 
+## Dev Practice
 
+
 
+Focus:
 
+
 
+* Boostrap practice - cloning popular UI
 
+* ASMR live stream

+ 405 - 0
2023-02-03/chat-ui_bootstrap/chat-ui_bootstrap.html
Vedi File 

@@ -0,0 +1,405 @@
 
+<!doctype html>
 
+<html lang="en" data-bs-theme="light">
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <title>Bootstrap demo</title>
 
+    <link href="bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
 
+	<script src="bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
 
+
 
+	<link rel="stylesheet" href="bootstrap-icons.css">
 
+
 
+
 
+<style>
 
+
 
+
 
+<!--
 
+
 
+30 minutes already.
 
+
 
+Thanks for joining!
 
+
 
+-->
 
+
 
+</style>
 
+
 
+  </head>
 
+  <body>
 
+	<div class="container-fluid">
 
+		<div class="d-flex">
 
+			<div class="col-xl-1 d-none d-xl-block"
 
+				style="">
 
+				
+<ul class="list-group list-group-flush w-100 text-secondary">
 
+  <li class="list-group-item d-flex justify-content-between align-items-start active">
 
+    <div class="me-2">
 
+      <div class="fw-bold">
 
+	  Group Chat 1
 
+	  </div>
 
+      Content for list item
 
+    </div>
 
+    <small class="text-light">11:40 PM</small>
 
+  </li>
 
+  <li class="list-group-item d-flex justify-content-between align-items-start">
 
+    <div class="me-2">
 
+      <div class="fw-bold">Subheading</div>
 
+      Content for list item
 
+    </div>
 
+    <small class="text-light">11:40 PM</small>
 
+  </li>
 
+  <li class="list-group-item d-flex justify-content-between align-items-start">
 
+    <div class="me-2">
 
+      <div class="fw-bold">Subheading</div>
 
+      Content for list item
 
+    </div>
 
+    <small class="text-light">11:40 PM</small>
 
+  </li>
 
+</ul>
 
+				
+				
+				
+			</div>
 
+			
+			
+			
+			<div class="d-flex flex-column w-100">
 
+				<div class="text-bg-light d-flex justify-content-around w-100"
 
+					style="position: fixed; top: 0">
 
+					<div class="d-flex flex-column text-center">
 
+						<img src="" 
+						class="rounded-circle"
 
+						style="height: 40px; width: 40px"
 
+						>
 
+						<small>
 
+						P1
 
+						</small>
 
+					</div>
 
+					<div class="d-flex flex-column text-center">
 
+						<img src="" 
+						class="rounded-circle"
 
+						style="height: 40px; width: 40px">
 
+						<small>
 
+						P2
 
+						</small>
 
+					</div>
 
+					<div class="d-flex flex-column text-center">
 
+						<img src="" 
+						class="rounded-circle"
 
+						style="height: 40px; width: 40px">
 
+						<small>
 
+						P3
 
+						</small>
 
+					</div>
 
+				</div>
 
+				
+				<div class="d-flex flex-column"
 
+					>
 
+				
+				
+				
+<div class="d-flex flex-column text-center" style="padding-top: 75px">
 
+					<small>
 
+						Messages<br>
 
+						Today 9:40 PM
 
+					</small>
 
+				</div>
 
+				<div class="d-flex flex-column"
 
+					style="margin-right: 60px">
 
+					<div class="d-flex">
 
+						<img src="" 
+							class="rounded-circle align-self-end me-1 mb-1"
 
+							style="height: 30px; width: 30px"
 
+							>
 
+						<div class="d-flex flex-column">
 
+							<small class="text-secondary ms-2">
 
+							From
 
+							</small>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">
 
+							
+							Lorem ipsum dah dah doo doo we love to text and why don't you? Super fat, super fat, pump pump pump.
 
+							
+							<br>
 
+							
+							Don't you love the long form text?
 
+							
+							</span>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				<div class="d-flex flex-column"
 
+					style="margin-left: 60px">
 
+					<div class="d-flex ms-auto">
 
+						<div class="d-flex flex-column text-end">
 
+							<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">
 
+							
+							Message 1 replied with love baby, heyy. Supa fat supa fat he he he he he supa fat potato hehehe. Fat fat fat. Faaaaat buddy.
 
+							
+							</span>
 
+							<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">Message 2</span>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				
+				<div class="d-flex flex-column"
 
+					style="margin-right: 60px">
 
+					<div class="d-flex">
 
+						<img src="" 
+							class="rounded-circle align-self-end me-1 mb-1"
 
+							style="height: 30px; width: 30px"
 
+							>
 
+						<div class="d-flex flex-column">
 
+							<small class="text-secondary ms-2">
 
+							From
 
+							</small>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">Lorem ipsum dah dah doo doo we love to text and why don't you?</span>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				
+				<div class="d-flex flex-column"
 
+					style="margin-left: 60px">
 
+					<div class="d-flex ms-auto">
 
+						<div class="d-flex flex-column text-end">
 
+							<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">
 
+							
+							Message 1 replied with love baby, heyy
 
+							
+							<br>
 
+							
+							Yea we love that long form content!
 
+							
+							</span>
 
+							<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">Message 2</span>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				
+				<div class="d-flex flex-column text-center">
 
+					<small>
 
+						11:15 PM
 
+					</small>
 
+				</div>
 
+				
+				<div class="d-flex flex-column"
 
+					style="margin-right: 60px">
 
+					<div class="d-flex">
 
+						<img src="" 
+							class="rounded-circle align-self-end me-1 mb-1"
 
+							style="height: 30px; width: 30px"
 
+							>
 
+						<div class="d-flex flex-column">
 
+							<small class="text-secondary ms-2">
 
+							From
 
+							</small>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">Lorem ipsum dah dah doo doo we love to text and why don't you?</span>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				
+				<!-- -->
 
+				
+				<div class="d-flex flex-column"
 
+					style="margin-right: 60px">
 
+					<div class="d-flex">
 
+						<img src="" 
+							class="rounded-circle align-self-end me-1 mb-1"
 
+							style="height: 30px; width: 30px"
 
+							>
 
+						<div class="d-flex flex-column">
 
+							<small class="text-secondary ms-2">
 
+							From
 
+							</small>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">
 
+							
+							Lorem ipsum dah dah doo doo we love to text and why don't you?
 
+							
+							<br>
 
+							
+							Don't you love the long form text?
 
+							
+							</span>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				<div class="d-flex flex-column"
 
+					style="margin-left: 60px">
 
+					<div class="d-flex ms-auto">
 
+						<div class="d-flex flex-column text-end">
 
+							<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">
 
+							
+							Message 1 replied with love baby, heyy
 
+							
+							</span>
 
+							<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">Message 2</span>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				
+				<div class="d-flex flex-column"
 
+					style="margin-right: 60px">
 
+					<div class="d-flex">
 
+						<img src="" 
+							class="rounded-circle align-self-end me-1 mb-1"
 
+							style="height: 30px; width: 30px"
 
+							>
 
+						<div class="d-flex flex-column">
 
+							<small class="text-secondary ms-2">
 
+							From
 
+							</small>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">Lorem ipsum dah dah doo doo we love to text and why don't you?</span>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				
+				<div class="d-flex flex-column"
 
+					style="margin-left: 60px">
 
+					<div class="d-flex ms-auto">
 
+						<div class="d-flex flex-column text-end">
 
+							<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">
 
+							
+							Message 1 replied with love baby, heyy
 
+							
+							<br>
 
+							
+							Yea we love that long form content!
 
+							
+							</span>
 
+							<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">Message 2</span>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				
+				<div class="d-flex flex-column text-center">
 
+					<small>
 
+						11:15 PM
 
+					</small>
 
+				</div>
 
+				
+				<div class="d-flex flex-column"
 
+					style="margin-right: 60px">
 
+					<div class="d-flex">
 
+						<img src="" 
+							class="rounded-circle align-self-end me-1 mb-1"
 
+							style="height: 30px; width: 30px"
 
+							>
 
+						<div class="d-flex flex-column">
 
+							<small class="text-secondary ms-2">
 
+							From
 
+							</small>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">Lorem ipsum dah dah doo doo we love to text and why don't you?</span>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				
+				<div class="d-flex flex-column"
 
+					style="margin-right: 60px">
 
+					<div class="d-flex">
 
+						<img src="" 
+							class="rounded-circle align-self-end me-1 mb-1"
 
+							style="height: 30px; width: 30px"
 
+							>
 
+						<div class="d-flex flex-column">
 
+							<small class="text-secondary ms-2">
 
+							From
 
+							</small>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">
 
+							
+							Lorem ipsum dah dah doo doo we love to text and why don't you?
 
+							
+							<br>
 
+							
+							Don't you love the long form text?
 
+							
+							</span>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				<div class="d-flex flex-column"
 
+					style="margin-left: 60px">
 
+					<div class="d-flex ms-auto">
 
+						<div class="d-flex flex-column text-end">
 
+							<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">
 
+							
+							Message 1 replied with love baby, heyy
 
+							
+							</span>
 
+							<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">Message 2</span>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				
+				<div class="d-flex flex-column"
 
+					style="margin-right: 60px">
 
+					<div class="d-flex">
 
+						<img src="" 
+							class="rounded-circle align-self-end me-1 mb-1"
 
+							style="height: 30px; width: 30px"
 
+							>
 
+						<div class="d-flex flex-column">
 
+							<small class="text-secondary ms-2">
 
+							From
 
+							</small>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">Lorem ipsum dah dah doo doo we love to text and why don't you?</span>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				
+				<div class="d-flex flex-column"
 
+					style="margin-left: 60px">
 
+					<div class="d-flex ms-auto">
 
+						<div class="d-flex flex-column text-end">
 
+							<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">
 
+							
+							Message 1 replied with love baby, heyy
 
+							
+							<br>
 
+							
+							Yea we love that long form content!
 
+							
+							</span>
 
+							<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">Message 2</span>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				
+				<div class="d-flex flex-column text-center">
 
+					<small>
 
+						11:15 PM
 
+					</small>
 
+				</div>
 
+				
+				<div class="d-flex flex-column"
 
+					style="margin-right: 60px">
 
+					<div class="d-flex">
 
+						<img src="" 
+							class="rounded-circle align-self-end me-1 mb-1"
 
+							style="height: 30px; width: 30px"
 
+							>
 
+						<div class="d-flex flex-column">
 
+							<small class="text-secondary ms-2">
 
+							From
 
+							</small>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
 
+							<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">Lorem ipsum dah dah doo doo we love to text and why don't you?</span>
 
+						</div>
 
+					</div>
 
+				</div>
 
+				
+				
+				
+				</div>
 
+				
+				
+			</div>
 
+		</div>
 
+	</div>
 
+  </body>
 
+</html>