├── img ├── bg.jpeg ├── emo.png ├── mic.png ├── more.png ├── arrow.png ├── camera.png ├── heart.png ├── phone.png ├── video.png ├── affichage.png ├── check-2.png ├── emoji-1.png ├── emoji-2.png └── cs chapter.png ├── css └── style.css └── index.html /img/bg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/bg.jpeg -------------------------------------------------------------------------------- /img/emo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/emo.png -------------------------------------------------------------------------------- /img/mic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/mic.png -------------------------------------------------------------------------------- /img/more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/more.png -------------------------------------------------------------------------------- /img/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/arrow.png -------------------------------------------------------------------------------- /img/camera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/camera.png -------------------------------------------------------------------------------- /img/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/heart.png -------------------------------------------------------------------------------- /img/phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/phone.png -------------------------------------------------------------------------------- /img/video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/video.png -------------------------------------------------------------------------------- /img/affichage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/affichage.png -------------------------------------------------------------------------------- /img/check-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/check-2.png -------------------------------------------------------------------------------- /img/emoji-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/emoji-1.png -------------------------------------------------------------------------------- /img/emoji-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/emoji-2.png -------------------------------------------------------------------------------- /img/cs chapter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/cs chapter.png -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: 'Times New Roman', Times, serif; 6 | } 7 | .container{ 8 | width: 500px; 9 | margin: auto; 10 | } 11 | .chat{ 12 | display: flex; 13 | flex-direction: column; 14 | height: 100vh; 15 | background: #f1f0e8; 16 | } 17 | .chat-header{ 18 | display: flex; 19 | } 20 | .profil{ 21 | width: 100%; 22 | background: #036055; 23 | display: flex; 24 | align-items: center; 25 | height: 60px; 26 | padding: 0px 10px; 27 | position: relative; 28 | } 29 | .profil .cs{ 30 | display: block; 31 | width: 40px; 32 | position: absolute; 33 | top: 12px; 34 | cursor: pointer; 35 | border-radius: 20px; 36 | } 37 | .profil h2{ 38 | display: inline-block; 39 | line-height: 90px; 40 | vertical-align: bottom; 41 | color: #fff; 42 | margin-left: 50px; 43 | font-size: 20px; 44 | font-weight: 600; 45 | } 46 | .profil span{ 47 | color: #ccc; 48 | position: absolute; 49 | top: 42px; 50 | left: 70px; 51 | font-size: 14px; 52 | } 53 | .profil .left{ 54 | flex: 1; 55 | } 56 | .right .icon{ 57 | display: inline-block; 58 | width: 25px; 59 | margin-left: 8px; 60 | } 61 | .chat-box{ 62 | flex: 1; 63 | background-attachment: fixed; 64 | background-image: url(/img/bg.jpeg); 65 | overflow-y: scroll; 66 | padding-left: 20px; 67 | } 68 | .chat-footer{ 69 | display: flex; 70 | justify-content: center; 71 | align-items: center; 72 | border-radius: 60px; 73 | position: relative; 74 | cursor: pointer; 75 | } 76 | .chat-footer textarea{ 77 | display: block; 78 | flex:1; 79 | width: 100%; 80 | border-radius: 60px; 81 | margin: 5px; 82 | height: 50px; 83 | outline: none; 84 | font-size: 19px; 85 | padding: 10px; 86 | padding-left: 40px; 87 | padding-right:90px ; 88 | border: 2px solid #ccc; 89 | color: #555; 90 | resize: none; 91 | } 92 | .chat-footer .mic{ 93 | display: block; 94 | width: 45px; 95 | height: 45px; 96 | margin-top: -3px; 97 | margin-right: 18px; 98 | } 99 | .chat-footer .emo{ 100 | display: block; 101 | width: 35px; 102 | height: 35px; 103 | position: absolute; 104 | left: 10px; 105 | top: 12px; 106 | } 107 | .chat-footer .icons{ 108 | position: absolute; 109 | right: 100px; 110 | top: 10px; 111 | } 112 | .chat-footer .icons img{ 113 | display: inline-block; 114 | width: 35px; 115 | height: 35px; 116 | } 117 | .chat-r{ 118 | display: flex; 119 | } 120 | .chat-r .sp{ 121 | flex: 1; 122 | } 123 | .chat-l{ 124 | display: flex; 125 | } 126 | .chat-l .sp{ 127 | flex: 1; 128 | } 129 | .chat-box .mess{ 130 | max-width: 300px; 131 | background-color: #f7fcf6; 132 | padding: 10px; 133 | border-radius: 10px; 134 | margin: 20px 0px; 135 | cursor: pointer; 136 | } 137 | .chat-box .mess p{ 138 | word-break: break-all; 139 | font-size: 18px; 140 | } 141 | .chat-box .mess-r{ 142 | background: #e2ffc7; 143 | } 144 | .chat-box .emoji{ 145 | width: 20px; 146 | } 147 | .chat-box .check{ 148 | float: right; 149 | } 150 | .chat-box .check img{ 151 | width: 20px; 152 | } 153 | .chat-box .check span{ 154 | color: #888; 155 | font-size: 12px; 156 | font-weight: 700px; 157 | } 158 | *::-webkit-scrollbar{ 159 | width: 5px; 160 | } 161 | *::-webkit-scrollbar-track{ 162 | background-color: #f1f1f1; 163 | } 164 | *::-webkit-scrollbar-thumb{ 165 | background-color: #aaa; 166 | } 167 | *::-webkit-scrollbar-thumb:hover{ 168 | background-color: #555; 169 | } 170 | .chat-box .img_chat{ 171 | width: 280px; 172 | } 173 | @media screen and (max-width:400px){ 174 | .container{ 175 | width: 376px; 176 | } 177 | } 178 | 179 | 180 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | IEEE CS Chapter 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 | 18 |

CS Chapter

19 | online 20 |
21 |
22 | 23 | 24 | 25 |
26 |
27 |
28 |
29 |
30 |
31 |

32 | Hi,Talel Mejri 33 |

34 |
35 | 7:00 PM 36 |
37 |
38 |
39 |
40 |
41 |
42 |

43 | Hello 44 |

45 |
46 | 7:00 PM 47 | 48 |
49 |
50 |
51 |
52 |
53 |

54 | We hope you're having a nice day 55 |

56 |
57 | 7:01 PM 58 |
59 |
60 |
61 |
62 |
63 |
64 |

65 | Thanks i hope that you are having one too 66 |

67 |
68 | 7:02 PM 69 | 70 |
71 |
72 |
73 |
74 |
75 |

We appreciate the amount of work and efforts that you have put in to help improve this chapter and help your teammates and we are very honored to announce that you are our member of the month 76 | Keep up the good work

77 | 78 |
79 | 7:03 PM 80 |
81 |
82 |
83 |
84 |
85 |
86 |

87 | Thank you im very happy and honored to be among this great team and I'm very glad that you guys appreciate the work and efforts i have put with you 💙💙💙 88 |

89 |
90 | 7:04 PM 91 | 92 |
93 |
94 |
95 |
96 |
97 |

98 | Thank You 99 |

100 |
101 | 7:05 PM 102 |
103 |
104 |
105 |
106 |
107 |
108 |

109 | Have a good night 💙💙💙 110 |

111 |
112 | 7:05 PM 113 | 114 |
115 |
116 |
117 |
118 |
119 |

120 | 121 |

122 |
123 | 7:05 PM 124 |
125 |
126 |
127 |
128 | 136 |
137 |
138 | 139 | --------------------------------------------------------------------------------