-
-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7daa35a
commit edacae3
Showing
2 changed files
with
186 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>The MovieVerse Database</title> | ||
|
|
||
| <!-- Bootstrap CSS --> | ||
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> | ||
|
|
||
| <!-- Font Awesome for icons --> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> | ||
|
|
||
| <!-- Vue.js --> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> | ||
|
|
||
| <!-- React and ReactDOM --> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> | ||
|
|
||
| <!-- React DOM --> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> | ||
|
|
||
| <!-- Custom CSS --> | ||
| <style> | ||
| .react-component { | ||
| background-color: #61DAFB; | ||
| color: #282c34; | ||
| padding: 20px; | ||
| margin-bottom: 20px; | ||
| } | ||
| .vue-component { | ||
| background-color: #42b883; | ||
| color: #35495e; | ||
| padding: 20px; | ||
| margin-bottom: 20px; | ||
| } | ||
| </style> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <noscript>You need to enable JavaScript to run this app.</noscript> | ||
|
|
||
| <!-- React Root Element --> | ||
| <div id="react-root"></div> | ||
|
|
||
| <!-- Vue Root Element --> | ||
| <div id="vue-root"></div> | ||
|
|
||
| <!-- Initialize React and Vue --> | ||
| <script> | ||
| // React Component | ||
| class MyReactComponent extends React.Component { | ||
| render() { | ||
| return ( | ||
| <div className="react-component"> | ||
| MovieVerse App - React Component | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| // Render React Component | ||
| ReactDOM.render(<MyReactComponent />, document.getElementById('react-root')); | ||
| // Vue Instance | ||
| new Vue({ | ||
| el: '#vue-root', | ||
| data: { | ||
| message: 'MovieVerse App - Vue Component!' | ||
| }, | ||
| template: '<div class="vue-component">{{ message }}</div>' | ||
| }); | ||
| </script> | ||
|
|
||
| <!-- Page content, which will be dynamically populated by JS --> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-12"> | ||
| <h1 class="text-center">The MovieVerse Database</h1> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Bootstrap and other necessary JavaScript --> | ||
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> | ||
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>The MovieVerse Database</title> | ||
|
|
||
| <!-- Bootstrap CSS --> | ||
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> | ||
|
|
||
| <!-- Font Awesome for icons --> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> | ||
|
|
||
| <!-- Vue.js --> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> | ||
|
|
||
| <!-- React and ReactDOM --> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> | ||
|
|
||
| <!-- React DOM --> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> | ||
|
|
||
| <!-- Custom CSS --> | ||
| <style> | ||
| .react-component { | ||
| background-color: #61DAFB; | ||
| color: #282c34; | ||
| padding: 20px; | ||
| margin-bottom: 20px; | ||
| } | ||
| .vue-component { | ||
| background-color: #42b883; | ||
| color: #35495e; | ||
| padding: 20px; | ||
| margin-bottom: 20px; | ||
| } | ||
| </style> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <noscript>You need to enable JavaScript to run this app.</noscript> | ||
|
|
||
| <!-- React Root Element --> | ||
| <div id="react-root"></div> | ||
|
|
||
| <!-- Vue Root Element --> | ||
| <div id="vue-root"></div> | ||
|
|
||
| <!-- Initialize React and Vue --> | ||
| <script> | ||
| // React Component | ||
| class MyReactComponent extends React.Component { | ||
| render() { | ||
| return ( | ||
| <div className="react-component"> | ||
| MovieVerse App - React Component | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| // Render React Component | ||
| ReactDOM.render(<MyReactComponent />, document.getElementById('react-root')); | ||
| // Vue Instance | ||
| new Vue({ | ||
| el: '#vue-root', | ||
| data: { | ||
| message: 'MovieVerse App - Vue Component!' | ||
| }, | ||
| template: '<div class="vue-component">{{ message }}</div>' | ||
| }); | ||
| </script> | ||
|
|
||
| <!-- Page content, which will be dynamically populated by JS --> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-12"> | ||
| <h1 class="text-center">The MovieVerse Database</h1> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Bootstrap and other necessary JavaScript --> | ||
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> | ||
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |