Hugging Face's logo

Spaces:
atharva-nlp
/
slack-bot
Sleeping

App Files Community
Atharva Chauthaiwale commited on
Commit
c4d995e
·
1 Parent(s): e38ebb4

CSS styling

Browse files
Files changed (4) hide show
  1. static/css/cool.css +89 -0
  2. static/css/styles.css +4 -3
  3. static/css/styles2.css +81 -0
  4. static/index.html +5 -4
static/css/cool.css ADDED
@@ -0,0 +1,89 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Reset default styles */
2
+ * {
3
+ box-sizing: border-box;
4
+ margin: 0;
5
+ padding: 0;
6
+ }
7
+
8
+ body {
9
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
10
+ background-color: #f3f3f3;
11
+ color: #333;
12
+ line-height: 1.6;
13
+ margin: 0;
14
+ padding: 0;
15
+ }
16
+
17
+ header {
18
+ background-color: #ffffff;
19
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
20
+ padding: 1rem 0;
21
+ text-align: center;
22
+ }
23
+
24
+ header h1 {
25
+ font-size: 2.5rem;
26
+ font-weight: 700;
27
+ margin: 0;
28
+ color: #333;
29
+ }
30
+
31
+ header h2 {
32
+ font-size: 1.2rem;
33
+ font-weight: 400;
34
+ margin: 0;
35
+ color: #666;
36
+ }
37
+
38
+ main {
39
+ max-width: 800px;
40
+ margin: 20px auto;
41
+ padding: 20px;
42
+ background-color: #ffffff;
43
+ border-radius: 8px;
44
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
45
+ }
46
+
47
+ .summary {
48
+ text-align: center;
49
+ margin-bottom: 2rem;
50
+ }
51
+
52
+ .features {
53
+ display: flex;
54
+ flex-wrap: wrap;
55
+ justify-content: space-around;
56
+ }
57
+
58
+ .feature {
59
+ flex-basis: calc(50% - 20px);
60
+ margin: 10px;
61
+ padding: 20px;
62
+ background-color: #ffffff;
63
+ border-radius: 8px;
64
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
65
+ text-align: left;
66
+ transition: transform 0.3s ease-in-out;
67
+ }
68
+
69
+ .feature:hover {
70
+ transform: translateY(-5px);
71
+ }
72
+
73
+ .feature img {
74
+ max-width: 100%;
75
+ height: auto;
76
+ border-radius: 8px;
77
+ }
78
+
79
+ .feature h3 {
80
+ font-size: 1.5rem;
81
+ margin: 10px 0;
82
+ color: #333;
83
+ }
84
+
85
+ .feature p {
86
+ font-size: 1rem;
87
+ margin: 10px 0;
88
+ color: #666;
89
+ }
static/css/styles.css CHANGED
@@ -7,7 +7,7 @@ body {
7
  }
8
 
9
  header {
10
- background-color: #4CAF50;
11
  color: white;
12
  text-align: center;
13
  padding: 2rem 1rem;
@@ -54,12 +54,13 @@ main {
54
 
55
  .feature img {
56
  max-width: 100%;
57
- height: auto;
58
  border-radius: 8px;
 
 
59
  }
60
 
61
  .feature h3 {
62
- margin-top: 1rem;
63
  font-size: 1.5rem;
64
  }
65
 
 
7
  }
8
 
9
  header {
10
+ background-color: #4caf50;
11
  color: white;
12
  text-align: center;
13
  padding: 2rem 1rem;
 
54
 
55
  .feature img {
56
  max-width: 100%;
 
57
  border-radius: 8px;
58
+ width: 250px;
59
+ height: 120px;
60
  }
61
 
62
  .feature h3 {
63
+ margin-top: 0.5rem;
64
  font-size: 1.5rem;
65
  }
66
 
static/css/styles2.css ADDED
@@ -0,0 +1,81 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Reset default styles */
2
+ * {
3
+ box-sizing: border-box;
4
+ margin: 0;
5
+ padding: 0;
6
+ }
7
+
8
+ body {
9
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
10
+ background-color: #f6f8fa;
11
+ color: #24292e;
12
+ line-height: 1.6;
13
+ margin: 0;
14
+ padding: 0;
15
+ }
16
+
17
+ header {
18
+ background-color: #24292e;
19
+ color: #ffffff;
20
+ text-align: center;
21
+ padding: 1rem 0;
22
+ }
23
+
24
+ header h1 {
25
+ font-size: 2.5rem;
26
+ font-weight: 600;
27
+ margin: 0;
28
+ }
29
+
30
+ header h2 {
31
+ font-size: 1.2rem;
32
+ font-weight: 400;
33
+ margin: 0;
34
+ }
35
+
36
+ main {
37
+ max-width: 800px;
38
+ margin: 20px auto;
39
+ padding: 20px;
40
+ background-color: #ffffff;
41
+ border-radius: 8px;
42
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
43
+ }
44
+
45
+ .summary {
46
+ text-align: center;
47
+ margin-bottom: 2rem;
48
+ }
49
+
50
+ .features {
51
+ display: flex;
52
+ flex-wrap: wrap;
53
+ justify-content: space-around;
54
+ }
55
+
56
+ .feature {
57
+ flex-basis: calc(50% - 20px);
58
+ margin: 10px;
59
+ padding: 20px;
60
+ background-color: #f6f8fa;
61
+ border-radius: 8px;
62
+ box-shadow: 0 0 5px rgba(0,0,0,0.1);
63
+ text-align: center;
64
+ }
65
+
66
+ .feature img {
67
+ max-width: 100%;
68
+ height: auto;
69
+ border-radius: 8px;
70
+ }
71
+
72
+ .feature h3 {
73
+ font-size: 1.5rem;
74
+ margin: 10px 0;
75
+ }
76
+
77
+ .feature p {
78
+ font-size: 1rem;
79
+ margin: 10px 0;
80
+ color: #586069;
81
+ }
static/index.html CHANGED
@@ -4,7 +4,7 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Judgement Buzz</title>
7
- <link rel="stylesheet" href="static/css/styles.css">
8
  </head>
9
 
10
  <body>
@@ -14,19 +14,20 @@
14
  </header>
15
  <main>
16
  <section class="summary">
17
- <p>Judgement Buzz helps you understand complex Supreme Court rulings effortlessly. With our intuitive
18
  interface and powerful Slack bot, accessing legal information has never been easier.</p>
19
  </section>
20
  <section class="features">
21
  <div class="feature">
22
  <img src="static/images/gradio.png" alt="Gradio Interface">
23
- <h3><a href="https://atharva-nlp-slack-bot.hf.space/gradio/">Gradio App</a></h3>
24
- <p>Use our Gradio app to interact with legal interpretations in real-time.</p>
25
  </div>
26
  <div class="feature">
27
  <img src="static/images/slack.png" alt="Slack Bot">
28
  <h3>Slack Bot</h3>
29
  <p>Integrate our Slack bot to get legal insights directly in your Slack workspace.</p>
 
30
  </div>
31
  </section>
32
  </main>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Judgement Buzz</title>
7
+ <link rel="stylesheet" href="static/css/styles2.css">
8
  </head>
9
 
10
  <body>
 
14
  </header>
15
  <main>
16
  <section class="summary">
17
+ <p><b>Judgement Buzz</b> helps you understand complex Supreme Court rulings effortlessly. With our simple
18
  interface and powerful Slack bot, accessing legal information has never been easier.</p>
19
  </section>
20
  <section class="features">
21
  <div class="feature">
22
  <img src="static/images/gradio.png" alt="Gradio Interface">
23
+ <h3><a href="https://atharva-nlp-slack-bot.hf.space/gradio/">Gradio app</a></h3>
24
+ <p>Utilize our Gradio app for instant interpretation of legal judgments.</p>
25
  </div>
26
  <div class="feature">
27
  <img src="static/images/slack.png" alt="Slack Bot">
28
  <h3>Slack Bot</h3>
29
  <p>Integrate our Slack bot to get legal insights directly in your Slack workspace.</p>
30
+ <p>Slack bot is not publicly available yet. Stay tuned for details</p>
31
  </div>
32
  </section>
33
  </main>