Browse Source

v1.0.0

master
Spencer Flagg 2 years ago
parent
commit
1f306acd26
21 changed files with 77 additions and 43 deletions
  1. +12
    -6
      src/_data/showcase.js
  2. +4
    -4
      src/_includes/download.ejs
  3. +2
    -2
      src/_includes/layouts/base.ejs
  4. +27
    -20
      src/_includes/showcase.ejs
  5. BIN
      src/assets/images/hero.png
  6. BIN
      src/assets/images/products/heros/diffriend.jpg
  7. BIN
      src/assets/images/products/heros/diffriend.png
  8. BIN
      src/assets/images/products/heros/easy-acupuncture.jpg
  9. BIN
      src/assets/images/products/heros/easy-acupuncture.png
  10. BIN
      src/assets/images/products/heros/hero.png
  11. BIN
      src/assets/images/products/heros/total-reflexology.jpg
  12. BIN
      src/assets/images/products/heros/total-reflexology.png
  13. BIN
      src/assets/images/products/heros/visual-acupuncture-3d.jpg
  14. BIN
      src/assets/images/products/heros/visual-acupuncture-3d.png
  15. BIN
      src/assets/images/products/heros/visual-anatomy-3d.jpg
  16. BIN
      src/assets/images/products/heros/visual-anatomy-3d.png
  17. BIN
      src/assets/images/products/heros/visual-anatomy-canine.jpg
  18. BIN
      src/assets/images/products/heros/visual-anatomy-canine.png
  19. +1
    -0
      src/assets/styles/_hero.css
  20. +26
    -2
      src/assets/styles/_showcase.css
  21. +5
    -9
      src/assets/styles/main.css

+ 12
- 6
src/_data/showcase.js View File

@ -8,7 +8,8 @@ module.exports = [
Complete and easy-to-use virtual guide for learning, understanding, and visualizing the complexities of human anatomy.<br> Complete and easy-to-use virtual guide for learning, understanding, and visualizing the complexities of human anatomy.<br>
Includes information and images for each part, multiple options to interact with the 3D models (hiding, fading, etc), and much more. Includes information and images for each part, multiple options to interact with the 3D models (hiding, fading, etc), and much more.
`, `,
order: 1
order: 1,
color: 'linear-gradient(#10506b, #4f99b7)'
}, },
{ {
name: 'Visual Acupuncture 3d', name: 'Visual Acupuncture 3d',
@ -19,7 +20,8 @@ module.exports = [
Study acupuncture visually and interactively.<br> Study acupuncture visually and interactively.<br>
Get a good feel for the flow of meridian pathways and their (anatomical) point locations. Get a good feel for the flow of meridian pathways and their (anatomical) point locations.
`, `,
order: 2
order: 2,
color: 'linear-gradient(#283738, #1fb1d7)'
}, },
{ {
name: 'Visual Anatomy Canine', name: 'Visual Anatomy Canine',
@ -30,7 +32,8 @@ module.exports = [
An interactive visual guide for learning and understanding canine(dog) anatomy quickly get a clear and complete 3 dimensional understanding of all muscles, bones & organs.<br> An interactive visual guide for learning and understanding canine(dog) anatomy quickly get a clear and complete 3 dimensional understanding of all muscles, bones & organs.<br>
Includes the option to search, save/restore states, quality settings and more. Includes the option to search, save/restore states, quality settings and more.
`, `,
order: 3
order: 3,
color: 'linear-gradient(#3790b7, #7ebdbf)'
}, },
{ {
name: 'Total Reflexology', name: 'Total Reflexology',
@ -40,7 +43,8 @@ module.exports = [
` `
Total Reflexology is aimed to create a more fun, easy and interactive way to learn, look up or share information and provides you with a portable reflexology guide (quickly and easily look up anything reflexology related from anywhere). Total Reflexology is aimed to create a more fun, easy and interactive way to learn, look up or share information and provides you with a portable reflexology guide (quickly and easily look up anything reflexology related from anywhere).
`, `,
order: 4
order: 4,
color: 'linear-gradient(#e2b25f, #e47dcf)'
}, },
{ {
name: 'Easy Acupuncture', name: 'Easy Acupuncture',
@ -50,7 +54,8 @@ module.exports = [
` `
Simple and easy to use app to view all acupuncture points and meridians in both full interactive 3D(zoom, pan, rotate & touch) and with the help of 2D illustrated images, animations and detailed text. Simple and easy to use app to view all acupuncture points and meridians in both full interactive 3D(zoom, pan, rotate & touch) and with the help of 2D illustrated images, animations and detailed text.
`, `,
order: 5
order: 5,
color: 'linear-gradient(#27abec, #70d6f6)'
}, },
{ {
name: 'Diffriend', name: 'Diffriend',
@ -60,6 +65,7 @@ module.exports = [
` `
Peer support app for people with physical or psychological ailments; get in touch with people who are 'different' themselves in an easy and convenient way. Peer support app for people with physical or psychological ailments; get in touch with people who are 'different' themselves in an easy and convenient way.
`, `,
order: 6
order: 6,
color: 'linear-gradient(#6cd7fa, #bad32c)'
}, },
] ]

+ 4
- 4
src/_includes/download.ejs View File

@ -9,7 +9,7 @@
</aside> </aside>
</header> </header>
<section class="download__content"> <section class="download__content">
<a class="platform__wrapper" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602" target="_blank">
<a class="platform__wrapper" href="https://apps.apple.com/us/developer/graphicvizion/id492668041" target="_blank">
<% include /store-icons/ios.svg %> <% include /store-icons/ios.svg %>
<h2> <h2>
iOS iOS
@ -18,7 +18,7 @@
go to store go to store
</div> </div>
</a> </a>
<a class="platform__wrapper" href="https://play.google.com/store/apps/details?id=com.graphicvizion.visualAnatomyHumanFr" target="_blank">
<a class="platform__wrapper" href="https://play.google.com/store/apps/developer?id=GraphicViZion" target="_blank">
<% include /store-icons/android.svg %> <% include /store-icons/android.svg %>
<h2> <h2>
Android Android
@ -27,7 +27,7 @@
go to store go to store
</div> </div>
</a> </a>
<a class="platform__wrapper" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602" target="_blank">
<a class="platform__wrapper" href="https://apps.apple.com/us/developer/graphicvizion/id492668041" target="_blank">
<% include /store-icons/macos.svg %> <% include /store-icons/macos.svg %>
<h2> <h2>
macOS macOS
@ -36,7 +36,7 @@
go to store go to store
</div> </div>
</a> </a>
<a class="platform__wrapper" href="https://www.microsoft.com/en-us/p/visual-anatomy-human-body/9nblggh4qg21" target="_blank">
<a class="platform__wrapper" href="https://apps.microsoft.com/store/search?hl=en-en&gl=EN&publisher=GraphicVizion" target="_blank">
<% include /store-icons/windows.svg %> <% include /store-icons/windows.svg %>
<h2> <h2>
Windows Windows

+ 2
- 2
src/_includes/layouts/base.ejs View File

@ -183,10 +183,10 @@
emailError.classList.remove('form-alert--visible'); emailError.classList.remove('form-alert--visible');
var details = { var details = {
'hash': md5(fromEmail.value + 'erkbn234987kjs'),
'hash': md5(fromEmail.value + '192y34kjsdf32gt'),
'fromEmail': fromEmail.value, 'fromEmail': fromEmail.value,
'message': message.value, 'message': message.value,
'title': 'Support - Visual Anatomy 3D (site)'
'title': 'Support - GraphicViZion (site)'
}; };
var formBody = []; var formBody = [];

+ 27
- 20
src/_includes/showcase.ejs View File

@ -13,27 +13,34 @@
<ul> <ul>
<% showcase.forEach((product)=> { %> <% showcase.forEach((product)=> { %>
<li> <li>
<header>
<img class="icon" src="./assets/images/products/icons/<%= product.slug %>.png" alt="">
<div>
<h2><%= product.name %></h2>
<a href="<%= product.url %>"><%= product.url %></a>
<a href="<%= product.url %>">
<header>
<img class="product-icon" src="./assets/images/products/icons/<%= product.slug %>.png" alt="">
<div>
<h2><%= product.name %></h2>
<span>more info</span><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-external-link" width="100" height="100" viewBox="0 0 24 24" stroke-width="2" stroke="var(--c-3)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
<line x1="10" y1="14" x2="20" y2="4" />
<polyline points="15 4 20 4 20 9" />
</svg>
</div>
</header>
<div class="product-hero__wrapper">
<img class="hero" src="./assets/images/products/heros/<%= product.slug %>.png" alt="" style="background-image: <%= product.color %>">
<div class="product-hero__banner">
<svg class="banner-edge-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
<path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.116947"
d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
</svg>
<svg class="banner-edge-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
<path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.116947"
d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
</svg>
<%- product.description %>
</div>
</div> </div>
</header>
<div class="product-hero__wrapper">
<img class="hero" src="./assets/images/products/heros/<%= product.slug %>.jpg" alt="">
<div class="product-hero__banner">
<svg class="banner-edge-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
<path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.116947"
d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
</svg>
<svg class="banner-edge-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
<path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.116947"
d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
</svg>
<%- product.description %>
</div>
</div>
</a>
</li> </li>
<% }) %> <% }) %>
</ul> </ul>

BIN
src/assets/images/hero.png View File

Before After
Width: 1015  |  Height: 579  |  Size: 545 KiB Width: 1015  |  Height: 579  |  Size: 592 KiB

BIN
src/assets/images/products/heros/diffriend.jpg View File

Before After
Width: 950  |  Height: 542  |  Size: 210 KiB

BIN
src/assets/images/products/heros/diffriend.png View File

Before After
Width: 880  |  Height: 502  |  Size: 412 KiB

BIN
src/assets/images/products/heros/easy-acupuncture.jpg View File

Before After
Width: 950  |  Height: 542  |  Size: 223 KiB

BIN
src/assets/images/products/heros/easy-acupuncture.png View File

Before After
Width: 950  |  Height: 542  |  Size: 376 KiB

BIN
src/assets/images/products/heros/hero.png View File

Before After
Width: 1015  |  Height: 579  |  Size: 592 KiB

BIN
src/assets/images/products/heros/total-reflexology.jpg View File

Before After
Width: 950  |  Height: 542  |  Size: 245 KiB

BIN
src/assets/images/products/heros/total-reflexology.png View File

Before After
Width: 950  |  Height: 542  |  Size: 354 KiB

BIN
src/assets/images/products/heros/visual-acupuncture-3d.jpg View File

Before After
Width: 950  |  Height: 542  |  Size: 358 KiB

BIN
src/assets/images/products/heros/visual-acupuncture-3d.png View File

Before After
Width: 950  |  Height: 542  |  Size: 530 KiB

BIN
src/assets/images/products/heros/visual-anatomy-3d.jpg View File

Before After
Width: 950  |  Height: 542  |  Size: 294 KiB

BIN
src/assets/images/products/heros/visual-anatomy-3d.png View File

Before After
Width: 950  |  Height: 542  |  Size: 499 KiB

BIN
src/assets/images/products/heros/visual-anatomy-canine.jpg View File

Before After
Width: 880  |  Height: 502  |  Size: 218 KiB

BIN
src/assets/images/products/heros/visual-anatomy-canine.png View File

Before After
Width: 880  |  Height: 502  |  Size: 338 KiB

+ 1
- 0
src/assets/styles/_hero.css View File

@ -8,6 +8,7 @@
.hero__video { .hero__video {
border-radius: var(--r-1); border-radius: var(--r-1);
background-color: var(--c-3);
} }
.hero__banner { .hero__banner {

+ 26
- 2
src/assets/styles/_showcase.css View File

@ -19,16 +19,30 @@ article.showcase__wrapper {
gap: 5rem; gap: 5rem;
} }
.showcase__wrapper ul li {
.showcase__wrapper ul li a {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
position: relative;
}
/* .showcase__wrapper ul li a::before {
height: 100%;
width: 100%;
background-color: white;
content: '';
position: absolute;
opacity: 0;
} }
.showcase__wrapper ul li a:hover::before {
opacity: 1;
} */
.showcase__wrapper .hero { .showcase__wrapper .hero {
border-radius: var(--r-1); border-radius: var(--r-1);
} }
.showcase__wrapper .icon {
.showcase__wrapper .product-icon {
height: 5rem; height: 5rem;
width: 5rem; width: 5rem;
transition: 0.2s all; transition: 0.2s all;
@ -36,6 +50,11 @@ article.showcase__wrapper {
border-radius: 1rem; border-radius: 1rem;
} }
.showcase__wrapper .icon {
height: 0.8em;
margin-left: 0.5em;
}
.product-hero__wrapper{ .product-hero__wrapper{
position: relative; position: relative;
max-width: 880px; max-width: 880px;
@ -44,6 +63,10 @@ article.showcase__wrapper {
background-color: var(--c-3); */ background-color: var(--c-3); */
} }
.product-hero__wrapper .hero{
background-color: var(--c-3);
}
.product-hero__bkg{ .product-hero__bkg{
width: 100%; width: 100%;
background-color: aqua; background-color: aqua;
@ -56,6 +79,7 @@ article.showcase__wrapper {
bottom: 0; bottom: 0;
right: 0; right: 0;
width: 60ch; width: 60ch;
color: var(--c-2);
} }
.product-hero__banner .banner-edge-right { .product-hero__banner .banner-edge-right {

+ 5
- 9
src/assets/styles/main.css View File

@ -1,13 +1,5 @@
@tailwind base; @tailwind base;
a {
@apply text-blue-700;
}
a:hover {
@apply underline;
}
/* @tailwind components; */ /* @tailwind components; */
/* @tailwind utilities; */ /* @tailwind utilities; */
@ -148,7 +140,7 @@ body{
/* --c-1: #00C2FF; */ /* --c-1: #00C2FF; */
--c-1: #ececec; --c-1: #ececec;
--c-2: black; --c-2: black;
--c-3: #0477d7;
--c-3: #40cbf2;
--viewportWidth: calc(100vw - var(--scrollbarWidth)); --viewportWidth: calc(100vw - var(--scrollbarWidth));
} }
@ -165,6 +157,10 @@ body {
animation: pageload 1.5s 1; animation: pageload 1.5s 1;
} }
a {
color: var(--c-3);
}
.site-logo { .site-logo {
height: 5rem; height: 5rem;
width: 5rem; width: 5rem;

Loading…
Cancel
Save