|
3 | 3 | <head> |
4 | 4 | <title>Add Asset</title> |
5 | 5 | <link href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel=" stylesheet" > |
| 6 | + <style> |
| 7 | + body { |
| 8 | + background: linear-gradient(120deg, #f0f9ff 0%, #e0f7fa 100%); |
| 9 | + min-height: 100vh; |
| 10 | + } |
| 11 | + .card { |
| 12 | + border-radius: 24px; |
| 13 | + box-shadow: 0 6px 32px 0 rgba(56,189,248,0.12); |
| 14 | + border: none; |
| 15 | + } |
| 16 | + .gradient-heading { |
| 17 | + background: linear-gradient(to right, #38bdf8, #10b981); |
| 18 | + -webkit-background-clip: text; |
| 19 | + -webkit-text-fill-color: transparent; |
| 20 | + background-clip: text; |
| 21 | + color: transparent; |
| 22 | + } |
| 23 | + .navbar { |
| 24 | + position: fixed; |
| 25 | + top: 1rem; |
| 26 | + left: 1rem; |
| 27 | + background: #fff; |
| 28 | + border-radius: 10px; |
| 29 | + padding: 1rem 0; |
| 30 | + box-shadow: 0 0 40px rgba(0,0,0,0.03); |
| 31 | + height: calc(100vh - 4rem); |
| 32 | + z-index: 1001; |
| 33 | + } |
| 34 | + .navbar__menu { |
| 35 | + position: relative; |
| 36 | + list-style: none; |
| 37 | + margin: 0; |
| 38 | + padding: 0; |
| 39 | + } |
| 40 | + .navbar__item { |
| 41 | + position: relative; |
| 42 | + } |
| 43 | + .navbar__link { |
| 44 | + position: relative; |
| 45 | + display: flex; |
| 46 | + align-items: center; |
| 47 | + justify-content: center; |
| 48 | + height: 3.5rem; |
| 49 | + width: 5.5rem; |
| 50 | + color: #6a778e; |
| 51 | + transition: 250ms ease all; |
| 52 | + text-decoration: none; |
| 53 | + font-weight: 600; |
| 54 | + font-size: 1.1em; |
| 55 | + border-radius: 10px; |
| 56 | + background: none; |
| 57 | + border: none; |
| 58 | + cursor: pointer; |
| 59 | + } |
| 60 | + .navbar__link span { |
| 61 | + position: absolute; |
| 62 | + left: 100%; |
| 63 | + transform: translate(-3rem); |
| 64 | + margin-left: 1rem; |
| 65 | + opacity: 0; |
| 66 | + pointer-events: none; |
| 67 | + color: #406ff3; |
| 68 | + background: #fff; |
| 69 | + padding: 0.75rem; |
| 70 | + transition: 250ms ease all; |
| 71 | + border-radius: 17.5px; |
| 72 | + font-size: 1em; |
| 73 | + font-weight: 600; |
| 74 | + white-space: nowrap; |
| 75 | + } |
| 76 | + .navbar__link:hover, |
| 77 | + .navbar__link:focus { |
| 78 | + color: #fff; |
| 79 | + background: #406ff3; |
| 80 | + } |
| 81 | + .navbar__link:hover span, |
| 82 | + .navbar__link:focus span { |
| 83 | + opacity: 1; |
| 84 | + transform: translate(0); |
| 85 | + } |
| 86 | + .navbar__link .feather { |
| 87 | + width: 24px; |
| 88 | + height: 24px; |
| 89 | + } |
| 90 | + @media (max-width: 768px) { |
| 91 | + .navbar { |
| 92 | + position: static; |
| 93 | + width: 100%; |
| 94 | + height: auto; |
| 95 | + border-radius: 0; |
| 96 | + box-shadow: none; |
| 97 | + margin-bottom: 2rem; |
| 98 | + } |
| 99 | + } |
| 100 | + </style> |
6 | 101 | </head> |
7 | | -<body class="bg-light"> |
8 | | -<div class="container py-4"> |
9 | | - <h1>Add Asset</h1> |
10 | | - <form method="post" class="mb-3"> |
| 102 | +<body> |
| 103 | +<nav class="navbar"> |
| 104 | + <ul class="navbar__menu"> |
| 105 | + <li class="navbar__item"> |
| 106 | + <a href="{% url 'index' %}" class="navbar__link"><i data-feather="home"></i><span>Home</span></a> |
| 107 | + </li> |
| 108 | + <li class="navbar__item"> |
| 109 | + <a href="{% url 'add_asset' %}" class="navbar__link"><i data-feather="plus-circle"></i><span>Add Asset</span></a> |
| 110 | + </li> |
| 111 | + <li class="navbar__item"> |
| 112 | + <a href="{% url 'run_ons' %}" class="navbar__link"><i data-feather="zap"></i><span>Run ONS</span></a> |
| 113 | + </li> |
| 114 | + <li class="navbar__item"> |
| 115 | + <form method="post" action="{% url 'clear_recommendations' %}"> |
11 | 116 | {% csrf_token %} |
12 | | - <div class="mb-3"> |
13 | | - <label for="name" class="form-label">Name:</label> |
14 | | - <input type="text" name="name" class="form-control" required> |
15 | | - </div> |
16 | | - <div class="mb-3"> |
17 | | - <label for="symbol" class="form-label">Symbol:</label> |
18 | | - <input type="text" name="symbol" class="form-control" required> |
19 | | - </div> |
20 | | - <button type="submit" class="btn btn-primary">Add</button> |
21 | | - <a href="{% url 'index' %}" class="btn btn-secondary">Back to Home</a> |
22 | | - </form> |
| 117 | + <button type="submit" class="navbar__link" style="background:none;border:none;padding:0;"> |
| 118 | + <i data-feather="trash-2"></i><span>Clear Stack</span> |
| 119 | + </button> |
| 120 | + </form> |
| 121 | + </li> |
| 122 | + </ul> |
| 123 | +</nav> |
| 124 | +<div class="container py-5" style="max-width: 600px;"> |
| 125 | + <div class="row justify-content-center"> |
| 126 | + <div class="col-md-12"> |
| 127 | + <div class="card p-4"> |
| 128 | + <h1 class="mb-3 display-4 fw-bold" style="line-height:1.1;"> |
| 129 | + <span style="background: linear-gradient(to right, #38bdf8, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;"> |
| 130 | + ONS Trading |
| 131 | + </span><br> |
| 132 | + Add Assets |
| 133 | + </h1> |
| 134 | + <form method="post" class="mb-3"> |
| 135 | + {% csrf_token %} |
| 136 | + <div class="mb-3"> |
| 137 | + <label for="name" class="form-label">Name:</label> |
| 138 | + <input type="text" name="name" class="form-control" required> |
| 139 | + </div> |
| 140 | + <div class="mb-3"> |
| 141 | + <label for="symbol" class="form-label">Symbol:</label> |
| 142 | + <input type="text" name="symbol" class="form-control" required> |
| 143 | + </div> |
| 144 | + <button type="submit" class="btn btn-primary w-100">Add</button> |
| 145 | + <a href="{% url 'index' %}" class="btn btn-outline-secondary w-100 mt-2">Back to Home</a> |
| 146 | + </form> |
| 147 | + </div> |
| 148 | + </div> |
| 149 | + </div> |
23 | 150 | </div> |
| 151 | +<script src="https://unpkg.com/feather-icons"></script> |
| 152 | +<script> |
| 153 | + feather.replace(); |
| 154 | +</script> |
24 | 155 | </body> |
25 | 156 | </html> |
0 commit comments