Skip to content

T
TMP-23-197
Commit 950ebf2b authored by IT20161538's avatar IT20161538
Browse files
Options

new commit

parent 54021086
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2153 additions and 1004 deletions
ResearchFinal.ipynb → SideEffects_Treatments.ipynb
View file @ 950ebf2b
This source diff could not be displayed because it is too large. You can view the blob instead.
sideeffects_treatments.py 0 → 100644
View file @ 950ebf2b
This diff is collapsed.
src/components/SideEffectsAndTreatments.css
View file @ 950ebf2b
.side-effect-wrapper{
.form-container{ width: 95vw;
margin: 5rem 6rem; display: flex;
color: #2a2a2a; flex-direction: column;
justify-content: center;
align-items: center;
} }
.form-container form{ .side-effect-form{
width:820px; padding: 10px;
height:850px; margin: 10px;
padding:20px; display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius:6px; border-radius:6px;
background:#FFF;
box-shadow:0 0 8px #696969; box-shadow:0 0 8px #696969;
margin-left:330px; padding-block: 10px;
width: 45vw;
margin-top: 80px;
} }
.title{
.form-container label{ margin-bottom: 20px;
text-align: left;
margin-left:50px;
} }
.form-container input{ .form{
height: 2rem; width: 35vw;
padding: 0 1rem ; height: 750px;
margin-bottom: 2rem; display: flex;
border-radius: .3rem; flex-direction: column;
border: 1px solid #2a2a2a ; justify-content: start;
gap: 19px;
padding: 5px;
} }
.input-group{
.form-container select { display: flex;
width: 50%; flex-direction: row;
padding: 6px 20px; gap: 10px;
border: none; align-items: center;
border-radius: 2px; padding: 5px;
background-color: white;
margin-right: 2px;
border: 1px solid #2a2a2a ;
} }
.l-radio { select{
display: inline-block; padding: 5px;
margin-right: 2px;
} }
input{
.gender-radio { padding: 5px;
display: inline-block;
margin-right: 2px;
} }
.gender-container { .btn-area{
display: flex; display: flex;
align-items: center; flex-direction: row;
justify-content: end;
} }
.form-container button{ .btn{
border:0; color: whitesmoke;
outline:0; background-color: black;
height:50px; padding-inline: 40px;
width:200px; padding-block: 10px;
border-radius:50px; border-radius: 50px;
color:white; -webkit-border-radius: 50px;
font-weight:bold; -moz-border-radius: 50px;
font-size:0.9rem; -ms-border-radius: 50px;
cursor:pointer; -o-border-radius: 50px;
background:black; cursor: pointer;
margin-left:530px; margin-right:400px;
} }
@media screen and (max-width: 850px){ .input-group1{
.form-container{ display: flex;
margin: 4rem 2rem; flex-direction: row;
color: #2a2a2a; gap: 10px;
} align-items: center;
padding: 5px;
.form-container form{
padding-top: 2rem;
width: 90%;
}
} }
\ No newline at end of file
src/components/SideEffectsAndTreatments.js
View file @ 950ebf2b
import React from 'react'; import React, { useState } from 'react'
import './SideEffectsAndTreatments.css'; import './SideEffectsAndTreatments.css';
export default function SideEffectsAndTreatments() { export default function SideEffectsAndTreatments() {
return ( const [age, setAge] = useState('');
<div className='form-container'> const [drugUsageMg, setDrugUsageMg] = useState('');
const [months, setMonths] = useState('');
<form> const [takingCooccurringSubstances, setTakingCooccurringSubstances] = useState('');
<h1>Side Effects & Treatments</h1> const [preExistingmedicalcondition, setPreExistingmedicalcondition] = useState('');
<br/><br/>
<label>Age : <input placeholder='Age'/></label>
<label for="methods">Gender :
<label class="gender-radio">
<input type="radio" name="gender" value="male"/> Male
</label>
<label class="gender-radio">
<input type="radio" name="gender" value="female"/> Female
</label>
</label>
<label>Drug Type : return (
<div className='side-effect-wrapper'><div className='side-effect-form'><br/>
<h1 className='title'>Side Effect & Treatments</h1><br/>
<form className='form'>
<div className='input-group'>
<label>Age: </label>
<input type='number' placeholder='Age' value={age} onChange={(e)=>{setAge(e.target.value)}}/>
</div>
<div className='input-group'>
<label>Gender: </label>
<input type='radio' name='gender' value='male'/>
<span>Male</span>
<input type='radio' name='gender' value='female'/>
<span>Female</span>
</div>
<div className='input-group'>
<label>Drug Type: </label>
<select name="drugtype"> <select name="drugtype">
<option>Choose a Drug Type</option> <option>Choose a Drug Type</option>
<option>Heroin</option> <option>Heroin</option>
...@@ -28,24 +33,34 @@ export default function SideEffectsAndTreatments() { ...@@ -28,24 +33,34 @@ export default function SideEffectsAndTreatments() {
<option>Hashish</option> <option>Hashish</option>
<option>Cocaine</option> <option>Cocaine</option>
<option>Methamphetamine</option> <option>Methamphetamine</option>
</select></label> </select>
<br/> </div>
<div className='input-group'>
<label>Measures of drug used per day(mg) : <input placeholder='mg'/></label> <label>Measures of drug used per day(mg): </label>
<label>Time Used(Month) : <input placeholder='No of months'/></label> <input type='number' placeholder='mg' value={drugUsageMg} onChange={(e)=>{setDrugUsageMg(e.target.value)}}/>
</div>
<label>Route of Administration : <div className='input-group'>
<label>Time Used(Month): </label>
<input type='number' placeholder='No of months' value={months} onChange={(e)=>{setMonths(e.target.value)}}/>
</div>
<div className='input-group'>
<label>Route of Administration: </label>
<select name="route_of_administration "> <select name="route_of_administration ">
<option>Choose a Route of Administration</option> <option>Choose a Route of Administration</option>
<option>Inhalation</option> <option>Inhalation</option>
<option>Injection</option> <option>Injection</option>
<option>Smoking</option> <option>Smoking</option>
</select></label> </select>
<br/> </div>
<div className='input-group'>
<label>Taking Co-occurring Substances : <input placeholder=''/></label> <label>Taking Co-occurring Substances: </label>
<input type='radio' name='takingCooccurringSubstances' value='yes' checked={takingCooccurringSubstances === 'yes'} onChange={() => setTakingCooccurringSubstances('yes')}/>
<label>Co-occurring Substances : <span>Yes</span>
<input type='radio' name='takingCooccurringSubstances' value='no' checked={takingCooccurringSubstances === 'no'} onChange={() => setTakingCooccurringSubstances('no')}/>
<span>No</span>
</div>
<div className='input-group'>
<label>Co-occurring Substances: </label>
<select name="co-occurringsubstances "> <select name="co-occurringsubstances ">
<option>Choose a Co-occurring Substances</option> <option>Choose a Co-occurring Substances</option>
<option>Cannabis</option> <option>Cannabis</option>
...@@ -55,20 +70,24 @@ export default function SideEffectsAndTreatments() { ...@@ -55,20 +70,24 @@ export default function SideEffectsAndTreatments() {
<option>Methamphetamine</option> <option>Methamphetamine</option>
<option>Alcohol</option> <option>Alcohol</option>
<option>No</option> <option>No</option>
</select></label> </select>
<br/> </div>
<div className='input-group'>
<label>Any pre-existing medical conditions?: </label>
<input type='radio' name='preExistingmedicalcondition' value='yes' checked={preExistingmedicalcondition === 'yes'} onChange={() => setPreExistingmedicalcondition('yes')}/>
<span>Yes</span>
<input type='radio' name='preExistingmedicalcondition' value='no' checked={preExistingmedicalcondition === 'no'} onChange={() => setPreExistingmedicalcondition('no')}/>
<span>No</span>
</div>
<label for="methods">Pre-existing medical condition : <div className='btn-area'>
<label class="gender-radio"> <div className='btn'>Predict</div>
<input type="radio" name="gender" value="male"/> Yes </div>
</label> <div className='input-group1'>
<label class="gender-radio"> <h2>Predictions:</h2>
<input type="radio" name="gender" value="female"/> No </div>
</label>
</label>
<button>Submit</button>
</form> </form>
</div> </div></div>
) )
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment