pie-slang/github-pages-index.html at main · MarcusMa06-code/pie-slang · GitHub

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
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pie-Slang</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background: linear-gradient(135deg, #1a4d2e 0%, #0d2818 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }
      .container {
        background: #f4f9f6;
        border-radius: 12px;
        padding: 48px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        max-width: 680px;
        width: 100%;
      }
      h1 {
        font-size: 2.5em;
        color: #333;
        margin-bottom: 16px;
        text-align: center;
      }
      .pi-symbol {
        color: #2d6a4f;
        font-size: 1.2em;
      }
      p {
        color: #666;
        line-height: 1.6;
        margin-bottom: 32px;
        text-align: center;
      }
      .links {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      a {
        display: block;
        padding: 16px 24px;
        background: linear-gradient(135deg, #2d6a4f 0%, #1a4d2e 100%);
        color: white;
        text-decoration: none;
        border-radius: 8px;
        text-align: center;
        font-weight: 500;
        transition: transform 0.2s, box-shadow 0.2s;
      }
      a:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(45, 106, 79, 0.5);
      }
      .secondary {
        background: white;
        color: #2d6a4f;
        border: 2px solid #2d6a4f;
      }
      .secondary:hover {
        box-shadow: 0 8px 16px rgba(45, 106, 79, 0.3);
      }
      .description {
        margin-top: 12px;
        font-size: 0.9em;
        color: #888;
      }
      .footer {
        margin-top: 36px;
        padding-top: 24px;
        border-top: 1px solid #d0e4d9;
        text-align: center;
        font-size: 0.9em;
        color: #666;
        line-height: 1.8;
      }
      .footer a {
        display: inline;
        padding: 0;
        background: none;
        color: #2d6a4f;
        font-weight: 600;
        border: none;
        border-radius: 0;
      }
      .footer a:hover {
        transform: none;
        box-shadow: none;
        text-decoration: underline;
      }
      .book-cover {
        margin: 20px auto 16px;
        display: block;
        max-width: 180px;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(45, 106, 79, 0.3);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }
      .book-cover:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(45, 106, 79, 0.4);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1><span class="pi-symbol">Π</span> Pie-Slang</h1>
      <p>A language server and interpreter for the Pie programming language</p>
      <div class="links">
        <a href="pie-playground/">
          <div>🎮 Pie Playground</div>
          <div class="description">Try Pie in your browser</div>
        </a>
        <a href="dist/index.js" class="secondary">
          <div>📦 Distribution Files</div>
          <div class="description">Access compiled dist/index.js</div>
        </a>
        <a href="https://github.com/source-academy/pie-slang" class="secondary">
          <div>💻 View on GitHub</div>
          <div class="description">Source code and documentation</div>
        </a>
      </div>
      <div class="footer">
        <a href="https://thelittletyper.com" target="_blank">
          <img src="https://thelittletyper.com/the-little-typer.jpg" alt="The Little Typer Book Cover" class="book-cover">
        </a>
        <div>Inspired by <a href="https://thelittletyper.com" target="_blank">The Little Typer</a></div>
        <div>Part of <a href="https://sourceacademy.org" target="_blank">Source Academy</a> @ <a href="https://www.comp.nus.edu.sg" target="_blank">NUS School of Computing</a></div>
      </div>
    </div>
  </body>
</html>