Advertisement
Guest User

Untitled

a guest
Aug 24th, 2019
327
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.61 KB | None | 0 0
  1. <!DOCTYPE HTML>
  2. <html lang = "en">
  3. <head>
  4. <!-- basic.html -->
  5. <title>stockX</title>
  6. <meta charset = "UTF-8" />
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  8. <script src ="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
  9. <script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
  10. <script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>
  11.  
  12. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  13. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  14. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  15. <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
  16.  
  17. <style>
  18. :root {
  19. --cardBorderShadow: rgba(60, 64, 67, .3) 0 1px 2px 0, rgba(60, 64, 67, .15) 0 1px 3px 1px;
  20. }
  21.  
  22. .cardBorderShadow{
  23. box-shadow:var(--cardBorderShadow);
  24. }
  25.  
  26. #panelContainer{
  27. position: absolute;
  28. width: 700px;
  29. height: 760px;
  30. margin-left: 100px;
  31. }
  32.  
  33. #tickersPanel{
  34. width:465px;
  35. height: 340px;
  36. position: absolute;
  37. overflow-y: scroll;
  38. margin-left: 220px;
  39. margin-top: 15px;
  40. margin-bottom:7.5px;
  41. padding: 10px;
  42. opacity: 1.0;
  43. }
  44.  
  45. #sentimentPanel{
  46. /*box-shadow: var(--cr-card-elevation_-_box-shadow);*/
  47. width:465px;
  48. height: 347.5px;
  49. position: absolute;
  50. overflow-y: scroll;
  51. margin-left: 220px;
  52. margin-top: 370px;
  53. margin-bottom:15px;
  54. padding: 10px;
  55. }
  56. #gadgetPanel{
  57. width:190px;
  58. height: 700px;
  59. position: absolute;
  60. overflow-y: scroll;
  61. margin-left: 15px;
  62. margin-top: 15px;
  63. margin-right: 30px;
  64. margin-bottom:30px;
  65. padding: 10px;
  66. font-size: 11px;
  67. }
  68.  
  69. #activePanel{
  70. width: 465px;
  71. height: 340px;
  72. position: absolute;
  73. margin-left: 697.5px;
  74. margin-top: 15px;
  75. }
  76.  
  77. #testingPanel{
  78. width:20%;
  79. height: 700px;
  80. position: fixed;
  81. overflow-y: scroll;
  82. margin-left: 1092px;
  83. margin-top: 15px;
  84. margin-bottom:30px;
  85. padding: 10px;
  86. font-size: 11px;
  87. }
  88.  
  89. #allButtons {
  90. position: absolute;
  91. text-align: center;
  92. bottom:20px;
  93. width:90%;
  94. display: inline-block;
  95. -webkit-perspective: 400;
  96. -moz-perspective: 400;
  97. }
  98.  
  99. #allButtons ul {
  100. font-size: 14px;
  101. margin: 0 auto;
  102. padding: 0;
  103. margin: 0;
  104. }
  105.  
  106. #allButtons li {
  107. list-style-type: none;
  108. display: inline-block;
  109. position: relative;
  110. }
  111. #allButtons li span {
  112. display: none;
  113. position: absolute;
  114. bottom: 140px;
  115. left: 0;
  116. right: 0;
  117. width: 100%;
  118. background-color: rgba(0,0,0,.75);
  119. padding: 4px 0;
  120. border-radius: 12px; /* webkit nightly */
  121. -webkit-border-radius: 12px; /* for safari */
  122. -moz-border-radius: 12px;
  123. }
  124.  
  125. #allButtons li button {
  126. border-radius: 5px;
  127. border-width: 1px;
  128. border-color: lightgrey;
  129.  
  130. color: black;
  131. width: 60px;
  132. height: 40px;
  133.  
  134. -webkit-transition: all 0.3s;
  135. -webkit-transform-origin: 50% 100%;
  136. -moz-transition: all 0.4s;
  137. -moz-transform-origin: 50% 100%;
  138. -o-transition: all 0.3s;
  139. -o-transform-origin: 50% 100%;
  140. }
  141. #allButtons li:hover button {
  142. -webkit-transform: scale(1.5);
  143. -moz-transform: scale(1.5);
  144. -o-transform: scale(1.5);
  145. margin: 0 1.5em 6px;
  146. }
  147.  
  148. /* one element after and element before (with JS)*/
  149. #allButtons li:hover + li button,
  150. #allButtons li.prev button {
  151. -webkit-transform: scale(1.1);
  152. -moz-transform: scale(1.1);
  153. -o-transform: scale(1.1);
  154. margin: 0 1.1em 6px;
  155. }
  156.  
  157. .circle{
  158. height: 7px;
  159. width: 7px;
  160. background-color: #bbbbbb00;
  161. border-radius: 50%;
  162. position: center center;
  163. text-align: center;
  164. padding: 0;
  165. margin-left: 26px;
  166. margin-right: 26px;
  167. display: inline-block;
  168. }
  169.  
  170. #momentum{
  171. position: center center;
  172. font-family: arial;
  173. font-weight:bold;
  174. font-size:40px;
  175. letter-spacing:0.3em;
  176. text-align:center;
  177. text-transform: uppercase;
  178. color: black;
  179. margin-left: 750px;
  180. position: fixed;
  181. margin-top:300px;
  182. width: 750px;
  183. }
  184.  
  185. #colon {
  186. visibility:hidden;
  187. }
  188.  
  189. #titleContainer{
  190. width: 440px;
  191. height: 80px;
  192.  
  193. }
  194.  
  195. #title{
  196. margin: 0px;
  197. }
  198.  
  199. #title2{
  200. font-size: 24px;
  201. }
  202. .hideMe{
  203. display:hidden;
  204. }
  205. [aria-expanded=true] .fa-chevron-right {
  206. display: none;
  207. }
  208.  
  209. #action-container{
  210. width: 480px;
  211. height: 500px;
  212. margin-left: 10px;
  213. margin-right: 10px;
  214.  
  215. }
  216. #name{
  217. color: yellow;
  218. }
  219.  
  220. #work{
  221. color: blue;
  222. }
  223. </style>
  224.  
  225. </head>
  226. <body class="bg-light">
  227.  
  228. <nav class="navbar navbar-dark navbar-expand-lg bg-primary justify-content-between">
  229. <div class="container-fluid">
  230.  
  231. <a class="navbar-brand" href="#">WALL ST.</a>
  232. <div class="navbar-collapse collapse dual-nav w-50 order-1 order-md-0">
  233. <ul class="navbar-nav">
  234. <li class="nav-item active">
  235. <a class="nav-link pl-0" href="#">Home <span class="sr-only">Home</span></a>
  236. </li>
  237. <li class="nav-item">
  238. <a class="nav-link" href="#">Shares</a>
  239. </li>
  240. <li class="nav-item">
  241. <a class="nav-link" href="#">Forex</a>
  242. </li>
  243. <li class="nav-item">
  244. <a class="nav-link" href="#">Mutual Funds</a>
  245. </li>
  246. <li class="nav-item">
  247. <a class="nav-link" href="#">Crypto</a>
  248. </li>
  249.  
  250. </ul>
  251. </div>
  252. <span id="yomama" style="width:100%"></span>
  253. <script src= "loadComponent.js"></script>
  254.  
  255. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
  256. <span class="navbar-toggler-icon"></span>
  257. </button>
  258.  
  259.  
  260.  
  261. <div class="navbar-collapse collapse w-50 order-2">
  262.  
  263. <form class="form-inline my-2 my-lg-0 nav-item ml-auto">
  264. <input class="form-control mr-sm-2" type="text" placeholder="Search">
  265. <button class="btn btn-secondary my-2 my-sm-0" type="submit">Go</button>
  266. </form>
  267.  
  268. </div>
  269.  
  270. </div>
  271. </nav>
  272.  
  273.  
  274. <!-- The momentum div consists of the time and the greeting
  275. <div id = "momentum">
  276. <h1 id="testP"> <strong>PEEKABOO</strong> </h1>
  277. <div>
  278. <span id="hours"></span><span id="colon">:</span><span id="minutes"></span>
  279. <script src = "time.js"></script>
  280. </div>
  281.  
  282. <div id = "greeting">
  283. <script src = "displaysGreeting.js"></script>
  284. </div>
  285. </div>
  286. The momentum div consists of the time and the greeting -->
  287.  
  288.  
  289.  
  290.  
  291.  
  292.  
  293. <div id = "panelContainer">
  294.  
  295. <div id = "tickersPanel" class="card cardBorderShadow" style="box-shadow:var(--cardBorderShadow)">
  296. <!-- The title container displays a brief synopsis for each ticker-->
  297.  
  298. <div class="card-body" style="position:relative">
  299.  
  300. <div id = "titleContainer">
  301. <p id = "title"></p>
  302. <span id = "title2"></span>
  303. USD <span id = "title3"></span>
  304. <p id = "title4"></p>
  305. <!-- the info.js file parses the api with all the tickers' details-->
  306. <script src = "info.js"></script>
  307. </div>
  308.  
  309.  
  310. <div style="position:absolute; right:50px; top:50px">
  311. <i class="fa fa-search" aria-hidden="true"></i>
  312. <i id="arrowIcon" class="fa fa-arrow-right" aria-hidden="true"></i>
  313. </div>
  314.  
  315.  
  316.  
  317. <div id = "chartContainer">
  318. <!-- The id canvas is important (see onButtonsClicked for more info).
  319. The actual canvas just needed to be in a div-->
  320. <div id = "canvas">
  321. <canvas id = "canvasContainer"> </canvas>
  322. <script src = "sketchData.js"></script></li>
  323. </div>
  324.  
  325. </br>
  326.  
  327. <div id = "allButtons">
  328.  
  329. <ul>
  330. <li><button type="button" id = "getCanvas"></button></li>
  331.  
  332. <li><button type="button" id = "getCanvas2"></button></li>
  333.  
  334. <li><button type="button" id = "getCanvas3"></button></li>
  335.  
  336. <li><button type="button" id = "getCanvas4"></button></li>
  337.  
  338. <li><button type="button" id = "getCanvas5"></button></li>
  339.  
  340. </ul>
  341.  
  342.  
  343. <!-- Controls the little circle that shows when you click the box-->
  344. <div class="circle" id= "circle1"></div>
  345. <div class="circle" id= "circle2"></div>
  346. <div class="circle" id= "circle3"></div>
  347. <div class="circle" id= "circle4"></div>
  348. <div class="circle" id= "circle5"></div>
  349.  
  350. </div>
  351. </div> <!-- Ends chartContainer div -->
  352. </div> <!-- Ends card-body -->
  353. <script src = "onButtonsClicked.js"></script>
  354.  
  355. </div>
  356.  
  357.  
  358.  
  359.  
  360.  
  361. <div id = "sentimentPanel" class="card mb-3card BorderShadow" style="box-shadow:var(--cardBorderShadow)">
  362. <h8 class="card-title"> Sentiment</h8>
  363. <form class="form-inline my-2 my-lg-0">
  364. <input class="form-control mr-sm-2" type="text" style="width:75%" placeholder="Ticker">
  365. <button class="btn btn-primary my-2 my-sm-0" type="submit">Get Tweets</button>
  366. </form>
  367.  
  368. </div>
  369. <!-- end of sentimentPanel-->
  370.  
  371.  
  372.  
  373. <div id = "gadgetPanel" class="card cardBorderShadow" style="box-shadow:var(--cardBorderShadow)">
  374. <h5 class="card-title">Calendar</h5>
  375. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  376. <a href="#" class="btn btn-primary">Calendar Event</a>
  377. </div>
  378.  
  379. <div id = "activePanel" class="card cardBorderShadow" style="box-shadow:var(--cardBorderShadow)">
  380. <div id="action-container">
  381. <table class="table table-sm table-striped table-dark">
  382. </table>
  383. <div class = "row-container">
  384. <div class= "row">
  385. <div class="col-xs-6 col-sm-6">
  386. <div id="name">
  387.  
  388. </div>
  389. <div id="name">
  390.  
  391. </div>
  392.  
  393.  
  394. </div>
  395. <div class="col-xs-2 col-sm-2">
  396. <div id = "price">
  397. </div>
  398. <div id = "price">
  399. </div>
  400. </div>
  401. <div class="col-xs-4 col-sm-4">
  402. <div id="text">
  403.  
  404. </div>
  405. <div id="text">
  406.  
  407. </div>
  408. </div>
  409.  
  410. </div>
  411. <button type= "button" class="btn btn-outline-warning" id="active">active</button>
  412. <button type= "button" class="btn btn-outline-warning" id="gainers">gainers</button>
  413. <button type= "button" class="btn btn-outline-warning" id="losers">losers</button>
  414. <script src = "active.js"></script>
  415. </div>
  416.  
  417.  
  418. </div>
  419. </div>
  420.  
  421. </div>
  422.  
  423. </div>
  424.  
  425.  
  426.  
  427. <!--
  428. <div class="card" id="testingPanel" style="background-color:white">
  429.  
  430. </div>
  431. -->
  432.  
  433.  
  434.  
  435. </body>
  436. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement