Hugging Face's logo

Spaces:
yunzi7
/
icebreaking
Runtime error

App Files Community
8
dongwook-chan commited on
Commit
8241e7f
Β·
1 Parent(s): 5e60e06

Update

Browse files
Files changed (3) hide show
  1. ice_breaking_challenge/static/style.css +80 -77
  2. ice_breaking_challenge/templates/base.html +7 -5
  3. ice_breaking_challenge/templates/index.html +21 -8
ice_breaking_challenge/static/style.css CHANGED
@@ -1,6 +1,6 @@
1
  html {
2
- font-family: sans-serif;
3
- background: #eee;
4
  padding: 1rem;
5
  }
6
 
@@ -8,127 +8,130 @@ body {
8
  max-width: 960px;
9
  margin: 0 auto;
10
  background: white;
 
11
  }
12
 
13
- h1, h2, h3, h4, h5, h6 {
14
- font-family: serif;
15
- color: #377ba8;
16
- margin: 1rem 0;
17
- }
18
-
19
- a {
20
- color: #377ba8;
21
- }
22
-
23
- hr {
24
- border: none;
25
- border-top: 1px solid lightgray;
26
- }
27
-
28
  nav {
29
- background: lightgray;
30
  display: flex;
31
- align-items: center;
32
- padding: 0 0.5rem;
33
  }
34
 
35
  nav h1 {
36
  flex: auto;
37
  margin: 0;
 
 
 
38
  }
39
 
40
  nav h1 a {
41
  text-decoration: none;
42
- padding: 0.25rem 0.5rem;
43
  }
44
 
45
- nav ul {
46
- display: flex;
47
- list-style: none;
48
- margin: 0;
49
- padding: 0;
50
  }
51
 
52
- nav ul li a, nav ul li span, header .action {
53
- display: block;
54
- padding: 0.5rem;
55
- }
56
-
57
- .content {
58
- padding: 0 1rem 1rem;
59
- }
60
-
61
- .content > header {
62
- border-bottom: 1px solid lightgray;
63
  display: flex;
64
- align-items: flex-end;
65
- }
66
-
67
- .content > header h1 {
68
- flex: auto;
69
- margin: 1rem 0 0.25rem 0;
70
  }
71
 
72
- .flash {
73
- margin: 1em 0;
74
- padding: 1em;
75
- background: #cae6f6;
76
- border: 1px solid #377ba8;
 
77
  }
78
 
79
- .post > header {
80
- display: flex;
81
- align-items: flex-end;
82
- font-size: 0.85em;
 
 
83
  }
84
 
85
- .post > header > div:first-of-type {
86
- flex: auto;
 
 
 
87
  }
88
 
89
- .post > header h1 {
90
- font-size: 1.5em;
91
- margin-bottom: 0;
92
- }
93
-
94
- .post .about {
95
- color: slategray;
96
- font-style: italic;
97
  }
98
 
99
- .post .body {
100
- white-space: pre-line;
101
  }
102
 
103
- .content:last-child {
104
- margin-bottom: 0;
 
 
 
 
 
 
 
105
  }
106
 
 
107
  .content form {
108
- margin: 1em 0;
109
  display: flex;
110
  flex-direction: column;
 
111
  }
112
 
113
  .content label {
114
  font-weight: bold;
115
  margin-bottom: 0.5em;
 
116
  }
117
 
118
- .content input, .content textarea {
119
  margin-bottom: 1em;
 
 
 
 
 
 
120
  }
121
 
122
- .content textarea {
123
- min-height: 12em;
124
- resize: vertical;
 
 
 
 
 
 
 
 
125
  }
126
 
127
- input.danger {
128
- color: #cc2f2e;
129
  }
130
 
131
- input[type=submit] {
132
- align-self: start;
133
- min-width: 10em;
134
- }
 
1
  html {
2
+ font-family: 'Arial', sans-serif;
3
+ background: white; /* Clean, white background */
4
  padding: 1rem;
5
  }
6
 
 
8
  max-width: 960px;
9
  margin: 0 auto;
10
  background: white;
11
+ padding: 2rem;
12
  }
13
 
14
+ /* Navigation Bar */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  nav {
16
+ background: none;
17
  display: flex;
18
+ justify-content: center;
19
+ padding: 1rem;
20
  }
21
 
22
  nav h1 {
23
  flex: auto;
24
  margin: 0;
25
+ font-size: 2.5rem;
26
+ text-align: center;
27
+ color: #000;
28
  }
29
 
30
  nav h1 a {
31
  text-decoration: none;
32
+ color: #000;
33
  }
34
 
35
+ /* Hero Section with Ice Text */
36
+ .hero {
37
+ text-align: center;
38
+ margin: 2rem 0;
 
39
  }
40
 
41
+ .title {
42
+ font-size: 4rem;
43
+ font-weight: bold;
44
+ color: #000;
 
 
 
 
 
 
 
45
  display: flex;
46
+ justify-content: center;
47
+ align-items: center;
 
 
 
 
48
  }
49
 
50
+ .ice-text {
51
+ font-family: 'Comic Sans MS', sans-serif;
52
+ color: #0288d1;
53
+ text-shadow: 2px 2px 0 #b3e5fc;
54
+ font-size: 5rem;
55
+ margin-right: 0.5rem;
56
  }
57
 
58
+ .ice-text-mini {
59
+ font-family: 'Comic Sans MS', sans-serif;
60
+ color: #0288d1;
61
+ text-shadow: 2px 2px 0 #b3e5fc;
62
+ font-size: 3rem;
63
+ margin-right: 0.5rem;
64
  }
65
 
66
+ /* Hero Image */
67
+ .hero img {
68
+ max-width: 300px;
69
+ height: auto;
70
+ margin-top: 2rem;
71
  }
72
 
73
+ /* Content Section */
74
+ .content {
75
+ padding: 2rem;
76
+ text-align: center;
 
 
 
 
77
  }
78
 
79
+ .content > header {
80
+ margin-bottom: 2rem;
81
  }
82
 
83
+ /* Flash Messages */
84
+ .flash {
85
+ margin: 1em 0;
86
+ padding: 1em;
87
+ background: #e1f5fe;
88
+ border: 1px solid #81d4fa;
89
+ color: #0277bd;
90
+ border-radius: 5px;
91
+ text-align: center;
92
  }
93
 
94
+ /* Form Styling */
95
  .content form {
96
+ margin: 2em 0;
97
  display: flex;
98
  flex-direction: column;
99
+ align-items: center;
100
  }
101
 
102
  .content label {
103
  font-weight: bold;
104
  margin-bottom: 0.5em;
105
+ color: #0288d1;
106
  }
107
 
108
+ .content input {
109
  margin-bottom: 1em;
110
+ padding: 0.75rem;
111
+ border: 2px solid #81d4fa;
112
+ border-radius: 5px;
113
+ font-size: 1rem;
114
+ width: 80%;
115
+ max-width: 400px;
116
  }
117
 
118
+ input[type=submit] {
119
+ align-self: center;
120
+ min-width: 10em;
121
+ background: #0288d1;
122
+ color: white;
123
+ border: none;
124
+ padding: 0.75rem;
125
+ border-radius: 5px;
126
+ cursor: pointer;
127
+ font-size: 1rem;
128
+ transition: background-color 0.3s ease;
129
  }
130
 
131
+ input[type=submit]:hover {
132
+ background: #0277bd;
133
  }
134
 
135
+ input[type=submit]:active {
136
+ background: #01579b;
137
+ }
 
ice_breaking_challenge/templates/base.html CHANGED
@@ -1,15 +1,17 @@
1
  <!doctype html>
2
  <title>{% block title %}{% endblock %} - Ice Breaking Challenge</title>
3
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 
4
  <nav>
5
- <h1><a href="{{ url_for('index') }}">Ice Breaking Challenge</a></h1>
6
  </nav>
 
7
  <section class="content">
8
- <header>
9
- {% block header %}{% endblock %}
10
- </header>
11
  {% for message in get_flashed_messages() %}
12
  <div class="flash">{{ message }}</div>
13
  {% endfor %}
 
14
  {% block content %}{% endblock %}
15
- </section>
 
1
  <!doctype html>
2
  <title>{% block title %}{% endblock %} - Ice Breaking Challenge</title>
3
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
4
+
5
  <nav>
6
+ <h1><a href="{{ url_for('index') }}"><span class="ice-text-mini">ICE</span>BREAKER</a></h1>
7
  </nav>
8
+
9
  <section class="content">
10
+
11
+
 
12
  {% for message in get_flashed_messages() %}
13
  <div class="flash">{{ message }}</div>
14
  {% endfor %}
15
+
16
  {% block content %}{% endblock %}
17
+ </section>
ice_breaking_challenge/templates/index.html CHANGED
@@ -1,12 +1,25 @@
1
- {% extends 'base.html' %}
2
-
3
 
4
  {% block content %}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  <form method="post">
6
- <label for="team_number">νŒ€ 번호</label>
7
- <input name="team_number" id="team_number" required>
8
- <label for="team_size">νŒ€μ› 수</label>
9
- <input name="team_size" id="team_size" required>
10
- <input type="submit" value="λ‹€μŒ">
11
  </form>
12
- {% endblock %}
 
 
 
 
1
 
2
  {% block content %}
3
+ <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
4
+ <section class="content">
5
+ <!-- Hero Section -->
6
+ <section class="hero">
7
+ <div class="title">
8
+ <span class="ice-text">ICE</span> BREAKER
9
+ </div>
10
+ </section>
11
+
12
+ <header>
13
+ {% block header %}
14
+ <h2>Welcome to the Ice-Breaking Challenge!</h2>
15
+ {% endblock %}
16
+ </header>
17
  <form method="post">
18
+ <label for="team_number">Team Number</label>
19
+ <input name="team_number" id="team_number" placeholder="Enter your team number" required>
20
+ <label for="team_size">Team Size</label>
21
+ <input name="team_size" id="team_size" placeholder="Enter team size" required>
22
+ <input type="submit" value="Next" class="submit-button">
23
  </form>
24
+ </section>
25
+ {% endblock %}