Skip to content

Commit ae06b68

Browse files
milaneyiamilaneyia
committed
step2
1 parent 8ec8458 commit ae06b68

File tree

6 files changed

+376
-169
lines changed

6 files changed

+376
-169
lines changed

‎mg/assets/the_A.png‎

114 KB
Loading

‎mg/css.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
:root {
2+
--wip: #ADFF5F;
3+
--done: #11FEB0;
4+
--ranked: #6DCFF6;
5+
--blocked: grey;
6+
--aviable: #FF5864;
7+
--rest: #7AFFA8;
8+
}
9+
10+
body {
11+
background-color: #151515;
12+
background-image: url("./assets/the_A.png");
13+
font-family: 'Exo 2', sans-serif;
14+
}
15+
16+
a {
17+
color: var(--rest);
18+
}
19+
20+
.border-status-wip {
21+
border-top: 7px solid var(--wip);
22+
}
23+
24+
.border-status-done {
25+
border-top: 7px solid var(--done);
26+
}
27+
28+
.border-status-ranked {
29+
border-top: 7px solid var(--ranked);
30+
}
31+
32+
.diffs {
33+
font-size: 2rem;
34+
}
35+
36+
.btn-mg {
37+
background-color: var(--rest);
38+
border-color: var(--rest);
39+
}
40+
41+
.wip {
42+
color: var(--wip);
43+
}
44+
45+
.done {
46+
color: var(--done);
47+
}
48+
49+
.ranked {
50+
color: var(--ranked);
51+
}
52+
53+
.blocked {
54+
color: var(--blocked);
55+
}
56+
57+
.aviable {
58+
color: var(--aviable);
59+
}
60+
61+
.bg-wip {
62+
background-color: var(--wip);
63+
}
64+
65+
.bg-done {
66+
background-color: var(--done);
67+
}
68+
69+
.bg-ranked {
70+
background-color: var(--ranked);
71+
}
72+
73+
.bg-blocked {
74+
background-color: var(--blocked);
75+
}
76+
77+
.bg-aviable {
78+
background-color: var(--aviable);
79+
}
80+
81+
.tooltip > .tooltip-inner {
82+
background-color: var(--rest);
83+
color: #333;
84+
}

‎mg/maps.html‎

Lines changed: 151 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,19 @@
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7-
<title>mg</title>
7+
<title>Beatmaps</title>
88
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
9-
<style>
10-
body {
11-
background-color: rgba(109, 118, 126, 0.14);
12-
background-image: url("./assets/bg.png");
13-
}
14-
15-
.border-status-wip {
16-
border-top: 7px solid lightgreen;
17-
}
18-
19-
.border-status-done {
20-
border-top: 7px solid darkcyan;
21-
}
22-
</style>
9+
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
10+
<link rel="stylesheet" href="./css.css">
2311
</head>
2412
<body class="text-light">
2513
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
26-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar">
14+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
2715
<span class="navbar-toggler-icon"></span>
2816
</button>
2917

3018
<div class="collapse navbar-collapse" id="navbar">
31-
<a class="navbar-brand font-weight-light font-italic" href="#" style="border-right: 3px solid white; padding-right: 1rem;">
19+
<a class="navbar-brand font-italic" href="#" style="border-right: 3px solid white; padding-right: 1rem;">
3220
<img src="./assets/logo256.png" width="30" height="30" alt="">
3321
Mappers' Guild
3422
</a>
@@ -56,16 +44,13 @@ <h1 class="text-center">Beatmaps</h1>
5644
</div>
5745

5846
<div class="row">
59-
<div class="col-sm-8">
60-
<h2>Pending beatmaps</h2>
47+
<div class="col-md-8">
48+
<h2>Pending beatmaps <button class="btn btn-mg" data-toggle="modal" data-target="#addBeatmap">Add beatmap</button></h2>
6149
<small>Filter: <a href="#">Most recent</a> | <a href="#">My maps</a> | <a href="#">Quest</a></small>
62-
<div class="row">
63-
<div id="maps" class="col-sm-6"></div>
64-
<div id="diffs" class="col-sm-6"></div>
65-
</div>
50+
<div id="pendingBeatmaps"></div>
6651
</div>
6752

68-
<div class="col-sm-4">
53+
<div class="col-md-4">
6954
<h2>Ranked beatmaps</h2>
7055
<small>Filter: <a href="#">Most recent</a> | <a href="#">My maps</a></small>
7156
<div id="rankedBeatmaps"></div>
@@ -78,16 +63,152 @@ <h2>Ranked beatmaps</h2>
7863
<div style="background-color: #FF5864; height: 10px;"></div>
7964
</footer>
8065

81-
<div id="extendedInfo" class="modal fade" tabindex="-1" role="dialog">
82-
<div class="modal-dialog" role="document">
83-
<div class="modal-content">
84-
<div class="modal-header">
66+
<div id="editBeatmap" class="modal fade" tabindex="-1">
67+
<div class="modal-dialog modal-lg">
68+
<div class="modal-content bg-dark">
69+
<div class="modal-header text-dark">
8570
<h5 class="modal-title"></h5>
86-
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
87-
<span aria-hidden="true">&times;</span>
71+
<button type="button" class="close" data-dismiss="modal">
72+
<span>&times;</span>
8873
</button>
8974
</div>
9075
<div class="modal-body">
76+
<div class="container">
77+
<div class="row">
78+
<div class="col-sm-6">
79+
<p>Difficulties:</p>
80+
<div id="difficulties"></div>
81+
<p>Visuals:</p>
82+
<div id="visuals"></div>
83+
<p>Mapset status:</p>
84+
<button class="btn btn-mg">Complete</button>
85+
<button class="btn btn-mg">Work-in-progress</button>
86+
</div>
87+
88+
<div class="col-sm-6">
89+
<p>Quest: <button class="btn btn-mg">+</button></p>
90+
<p>Modders: <button class="btn btn-mg">+</button></p>
91+
<p id="bns"></p>
92+
<p>Link: <button class="btn btn-mg">edit</button></p>
93+
<p>Locked: </p>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
</div>
101+
102+
<div id="addBeatmap" class="modal fade" tabindex="-1">
103+
<div class="modal-dialog modal-lg">
104+
<div class="modal-content bg-dark">
105+
<div class="modal-header bg-success">
106+
<h5 class="modal-title">Add Beatmap</h5>
107+
<button type="button" class="close" data-dismiss="modal">
108+
<span>&times;</span>
109+
</button>
110+
</div>
111+
<div class="modal-body">
112+
<div class="container">
113+
<div class="form-group row">
114+
<label class="col-sm-3" for="artist"> Artist:</label><input class="col-sm-9 form-control" type="text" id="artist">
115+
</div>
116+
<div class="form-group row">
117+
<label class="col-sm-3" for="artist"> Title:</label><input class="col-sm-9 form-control" type="text" id="artist">
118+
</div>
119+
120+
<p>Select one or more difficulties <b>you plan on mapping</b>. These can be changed later:</p>
121+
<div class="form-group row">
122+
<div class="col-sm-10">
123+
<div class="form-check">
124+
<input class="form-check-input" type="checkbox" id="easy">
125+
<label class="form-check-label" for="easy">
126+
Easy
127+
</label>
128+
</div>
129+
<div class="form-check">
130+
<input class="form-check-input" type="checkbox" id="easy">
131+
<label class="form-check-label" for="easy">
132+
Normal
133+
</label>
134+
</div>
135+
<div class="form-check">
136+
<input class="form-check-input" type="checkbox" id="easy">
137+
<label class="form-check-label" for="easy">
138+
Hard
139+
</label>
140+
</div>
141+
<div class="form-check">
142+
<input class="form-check-input" type="checkbox" id="easy">
143+
<label class="form-check-label" for="easy">
144+
Insane
145+
</label>
146+
</div>
147+
<div class="form-check">
148+
<input class="form-check-input" type="checkbox" id="easy">
149+
<label class="form-check-label" for="easy">
150+
Extra
151+
</label>
152+
</div>
153+
</div>
154+
</div>
155+
156+
<p>Select one or more difficulties <b>you don't want anyone else to claim</b>. These can be changed later: <br><small>For example, if you don't want an Extra on a calm song, you should mark Extra</small></p>
157+
<div class="form-group row">
158+
<div class="col-sm-10">
159+
<div class="form-check">
160+
<input class="form-check-input" type="checkbox" id="easy">
161+
<label class="form-check-label" for="easy">
162+
Easy
163+
</label>
164+
</div>
165+
<div class="form-check">
166+
<input class="form-check-input" type="checkbox" id="easy">
167+
<label class="form-check-label" for="easy">
168+
Normal
169+
</label>
170+
</div>
171+
<div class="form-check">
172+
<input class="form-check-input" type="checkbox" id="easy">
173+
<label class="form-check-label" for="easy">
174+
Hard
175+
</label>
176+
</div>
177+
<div class="form-check">
178+
<input class="form-check-input" type="checkbox" id="easy">
179+
<label class="form-check-label" for="easy">
180+
Insane
181+
</label>
182+
</div>
183+
<div class="form-check">
184+
<input class="form-check-input" type="checkbox" id="easy">
185+
<label class="form-check-label" for="easy">
186+
Extra
187+
</label>
188+
</div>
189+
</div>
190+
</div>
191+
192+
<p>Is this a beatmap for your currently assigned quest?</p>
193+
<fieldset class="form-group">
194+
<div class="row">
195+
<div class="col-sm-10">
196+
<div class="form-check">
197+
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
198+
<label class="form-check-label" for="gridRadios1">Yes</label>
199+
</div>
200+
<div class="form-check">
201+
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
202+
<label class="form-check-label" for="gridRadios2">No</label>
203+
</div>
204+
</div>
205+
</div>
206+
</fieldset>
207+
</div>
208+
<p class="text-danger">Errors</p>
209+
</div>
210+
<div class="modal-footer">
211+
<button type="button" class="btn btn-mg">Save</button>
91212
</div>
92213
</div>
93214
</div>

0 commit comments

Comments
 (0)