-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(#658): add app instructions document
- Loading branch information
Showing
5 changed files
with
182 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,180 @@ | ||
| <html> | ||
| <head> | ||
| <title>PharMe: Getting Started</title> | ||
| <style> | ||
| body { | ||
| margin: 0; | ||
| background-color: whitesmoke; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| font-family: Helvetica, sans-serif; | ||
| } | ||
| .content { | ||
| margin: 0; | ||
| padding: 1in; | ||
| width: 8.5in; | ||
| background-color: white; | ||
| } | ||
| td { | ||
| height: 5.2in; | ||
| vertical-align: center; | ||
| } | ||
| tr { | ||
| border-bottom: 3px solid gainsboro; | ||
| border-top: 3px solid gainsboro; | ||
| border-collapse: collapse; | ||
| } | ||
| .screenshot-wrapper { | ||
| width: 5.2in; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: center; | ||
| } | ||
| .screenshot { | ||
| width: 2.5in; | ||
| height: 4.93in; | ||
| background-repeat: no-repeat; | ||
| background-size: cover; | ||
| background-position: bottom; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="content"> | ||
| <h1>Getting Started with PharMe</h1> | ||
| <p> | ||
| Welcome to PharMe, an application to gain insights on your DNA's influence | ||
| on drugs! 🧬💊🤗 | ||
| </p> | ||
| <p> | ||
| In the following, we will give you an overview on how to use the app. | ||
| Please contact us at | ||
| <a href="mailto:[email protected]">[email protected]</a> | ||
| in case you have any questions. | ||
| </p> | ||
| <p> | ||
| We hope you will enjoy using PharMe! 🎉 | ||
| </p> | ||
| <table> | ||
| <tr> | ||
| <td> | ||
| <div class="screenshot-wrapper"> | ||
| <div class="screenshot" style="background-image: url(./screenshots/login.png)"></div> | ||
| <div class="screenshot" style="background-image: url(./screenshots/login-redirect.png)"></div> | ||
| </div> | ||
| </td> | ||
| <td> | ||
| To get started with PharMe, you first need to import your pharmacogenetic | ||
| (PGx) test data (data about your DNA and drugs you are taking) from your | ||
| data provider. | ||
| <br/> | ||
| <br/> | ||
| Tapping the <i>Get data</i> button will forward you to | ||
| your data provider's sign in. | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <div class="screenshot-wrapper"> | ||
| <div class="screenshot" style="background-image: url(./screenshots/onboarding-2.png)"></div> | ||
| <div class="screenshot" style="background-image: url(./screenshots/drug-selection.png)"></div> | ||
| </div> | ||
| </td> | ||
| <td> | ||
| After successfully importing data, you will get an overview about PharMe's | ||
| backgound and capabilities in a short onboarding. | ||
| <br/> | ||
| <br/> | ||
| In the initial medication selection you can tell PharMe which medications | ||
| you are currently taking – if your PGx test data includes drugs you are | ||
| taking, they will be pre-selected here. | ||
| <br/> | ||
| <br/> | ||
| Later in the app, you will be able to filter for drugs you are currently | ||
| taking; also, some drugs can influence your results for other drugs. Please | ||
| take your time here to make the most of PharMe. ☺️ | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <div class="screenshot-wrapper"> | ||
| <div class="screenshot" style="background-image: url(./screenshots/gene-report.png)"></div> | ||
| <div class="screenshot" style="background-image: url(./screenshots/cyp2c19.png)"></div> | ||
| </div> | ||
| </td> | ||
| <td> | ||
| Afterwards, you reach the main app; everything is set up | ||
| now. (Yay! 🥳) | ||
| <br/> | ||
| <br/> | ||
| The first page you will see is the <i>Report</i> screen; here you can see | ||
| the results from your your PGx test by gene (we know the names are cryptic, | ||
| but you will get to know them sooner as you think!). | ||
| <br/> | ||
| <br/> | ||
| Under each gene name, your phenotype is depicted. The phenotype tells you | ||
| what the consequence of your genetic variant is; e.g., as a <i>CYP2C19 | ||
| Intermediate Metabolizer</i>, your CYP2C19 enzyme – the protein that is | ||
| encoded by the CYP2C19 gene – works a bit slower than expected. | ||
| <br/> | ||
| <br/> | ||
| Selecting a gene will take you to its detail page, with further information | ||
| about your result and drugs that are influenced by this gene. For technical | ||
| terms (like "genotype"), you can always find explanations by tapping on the | ||
| question mark. | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <div class="screenshot-wrapper"> | ||
| <div class="screenshot" style="background-image: url(./screenshots/drug-search.png)"></div> | ||
| <div class="screenshot" style="background-image: url(./screenshots/clopidogrel.png)"></div> | ||
| </div> | ||
| </td> | ||
| <td> | ||
| You can also view your PGx results by drug on the <i>Drugs</i> screen. | ||
| Here, you can search for drugs by their generic name, brand names, or drug | ||
| class. You can also filter the list by medications you are currently taking | ||
| and by warning levels (❌ ⚠️ ✅). | ||
| <br/> | ||
| <br/> | ||
| Selecting a drug (also on the gene detail page) leads to the drug's detail | ||
| page. | ||
| <br/> | ||
| <br/> | ||
| Here you see some general information about the drug and a short statement | ||
| what PGx guidelines say about your DNA and this drug. Fore more information, | ||
| the respective guideline is linked at the bottom of each drug page. | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td> | ||
| <div class="screenshot-wrapper"> | ||
| <div class="screenshot" style="background-image: url(./screenshots/faq.png)"></div> | ||
| <div class="screenshot" style="background-image: url(./screenshots/more.png)"></div> | ||
| </div> | ||
| </td> | ||
| <td> | ||
| The <i>FAQ</i> page collects information that might be useful for you. | ||
| <br/> | ||
| <br/> | ||
| If you want to view the onboarding again or review our Terms of Use or | ||
| Privacy Policy, you can find the information you need on the <i>More</i> | ||
| tab. | ||
| <br/> | ||
| <br/> | ||
| Please be careful when deleting your data; this will reset the app in its | ||
| initial state and also delete your PGx test data. It might not be possible | ||
| to import your data again, if you lost your credentials or your data | ||
| provider deleted your data. | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| <p> | ||
| We hope by using PharMe you will learn useful information about your DNA and | ||
| drugs! Have fun! 💫 | ||
| </p> | ||
| </div> | ||
| </body> | ||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes