-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (119 loc) · 5.93 KB
/
index.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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="Starter for the Frontend Mentor challenges !" name="description">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Frontend Mentor - Starter</title>
<link href="./assets/images/favicon/favicon.png" rel="icon" />
<link href="./assets/styles/style.css" rel="stylesheet" />
</head>
<body>
<!-- Header -->
<header>
<img alt="Website logo" class="header-logo" src="./assets/images/logo/logo.png" />
</header>
<!-- Main -->
<main>
<h1 class="main-title">Frontend Mentor - Starter</h1>
<!-- Form -->
<form method="post" action="#">
<!-- Challenge -->
<section>
<h2 class="section-title">Challenge</h2>
<div class="row">
<div class="col">
<label class="form-label required" for="challenge-difficulty">Challenge difficulty</label>
<select class="form-input" id="challenge-difficulty" onchange="changeDifficulty(this.value)" required>
<option disabled selected value="">Please wait for options to load</option>
</select>
</div>
<div class="col">
<label class="form-label required" for="challenge-name">Challenge name</label>
<select class="form-input" id="challenge-name" onchange="updateChallenge()" required>
<option disabled selected value="">Please wait for options to load</option>
</select>
</div>
</div>
<div class="row">
<div class="col">
<label class="form-label required" for="challenge-link-url">Challenge Link URL</label>
<input class="form-input" id="challenge-link-url" readonly required type="url" />
</div>
<div class="col">
<label class="form-label required" for="challenge-solution-url">Challenge Solution URL</label>
<input class="form-input" id="challenge-solution-url" onkeyup="verifyForm()" placeholder="https://www.frontendmentor.io/solutions/3-column-preview-card-component-31dslmyGGg" required type="url" />
</div>
</div>
</section>
<!-- Author -->
<section>
<h2 class="section-title">Author</h2>
<div class="row">
<div class="col">
<label class="form-label required" for="author-fm-profil">Frontend Mentor profil (without the @)</label>
<input class="form-input" id="author-fm-profil" onkeyup="verifyForm()" placeholder="Your Frontend Mentor profil" required />
</div>
</div>
<div class="row">
<div class="col">
<label class="form-label required" for="author-github-profil">GitHub profil</label>
<input class="form-input" id="author-github-profil" onkeyup="updateChallenge()" placeholder="Your GitHub profil name" required />
</div>
<div class="col">
<label class="form-label required" for="author-github-repository">GitHub repository</label>
<input class="form-input" id="author-github-repository" onkeyup="updateChallenge()" placeholder="Frontend-Mentor-Challenges" required />
</div>
</div>
<div class="row">
<div class="col">
<button class="btn" disabled id="btn-download" onclick="generateZip()" type="button">Download the starter !</button>
</div>
</div>
</section>
</form>
<!-- Solution -->
<section>
<h2 class="section-title">Solution</h2>
<div class="row">
<div class="col">
<label class="form-label" for="solution-title">Solution title</label>
<input class="form-input" id="solution-title" name="solution-title" readonly />
</div>
</div>
<div class="row">
<div class="col">
<label class="form-label" for="solution-repository-url">Repository URL</label>
<input class="form-input" id="solution-repository-url" name="solution-repository-url" placeholder="Lorem ipsum" readonly type="url" />
</div>
</div>
<div class="row">
<div class="col">
<label class="form-label" for="solution-live-site-url">Live site URL</label>
<input class="form-input" id="solution-live-site-url" name="solution-live-site-url" placeholder="Lorem ipsum" readonly type="url" />
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<span id="footer-copyright">© Frontend Mentor - Starter |</span>
<ul>
<li>
<a class="link" href="https://www.frontendmentor.io/home">Frontend Mentor</a>
</li>
<li>
<a class="link" href="https://github.com/sebastien-d-me/Frontend-Mentor-Starter">GitHub repository</a>
</li>
<li>
<a class="link" href="https://github.com/sebastien-d-me/Frontend-Mentor-Starter">Legal notice</a>
</li>
</ul>
</footer>
<!-- JS -->
<script src="./assets/scripts/FileSaver.js-master/dist/FileSaver.min.js"></script>
<script src="./assets/scripts/jszip-main/dist/jszip.min.js"></script>
<script src="./assets/scripts/script.js"></script>
</body>
</html>