├── .gitattributes ├── .gitignore ├── 403.html ├── 404.html ├── README.md ├── fonts ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 ├── index.html ├── main.css └── theme-min.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear on external disk 35 | .Spotlight-V100 36 | .Trashes 37 | 38 | # Directories potentially created on remote AFP share 39 | .AppleDB 40 | .AppleDesktop 41 | Network Trash Folder 42 | Temporary Items 43 | .apdisk 44 | -------------------------------------------------------------------------------- /403.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 404, Page not found 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 22 | 23 |

.

24 |

404, You've ripped a hole in the fabric of the internet!

25 | Page Not Found (404). 26 | 27 | 28 | -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 404, Page not found 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 22 | 23 |

.

24 |

404, You've ripped a hole in the fabric of the internet!

25 | Page Not Found (404). 26 | 27 | 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Homelab-Dashboard 2 | A Simple dashboard for your homelab using bootstrap. Inspired by a post at /r/selfhosted. It's free to use and you can modify it, just don't sell it. 3 | It's pretty simple just put it in your web server's public html folder. It simply runs with Bootstrap and HTML. All you need to do is add 4 | your own links and titles. You can change or add glyphicons using i class and then the glyphicon, you can find a list of glyphicons with previews here: https://getbootstrap.com/components/ 5 | -------------------------------------------------------------------------------- /fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1823alex/Homelab-Dashboard/846dd5bc769217d525c89bd4b235e00ddeb6e619/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /fonts/glyphicons-halflings-regular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | -------------------------------------------------------------------------------- /fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1823alex/Homelab-Dashboard/846dd5bc769217d525c89bd4b235e00ddeb6e619/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1823alex/Homelab-Dashboard/846dd5bc769217d525c89bd4b235e00ddeb6e619/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1823alex/Homelab-Dashboard/846dd5bc769217d525c89bd4b235e00ddeb6e619/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dashboard 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 38 |
39 |

Dashboard

40 |
41 |
42 |
43 |
44 |

Important Info

45 | 46 |
47 | 50 |
51 |
52 |
53 |
54 |
55 |

NAS

56 | 57 |
58 | 61 |
62 |
63 |
64 |
65 |
66 |

Main Network

67 | 68 |
69 | 73 |
74 |
75 |
76 |
77 |
78 |

Status

79 | 80 |
81 |
    82 |
  • 83 | 142 | 146 |
147 | 148 | 149 |
150 |
151 |
152 |
153 |
154 |

HP DL380 G5

155 | 156 |
157 |
2x Quad Core Xeon X5450s, 24GB RAM, iLO2 - FreeNAS
158 |
    159 |
  • iLO2 - Server Health and Status Management Suite
    • 160 |
  • OwnCloud - Access Files Anywhere
    • 161 |
  • Transmission - BitTorrent Downloader Web Interface
    • 162 |
163 |
164 |
165 |
166 |
167 |
168 |

HP DL360 G5

169 | 170 |
171 |
2x Dual Core Xeon 5130s, 16GB RAM, iLO2 - ESXi 6
172 |
    173 |
  • iLO2 - Server Health and Status Management Suite
    • 174 |
175 |
176 |
177 |
178 |
179 | 180 | 181 | 182 | -------------------------------------------------------------------------------- /theme-min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v3.3.5 (http://getbootstrap.com) 3 | * Copyright 2011-2015 Twitter, Inc. 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | */ 6 | .btn-danger, .btn-default, .btn-info, .btn-primary, .btn-success, .btn-warning { 7 | text-shadow:0 -1px 0 rgba(0, 0, 0, .2); 8 | -webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); 9 | box-shadow:inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075) 10 | } 11 | .btn-danger.active, .btn-danger:active, .btn-default.active, .btn-default:active, .btn-info.active, .btn-info:active, .btn-primary.active, .btn-primary:active, .btn-success.active, .btn-success:active, .btn-warning.active, .btn-warning:active { 12 | -webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, .125); 13 | box-shadow:inset 0 3px 5px rgba(0, 0, 0, .125) 14 | } 15 | .btn-danger.disabled, .btn-danger[disabled], .btn-default.disabled, .btn-default[disabled], .btn-info.disabled, .btn-info[disabled], .btn-primary.disabled, .btn-primary[disabled], .btn-success.disabled, .btn-success[disabled], .btn-warning.disabled, .btn-warning[disabled], fieldset[disabled] .btn-danger, fieldset[disabled] .btn-default, fieldset[disabled] .btn-info, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-success, fieldset[disabled] .btn-warning { 16 | -webkit-box-shadow:none; 17 | box-shadow:none 18 | } 19 | .btn-danger .badge, .btn-default .badge, .btn-info .badge, .btn-primary .badge, .btn-success .badge, .btn-warning .badge { 20 | text-shadow:none 21 | } 22 | .btn.active, .btn:active { 23 | background-image:none 24 | } 25 | .btn-default { 26 | text-shadow:0 1px 0 #fff; 27 | background-image:-webkit-linear-gradient(top, #fff 0, #e0e0e0 100%); 28 | background-image:-o-linear-gradient(top, #fff 0, #e0e0e0 100%); 29 | background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0)); 30 | background-image:linear-gradient(to bottom, #fff 0, #e0e0e0 100%); 31 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0); 32 | filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); 33 | background-repeat:repeat-x; 34 | border-color:#dbdbdb; 35 | border-color:#ccc 36 | } 37 | .btn-default:focus, .btn-default:hover { 38 | background-color:#e0e0e0; 39 | background-position:0 -15px 40 | } 41 | .btn-default.active, .btn-default:active { 42 | background-color:#e0e0e0; 43 | border-color:#dbdbdb 44 | } 45 | .btn-default.disabled, .btn-default.disabled.active, .btn-default.disabled.focus, .btn-default.disabled:active, .btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled], .btn-default[disabled].active, .btn-default[disabled].focus, .btn-default[disabled]:active, .btn-default[disabled]:focus, .btn-default[disabled]:hover, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default.active, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover { 46 | background-color:#e0e0e0; 47 | background-image:none 48 | } 49 | .btn-primary { 50 | background-image:-webkit-linear-gradient(top, #337ab7 0, #265a88 100%); 51 | background-image:-o-linear-gradient(top, #337ab7 0, #265a88 100%); 52 | background-image:-webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88)); 53 | background-image:linear-gradient(to bottom, #337ab7 0, #265a88 100%); 54 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0); 55 | filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); 56 | background-repeat:repeat-x; 57 | border-color:#245580 58 | } 59 | .btn-primary:focus, .btn-primary:hover { 60 | background-color:#265a88; 61 | background-position:0 -15px 62 | } 63 | .btn-primary.active, .btn-primary:active { 64 | background-color:#265a88; 65 | border-color:#245580 66 | } 67 | .btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover { 68 | background-color:#265a88; 69 | background-image:none 70 | } 71 | .btn-success { 72 | background-image:-webkit-linear-gradient(top, #5cb85c 0, #419641 100%); 73 | background-image:-o-linear-gradient(top, #5cb85c 0, #419641 100%); 74 | background-image:-webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641)); 75 | background-image:linear-gradient(to bottom, #5cb85c 0, #419641 100%); 76 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0); 77 | filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); 78 | background-repeat:repeat-x; 79 | border-color:#3e8f3e 80 | } 81 | .btn-success:focus, .btn-success:hover { 82 | background-color:#419641; 83 | background-position:0 -15px 84 | } 85 | .btn-success.active, .btn-success:active { 86 | background-color:#419641; 87 | border-color:#3e8f3e 88 | } 89 | .btn-success.disabled, .btn-success.disabled.active, .btn-success.disabled.focus, .btn-success.disabled:active, .btn-success.disabled:focus, .btn-success.disabled:hover, .btn-success[disabled], .btn-success[disabled].active, .btn-success[disabled].focus, .btn-success[disabled]:active, .btn-success[disabled]:focus, .btn-success[disabled]:hover, fieldset[disabled] .btn-success, fieldset[disabled] .btn-success.active, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:hover { 90 | background-color:#419641; 91 | background-image:none 92 | } 93 | .btn-info { 94 | background-image:-webkit-linear-gradient(top, #5bc0de 0, #2aabd2 100%); 95 | background-image:-o-linear-gradient(top, #5bc0de 0, #2aabd2 100%); 96 | background-image:-webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2)); 97 | background-image:linear-gradient(to bottom, #5bc0de 0, #2aabd2 100%); 98 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0); 99 | filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); 100 | background-repeat:repeat-x; 101 | border-color:#28a4c9 102 | } 103 | .btn-info:focus, .btn-info:hover { 104 | background-color:#2aabd2; 105 | background-position:0 -15px 106 | } 107 | .btn-info.active, .btn-info:active { 108 | background-color:#2aabd2; 109 | border-color:#28a4c9 110 | } 111 | .btn-info.disabled, .btn-info.disabled.active, .btn-info.disabled.focus, .btn-info.disabled:active, .btn-info.disabled:focus, .btn-info.disabled:hover, .btn-info[disabled], .btn-info[disabled].active, .btn-info[disabled].focus, .btn-info[disabled]:active, .btn-info[disabled]:focus, .btn-info[disabled]:hover, fieldset[disabled] .btn-info, fieldset[disabled] .btn-info.active, fieldset[disabled] .btn-info.focus, fieldset[disabled] .btn-info:active, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:hover { 112 | background-color:#2aabd2; 113 | background-image:none 114 | } 115 | .btn-warning { 116 | background-image:-webkit-linear-gradient(top, #f0ad4e 0, #eb9316 100%); 117 | background-image:-o-linear-gradient(top, #f0ad4e 0, #eb9316 100%); 118 | background-image:-webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316)); 119 | background-image:linear-gradient(to bottom, #f0ad4e 0, #eb9316 100%); 120 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0); 121 | filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); 122 | background-repeat:repeat-x; 123 | border-color:#e38d13 124 | } 125 | .btn-warning:focus, .btn-warning:hover { 126 | background-color:#eb9316; 127 | background-position:0 -15px 128 | } 129 | .btn-warning.active, .btn-warning:active { 130 | background-color:#eb9316; 131 | border-color:#e38d13 132 | } 133 | .btn-warning.disabled, .btn-warning.disabled.active, .btn-warning.disabled.focus, .btn-warning.disabled:active, .btn-warning.disabled:focus, .btn-warning.disabled:hover, .btn-warning[disabled], .btn-warning[disabled].active, .btn-warning[disabled].focus, .btn-warning[disabled]:active, .btn-warning[disabled]:focus, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning, fieldset[disabled] .btn-warning.active, fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning:active, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:hover { 134 | background-color:#eb9316; 135 | background-image:none 136 | } 137 | .btn-danger { 138 | background-image:-webkit-linear-gradient(top, #d9534f 0, #c12e2a 100%); 139 | background-image:-o-linear-gradient(top, #d9534f 0, #c12e2a 100%); 140 | background-image:-webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a)); 141 | background-image:linear-gradient(to bottom, #d9534f 0, #c12e2a 100%); 142 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0); 143 | filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); 144 | background-repeat:repeat-x; 145 | border-color:#b92c28 146 | } 147 | .btn-danger:focus, .btn-danger:hover { 148 | background-color:#c12e2a; 149 | background-position:0 -15px 150 | } 151 | .btn-danger.active, .btn-danger:active { 152 | background-color:#c12e2a; 153 | border-color:#b92c28 154 | } 155 | .btn-danger.disabled, .btn-danger.disabled.active, .btn-danger.disabled.focus, .btn-danger.disabled:active, .btn-danger.disabled:focus, .btn-danger.disabled:hover, .btn-danger[disabled], .btn-danger[disabled].active, .btn-danger[disabled].focus, .btn-danger[disabled]:active, .btn-danger[disabled]:focus, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger.active, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:hover { 156 | background-color:#c12e2a; 157 | background-image:none 158 | } 159 | .img-thumbnail, .thumbnail { 160 | -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .075); 161 | box-shadow:0 1px 2px rgba(0, 0, 0, .075) 162 | } 163 | .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { 164 | background-color:#e8e8e8; 165 | background-image:-webkit-linear-gradient(top, #f5f5f5 0, #e8e8e8 100%); 166 | background-image:-o-linear-gradient(top, #f5f5f5 0, #e8e8e8 100%); 167 | background-image:-webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8)); 168 | background-image:linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%); 169 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); 170 | background-repeat:repeat-x 171 | } 172 | .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover { 173 | background-color:#2e6da4; 174 | background-image:-webkit-linear-gradient(top, #337ab7 0, #2e6da4 100%); 175 | background-image:-o-linear-gradient(top, #337ab7 0, #2e6da4 100%); 176 | background-image:-webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4)); 177 | background-image:linear-gradient(to bottom, #337ab7 0, #2e6da4 100%); 178 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0); 179 | background-repeat:repeat-x 180 | } 181 | .navbar-default { 182 | background-image:-webkit-linear-gradient(top, #fff 0, #f8f8f8 100%); 183 | background-image:-o-linear-gradient(top, #fff 0, #f8f8f8 100%); 184 | background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8)); 185 | background-image:linear-gradient(to bottom, #fff 0, #f8f8f8 100%); 186 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0); 187 | filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); 188 | background-repeat:repeat-x; 189 | border-radius:4px; 190 | -webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075); 191 | box-shadow:inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075) 192 | } 193 | .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.open>a { 194 | background-image:-webkit-linear-gradient(top, #dbdbdb 0, #e2e2e2 100%); 195 | background-image:-o-linear-gradient(top, #dbdbdb 0, #e2e2e2 100%); 196 | background-image:-webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2)); 197 | background-image:linear-gradient(to bottom, #dbdbdb 0, #e2e2e2 100%); 198 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0); 199 | background-repeat:repeat-x; 200 | -webkit-box-shadow:inset 0 3px 9px rgba(0, 0, 0, .075); 201 | box-shadow:inset 0 3px 9px rgba(0, 0, 0, .075) 202 | } 203 | .navbar-brand, .navbar-nav>li>a { 204 | text-shadow:0 1px 0 rgba(255, 255, 255, .25) 205 | } 206 | .navbar-inverse { 207 | background-image:-webkit-linear-gradient(top, #3c3c3c 0, #222 100%); 208 | background-image:-o-linear-gradient(top, #3c3c3c 0, #222 100%); 209 | background-image:-webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222)); 210 | background-image:linear-gradient(to bottom, #3c3c3c 0, #222 100%); 211 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0); 212 | filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); 213 | background-repeat:repeat-x; 214 | border-radius:4px 215 | } 216 | .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.open>a { 217 | background-image:-webkit-linear-gradient(top, #080808 0, #0f0f0f 100%); 218 | background-image:-o-linear-gradient(top, #080808 0, #0f0f0f 100%); 219 | background-image:-webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f)); 220 | background-image:linear-gradient(to bottom, #080808 0, #0f0f0f 100%); 221 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0); 222 | background-repeat:repeat-x; 223 | -webkit-box-shadow:inset 0 3px 9px rgba(0, 0, 0, .25); 224 | box-shadow:inset 0 3px 9px rgba(0, 0, 0, .25) 225 | } 226 | .navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav>li>a { 227 | text-shadow:0 -1px 0 rgba(0, 0, 0, .25) 228 | } 229 | .navbar-fixed-bottom, .navbar-fixed-top, .navbar-static-top { 230 | border-radius:0! 231 | } 232 | @media (max-width:767px) { 233 | .navbar .navbar-nav .open .dropdown-menu>.active>a, .navbar .navbar-nav .open .dropdown-menu>.active>a:focus, .navbar .navbar-nav .open .dropdown-menu>.active>a:hover { 234 | color:#fff; 235 | background-image:-webkit-linear-gradient(top, #337ab7 0, #2e6da4 100%); 236 | background-image:-o-linear-gradient(top, #337ab7 0, #2e6da4 100%); 237 | background-image:-webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4)); 238 | background-image:linear-gradient(to bottom, #337ab7 0, #2e6da4 100%); 239 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0); 240 | background-repeat:repeat-x 241 | } 242 | } 243 | .alert { 244 | text-shadow:0 1px 0 rgba(255, 255, 255, .2); 245 | -webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05); 246 | box-shadow:inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05) 247 | } 248 | .alert-success { 249 | background-image:-webkit-linear-gradient(top, #dff0d8 0, #c8e5bc 100%); 250 | background-image:-o-linear-gradient(top, #dff0d8 0, #c8e5bc 100%); 251 | background-image:-webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc)); 252 | background-image:linear-gradient(to bottom, #dff0d8 0, #c8e5bc 100%); 253 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0); 254 | background-repeat:repeat-x; 255 | border-color:#b2dba1 256 | } 257 | .alert-info { 258 | background-image:-webkit-linear-gradient(top, #d9edf7 0, #b9def0 100%); 259 | background-image:-o-linear-gradient(top, #d9edf7 0, #b9def0 100%); 260 | background-image:-webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0)); 261 | background-image:linear-gradient(to bottom, #d9edf7 0, #b9def0 100%); 262 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0); 263 | background-repeat:repeat-x; 264 | border-color:#9acfea 265 | } 266 | .alert-warning { 267 | background-image:-webkit-linear-gradient(top, #fcf8e3 0, #f8efc0 100%); 268 | background-image:-o-linear-gradient(top, #fcf8e3 0, #f8efc0 100%); 269 | background-image:-webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0)); 270 | background-image:linear-gradient(to bottom, #fcf8e3 0, #f8efc0 100%); 271 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0); 272 | background-repeat:repeat-x; 273 | border-color:#f5e79e 274 | } 275 | .alert-danger { 276 | background-image:-webkit-linear-gradient(top, #f2dede 0, #e7c3c3 100%); 277 | background-image:-o-linear-gradient(top, #f2dede 0, #e7c3c3 100%); 278 | background-image:-webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3)); 279 | background-image:linear-gradient(to bottom, #f2dede 0, #e7c3c3 100%); 280 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0); 281 | background-repeat:repeat-x; 282 | border-color:#dca7a7 283 | } 284 | .progress { 285 | background-image:-webkit-linear-gradient(top, #ebebeb 0, #f5f5f5 100%); 286 | background-image:-o-linear-gradient(top, #ebebeb 0, #f5f5f5 100%); 287 | background-image:-webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5)); 288 | background-image:linear-gradient(to bottom, #ebebeb 0, #f5f5f5 100%); 289 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0); 290 | background-repeat:repeat-x 291 | } 292 | .progress-bar { 293 | background-image:-webkit-linear-gradient(top, #337ab7 0, #286090 100%); 294 | background-image:-o-linear-gradient(top, #337ab7 0, #286090 100%); 295 | background-image:-webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090)); 296 | background-image:linear-gradient(to bottom, #337ab7 0, #286090 100%); 297 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0); 298 | background-repeat:repeat-x 299 | } 300 | .progress-bar-success { 301 | background-image:-webkit-linear-gradient(top, #5cb85c 0, #449d44 100%); 302 | background-image:-o-linear-gradient(top, #5cb85c 0, #449d44 100%); 303 | background-image:-webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44)); 304 | background-image:linear-gradient(to bottom, #5cb85c 0, #449d44 100%); 305 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0); 306 | background-repeat:repeat-x 307 | } 308 | .progress-bar-info { 309 | background-image:-webkit-linear-gradient(top, #5bc0de 0, #31b0d5 100%); 310 | background-image:-o-linear-gradient(top, #5bc0de 0, #31b0d5 100%); 311 | background-image:-webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5)); 312 | background-image:linear-gradient(to bottom, #5bc0de 0, #31b0d5 100%); 313 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0); 314 | background-repeat:repeat-x 315 | } 316 | .progress-bar-warning { 317 | background-image:-webkit-linear-gradient(top, #f0ad4e 0, #ec971f 100%); 318 | background-image:-o-linear-gradient(top, #f0ad4e 0, #ec971f 100%); 319 | background-image:-webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f)); 320 | background-image:linear-gradient(to bottom, #f0ad4e 0, #ec971f 100%); 321 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0); 322 | background-repeat:repeat-x 323 | } 324 | .progress-bar-danger { 325 | background-image:-webkit-linear-gradient(top, #d9534f 0, #c9302c 100%); 326 | background-image:-o-linear-gradient(top, #d9534f 0, #c9302c 100%); 327 | background-image:-webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c)); 328 | background-image:linear-gradient(to bottom, #d9534f 0, #c9302c 100%); 329 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0); 330 | background-repeat:repeat-x 331 | } 332 | .progress-bar-striped { 333 | background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); 334 | background-image:-o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); 335 | background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent) 336 | } 337 | .list-group { 338 | border-radius:4px; 339 | -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .075); 340 | box-shadow:0 1px 2px rgba(0, 0, 0, .075) 341 | } 342 | .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover { 343 | text-shadow:0 -1px 0 #286090; 344 | background-image:-webkit-linear-gradient(top, #337ab7 0, #2b669a 100%); 345 | background-image:-o-linear-gradient(top, #337ab7 0, #2b669a 100%); 346 | background-image:-webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a)); 347 | background-image:linear-gradient(to bottom, #337ab7 0, #2b669a 100%); 348 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0); 349 | background-repeat:repeat-x; 350 | border-color:#2b669a 351 | } 352 | .list-group-item.active .badge, .list-group-item.active:focus .badge, .list-group-item.active:hover .badge { 353 | text-shadow:none 354 | } 355 | .panel { 356 | -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .05); 357 | box-shadow:0 1px 2px rgba(0, 0, 0, .05) 358 | } 359 | .panel-default>.panel-heading { 360 | background-image:-webkit-linear-gradient(top, #f5f5f5 0, #e8e8e8 100%); 361 | background-image:-o-linear-gradient(top, #f5f5f5 0, #e8e8e8 100%); 362 | background-image:-webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8)); 363 | background-image:linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%); 364 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); 365 | background-repeat:repeat-x 366 | } 367 | .panel-primary>.panel-heading { 368 | background-image:-webkit-linear-gradient(top, #337ab7 0, #2e6da4 100%); 369 | background-image:-o-linear-gradient(top, #337ab7 0, #2e6da4 100%); 370 | background-image:-webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4)); 371 | background-image:linear-gradient(to bottom, #337ab7 0, #2e6da4 100%); 372 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0); 373 | background-repeat:repeat-x 374 | } 375 | .panel-success>.panel-heading { 376 | background-image:-webkit-linear-gradient(top, #dff0d8 0, #d0e9c6 100%); 377 | background-image:-o-linear-gradient(top, #dff0d8 0, #d0e9c6 100%); 378 | background-image:-webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6)); 379 | background-image:linear-gradient(to bottom, #dff0d8 0, #d0e9c6 100%); 380 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0); 381 | background-repeat:repeat-x 382 | } 383 | .panel-info>.panel-heading { 384 | background-image:-webkit-linear-gradient(top, #d9edf7 0, #c4e3f3 100%); 385 | background-image:-o-linear-gradient(top, #d9edf7 0, #c4e3f3 100%); 386 | background-image:-webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3)); 387 | background-image:linear-gradient(to bottom, #d9edf7 0, #c4e3f3 100%); 388 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0); 389 | background-repeat:repeat-x 390 | } 391 | .panel-warning>.panel-heading { 392 | background-image:-webkit-linear-gradient(top, #fcf8e3 0, #faf2cc 100%); 393 | background-image:-o-linear-gradient(top, #fcf8e3 0, #faf2cc 100%); 394 | background-image:-webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc)); 395 | background-image:linear-gradient(to bottom, #fcf8e3 0, #faf2cc 100%); 396 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0); 397 | background-repeat:repeat-x 398 | } 399 | .panel-danger>.panel-heading { 400 | background-image:-webkit-linear-gradient(top, #f2dede 0, #ebcccc 100%); 401 | background-image:-o-linear-gradient(top, #f2dede 0, #ebcccc 100%); 402 | background-image:-webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc)); 403 | background-image:linear-gradient(to bottom, #f2dede 0, #ebcccc 100%); 404 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0); 405 | background-repeat:repeat-x 406 | } 407 | .well { 408 | background-image:-webkit-linear-gradient(top, #e8e8e8 0, #f5f5f5 100%); 409 | background-image:-o-linear-gradient(top, #e8e8e8 0, #f5f5f5 100%); 410 | background-image:-webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5)); 411 | background-image:linear-gradient(to bottom, #e8e8e8 0, #f5f5f5 100%); 412 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0); 413 | background-repeat:repeat-x; 414 | border-color:#dcdcdc; 415 | -webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1); 416 | box-shadow:inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1) 417 | } 418 | #nav { 419 | display:block; 420 | list-style-type: none; 421 | margin:auto; 422 | padding:auto; 423 | text-align:center; 424 | width:300px; 425 | text-decoration:none; 426 | font-family:sans-serif; 427 | } 428 | #works { 429 | margin: auto; 430 | width: 96%; 431 | position:absolute; 432 | top:125px; 433 | } 434 | ul#nav 435 | { 436 | margin: 0 auto; 437 | padding-top: 15px; 438 | padding-bottom: 20px; 439 | padding-left: 10px; 440 | padding-right: 10px; 441 | position: fixed; 442 | top: 7px; 443 | } 444 | li#navitem 445 | { 446 | display:inline; 447 | } 448 | li#navitem a:link,a:visited { 449 | font-weight: bold; 450 | color: #fff; 451 | background-color: #27AE60; 452 | text-align: center; 453 | padding: 10px; 454 | text-decoration: none; 455 | text-transform: capitalize; 456 | } 457 | li#navitem a:hover { 458 | color: #fff; 459 | background: #2980B9; 460 | } 461 | #navbar{ 462 | position:fixed; 463 | top:0; 464 | left:0; 465 | width:100%; 466 | height:60px; 467 | background-color:#34495e; 468 | } 469 | .diff{ 470 | list-style:none; 471 | padding-left:0; 472 | } 473 | 474 | .list-group-item > a{ 475 | color:#2980b9; 476 | } 477 | 478 | .list-group-item > ul >li > a{ 479 | color:#2980b9; 480 | } 481 | div#navbar, ul#nav { 482 | z-index:100; 483 | } --------------------------------------------------------------------------------