├── img ├── header.jpg ├── screenshot.png ├── tweet-pic-iwd.jpg ├── tweet-pic-pain.jpg ├── link.svg ├── reply.svg ├── like.svg ├── more.svg ├── discord-search.svg ├── location.svg ├── calendar.svg ├── discord-icon-black.svg ├── discord-icon-blue.svg ├── discord-icon-green.svg ├── discord-icon-orange.svg ├── discord-icon-pink.svg ├── discord-icon-red.svg ├── discord-icon.svg ├── retweet.svg ├── discord-mentions.svg ├── discord-icon-with-status.svg ├── discord-icon-with-status-bordered.svg ├── verify.svg ├── birthday.svg ├── discord-logo.svg ├── discord-friends.svg └── discord-badges.svg ├── LICENSE ├── js └── main.js ├── README.md ├── css └── main.css └── index.html /img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anniedotexe/twitcord/HEAD/img/header.jpg -------------------------------------------------------------------------------- /img/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anniedotexe/twitcord/HEAD/img/screenshot.png -------------------------------------------------------------------------------- /img/tweet-pic-iwd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anniedotexe/twitcord/HEAD/img/tweet-pic-iwd.jpg -------------------------------------------------------------------------------- /img/tweet-pic-pain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anniedotexe/twitcord/HEAD/img/tweet-pic-pain.jpg -------------------------------------------------------------------------------- /img/link.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /img/reply.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /img/like.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /img/more.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /img/discord-search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 10 | 11 | -------------------------------------------------------------------------------- /img/location.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /img/calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /img/discord-icon-black.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /img/discord-icon-blue.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /img/discord-icon-green.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /img/discord-icon-orange.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /img/discord-icon-pink.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /img/discord-icon-red.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /img/discord-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Annie Wu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /img/retweet.svg: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /img/discord-mentions.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | function changeTab(tabID, tabName) { 2 | var i, tabContent, tabButton; 3 | 4 | // Hide all tab content 5 | tabContent = document.getElementsByClassName("tab-content"); 6 | for (i = 0; i < tabContent.length; i++) { 7 | tabContent[i].style.display = "none"; 8 | } 9 | 10 | // Get all tab buttons and remove "active" 11 | tabButton = document.getElementsByClassName("tab-button"); 12 | for (i = 0; i < tabButton.length; i++) { 13 | tabButton[i].classList.remove("active"); 14 | } 15 | 16 | // Show current tab, add "active" to the button that opened the tab 17 | document.getElementById(tabName).style.display = "block"; 18 | document.getElementById(tabID).classList.add("active"); 19 | } 20 | 21 | function clickReaction(reactID) { 22 | document.getElementById(reactID).classList.toggle("clicked"); 23 | } 24 | 25 | function clickFollow(buttonID) { 26 | document.getElementById(buttonID).innerHTML = "Unfollow"; 27 | if (document.getElementById(buttonID).classList.contains("clicked")) { 28 | document.getElementById(buttonID).innerHTML = "Follow"; 29 | } 30 | else { 31 | document.getElementById(buttonID).innerHTML = "Unfollow"; 32 | } 33 | document.getElementById(buttonID).classList.toggle("clicked") 34 | } -------------------------------------------------------------------------------- /img/discord-icon-with-status.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /img/discord-icon-with-status-bordered.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /img/verify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /img/birthday.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /img/discord-logo.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Twitcord 2 | 3 | #### An interactive mobile UI concept of if Twitter was owned by Discord 4 | 5 | **LIVE DEMO** - [twitcord.anniew.xyz](https://twitcord.anniew.xyz/) OR [twitcord.netlify.app](https://twitcord.netlify.app) 6 | 7 | Users can click on reactions, follow button, and tweets navigation bar. 8 | 9 | _Inspired by [this reddit post](https://www.reddit.com/r/discordapp/comments/lxjoe1/if_twitter_were_owned_by_discord/)._ 10 | 11 |

12 | 13 | HTML5 14 | 15 | 16 | CSS3 17 | 18 | 19 | JavaScript 20 | 21 | 22 | Open Source? Yes! 23 | 24 | Netlify Status 25 |

26 | 27 |

28 | Mobile Demo Screenshot 29 |

30 | 31 | ### Built With 32 | 33 | - 💙 [HTML5](https://www.w3schools.com/html/) 34 | - 💜 [CSS3](https://www.w3schools.com/css/) 35 | - 💙 [JavaScript](https://www.w3schools.com/js/DEFAULT.asp) 36 | 37 | ### Hosted On 38 | 39 | - 💜 [Netlify](https://www.netlify.com/) 40 | 41 | --- 42 | 43 | ## Contributing 44 | 45 | Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate. 46 | 47 | ### How To Contribute 48 | 49 | 1. Fork the repository to your own Github account. 50 | 2. Clone the project to your machine. 51 | 3. Create a branch locally with a succinct but descriptive name. 52 | 4. Commit changes to the branch. 53 | 5. Following any formatting and testing guidelines specific to this repo. 54 | 6. Push changes to your fork. 55 | 7. Open a Pull Request in my repository. 56 | 57 | --- 58 | 59 | ## Creator 60 | 61 | Annie Wu ([anniedotexe](https://github.com/anniedotexe)) 62 | 63 | Copyright © 2021-2026 Annie Wu. All rights reserved. 64 | 65 | I do not maintain this code anymore and will not respond to any questions sent to me. 66 | 67 | If you like my content or find this code useful, give it a ⭐ or support me by buying me a coffee ☕💙 68 | 69 | Buy Me A Coffee 70 | -------------------------------------------------------------------------------- /img/discord-friends.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-size: 100%; 6 | font-family: 'Open Sans', sans-serif; 7 | color: #FFFFFF; 8 | } 9 | 10 | body { 11 | font-size: 14px; 12 | } 13 | 14 | a { 15 | color: #5cb2e4; 16 | text-decoration: none; 17 | } 18 | 19 | .page { 20 | width: 100%; 21 | position: absolute; 22 | margin: 0 auto; 23 | } 24 | 25 | .profile-top-container { 26 | max-width: 600px; 27 | background-color: #23272A; 28 | } 29 | 30 | .header-photo img { 31 | max-width: 100%; 32 | height: auto; 33 | } 34 | 35 | .profile { 36 | margin: 0; 37 | padding: 20px; 38 | border-bottom: 2px solid #2C2F33; 39 | } 40 | 41 | .prof-pic-and-buttons-row { 42 | display: flex; 43 | flex-wrap: wrap; 44 | flex-direction: row; 45 | justify-content: space-between; 46 | margin-bottom: 5px; 47 | } 48 | 49 | .prof-pic { 50 | overflow: hidden; 51 | width: 70px; 52 | height: 70px; 53 | margin: -57px 0; 54 | } 55 | 56 | .prof-pic img { 57 | margin: 0 auto; 58 | height: 100%; 59 | width: auto; 60 | cursor: pointer; 61 | inset: 0; 62 | } 63 | 64 | .buttons { 65 | display: flex; 66 | font-size: 10.5px; 67 | } 68 | 69 | .button { 70 | cursor: pointer; 71 | margin-right: 15px; 72 | border-radius: 3px; 73 | } 74 | 75 | .follow { 76 | text-decoration: none; 77 | background-color: #808080; 78 | padding: 5px 10px; 79 | } 80 | 81 | .follow a { 82 | color: #FFFFFF; 83 | } 84 | 85 | .message { 86 | background-color: #3cb371; 87 | padding: 5px 10px; 88 | border-radius: 3px; 89 | margin-right: 7px; 90 | } 91 | 92 | .more { 93 | margin: 0; 94 | padding-top: 4px; 95 | } 96 | 97 | .username { 98 | display: flex; 99 | flex-direction: row; 100 | flex-wrap: nowrap; 101 | align-items: center; 102 | } 103 | 104 | .username span { 105 | font-size: 16px; 106 | margin-right: 5px; 107 | font-weight: 600; 108 | letter-spacing: 1px; 109 | } 110 | 111 | .username img { 112 | height: 100%; 113 | margin-top: 5px; 114 | } 115 | 116 | .hashtagNumber { 117 | font-size: 14px; 118 | color: #808080; 119 | } 120 | 121 | .badges { 122 | margin: 10px 0; 123 | } 124 | 125 | .bio { 126 | margin: 10px 0; 127 | } 128 | 129 | .bio span { 130 | color: #dadada; 131 | } 132 | 133 | .location-link-bday-joined { 134 | margin: 10px 0; 135 | display: flex; 136 | flex-direction: row; 137 | flex-wrap: wrap; 138 | flex-basis: auto; 139 | justify-content: start; 140 | } 141 | 142 | .location-link-bday-joined div { 143 | margin-right: 15px; 144 | } 145 | 146 | .location-link-bday-joined div span { 147 | line-height: 18px; 148 | font-size: 13px; 149 | color: #808080; 150 | -webkit-user-select: none; 151 | -ms-user-select: none; 152 | user-select: none; 153 | } 154 | 155 | .location-link-bday-joined div img { 156 | height: 18px; 157 | line-height: 18px; 158 | margin-right: 2px; 159 | vertical-align: middle; 160 | } 161 | 162 | .location { 163 | cursor: pointer; 164 | } 165 | 166 | .following-follower { 167 | display: flex; 168 | flex-direction: row; 169 | margin-top: 10px; 170 | } 171 | 172 | .following-follower div { 173 | margin-right: 20px; 174 | font-size: 12px; 175 | } 176 | 177 | .follow-number { 178 | font-weight: 600; 179 | color: #dadada; 180 | background-color: #D7443E; 181 | margin-right: 5px; 182 | padding: 0 6px; 183 | border-radius: 15px; 184 | } 185 | 186 | .follow-text { 187 | -webkit-user-select: none; 188 | -ms-user-select: none; 189 | user-select: none; 190 | color: #dadada; 191 | } 192 | 193 | .profile-tweets-tabs { 194 | padding: 0 20px; 195 | display: flex; 196 | flex-direction: row; 197 | flex-wrap: nowrap; 198 | justify-content: space-around; 199 | overflow: hidden; 200 | } 201 | 202 | .profile-tweets-tabs .tab-button { 203 | background-color: inherit; 204 | border: none; 205 | outline: none; 206 | cursor: pointer; 207 | text-align: center; 208 | color: #dadada; 209 | font-weight: 600; 210 | letter-spacing: 0.5px; 211 | padding: 15px 5px; 212 | } 213 | 214 | .tab-button.active { 215 | color: #7289DA; 216 | border-bottom: 2px solid #7289DA; 217 | } 218 | 219 | .tab-content { 220 | max-width: 600px; 221 | margin-bottom: 50px; 222 | /* add margin because of the bottom nav bar */ 223 | background-color: #2C2F33; 224 | } 225 | 226 | .tweet { 227 | position: relative; 228 | display: flex; 229 | flex-direction: row; 230 | flex-basis: auto; 231 | align-items: stretch; 232 | overflow: hidden; 233 | padding: 20px; 234 | border-bottom: 1px solid #808080; 235 | } 236 | 237 | .tweet.reply { 238 | padding-bottom: 0; 239 | border: 0; 240 | } 241 | 242 | .tweet-profile-pic { 243 | cursor: pointer; 244 | position: absolute; 245 | display: flex; 246 | justify-content: start; 247 | flex-direction: column; 248 | overflow: hidden; 249 | width: 40px; 250 | height: 100%; 251 | } 252 | 253 | .tweet-profile-pic div { 254 | padding-bottom: 10px; 255 | height: auto; 256 | width: 100%; 257 | } 258 | 259 | .tweet-profile-pic img { 260 | position: absolute; 261 | width: 100%; 262 | height: auto; 263 | border-radius: 50%; 264 | inset: 0; 265 | } 266 | 267 | .tweet-profile-pic .replying-icon-line { 268 | align-items: stretch; 269 | flex-grow: 1; 270 | margin: 40px auto 0 auto; 271 | width: 2px; 272 | background-color: #808080; 273 | } 274 | 275 | .replying-to { 276 | color: #808080; 277 | } 278 | 279 | .replying-to:before { 280 | content: "Replying to "; 281 | } 282 | 283 | .tweet-content { 284 | display: flex; 285 | flex-direction: column; 286 | align-items: left; 287 | margin-left: 50px; 288 | } 289 | 290 | .tweeter-info { 291 | display: flex; 292 | flex-direction: row; 293 | flex-wrap: nowrap; 294 | } 295 | 296 | .tweeter-info span { 297 | line-height: 20px; 298 | margin-right: 5px; 299 | } 300 | 301 | .name { 302 | font-weight: 600; 303 | letter-spacing: 1px; 304 | } 305 | 306 | .hashtag, .separator, .date-sent { 307 | color: #808080; 308 | } 309 | 310 | .tweet-text { 311 | margin: 10px 0; 312 | } 313 | 314 | .quoted.tweet-pic { 315 | margin: 0; 316 | } 317 | 318 | .tweet-pic { 319 | margin: 10px 0; 320 | } 321 | 322 | .tweet-pic img { 323 | border-radius: 15px; 324 | width: 100%; 325 | height: 100%; 326 | } 327 | 328 | .tweet-react { 329 | display: flex; 330 | flex-direction: row; 331 | flex-wrap: nowrap; 332 | margin: 5px 0; 333 | } 334 | 335 | .reaction { 336 | cursor: pointer; 337 | display: flex; 338 | flex-direction: row; 339 | flex-wrap: nowrap; 340 | padding: 2px 2px 2px 7px; 341 | margin-right: 10px; 342 | border-radius: 5px; 343 | background-color: #4b4b4b8e; 344 | } 345 | 346 | .clicked { 347 | background-color: #7289da4b; 348 | } 349 | 350 | .clicked .react-number { 351 | color: #7289da; 352 | } 353 | 354 | .reaction img { 355 | margin-right: 5px; 356 | height: 18px; 357 | line-height: 18px; 358 | vertical-align: middle; 359 | } 360 | 361 | .reaction span { 362 | margin-right: 5px; 363 | height: 18px; 364 | font-size: 13px; 365 | color: #dadada; 366 | } 367 | 368 | .quote-tweet { 369 | margin: 10px 0; 370 | } 371 | 372 | .quote-tweet-content { 373 | border-radius: 15px; 374 | border: 1px solid #4b4b4b; 375 | padding: 10px; 376 | } 377 | 378 | .quote-tweet-content img { 379 | border-radius: 15px; 380 | border: 1px solid #4b4b4b; 381 | padding: 0; 382 | } 383 | 384 | .quote-prof-pic-tweeter-info { 385 | display: flex; 386 | flex-direction: row; 387 | flex-wrap: nowrap; 388 | margin-bottom: 5px; 389 | } 390 | 391 | .quote-prof-pic-tweeter-info img { 392 | height: 20px; 393 | margin-right: 5px; 394 | } 395 | 396 | .quote-prof-pic-tweeter-info span { 397 | line-height: 20px; 398 | margin-right: 5px; 399 | } 400 | 401 | .nav-bar-bottom { 402 | display: flex; 403 | flex-direction: row; 404 | justify-content: space-between; 405 | position: fixed; 406 | text-align: center; 407 | bottom: 0; 408 | max-width: 600px; 409 | width: 100%; 410 | height: 51px; 411 | margin: 0; 412 | padding: 0; 413 | background-color: #23272A; 414 | } 415 | 416 | .nav-bar-bottom a { 417 | margin: auto; 418 | } 419 | 420 | .nav-bar-bottom a img { 421 | padding: 10px; 422 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Twitcord 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 | Header 22 |
23 |
24 |
25 |
26 | Profile Picture 27 |
28 |
29 | 34 |
35 | Send Message 36 |
37 |
38 | Three Dots 39 |
40 |
41 |
42 |
43 | Discord 44 | Verified 45 |
46 |
#0000
47 |
48 | Discord Badges 49 |
50 |
51 | Your place to talk. Discord is a voice, video and text communication service to talk and 52 | hang out with your friends and 53 | communities. 54 |
55 |
56 |
57 | Location 58 | San Francisco, CA 59 |
60 |
61 | Link 62 | discord.com 63 |
64 |
65 | Birthday 66 | May 13 67 |
68 |
69 | Date Joined 70 | Joined March 2015 71 |
72 |
73 |
74 |
75 | 76 | 77 |
78 |
79 | 80 | 81 |
82 |
83 |
84 |
85 | Tweets 86 | Tweets & Replies 87 | Media 88 | Likes 89 |
90 |
91 |
92 |
93 |
94 | Profile Picture 95 |
96 |
97 |
98 | Discord 99 | #0000 100 | • 101 | Mar 17 102 |
103 |
104 |

cannot believe they're making me post again

105 |
106 |
107 | 108 | Reply 109 | 1.3K 110 | 111 | 112 | Retweet 113 | 1K 114 | 115 | 116 | Like 117 | 50.8K 118 | 119 |
120 |
121 |
122 |
123 |
124 | Profile Picture 125 |
126 |
127 |
128 | Discord 129 | #0000 130 | • 131 | Mar 15 132 |
133 |
134 |

did we ever figure out why they did surgery on a grape

135 |
136 |
137 | 138 | Reply 139 | 1.3K 140 | 141 | 142 | Retweet 143 | 2.1K 144 | 145 | 146 | Like 147 | 51.7K 148 | 149 |
150 |
151 |
152 |
153 |
154 | Profile Picture 155 |
156 |
157 |
158 | Discord 159 | #0000 160 | • 161 | Mar 5 162 |
163 |
164 |

We're supporting breast cancer research for International Womens Day! There's over a 165 | dozen Discord communities holding streams and events to support @BCRFcure today through 167 | the 14th.

168 | (ง'̀-'́)ง We're matching up to 60k in donations, so join the cause: http://dis.gd/iwd-events 170 |

171 |
172 |
173 | Picture in the Tweet 174 |
175 |
176 | 177 | Reply 178 | 166 179 | 180 | 181 | Retweet 182 | 397 183 | 184 | 185 | Like 186 | 3.9K 187 | 188 |
189 |
190 |
191 |
192 |
193 | Profile Picture 194 |
195 |
196 |
197 | Discord 198 | #0000 199 | • 200 | Mar 3 201 |
202 |
203 |

who?

204 |
205 |
206 |
207 |
208 | Profile Picture 209 | Dariath 210 | #4200 211 | • 212 | May 29, 2015 213 |
214 |
215 |

Anyone heard of this Discord - Chat for Games program? Looks interesting.

216 |
217 |
218 | Show this thread 219 |
220 |
221 |
222 |
223 | 224 | Reply 225 | 433 226 | 227 | 228 | Retweet 229 | 438 230 | 231 | 232 | Like 233 | 15.8K 234 | 235 |
236 |
237 |
238 |
239 | 507 | 614 | 747 | 748 | 749 | 766 |
767 | 768 | 769 | 770 | 771 | 772 | -------------------------------------------------------------------------------- /img/discord-badges.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | --------------------------------------------------------------------------------