├── README.md ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Web-Browser 2 | A Beautiful & Fully Working Web Browser Using HTML, CSS & JavaScript Only... 3 | 4 | Demo :: https://pb2204.github.io/Web-Browser 5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | Browser 13 | 14 | 15 | 16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 | 29 |
30 |
31 | 34 |
35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | let iframe = $('#iframe'); 3 | let urlInput = $('#url'); 4 | 5 | // This Function Will Load The URL 6 | function loadURL(url) { 7 | if (!url.match(/^(http|https):\/\//i)) { 8 | url = 'https://' + url; 9 | } 10 | iframe.attr('src', url); 11 | } 12 | loadURL('pabitrabanerjee.newsgoogle.org'); 13 | // GO Button 14 | $('#go').click(function () { 15 | let url = urlInput.val(); 16 | 17 | if (url) { 18 | loadURL(url); 19 | } 20 | }); 21 | 22 | urlInput.keypress(function (event) { 23 | if (event.which === 13) { 24 | $('#go').click(); 25 | return false; 26 | } 27 | }); 28 | // BACK Button 29 | $('#back').click(function () { 30 | history.back(); 31 | }); 32 | 33 | // Forward Button 34 | $('#forward').click(function () { 35 | history.forward(); 36 | }); 37 | 38 | // Refresh Button 39 | $('#refresh').click(function () { 40 | iframe.attr('src', iframe.attr('src')); 41 | }); 42 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* General Styles */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | html, 8 | body { 9 | margin: 0; 10 | padding: 0; 11 | height: 100%; 12 | } 13 | 14 | /* Browser Style */ 15 | 16 | .browser { 17 | border: 1px solid #ccc; 18 | height: 100%; 19 | display: flex; 20 | flex-direction: column; 21 | } 22 | 23 | /* Toolbar Styles */ 24 | 25 | .toolbar { 26 | display: flex; 27 | align-items: center; 28 | background-color: rgb(240, 225, 225); 29 | padding: 5px; 30 | } 31 | 32 | .toolbar input[type='text'] { 33 | flex: 1; 34 | margin-right: 5px; 35 | } 36 | 37 | /* Button Styles */ 38 | 39 | .right { 40 | margin-right: 3px; 41 | } 42 | 43 | .btn { 44 | border-radius: 0; 45 | } 46 | 47 | .btn-primary { 48 | background-color: coral; 49 | border-color: darkslategrey; 50 | } 51 | 52 | .btn-primary:hover{ 53 | background-color: rgb(12, 187, 24); 54 | border-color: crimson; 55 | } 56 | 57 | /* Content Styles */ 58 | 59 | .content { 60 | flex: 1; 61 | height: 100%; 62 | } 63 | 64 | /* Iframe Styles */ 65 | 66 | iframe { 67 | width: 100%; 68 | height: 84vh; 69 | border: none; 70 | } 71 | 72 | .footer { 73 | background-color: rgb(240, 225, 225); 74 | padding: 10px; 75 | text-align: center; 76 | font-size: 20px; 77 | } 78 | 79 | span { 80 | font-family: cursive; 81 | color: crimson; 82 | font-weight: 500; 83 | } --------------------------------------------------------------------------------