Skip to content

Commit a7d1390

Browse files
johnpointjohnpoint
authored
Merge pull request #36 from guoqqqi/optimized-style
style: optimize the style and adjust the adaptive
2 parents f63f994 + 12efbed commit a7d1390

File tree

3 files changed

+319
-303
lines changed

3 files changed

+319
-303
lines changed

‎admin.html

+84-81
Original file line numberDiff line numberDiff line change
@@ -2,97 +2,100 @@
22
<html>
33

44
<head>
5-
<title>
6-
NESHouse.com
7-
</title>
8-
<meta charset="UTF-8">
9-
<link href="https://fonts.loli.net/css?family=Press+Start+2P" rel="stylesheet">
10-
<link href="css/bulma.min.css" rel="stylesheet" type="text/css" />
11-
<link href="css/nes.min.css" rel="stylesheet" type="text/css" />
12-
<link href="css/style.css" rel="stylesheet" type="text/css" />
13-
<script src="js/alpine.min.js"></script>
5+
<title>
6+
NESHouse.com
7+
</title>
8+
<meta charset="UTF-8">
9+
<link href="https://fonts.loli.net/css?family=Press+Start+2P" rel="stylesheet">
10+
<link href="css/bulma.min.css" rel="stylesheet" type="text/css" />
11+
<link href="css/nes.min.css" rel="stylesheet" type="text/css" />
12+
<link href="css/style.css" rel="stylesheet" type="text/css" />
13+
<script src="js/alpine.min.js"></script>
1414

15-
<script src="js/config.js?v=20210207001"></script>
16-
<script src="js/av-live-query-min.js"></script>
17-
<script src="js/admin.js?v=20210207001"></script>
15+
<script src="js/config.js?v=20210207001"></script>
16+
<script src="js/av-live-query-min.js"></script>
17+
<script src="js/admin.js?v=20210207001"></script>
1818
</head>
1919

2020
</html>
2121

2222
<body x-data="admin()" x-init="init()">
23-
<div class="columns is-centered">
24-
<div class="column is-half">
25-
<!-- header -->
26-
<div class="header">
27-
<h1 class="title">
28-
NESHouse.com
29-
</h1>
30-
<h2>
31-
Please share this page with caution. Anyone who opens this page has super administrator rights.
32-
</h2>
33-
</div>
34-
<!-- header end -->
35-
<!-- register -->
36-
<div class="container">
37-
<h3 class="title">
38-
Create a Room
39-
</h3>
40-
<div class="register-form">
41-
<div class="nes-field">
42-
<label for="name_field">
43-
Room Name
44-
</label>
45-
<input class="nes-input" id="name_field" type="text" x-model="roomName" />
46-
</div>
47-
<div x-show="!usernameExist" class="nes-field">
48-
<label for="name_field">
49-
Your nickname
50-
</label>
51-
<input class="nes-input" id="nickName" type="text" x-model="nickName" />
52-
</div>
53-
<button class="nes-btn is-primary mt-2" type="button" x-bind:class="{'is-disabled':roomId}"
54-
x-on:click="createRoom()">
55-
Create
56-
</button>
57-
<button x-show="usernameExist" class="nes-btn mt-2" type="button" @click="createNewUser()">
58-
Change User
59-
</button>
60-
</div>
61-
</div>
62-
<!-- register end -->
23+
<div class="columns is-centered">
24+
<div class="column is-half" style="width: 60%;">
25+
<!-- header -->
26+
<div class="header">
27+
<h1 class="title">
28+
NESHouse.com
29+
</h1>
30+
<h2>
31+
Please share this page with caution. Anyone who opens this page has super administrator rights.
32+
</h2>
33+
</div>
34+
<!-- header end -->
35+
<!-- register -->
36+
<div class="container">
37+
<h3 class="title">
38+
Create a Room
39+
</h3>
40+
<div class="register-form">
41+
<div class="nes-field">
42+
<label for="name_field">
43+
Room Name
44+
</label>
45+
<input class="nes-input" id="name_field" type="text" x-model="roomName" />
46+
</div>
47+
<div x-show="!usernameExist" class="nes-field">
48+
<label for="name_field">
49+
Your nickname
50+
</label>
51+
<input class="nes-input" id="nickName" type="text" x-model="nickName" />
52+
</div>
53+
<div style="display: flex; text-align: center;">
54+
<button class="nes-btn is-primary mt-2" type="button" x-bind:class="{'is-disabled':roomId}"
55+
x-on:click="createRoom()">
56+
Create
57+
</button>
58+
<button x-show="usernameExist" class="nes-btn mt-2" type="button" @click="createNewUser()">
59+
Change User
60+
</button>
61+
</div>
62+
</div>
63+
</div>
64+
<!-- register end -->
6365

64-
<!-- share -->
65-
<div class="container" id="control" x-show="isShowShareArea">
66-
<h3 class="title">
67-
Share
68-
</h3>
69-
<div class="avatar">
70-
<textarea id="textarea_field" x-model="shareText" style="min-height: 7em;"
71-
class="nes-textarea"></textarea>
66+
<!-- share -->
67+
<div class="container" id="control" x-show="isShowShareArea">
68+
<h3 class="title">
69+
Share
70+
</h3>
71+
<div class="avatar">
72+
<textarea id="textarea_field" x-model="shareText" style="min-height: 7em;" class="nes-textarea"></textarea>
7273

73-
<div class="columns is-desktop">
74-
<div class="column is-two-fifths">
75-
<button class="nes-btn is-primary" type="button" x-on:click="copyLink">
76-
Copy & Share
77-
</button>
78-
</div>
79-
</div>
80-
<button class="nes-btn is-success" type="button" x-on:click="loginAsAdmin">
81-
Log in to the room as Administrator
82-
</button>
83-
</div>
84-
</div>
85-
<!-- share end -->
86-
<div style="margin-top: 10px;">
87-
<p>Designed & developed by <a href="https://github.com/bestony">Bestony</a>, co-developed by <a
88-
href="https://github.com/johnpoint">johnpoint</a>
89-
</p>
90-
<p>Sponsored by: <a href="https://leancloud.app/">LeanCloud</a>, <a
91-
href="https://www.agora.io/cn/?utm_source=opensource&utm_medium=refferal&utm_campaign=clubhouseB">Agora</a>
92-
& <a href="https://www.ipip.net/">IPIP.net</a></p>
93-
<p>Media partner: <a href="http://dao.fm/">津津乐道播客</a></p>
74+
<div class="columns is-desktop" style="padding-top: 25px">
75+
<div class="column is-two-fifths">
76+
<div style="display: flex; text-align: center;">
77+
<button class="nes-btn is-primary" type="button" x-on:click="copyLink">
78+
Copy & Share
79+
</button>
80+
<button class="nes-btn is-success" type="button" x-on:click="loginAsAdmin">
81+
Log in to the room as Administrator
82+
</button>
83+
</div>
9484
</div>
85+
</div>
9586
</div>
87+
</div>
88+
<!-- share end -->
89+
<div style="margin-top: 10px;">
90+
<p>Designed & developed by <a href="https://github.com/bestony">Bestony</a>, co-developed by <a
91+
href="https://github.com/johnpoint">johnpoint</a>
92+
</p>
93+
<p>Sponsored by: <a href="https://leancloud.app/">LeanCloud</a>, <a
94+
href="https://www.agora.io/cn/?utm_source=opensource&utm_medium=refferal&utm_campaign=clubhouseB">Agora</a>
95+
& <a href="https://www.ipip.net/">IPIP.net</a></p>
96+
<p>Media partner: <a href="http://dao.fm/">津津乐道播客</a></p>
97+
</div>
9698
</div>
99+
</div>
97100

98101
</body>

‎css/style.css

+29-17
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,45 @@
11
html, body, pre, code, kbd, samp {
2-
font-family: "Press Start 2P";
3-
/* "Press Start 2P"; */
4-
/*font-size: 30px;*/
2+
font-family: "Press Start 2P";
3+
/* "Press Start 2P"; */
4+
/*font-size: 30px;*/
55
}
66

77
.container {
8-
margin-top: 30px;
9-
padding: 1.5rem 2rem;
10-
border-color: #000;
11-
border-style: solid;
12-
border-width: 4px;
8+
margin-top: 30px;
9+
padding: 1.5rem 2rem;
10+
margin-bottom: 70px;
11+
border-color: #000;
12+
border-style: solid;
13+
border-width: 4px;
1314
}
1415

1516
.container>.title {
16-
display: table;
17-
padding: 0 .5rem;
18-
margin: -2.2rem -1rem 1rem;
19-
font-size: 1rem;
20-
background-color: #fff;
17+
display: table;
18+
padding: 0 .5rem;
19+
margin: -2.2rem -1rem 1rem;
20+
font-size: 1rem;
21+
background-color: #fff;
2122
}
2223

2324
.username {
24-
font-size: 20px;
25+
font-size: 20px;
2526
}
2627

2728
.username:hover {
28-
color: rgb(87, 98, 255);
29+
color: rgb(87, 98, 255);
2930
}
3031

3132
.header {
32-
margin: 20px 0px;
33-
}
33+
margin: 20px 0px;
34+
padding: 40px 0;
35+
line-height: 2.0;
36+
}
37+
38+
.nes-btn {
39+
display: flex;
40+
margin: 0 auto;
41+
}
42+
43+
.column.is-two-fifths {
44+
flex: auto;
45+
}

0 commit comments

Comments
 (0)