-
Notifications
You must be signed in to change notification settings - Fork 0
/
card.html
106 lines (91 loc) · 5.86 KB
/
card.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!--
______ ______ __ __ __ __ _____ __
/ ____/___ / ____/_______ ____ _____/ /_ / /_ __ __ / /___ / /_ ____ / ___/____ ____ _/ /_ _____
/ / __/ __ \/ /_ / ___/ _ \/ __ \/ ___/ __ \ / __ \/ / / / __ / / __ \/ __ \/ __ \ \__ \/ __ \/ __ `/ __ \/ ___/
/ /_/ / /_/ / __/ / / / __/ / / / /__/ / / / / /_/ / /_/ / / /_/ / /_/ / / / / / / / ___/ / /_/ / /_/ / / / / /
\____/\____/_/ /_/ \___/_/ /_/\___/_/ /_/ /_.___/\__, / \____/\____/_/ /_/_/ /_/ /____/ .___/\__,_/_/ /_/_/
/____/ /_/
Copyright (c) John Spahr, 2019-2023.
-->
<!DOCTYPE html>
<html>
<head>
<!-- Page Title! -->
<title>GoFrench - MyCard</title>
<!-- Meta Stuff -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="John Spahr" />
<meta property="og:title" content="GoFrench: Your Portal for French Resources!" />
<meta name="twitter:card" content="summary" />
<meta property="og:type" content="website" />
<meta property="og:image" content="gofrench.png" />
<meta property="og:description" content="GoFrench is your portal to resources for learning French!" />
<meta name="description" content="GoFrench is your portal to resources for learning French!" />
<meta name="theme-color" content="#7ab6ff" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta charset="UTF-8" />
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/ac7284406a.js" crossorigin="anonymous"></script>
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="stylesheets/nustyle.css" />
<!-- JQUERY and HTML2Canvas Scripts -->
<script type="text/javascript" src="./jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="./html2canvas.min.js"></script>
<!-- Card Script -->
<script type="text/javascript" src="card.js"></script>
<!-- Favicon and Theme Stuff -->
<link rel="apple-touch-icon" href="gofrench.png" sizes="180x180" />
<link rel="icon" href="gofrench.png" sizes="32x32" type="image/png" />
<link rel="icon" href="gofrench.png" sizes="16x16" type="image/png" />
</head>
<body>
<!-- Title Bar -->
<div class="titleBar">
<h4>GoFrench</h4>
<a href="index.html"><img width="48" src="res/search.png">Home</a>
<a href="links.html"><img width="48" src="res/portal.png">Links</a>
<a href="feed.html"><img width="48" src="res/feed.png">Apps</a>
<hr>
</div>
<!-- Main Stuff -->
<main>
<div id="cardConfigurator" class="cardIsland topMargin">
<h1><i class="fa-solid fa-address-card"></i> Créez votre carte d'identité</h1>
<hr>
<p><b>Votre nom:</b></p>
<input id="nameTxt" maxlength="90" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Votre nom..." />
<hr>
<p><b>Courte biographie:</b></p>
<textarea id="bioTxt" style="resize: vertical;" onkeyup="textCounter(this, 'counterLbl', 1024);" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Écrivez une courte biographie en français..."></textarea>
<p id="counterLbl">1024 character(s) remaining</p>
<hr>
<h2>Vos intérêts:</h2>
<h3>J'aime...</h3>
<input id="interest1" maxlength="90" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Donnez une activité..." />
<input id="interest2" maxlength="90" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Donnez une activité..." />
<input id="interest3" maxlength="90" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Donnez une activité..." />
<input id="interest4" maxlength="90" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Donnez une activité..." />
<input id="interest5" maxlength="90" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Donnez une activité..." />
<hr>
<h2>Profils sociaux:</h2>
<p><i class='fa-brands fa-instagram'></i> <b>Instagram:</b></p>
<input id="instagramTxt" maxlength="60" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Entrez votre nom d'utilisateur Instagram..." />
<p><i class='fa-brands fa-snapchat'></i> <b>Snapchat:</b></p>
<input id="snapchatTxt" maxlength="60" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Entrez votre nom d'utilisateur Snapchat..." />
<p><i class='fa-brands fa-facebook'></i> <b>Facebook:</b></p>
<input id="facebookTxt" maxlength="60" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Entrez votre nom d'utilisateur Facebook..." />
<hr>
<h3>Une photo de vous:</h3>
<input type="file" id="imageUpload">
<hr>
<button onclick="generateCard()"><i class="fa-solid fa-download"></i> Télécharger la carte</button>
</div>
<div id="generatedCard" class="generatedCard cardIsland leftCard"></div>
<hr>
<p>
© 2024 John Spahr -
<a href="https://github.com/johnspahr" target="_blank">More Software</a>
</p>
</main>
</body>
</html>