Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML>
- <html lang = "en">
- <head>
- <!-- basic.html -->
- <title>stockX</title>
- <meta charset = "UTF-8" />
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
- <script src ="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
- <script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
- <script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
- <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
- <style>
- :root {
- --cardBorderShadow: rgba(60, 64, 67, .3) 0 1px 2px 0, rgba(60, 64, 67, .15) 0 1px 3px 1px;
- }
- .cardBorderShadow{
- box-shadow:var(--cardBorderShadow);
- }
- #panelContainer{
- position: absolute;
- width: 700px;
- height: 760px;
- margin-left: 100px;
- }
- #tickersPanel{
- width:465px;
- height: 340px;
- position: absolute;
- overflow-y: scroll;
- margin-left: 220px;
- margin-top: 15px;
- margin-bottom:7.5px;
- padding: 10px;
- opacity: 1.0;
- }
- #sentimentPanel{
- /*box-shadow: var(--cr-card-elevation_-_box-shadow);*/
- width:465px;
- height: 347.5px;
- position: absolute;
- overflow-y: scroll;
- margin-left: 220px;
- margin-top: 370px;
- margin-bottom:15px;
- padding: 10px;
- }
- #gadgetPanel{
- width:190px;
- height: 700px;
- position: absolute;
- overflow-y: scroll;
- margin-left: 15px;
- margin-top: 15px;
- margin-right: 30px;
- margin-bottom:30px;
- padding: 10px;
- font-size: 11px;
- }
- #activePanel{
- width: 465px;
- height: 340px;
- position: absolute;
- margin-left: 697.5px;
- margin-top: 15px;
- }
- #testingPanel{
- width:20%;
- height: 700px;
- position: fixed;
- overflow-y: scroll;
- margin-left: 1092px;
- margin-top: 15px;
- margin-bottom:30px;
- padding: 10px;
- font-size: 11px;
- }
- #allButtons {
- position: absolute;
- text-align: center;
- bottom:20px;
- width:90%;
- display: inline-block;
- -webkit-perspective: 400;
- -moz-perspective: 400;
- }
- #allButtons ul {
- font-size: 14px;
- margin: 0 auto;
- padding: 0;
- margin: 0;
- }
- #allButtons li {
- list-style-type: none;
- display: inline-block;
- position: relative;
- }
- #allButtons li span {
- display: none;
- position: absolute;
- bottom: 140px;
- left: 0;
- right: 0;
- width: 100%;
- background-color: rgba(0,0,0,.75);
- padding: 4px 0;
- border-radius: 12px; /* webkit nightly */
- -webkit-border-radius: 12px; /* for safari */
- -moz-border-radius: 12px;
- }
- #allButtons li button {
- border-radius: 5px;
- border-width: 1px;
- border-color: lightgrey;
- color: black;
- width: 60px;
- height: 40px;
- -webkit-transition: all 0.3s;
- -webkit-transform-origin: 50% 100%;
- -moz-transition: all 0.4s;
- -moz-transform-origin: 50% 100%;
- -o-transition: all 0.3s;
- -o-transform-origin: 50% 100%;
- }
- #allButtons li:hover button {
- -webkit-transform: scale(1.5);
- -moz-transform: scale(1.5);
- -o-transform: scale(1.5);
- margin: 0 1.5em 6px;
- }
- /* one element after and element before (with JS)*/
- #allButtons li:hover + li button,
- #allButtons li.prev button {
- -webkit-transform: scale(1.1);
- -moz-transform: scale(1.1);
- -o-transform: scale(1.1);
- margin: 0 1.1em 6px;
- }
- .circle{
- height: 7px;
- width: 7px;
- background-color: #bbbbbb00;
- border-radius: 50%;
- position: center center;
- text-align: center;
- padding: 0;
- margin-left: 26px;
- margin-right: 26px;
- display: inline-block;
- }
- #momentum{
- position: center center;
- font-family: arial;
- font-weight:bold;
- font-size:40px;
- letter-spacing:0.3em;
- text-align:center;
- text-transform: uppercase;
- color: black;
- margin-left: 750px;
- position: fixed;
- margin-top:300px;
- width: 750px;
- }
- #colon {
- visibility:hidden;
- }
- #titleContainer{
- width: 440px;
- height: 80px;
- }
- #title{
- margin: 0px;
- }
- #title2{
- font-size: 24px;
- }
- .hideMe{
- display:hidden;
- }
- [aria-expanded=true] .fa-chevron-right {
- display: none;
- }
- #action-container{
- width: 480px;
- height: 500px;
- margin-left: 10px;
- margin-right: 10px;
- }
- #name{
- color: yellow;
- }
- #work{
- color: blue;
- }
- </style>
- </head>
- <body class="bg-light">
- <nav class="navbar navbar-dark navbar-expand-lg bg-primary justify-content-between">
- <div class="container-fluid">
- <a class="navbar-brand" href="#">WALL ST.</a>
- <div class="navbar-collapse collapse dual-nav w-50 order-1 order-md-0">
- <ul class="navbar-nav">
- <li class="nav-item active">
- <a class="nav-link pl-0" href="#">Home <span class="sr-only">Home</span></a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Shares</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Forex</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Mutual Funds</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Crypto</a>
- </li>
- </ul>
- </div>
- <span id="yomama" style="width:100%"></span>
- <script src= "loadComponent.js"></script>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="navbar-collapse collapse w-50 order-2">
- <form class="form-inline my-2 my-lg-0 nav-item ml-auto">
- <input class="form-control mr-sm-2" type="text" placeholder="Search">
- <button class="btn btn-secondary my-2 my-sm-0" type="submit">Go</button>
- </form>
- </div>
- </div>
- </nav>
- <!-- The momentum div consists of the time and the greeting
- <div id = "momentum">
- <h1 id="testP"> <strong>PEEKABOO</strong> </h1>
- <div>
- <span id="hours"></span><span id="colon">:</span><span id="minutes"></span>
- <script src = "time.js"></script>
- </div>
- <div id = "greeting">
- <script src = "displaysGreeting.js"></script>
- </div>
- </div>
- The momentum div consists of the time and the greeting -->
- <div id = "panelContainer">
- <div id = "tickersPanel" class="card cardBorderShadow" style="box-shadow:var(--cardBorderShadow)">
- <!-- The title container displays a brief synopsis for each ticker-->
- <div class="card-body" style="position:relative">
- <div id = "titleContainer">
- <p id = "title"></p>
- <span id = "title2"></span>
- USD <span id = "title3"></span>
- <p id = "title4"></p>
- <!-- the info.js file parses the api with all the tickers' details-->
- <script src = "info.js"></script>
- </div>
- <div style="position:absolute; right:50px; top:50px">
- <i class="fa fa-search" aria-hidden="true"></i>
- <i id="arrowIcon" class="fa fa-arrow-right" aria-hidden="true"></i>
- </div>
- <div id = "chartContainer">
- <!-- The id canvas is important (see onButtonsClicked for more info).
- The actual canvas just needed to be in a div-->
- <div id = "canvas">
- <canvas id = "canvasContainer"> </canvas>
- <script src = "sketchData.js"></script></li>
- </div>
- </br>
- <div id = "allButtons">
- <ul>
- <li><button type="button" id = "getCanvas"></button></li>
- <li><button type="button" id = "getCanvas2"></button></li>
- <li><button type="button" id = "getCanvas3"></button></li>
- <li><button type="button" id = "getCanvas4"></button></li>
- <li><button type="button" id = "getCanvas5"></button></li>
- </ul>
- <!-- Controls the little circle that shows when you click the box-->
- <div class="circle" id= "circle1"></div>
- <div class="circle" id= "circle2"></div>
- <div class="circle" id= "circle3"></div>
- <div class="circle" id= "circle4"></div>
- <div class="circle" id= "circle5"></div>
- </div>
- </div> <!-- Ends chartContainer div -->
- </div> <!-- Ends card-body -->
- <script src = "onButtonsClicked.js"></script>
- </div>
- <div id = "sentimentPanel" class="card mb-3card BorderShadow" style="box-shadow:var(--cardBorderShadow)">
- <h8 class="card-title"> Sentiment</h8>
- <form class="form-inline my-2 my-lg-0">
- <input class="form-control mr-sm-2" type="text" style="width:75%" placeholder="Ticker">
- <button class="btn btn-primary my-2 my-sm-0" type="submit">Get Tweets</button>
- </form>
- </div>
- <!-- end of sentimentPanel-->
- <div id = "gadgetPanel" class="card cardBorderShadow" style="box-shadow:var(--cardBorderShadow)">
- <h5 class="card-title">Calendar</h5>
- <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="btn btn-primary">Calendar Event</a>
- </div>
- <div id = "activePanel" class="card cardBorderShadow" style="box-shadow:var(--cardBorderShadow)">
- <div id="action-container">
- <table class="table table-sm table-striped table-dark">
- </table>
- <div class = "row-container">
- <div class= "row">
- <div class="col-xs-6 col-sm-6">
- <div id="name">
- </div>
- <div id="name">
- </div>
- </div>
- <div class="col-xs-2 col-sm-2">
- <div id = "price">
- </div>
- <div id = "price">
- </div>
- </div>
- <div class="col-xs-4 col-sm-4">
- <div id="text">
- </div>
- <div id="text">
- </div>
- </div>
- </div>
- <button type= "button" class="btn btn-outline-warning" id="active">active</button>
- <button type= "button" class="btn btn-outline-warning" id="gainers">gainers</button>
- <button type= "button" class="btn btn-outline-warning" id="losers">losers</button>
- <script src = "active.js"></script>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!--
- <div class="card" id="testingPanel" style="background-color:white">
- </div>
- -->
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement