Initial Project Explorer Additions
This commit is contained in:
@@ -134,6 +134,7 @@
|
||||
|
||||
.u-section-2 .u-icon-1 {
|
||||
height: 100%;
|
||||
color: rgb(255, 255, 255) !important;
|
||||
}
|
||||
|
||||
.u-section-2 .u-icon-2 {
|
||||
@@ -146,7 +147,6 @@
|
||||
|
||||
.u-section-2 .u-icon-4 {
|
||||
height: 100%;
|
||||
color: rgb(255, 255, 255) !important;
|
||||
}
|
||||
|
||||
.u-section-2 .u-layout-cell-2 {
|
||||
@@ -193,6 +193,10 @@
|
||||
margin-left: 78px;
|
||||
}
|
||||
|
||||
.u-section-2 .u-icon-4 {
|
||||
color: rgb(255, 255, 255) !important;
|
||||
}
|
||||
|
||||
.u-section-2 .u-layout-cell-2 {
|
||||
min-height: 663px;
|
||||
}
|
||||
|
||||
@@ -50,8 +50,7 @@
|
||||
<div class="u-container-style u-custom-color-1 u-layout-cell u-opacity u-opacity-65 u-size-60 u-layout-cell-1">
|
||||
<div class="u-container-layout u-valign-bottom-lg u-valign-bottom-md u-valign-bottom-xl u-container-layout-1">
|
||||
<div class="u-social-icons u-spacing-10 u-social-icons-1">
|
||||
<a class="u-social-url" title="facebook" target="_blank" href="https://www.facebook.com/nicholas.pease.18/"><span class="u-icon u-icon-circle u-social-facebook u-social-icon u-text-white u-icon-1"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 112 112" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-7f9c"></use></svg><svg class="u-svg-content" viewBox="0 0 112 112" x="0" y="0" id="svg-7f9c"><path fill="currentColor" d="M75.5,28.8H65.4c-1.5,0-4,0.9-4,4.3v9.4h13.9l-1.5,15.8H61.4v45.1H42.8V58.3h-8.8V42.4h8.8V32.2
|
||||
c0-7.4,3.4-18.8,18.8-18.8h13.8v15.4H75.5z"></path></svg></span>
|
||||
<a class="u-social-url" title="facebook" target="_blank" href="https://www.facebook.com/nicholas.pease.18/"><span class="u-icon u-icon-circle u-social-facebook u-social-icon u-icon-1"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 512 512" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-9beb"></use></svg><svg class="u-svg-content" viewBox="0 0 512 512" id="svg-9beb"><path d="m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z"></path></svg></span>
|
||||
</a>
|
||||
<a class="u-social-url" title="instagram" target="_blank" href="https://www.instagram.com/nicholas.pease.18"><span class="u-icon u-icon-circle u-social-icon u-social-instagram u-text-white u-icon-2"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 112 112" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-4b89"></use></svg><svg class="u-svg-content" viewBox="0 0 112 112" x="0" y="0" id="svg-4b89"><path fill="currentColor" d="M55.9,32.9c-12.8,0-23.2,10.4-23.2,23.2s10.4,23.2,23.2,23.2s23.2-10.4,23.2-23.2S68.7,32.9,55.9,32.9z
|
||||
M55.9,69.4c-7.4,0-13.3-6-13.3-13.3c-0.1-7.4,6-13.3,13.3-13.3s13.3,6,13.3,13.3C69.3,63.5,63.3,69.4,55.9,69.4z"></path><path fill="#FFFFFF" d="M79.7,26.8c-3,0-5.4,2.5-5.4,5.4s2.5,5.4,5.4,5.4c3,0,5.4-2.5,5.4-5.4S82.7,26.8,79.7,26.8z"></path><path fill="currentColor" d="M78.2,11H33.5C21,11,10.8,21.3,10.8,33.7v44.7c0,12.6,10.2,22.8,22.7,22.8h44.7c12.6,0,22.7-10.2,22.7-22.7
|
||||
@@ -60,7 +59,7 @@
|
||||
</a>
|
||||
<a class="u-social-url" target="_blank" title="Snapchat" href="https://www.snapchat.com/add/npease2002"><span class="u-icon u-icon-circle u-social-icon u-social-snapchat u-text-white u-icon-3"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 24 24" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-9dcf"></use></svg><svg class="u-svg-content" viewBox="0 0 24 24" id="svg-9dcf"><path d="m3.187 19.809c.273 1.2.566 1.697 2.14 1.439.458-.076 1.03-.171 1.734-.055 1.168.194 4.256 4.128 8.647.658.857-.6 1.325-.932 2.988-.606.726.141 1.657-.008 2.112-1.436 4.339-.781 3.407-3.174 2.107-3.383-2.26-.369-3.759-2.702-3.919-3.446.159-.098.507-.219.729-.295 3.665-1.268 1.625-4.354-.867-3.402.163-2.6.21-4.683-1.917-6.68-2.261-2.116-5.754-2.213-8.035-1.212-3.976 1.738-3.945 5.105-3.768 7.932-1.585-.606-2.66.267-2.833 1.162-.262 1.411 1.086 1.885 1.89 2.168.281.099.75.264.821.317-.087.101-.591 2.342-3.576 3.332-.57.189-1.109.368-1.343.89-.139.312-.128.662.036 1.039.403.936 1.713 1.338 3.054 1.578zm3.115-6.017c.66-1.33-.206-2.055-1.608-2.549-.296-.104-.846-.298-.918-.476.025-.063.222-.189.409-.189.058.004.224.068.334.109 4.742 1.796-.853-5.374 4.988-7.926 1.789-.784 4.643-.722 6.409.933 2.831 2.656.604 6.534 1.832 7.093.874.397 1.71-.214 2.012-.223.235 0 .44.14.462.19.004.177-.615.391-.985.519-1.71.591-2.244 1.299-1.277 3.062.729 1.33 2.271 2.985 4.313 3.487-1.433.828-2.521.099-2.839 1.351-.164.665-.269.642-.45.607-5.066-.992-4.72 4.27-9.869.831-1.757-1.173-2.1-1.048-4.385-.784-.096-.377-.158-.785-.291-1.031-.361-.668-1.697-.33-2.744-1.001 2.101-.719 3.522-1.565 4.607-4.003z"></path></svg></span>
|
||||
</a>
|
||||
<a class="u-social-url" target="_blank" title="Email" href="mailto:nicholaspease18@gmail.com"><span class="u-icon u-icon-circle u-social-email u-social-icon u-icon-4"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 512 512" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-ab9f"></use></svg><svg class="u-svg-content" viewBox="0 0 512 512" x="0px" y="0px" id="svg-ab9f" style="enable-background:new 0 0 512 512;"><g><g><path d="M467,80.609H45c-24.813,0-45,20.187-45,45v260.782c0,24.813,20.187,45,45,45h422c24.813,0,45-20.187,45-45V125.609 C512,100.796,491.813,80.609,467,80.609z M461.127,110.609l-6.006,5.001L273.854,266.551c-10.346,8.614-25.364,8.614-35.708,0 L56.879,115.61l-6.006-5.001H461.127z M30,132.267L177.692,255.25L30,353.543V132.267z M467,401.391H45 c-7.248,0-13.31-5.168-14.699-12.011l171.445-114.101l17.204,14.326c10.734,8.938,23.893,13.407,37.051,13.407 c13.158,0,26.316-4.469,37.051-13.407l17.204-14.326l171.444,114.1C480.31,396.224,474.248,401.391,467,401.391z M482,353.543 l-147.692-98.292L482,132.267V353.543z"></path>
|
||||
<a class="u-social-url" target="_blank" title="Email" href="mailto:nicholaspease18@gmail.com"><span class="u-icon u-icon-circle u-social-email u-social-icon u-text-white u-icon-4"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 512 512" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-ab9f"></use></svg><svg class="u-svg-content" viewBox="0 0 512 512" x="0px" y="0px" id="svg-ab9f" style="enable-background:new 0 0 512 512;"><g><g><path d="M467,80.609H45c-24.813,0-45,20.187-45,45v260.782c0,24.813,20.187,45,45,45h422c24.813,0,45-20.187,45-45V125.609 C512,100.796,491.813,80.609,467,80.609z M461.127,110.609l-6.006,5.001L273.854,266.551c-10.346,8.614-25.364,8.614-35.708,0 L56.879,115.61l-6.006-5.001H461.127z M30,132.267L177.692,255.25L30,353.543V132.267z M467,401.391H45 c-7.248,0-13.31-5.168-14.699-12.011l171.445-114.101l17.204,14.326c10.734,8.938,23.893,13.407,37.051,13.407 c13.158,0,26.316-4.469,37.051-13.407l17.204-14.326l171.444,114.1C480.31,396.224,474.248,401.391,467,401.391z M482,353.543 l-147.692-98.292L482,132.267V353.543z"></path>
|
||||
</g>
|
||||
</g></svg></span>
|
||||
</a>
|
||||
@@ -96,7 +95,7 @@
|
||||
</span>
|
||||
<h3 class="u-align-center u-text u-text-1">Project's and Software</h3>
|
||||
<p class="u-align-center u-text u-text-2">My projects and software programs. This leads to my projects and software portal.</p>
|
||||
<a href="" class="u-active-none u-border-2 u-border-palette-2-light-1 u-btn u-button-style u-hover-none u-none u-text-body-color u-btn-1">Access</a>
|
||||
<a href="http://nicholaspease.com/project_explorer/index.html" class="u-active-none u-border-2 u-border-palette-2-light-1 u-btn u-button-style u-hover-none u-none u-text-body-color u-btn-1">Access</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-align-center u-container-style u-list-item u-repeater-item">
|
||||
|
||||
+3
-4
@@ -50,8 +50,7 @@
|
||||
<div class="u-container-style u-custom-color-1 u-layout-cell u-opacity u-opacity-65 u-size-60 u-layout-cell-1">
|
||||
<div class="u-container-layout u-valign-bottom-lg u-valign-bottom-md u-valign-bottom-xl u-container-layout-1">
|
||||
<div class="u-social-icons u-spacing-10 u-social-icons-1">
|
||||
<a class="u-social-url" title="facebook" target="_blank" href="https://www.facebook.com/nicholas.pease.18/"><span class="u-icon u-icon-circle u-social-facebook u-social-icon u-text-white u-icon-1"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 112 112" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-7f9c"></use></svg><svg class="u-svg-content" viewBox="0 0 112 112" x="0" y="0" id="svg-7f9c"><path fill="currentColor" d="M75.5,28.8H65.4c-1.5,0-4,0.9-4,4.3v9.4h13.9l-1.5,15.8H61.4v45.1H42.8V58.3h-8.8V42.4h8.8V32.2
|
||||
c0-7.4,3.4-18.8,18.8-18.8h13.8v15.4H75.5z"></path></svg></span>
|
||||
<a class="u-social-url" title="facebook" target="_blank" href="https://www.facebook.com/nicholas.pease.18/"><span class="u-icon u-icon-circle u-social-facebook u-social-icon u-icon-1"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 512 512" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-9beb"></use></svg><svg class="u-svg-content" viewBox="0 0 512 512" id="svg-9beb"><path d="m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z"></path></svg></span>
|
||||
</a>
|
||||
<a class="u-social-url" title="instagram" target="_blank" href="https://www.instagram.com/nicholas.pease.18"><span class="u-icon u-icon-circle u-social-icon u-social-instagram u-text-white u-icon-2"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 112 112" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-4b89"></use></svg><svg class="u-svg-content" viewBox="0 0 112 112" x="0" y="0" id="svg-4b89"><path fill="currentColor" d="M55.9,32.9c-12.8,0-23.2,10.4-23.2,23.2s10.4,23.2,23.2,23.2s23.2-10.4,23.2-23.2S68.7,32.9,55.9,32.9z
|
||||
M55.9,69.4c-7.4,0-13.3-6-13.3-13.3c-0.1-7.4,6-13.3,13.3-13.3s13.3,6,13.3,13.3C69.3,63.5,63.3,69.4,55.9,69.4z"></path><path fill="#FFFFFF" d="M79.7,26.8c-3,0-5.4,2.5-5.4,5.4s2.5,5.4,5.4,5.4c3,0,5.4-2.5,5.4-5.4S82.7,26.8,79.7,26.8z"></path><path fill="currentColor" d="M78.2,11H33.5C21,11,10.8,21.3,10.8,33.7v44.7c0,12.6,10.2,22.8,22.7,22.8h44.7c12.6,0,22.7-10.2,22.7-22.7
|
||||
@@ -60,7 +59,7 @@
|
||||
</a>
|
||||
<a class="u-social-url" target="_blank" title="Snapchat" href="https://www.snapchat.com/add/npease2002"><span class="u-icon u-icon-circle u-social-icon u-social-snapchat u-text-white u-icon-3"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 24 24" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-9dcf"></use></svg><svg class="u-svg-content" viewBox="0 0 24 24" id="svg-9dcf"><path d="m3.187 19.809c.273 1.2.566 1.697 2.14 1.439.458-.076 1.03-.171 1.734-.055 1.168.194 4.256 4.128 8.647.658.857-.6 1.325-.932 2.988-.606.726.141 1.657-.008 2.112-1.436 4.339-.781 3.407-3.174 2.107-3.383-2.26-.369-3.759-2.702-3.919-3.446.159-.098.507-.219.729-.295 3.665-1.268 1.625-4.354-.867-3.402.163-2.6.21-4.683-1.917-6.68-2.261-2.116-5.754-2.213-8.035-1.212-3.976 1.738-3.945 5.105-3.768 7.932-1.585-.606-2.66.267-2.833 1.162-.262 1.411 1.086 1.885 1.89 2.168.281.099.75.264.821.317-.087.101-.591 2.342-3.576 3.332-.57.189-1.109.368-1.343.89-.139.312-.128.662.036 1.039.403.936 1.713 1.338 3.054 1.578zm3.115-6.017c.66-1.33-.206-2.055-1.608-2.549-.296-.104-.846-.298-.918-.476.025-.063.222-.189.409-.189.058.004.224.068.334.109 4.742 1.796-.853-5.374 4.988-7.926 1.789-.784 4.643-.722 6.409.933 2.831 2.656.604 6.534 1.832 7.093.874.397 1.71-.214 2.012-.223.235 0 .44.14.462.19.004.177-.615.391-.985.519-1.71.591-2.244 1.299-1.277 3.062.729 1.33 2.271 2.985 4.313 3.487-1.433.828-2.521.099-2.839 1.351-.164.665-.269.642-.45.607-5.066-.992-4.72 4.27-9.869.831-1.757-1.173-2.1-1.048-4.385-.784-.096-.377-.158-.785-.291-1.031-.361-.668-1.697-.33-2.744-1.001 2.101-.719 3.522-1.565 4.607-4.003z"></path></svg></span>
|
||||
</a>
|
||||
<a class="u-social-url" target="_blank" title="Email" href="mailto:nicholaspease18@gmail.com"><span class="u-icon u-icon-circle u-social-email u-social-icon u-icon-4"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 512 512" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-ab9f"></use></svg><svg class="u-svg-content" viewBox="0 0 512 512" x="0px" y="0px" id="svg-ab9f" style="enable-background:new 0 0 512 512;"><g><g><path d="M467,80.609H45c-24.813,0-45,20.187-45,45v260.782c0,24.813,20.187,45,45,45h422c24.813,0,45-20.187,45-45V125.609 C512,100.796,491.813,80.609,467,80.609z M461.127,110.609l-6.006,5.001L273.854,266.551c-10.346,8.614-25.364,8.614-35.708,0 L56.879,115.61l-6.006-5.001H461.127z M30,132.267L177.692,255.25L30,353.543V132.267z M467,401.391H45 c-7.248,0-13.31-5.168-14.699-12.011l171.445-114.101l17.204,14.326c10.734,8.938,23.893,13.407,37.051,13.407 c13.158,0,26.316-4.469,37.051-13.407l17.204-14.326l171.444,114.1C480.31,396.224,474.248,401.391,467,401.391z M482,353.543 l-147.692-98.292L482,132.267V353.543z"></path>
|
||||
<a class="u-social-url" target="_blank" title="Email" href="mailto:nicholaspease18@gmail.com"><span class="u-icon u-icon-circle u-social-email u-social-icon u-text-white u-icon-4"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 512 512" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-ab9f"></use></svg><svg class="u-svg-content" viewBox="0 0 512 512" x="0px" y="0px" id="svg-ab9f" style="enable-background:new 0 0 512 512;"><g><g><path d="M467,80.609H45c-24.813,0-45,20.187-45,45v260.782c0,24.813,20.187,45,45,45h422c24.813,0,45-20.187,45-45V125.609 C512,100.796,491.813,80.609,467,80.609z M461.127,110.609l-6.006,5.001L273.854,266.551c-10.346,8.614-25.364,8.614-35.708,0 L56.879,115.61l-6.006-5.001H461.127z M30,132.267L177.692,255.25L30,353.543V132.267z M467,401.391H45 c-7.248,0-13.31-5.168-14.699-12.011l171.445-114.101l17.204,14.326c10.734,8.938,23.893,13.407,37.051,13.407 c13.158,0,26.316-4.469,37.051-13.407l17.204-14.326l171.444,114.1C480.31,396.224,474.248,401.391,467,401.391z M482,353.543 l-147.692-98.292L482,132.267V353.543z"></path>
|
||||
</g>
|
||||
</g></svg></span>
|
||||
</a>
|
||||
@@ -96,7 +95,7 @@
|
||||
</span>
|
||||
<h3 class="u-align-center u-text u-text-1">Project's and Software</h3>
|
||||
<p class="u-align-center u-text u-text-2">My projects and software programs. This leads to my projects and software portal.</p>
|
||||
<a href="" class="u-active-none u-border-2 u-border-palette-2-light-1 u-btn u-button-style u-hover-none u-none u-text-body-color u-btn-1">Access</a>
|
||||
<a href="http://nicholaspease.com/project_explorer/index.html" class="u-active-none u-border-2 u-border-palette-2-light-1 u-btn u-button-style u-hover-none u-none u-text-body-color u-btn-1">Access</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-align-center u-container-style u-list-item u-repeater-item">
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 404 B |
Binary file not shown.
|
After Width: | Height: | Size: 701 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
@@ -0,0 +1,100 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
Material Design Lite
|
||||
Copyright 2015 Google Inc. All rights reserved.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
https://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License
|
||||
-->
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
||||
<title>Material Design Lite</title>
|
||||
|
||||
<!-- Add to homescreen for Chrome on Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<link rel="icon" sizes="192x192" href="images/android-desktop.png">
|
||||
|
||||
<!-- Add to homescreen for Safari on iOS -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
|
||||
<link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png">
|
||||
|
||||
<!-- Tile icon for Win8 (144x144 + tile color) -->
|
||||
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
|
||||
<meta name="msapplication-TileColor" content="#3372DF">
|
||||
|
||||
<link rel="shortcut icon" href="images/favicon.png">
|
||||
|
||||
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
|
||||
<!--
|
||||
<link rel="canonical" href="http://www.example.com/">
|
||||
-->
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-light_blue.min.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<style>
|
||||
#view-source {
|
||||
position: fixed;
|
||||
display: block;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 40px;
|
||||
z-index: 900;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body onload="onLoad();">
|
||||
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
|
||||
<header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
|
||||
<div class="mdl-layout__header-row">
|
||||
<span class="mdl-layout-title">Project Explorer</span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
|
||||
<header class="demo-drawer-header">
|
||||
Menu
|
||||
</header>
|
||||
<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
|
||||
<a class="mdl-navigation__link" href="javascript:displayProjects('all')"><i class="mdl-color-text--blue-grey-400 material-icons"
|
||||
role="presentation">home</i>All Projects</a>
|
||||
<a class="mdl-navigation__link" href="javascript:displayProjects('active')"><i class="mdl-color-text--blue-grey-400 material-icons"
|
||||
role="presentation">home</i>Active Projects</a>
|
||||
<a class="mdl-navigation__link" href="javascript:displayProjects('inactive')"><i class="mdl-color-text--blue-grey-400 material-icons"
|
||||
role="presentation">inbox</i>Inactive Projects</a>
|
||||
<a class="mdl-navigation__link" href="javascript:displayProjects('canceled')"><i class="mdl-color-text--blue-grey-400 material-icons"
|
||||
role="presentation">delete</i>Canceled Projects</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content mdl-color--grey-100">
|
||||
<div id="projects"></div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
|
||||
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
function onLoad() {
|
||||
startFirebase("active")
|
||||
displayProjects("all")
|
||||
}
|
||||
|
||||
function displayProjects(status) {
|
||||
document.getElementById("projects").innerHTML = ""
|
||||
database = firebase.database().ref("projects");
|
||||
database.once('value', function (snapshot) {
|
||||
snapshot.forEach(function (child) {
|
||||
firebase.database().ref("projects/" + child["key"]).on('value', function (data) {
|
||||
var data1 = data.val();
|
||||
var a = document.createElement("div")
|
||||
if (data1["link"] == "") {
|
||||
a.innerHTML = '<div class="project-card mdl-card mdl-shadow--2dp"> <div class="mdl-card__title mdl-card--expand"> <h2 class="mdl-card__title-text">' + data1["title"].replace(/,/g, ".") + '<br>' + data1["status"] + '</h2> </div> <div class="mdl-card__supporting-text">' + data1["description"] + ' </div> </div>'
|
||||
//a.innerHTML = "<tr><td><div id='titles'>" + data1["title"].replace(/,/g, ".") + "</h4><div class='" + data1["status"] + "'>" + data1["status"] + "</div></td></tr><tr class='spacing'><td>" + data1["description"] + "</td></tr><tr class='separator'></tr>"
|
||||
} else {
|
||||
a.innerHTML = '<div class="project-card mdl-card mdl-shadow--2dp"> <div class="mdl-card__title mdl-card--expand"> <h2 class="mdl-card__title-text">' + data1["title"].replace(/,/g, ".") + '<br>' + data1["status"] + '</h2> </div> <div class="mdl-card__supporting-text">' + data1["description"] + ' </div> <div class="mdl-card__actions mdl-card--border"> <a href="' + data1["link"] + '" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> See More </a> </div> </div>'
|
||||
// a.innerHTML = "<tr><td><div id='titles'><a href='" + data1["link"] + "'>" + data1["title"].replace(/,/g, ".") + "</a></h4><div class='" + data1["status"] + "'>" + data1["status"] + "</div></td></tr><tr class='spacing'><td>" + data1["description"] + "</td></tr><tr class='separator'></tr>"
|
||||
}
|
||||
|
||||
if (status === "all") {
|
||||
document.getElementById("projects").appendChild(a)
|
||||
} else if (data1["status"] === status) {
|
||||
document.getElementById("projects").appendChild(a)
|
||||
}
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// Starts Firebase
|
||||
function startFirebase() {
|
||||
// Initialize Firebase
|
||||
var config = {
|
||||
apiKey: "AIzaSyBG5-wv3bpeiUjR6BH5GXamqPlH1arXt8Y",
|
||||
authDomain: "homepage-projects-3d870.firebaseapp.com",
|
||||
databaseURL: "https://homepage-projects-3d870.firebaseio.com",
|
||||
projectId: "homepage-projects-3d870",
|
||||
storageBucket: "homepage-projects-3d870.appspot.com",
|
||||
messagingSenderId: "487531629040"
|
||||
};
|
||||
firebase.initializeApp(config);
|
||||
}
|
||||
|
||||
// Firebase Interaction Scripts
|
||||
function readData(ref, callback) {
|
||||
var nextformation = firebase.database().ref(ref);
|
||||
nextformation.on("value", function (data) {
|
||||
var array = data.val();
|
||||
callback(array)
|
||||
});
|
||||
}
|
||||
// global read data and place on page function
|
||||
function setData(ref, element, read1) {
|
||||
var array = readData(ref, function (array) {
|
||||
document.getElementById(element).innerHTML = array[read1]
|
||||
});
|
||||
}
|
||||
|
||||
// Firebase Interaction Scripts
|
||||
function sendData(ref, data) {
|
||||
var database = firebase.database();
|
||||
firebase.database().ref(ref).set(data);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
.project-card {
|
||||
width: 98.5%;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.active {color: green;}
|
||||
.inactive {color: orange;}
|
||||
.canceled {color: red;}
|
||||
.depracated {color: yellow;}
|
||||
.hidden {display: none;}
|
||||
@@ -0,0 +1,215 @@
|
||||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
html, body {
|
||||
font-family: 'Roboto', 'Helvetica', sans-serif;
|
||||
}
|
||||
.demo-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
.demo-layout .mdl-layout__header .mdl-layout__drawer-button {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
.mdl-layout__drawer .avatar {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.demo-drawer {
|
||||
border: none;
|
||||
}
|
||||
/* iOS Safari specific workaround */
|
||||
.demo-drawer .mdl-menu__container {
|
||||
z-index: -1;
|
||||
}
|
||||
.demo-drawer .demo-navigation {
|
||||
z-index: -2;
|
||||
}
|
||||
/* END iOS Safari specific workaround */
|
||||
.demo-drawer .mdl-menu .mdl-menu__item {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.demo-drawer-header {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
padding: 16px;
|
||||
height: 151px;
|
||||
}
|
||||
.demo-avatar-dropdown {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
position: relative;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-navigation {
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.demo-layout .demo-navigation .mdl-navigation__link {
|
||||
display: -webkit-flex !important;
|
||||
display: -ms-flexbox !important;
|
||||
display: flex !important;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 0.56);
|
||||
font-weight: 500;
|
||||
}
|
||||
.demo-layout .demo-navigation .mdl-navigation__link:hover {
|
||||
background-color: #00BCD4;
|
||||
color: #37474F;
|
||||
}
|
||||
.demo-navigation .mdl-navigation__link .material-icons {
|
||||
font-size: 24px;
|
||||
color: rgba(255, 255, 255, 0.56);
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
max-width: 1080px;
|
||||
}
|
||||
|
||||
.demo-charts {
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.demo-chart:nth-child(1) {
|
||||
color: #ACEC00;
|
||||
}
|
||||
.demo-chart:nth-child(2) {
|
||||
color: #00BBD6;
|
||||
}
|
||||
.demo-chart:nth-child(3) {
|
||||
color: #BA65C9;
|
||||
}
|
||||
.demo-chart:nth-child(4) {
|
||||
color: #EF3C79;
|
||||
}
|
||||
.demo-graphs {
|
||||
padding: 16px 32px;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-align-items: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
/* TODO: Find a proper solution to have the graphs
|
||||
* not float around outside their container in IE10/11.
|
||||
* Using a browserhacks.com solution for now.
|
||||
*/
|
||||
_:-ms-input-placeholder, :root .demo-graphs {
|
||||
min-height: 664px;
|
||||
}
|
||||
_:-ms-input-placeholder, :root .demo-graph {
|
||||
max-height: 300px;
|
||||
}
|
||||
/* TODO end */
|
||||
.demo-graph:nth-child(1) {
|
||||
color: #00b9d8;
|
||||
}
|
||||
.demo-graph:nth-child(2) {
|
||||
color: #d9006e;
|
||||
}
|
||||
|
||||
.demo-cards {
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
-webkit-align-content: flex-start;
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.demo-cards .demo-separator {
|
||||
height: 32px;
|
||||
}
|
||||
.demo-cards .mdl-card__title.mdl-card__title {
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.demo-cards ul {
|
||||
padding: 0;
|
||||
}
|
||||
.demo-cards h3 {
|
||||
font-size: 1em;
|
||||
}
|
||||
.demo-updates .mdl-card__title {
|
||||
min-height: 200px;
|
||||
background-image: url('images/dog.png');
|
||||
background-position: 90% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.demo-cards .mdl-card__actions a {
|
||||
color: #00BCD4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.demo-options h3 {
|
||||
margin: 0;
|
||||
}
|
||||
.demo-options .mdl-checkbox__box-outline {
|
||||
border-color: rgba(255, 255, 255, 0.89);
|
||||
}
|
||||
.demo-options ul {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.demo-options li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
.demo-options .material-icons {
|
||||
color: rgba(255, 255, 255, 0.89);
|
||||
}
|
||||
.demo-options .mdl-card__actions {
|
||||
height: 64px;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
Reference in New Issue
Block a user