Commit 950ebf2b authored by IT20161538's avatar IT20161538

new commit

parent 54021086
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
.form-container{
margin: 5rem 6rem;
color: #2a2a2a;
.side-effect-wrapper{
width: 95vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.form-container form{
width:820px;
height:850px;
padding:20px;
border-radius:6px;
background:#FFF;
box-shadow:0 0 8px #696969;
margin-left:330px;
.side-effect-form{
padding: 10px;
margin: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius:6px;
box-shadow:0 0 8px #696969;
padding-block: 10px;
width: 45vw;
margin-top: 80px;
}
.form-container label{
text-align: left;
margin-left:50px;
.title{
margin-bottom: 20px;
}
.form-container input{
height: 2rem;
padding: 0 1rem ;
margin-bottom: 2rem;
border-radius: .3rem;
border: 1px solid #2a2a2a ;
.form{
width: 35vw;
height: 750px;
display: flex;
flex-direction: column;
justify-content: start;
gap: 19px;
padding: 5px;
}
.form-container select {
width: 50%;
padding: 6px 20px;
border: none;
border-radius: 2px;
background-color: white;
margin-right: 2px;
border: 1px solid #2a2a2a ;
.input-group{
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
padding: 5px;
}
.l-radio {
display: inline-block;
margin-right: 2px;
select{
padding: 5px;
}
.gender-radio {
display: inline-block;
margin-right: 2px;
input{
padding: 5px;
}
.gender-container {
.btn-area{
display: flex;
align-items: center;
flex-direction: row;
justify-content: end;
}
.form-container button{
border:0;
outline:0;
height:50px;
width:200px;
border-radius:50px;
color:white;
font-weight:bold;
font-size:0.9rem;
cursor:pointer;
background:black;
margin-left:530px;
.btn{
color: whitesmoke;
background-color: black;
padding-inline: 40px;
padding-block: 10px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
cursor: pointer;
margin-right:400px;
}
@media screen and (max-width: 850px){
.form-container{
margin: 4rem 2rem;
color: #2a2a2a;
}
.form-container form{
padding-top: 2rem;
width: 90%;
}
}
.input-group1{
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
padding: 5px;
}
\ No newline at end of file
import React from 'react';
import React, { useState } from 'react'
import './SideEffectsAndTreatments.css';
export default function SideEffectsAndTreatments() {
return (
<div className='form-container'>
<form>
<h1>Side Effects & Treatments</h1>
<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 :
<select name="drugtype">
<option>Choose a Drug Type</option>
<option>Heroin</option>
<option>Cannabis</option>
<option>Opium</option>
<option>Hashish</option>
<option>Cocaine</option>
<option>Methamphetamine</option>
</select></label>
<br/>
<label>Measures of drug used per day(mg) : <input placeholder='mg'/></label>
<label>Time Used(Month) : <input placeholder='No of months'/></label>
const [age, setAge] = useState('');
const [drugUsageMg, setDrugUsageMg] = useState('');
const [months, setMonths] = useState('');
const [takingCooccurringSubstances, setTakingCooccurringSubstances] = useState('');
const [preExistingmedicalcondition, setPreExistingmedicalcondition] = useState('');
<label>Route of Administration :
<select name="route_of_administration ">
<option>Choose a Route of Administration</option>
<option>Inhalation</option>
<option>Injection</option>
<option>Smoking</option>
</select></label>
<br/>
<label>Taking Co-occurring Substances : <input placeholder=''/></label>
<label>Co-occurring Substances :
<select name="co-occurringsubstances ">
<option>Choose a Co-occurring Substances</option>
<option>Cannabis</option>
<option>Cocaine</option>
<option>Hashish</option>
<option>Heroin</option>
<option>Methamphetamine</option>
<option>Alcohol</option>
<option>No</option>
</select></label>
<br/>
<label for="methods">Pre-existing medical condition :
<label class="gender-radio">
<input type="radio" name="gender" value="male"/> Yes
</label>
<label class="gender-radio">
<input type="radio" name="gender" value="female"/> No
</label>
</label>
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">
<option>Choose a Drug Type</option>
<option>Heroin</option>
<option>Cannabis</option>
<option>Opium</option>
<option>Hashish</option>
<option>Cocaine</option>
<option>Methamphetamine</option>
</select>
</div>
<div className='input-group'>
<label>Measures of drug used per day(mg): </label>
<input type='number' placeholder='mg' value={drugUsageMg} onChange={(e)=>{setDrugUsageMg(e.target.value)}}/>
</div>
<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 ">
<option>Choose a Route of Administration</option>
<option>Inhalation</option>
<option>Injection</option>
<option>Smoking</option>
</select>
</div>
<div className='input-group'>
<label>Taking Co-occurring Substances: </label>
<input type='radio' name='takingCooccurringSubstances' value='yes' checked={takingCooccurringSubstances === 'yes'} onChange={() => setTakingCooccurringSubstances('yes')}/>
<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 ">
<option>Choose a Co-occurring Substances</option>
<option>Cannabis</option>
<option>Cocaine</option>
<option>Hashish</option>
<option>Heroin</option>
<option>Methamphetamine</option>
<option>Alcohol</option>
<option>No</option>
</select>
</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>
<button>Submit</button>
</form>
</div>
<div className='btn-area'>
<div className='btn'>Predict</div>
</div>
<div className='input-group1'>
<h2>Predictions:</h2>
</div>
</form>
</div></div>
)
}
\ No newline at end of file
}
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