Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Templates Added #19

Merged
merged 9 commits into from
Oct 6, 2022
Merged

New Templates Added #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
cca9f9b
New Templates
CDPhu Oct 1, 2022
0e62ace
jsx updated
CDPhu Oct 2, 2022
c134f14
fixing template
CDPhu Oct 3, 2022
193b91e
Template Display
CDPhu Oct 5, 2022
65aaf9b
fixing template7
CDPhu Oct 5, 2022
2205e9d
spacing issue
CDPhu Oct 5, 2022
7ce3473
As per author requested
CDPhu Oct 6, 2022
553f459
fixing gif
CDPhu Oct 6, 2022
06b291e
fixing redirect template 9
CDPhu Oct 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/cert_templates/Template5.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/cert_templates/Template6.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/cert_templates/Template7.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/cert_templates/Template8.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/cert_templates/Template9.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
129 changes: 129 additions & 0 deletions src/components/Homepage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,16 @@ import template2 from "../cert_templates/Template2.png";
import firebase from "../firebase"
import template3 from "../cert_templates/Template3.png";
import template4 from "../cert_templates/Template4.jpeg";
import template5 from "../cert_templates/Template5.png";
import template6 from "../cert_templates/Template6.png";
import template7 from "../cert_templates/Template7.png";
import template8 from "../cert_templates/Template8.png";
import template9 from "../cert_templates/Template9.gif";
import ReactToPrint from 'react-to-print';

export class ComponentToPrint extends React.PureComponent {
render() {
// eslint-disable-next-line default-case
switch(this.props.template){
case "template1":{
return (
Expand Down Expand Up @@ -83,6 +89,114 @@ export class ComponentToPrint extends React.PureComponent {
</div>
);
}
case "template5":{
return (
<div style={{ position: 'relative' }} id="template2" >
<img src={template5} style={{ width: '45rem' }}></img>

<div className="info" style={{ position: 'absolute', top: '39%', left: '36%', width: '60%' }}>
<h2 style={{ textTransform: 'uppercase', color: '#781114', textDecoration: 'underline', marginBottom: '1rem' }}>{this.props.heading === '' ? 'Certificate of Achievement' : this.props.heading}</h2>
<h3 style={{ fontSize: '16px', fontWeight: '500', color: '#0300b0', textTransform: 'uppercase', letterSpacing: '3px' }}>This is presented to</h3>
<h1 style={{ fontSize: '3rem', color: 'black' }}>{this.props.name === '' ? 'Name' : this.props.name}</h1>
<p style={{ fontSize: '15px', fontWeight: '600', color: '#0300b0' }}>{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}</p>
</div>
<div className="author" style={{ position: 'absolute', top: '59%', left: '10%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '20%', textAlign: 'center' }}>
<h2 style={{ fontSize: '12px', color: '#781114', textDecoration: 'underline', textTransform: 'uppercase' }}>Course Director</h2>
<h1 style={{ fontSize: '20px', color: '#0300b0', textTransform: 'uppercase' }}>{this.props.author === '' ? 'Author Name' : this.props.author}</h1>
</div>
{this.props.logo === '' ? "" : <img src={this.props.logo} style={{ position: 'absolute', width: '6rem', borderRadius: '50%', top: '20%', left: '35%' }} alt="logo" />}

Check warning

Code scanning / CodeQL

DOM text reinterpreted as HTML

[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

</div>
);
}

case "template6":{
return (
<div style={{ position: 'relative' }} id="template2">
<img src={template6} style={{ width: '45rem' }}></img>

<div className="info" style={{ position: 'absolute', top: '35%', width: '100%' ,display:'flex',flexDirection:'column',alignItems:'center'}}>
<h2 style={{color: 'white', textTransform:'uppercase', letterSpacing:'3px' , marginBottom: '1rem' }}>{this.props.heading === '' ? 'Certificate of Achievement' : this.props.heading}</h2>
<h3 style={{ fontSize: '16px', fontWeight: '500', color: 'rgb(174, 74, 255)', textTransform: 'uppercase', letterSpacing: '3px' }}>is hereby awarded to</h3>
<h1 style={{ fontSize: '3rem', color: '#ffffff' }}>{this.props.name === '' ? 'Name' : this.props.name}</h1>
<p style={{ fontSize: '15px', fontWeight: '600', color: 'rgb(255 251 240)',width:'60%',textAlign:'center' }}>{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}</p>
</div>
<div className="author" style={{ position: 'absolute', top: '70%', left: '41%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
<h2 style={{ fontSize: '12px', color: 'white', textDecoration: 'underline' }}>Course Director</h2>
<h1 style={{ fontSize: '20px', color: '#ffff58', fontWeight: '100'}}>{this.props.author === '' ? 'Author Name' : this.props.author}</h1>
</div>
{this.props.logo === '' ? '' : <img src={this.props.logo} style={{ position: 'absolute', width: '4rem', borderRadius: '50%', top: '10%', left: '45%' }} alt="logo" />}

Check warning

Code scanning / CodeQL

DOM text reinterpreted as HTML

[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

</div>
);
}

case "template7":{
return (
<div style={{ position: 'relative' }} id="template2">
<img src={template7} style={{ width: '45rem' }}></img>

<div className="info" style={{ position: 'absolute', top: '25%', width: '100%' ,display:'flex',flexDirection:'column',alignItems:'center'}}>
<h2 style={{color: 'orange', textTransform:'uppercase', letterSpacing:'3px' , marginBottom: '1rem' }}>{this.props.heading === '' ? 'Certificate of Achievement' : this.props.heading}</h2>
<h3 style={{ fontSize: '16px', fontWeight: '500', color: 'orange', textTransform: 'uppercase', letterSpacing: '3px' }}>is hereby awarded to</h3>
<h1 style={{ fontSize: '3rem', color: 'red' }}>{this.props.name === '' ? 'Name' : this.props.name}</h1>
<p style={{ fontSize: '15px', fontWeight: '600', color: 'yellow',width:'60%',textAlign:'center' }}>{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}</p>
</div>
<div className="author" style={{ position: 'absolute', top: '70%', left: '41%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
<h2 style={{ fontSize: '12px', color: 'red', textDecoration: 'underline' }}>Course Director</h2>
<h1 style={{ fontSize: '20px', color: 'black',}}>{this.props.author === '' ? 'Author Name' : this.props.author}</h1>
</div>
{this.props.logo === '' ? '' : <img src={this.props.logo} style={{ position: 'absolute', width: '4rem', borderRadius: '50%', top: '10%', left: '45%' }} alt="logo" />}

Check warning

Code scanning / CodeQL

DOM text reinterpreted as HTML

[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

</div>
);
}

case "template8":{
return (
<div style={{ position: 'relative' }} id="template2">
<img src={template8} style={{ width: '45rem' }}></img>

<div className="info" style={{ position: 'absolute', top: '25%', width: '100%' ,display:'flex',flexDirection:'column',alignItems:'center'}}>
<h2 style={{color: '#560073', textTransform:'uppercase', letterSpacing:'3px' , marginBottom: '1rem' }}>{this.props.heading === '' ? 'Certificate of Achievement' : this.props.heading}</h2>
<h3 style={{ fontSize: '16px', fontWeight: '500', color: 'rgb(201, 41, 255)', textTransform: 'uppercase', letterSpacing: '3px' }}>is hereby awarded to</h3>
<h1 style={{ fontSize: '3rem', color: '#560073' }}>{this.props.name === '' ? 'Name' : this.props.name}</h1>
<p style={{ fontSize: '15px', fontWeight: '600', color: 'rgb(0, 0, 0)',width:'60%',textAlign:'center' }}>{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}</p>
</div>
<div className="author" style={{ position: 'absolute', top: '70%', left: '41%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
<h2 style={{ fontSize: '12px', color: '#c929ff', textDecoration: 'underline' }}>Course Director</h2>
<h1 style={{ fontSize: '20px', color: 'rgb(19, 22, 207)',}}>{this.props.author === '' ? 'Author Name' : this.props.author}</h1>
</div>
{this.props.logo === '' ? '' : <img src={this.props.logo} style={{ position: 'absolute', width: '4rem', borderRadius: '50%', top: '10%', left: '45%' }} alt="logo" />}

Check warning

Code scanning / CodeQL

DOM text reinterpreted as HTML

[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

</div>
);
}

case "template9":{
return (
<div style={{ position: 'relative' }} id="template2">
<img src={template9} style={{ width: '45rem' }}></img>

<div className="info" style={{ position: 'absolute', top: '25%', width: '100%' ,display:'flex',flexDirection:'column',alignItems:'center'}}>
<h2 style={{color: '#0edee6', textTransform:'uppercase', letterSpacing:'3px' , marginBottom: '1rem' }}>{this.props.heading === '' ? 'Certificate of Achievement' : this.props.heading}</h2>
<h3 style={{ fontSize: '16px', fontWeight: '500', color: 'rgb(6, 124, 214)', textTransform: 'uppercase', letterSpacing: '3px' }}>is hereby awarded to</h3>
<h1 style={{ fontSize: '3rem', color: '#0edee6' }}>{this.props.name === '' ? 'Name' : this.props.name}</h1>
<p style={{ fontSize: '15px', fontWeight: '600', color: 'rgb(6, 124, 214)',width:'60%',textAlign:'center' }}>{this.props.desc === '' ? 'for the active participation in the event and for giving efforts,ideas and Knowledge.' : this.props.desc}</p>
</div>
<div className="author" style={{ position: 'absolute', top: '68%', left: '44%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
<h2 style={{ fontSize: '12px', color: '#0edee6', textDecoration: 'underline' }}>Course Director</h2>
<h1 style={{ fontSize: '20px', color: 'rgb(6, 124, 214)',}}>{this.props.author === '' ? 'Author Name' : this.props.author}</h1>
</div>
{this.props.logo === '' ? '' : <img src={this.props.logo} style={{ position: 'absolute', width: '4rem', borderRadius: '50%', top: '10%', left: '45%' }} alt="logo" />}

Check warning

Code scanning / CodeQL

DOM text reinterpreted as HTML

[DOM text](1) is reinterpreted as HTML without escaping meta-characters.

</div>

);

}


}

}
Expand Down Expand Up @@ -155,6 +269,21 @@ function Homepage() {
<div className={`templates ${template==='template4'?"active":""}`} onClick={()=>settemplate("template4")} >
<img src={template4} alt="" />
</div>
<div className={`templates ${template==='template5'?"active":""}`} onClick={()=>settemplate("template5")} >
<img src={template5} alt="" />
</div>
<div className={`templates ${template==='template6'?"active":""}`} onClick={()=>settemplate("template6")} >
<img src={template6} alt="" />
</div>
<div className={`templates ${template==='template7'?"active":""}`} onClick={()=>settemplate("template7")} >
<img src={template7} alt="" />
</div>
<div className={`templates ${template==='template8'?"active":""}`} onClick={()=>settemplate("template8")} >
<img src={template8} alt="" />
</div>
<div className={`templates ${template==='template9'?"active":""}`} onClick={()=>settemplate("template9")} >
<img src={template9} alt="" />
</div>
</div>
<div className="middle">
<ComponentToPrint ref={componentRef} name={name} heading={heading} desc={desc} author={author} logo={logo} template={template} />
Expand Down