Skip to content

Commit 3d3ba03

Browse files
faisalnjsfaisalnjs
committed
Initial pages setup, extend initialization
1 parent 00a89c9 commit 3d3ba03

11 files changed

Lines changed: 274 additions & 5 deletions

File tree

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ commtrackr.init({ // Initialize CommTracker with configurations
1818
slug: 'commtrackr', // Unique identifier for the tenant
1919
name: 'CommTrackr', // Name of the tenant
2020
description: 'Easily plan, manage, and track client commissions.', // Description of the tenant
21+
logo: 'http://localhost:3000/commtrackr/logo.png', // Tenant logo image
22+
themeColor: '#ffffff', // Tenant theme color
23+
banner: 'http://localhost:3000/commtrackr/banner_public.png', // Tenant banner image
24+
domain: 'http://localhost:3000', // Domain for the tenant, including protocol
25+
path: '/commtrackr', // Path that CommTracker is mounted on
2126
auth: {
2227
enabled: false, // Enable or disable authentication
2328
provider: '', // Recognizable name of authentication provider

‎frontend/pages/auth.ejs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<%- include('head.ejs') %>
2+
<img src="<%= tenant.logo %>" alt="<%= tenant.name %>">
3+
<h1>Authentication required.</h1>
4+
<p>You'll need to log into your <%= tenant.auth.provider || tenant.name %> account before managing your commissions.</p>
5+
<% if (tenant.auth.url) { %>
6+
<div class="buttons">
7+
<div href="<%= tenant.auth.url %>" class="button">Continue</div>
8+
</div>
9+
<% } %>
10+
<%- include('foot.ejs') %>

‎frontend/pages/error.ejs‎

Whitespace-only changes.

‎frontend/pages/foot.ejs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
</div>
2+
<p class="fixed">© <%= new Date().getFullYear() %> CommTrackr</p>
3+
</main>
4+
<script src="<%= tenant.domain %><%= tenant.path %>/scripts.js"></script>
5+
</body>
6+
7+
</html>

‎frontend/pages/head.ejs‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title><%= title %><%= tenant.name %></title>
8+
<meta name="description" content="<%= tenant.description %>">
9+
<meta name="keywords" content="commission, commissions">
10+
<meta name="author" content="CommTrackr">
11+
<meta name="theme-color" content="<%= tenant.themeColor %>">
12+
<meta property="og:title" content="<%= title %><%= tenant.name %>">
13+
<meta property="og:description" content="<%= tenant.description %>">
14+
<meta property="og:image" content="<%= tenant.banner %>">
15+
<meta property="og:url" content="<%= tenant.domain %>">
16+
<meta property="og:type" content="website">
17+
<meta name="twitter:card" content="summary_large_image">
18+
<meta name="twitter:title" content="<%= title %><%= tenant.name %>">
19+
<meta name="twitter:description" content="<%= tenant.description %>">
20+
<meta name="twitter:image" content="<%= tenant.banner %>">
21+
<link rel="icon" href="<%= tenant.logo %>" type="image/png">
22+
<link rel="apple-touch-icon" href="<%= tenant.logo %>">
23+
<link rel="stylesheet" href="<%= tenant.domain %><%= tenant.path %>/styles.css">
24+
</head>
25+
26+
<body>
27+
<main>
28+
<div class="inner">

‎frontend/pages/off.ejs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<%- include('head.ejs') %>
2+
<img src="<%= tenant.logo %>" alt="<%= tenant.name %>">
3+
<h1>CommTrackr is disabled.</h1>
4+
<p>Enable CommTrackr for your app using <code>commtrackr.on();</code></p>
5+
<%- include('foot.ejs') %>

‎frontend/pages/template.ejs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<%- include('head.ejs') %>
2+
<main>
3+
<img src="<%= tenant.logo %>" alt="<%= tenant.name %>">
4+
<h1></h1>
5+
<p></p>
6+
<div class="buttons">
7+
<a class="button"></a>
8+
<div class="button"></div>
9+
</div>
10+
</main>
11+
<%- include('foot.ejs') %>

‎frontend/pages/tenant.ejs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<%- include('head.ejs') %>
2+
<img src="<%= tenant.logo %>" alt="<%= tenant.name %>">
3+
<h1>Tenant not configured.</h1>
4+
<p>Configure your CommTrackr tenant using <code>commtrackr.init({ tenant: { ... } });</code></p>
5+
<%- include('foot.ejs') %>

‎frontend/public/scripts.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
document.querySelectorAll('.button[href]').forEach(button => button.addEventListener('click', function(event) {
2+
event.preventDefault();
3+
anim_out();
4+
setTimeout(() => {
5+
window.location.href = button.getAttribute('href');
6+
}, 750)
7+
}));
8+
9+
function anim_in() {
10+
document.querySelector('main').classList.remove('out');
11+
document.querySelector('main').classList.add('in');
12+
};
13+
14+
function anim_out() {
15+
document.querySelector('main').classList.remove('in');
16+
document.querySelector('main').classList.add('out');
17+
};
18+
19+
anim_in();
20+
21+
// anim_out();
22+
// setTimeout(() => {
23+
// anim_in();
24+
// }, 750)

‎frontend/public/styles.css‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
@font-face {
2+
font-family: "Instrument Sans";
3+
src: url("InstrumentSans.ttf") format("truetype");
4+
}
5+
6+
* {
7+
margin: 0;
8+
padding: 0;
9+
font-family: inherit;
10+
color: #ffffff;
11+
}
12+
13+
::-webkit-scrollbar {
14+
display: none;
15+
}
16+
17+
body {
18+
display: flex;
19+
flex-direction: column;
20+
justify-content: center;
21+
align-items: center;
22+
background: #161616;
23+
color: #ffffff;
24+
font-family: "Instrument Sans", sans-serif;
25+
padding: 25px;
26+
}
27+
28+
h1 {
29+
font-size: min(40px, 10vw);
30+
font-weight: 600;
31+
line-height: 50px;
32+
line-height: min(50px, 12.5vw);
33+
}
34+
35+
p {
36+
opacity: 0.75;
37+
font-size: 15px;
38+
font-weight: 500;
39+
line-height: 24px;
40+
letter-spacing: -0.09px;
41+
}
42+
43+
code {
44+
padding: 2.5px 5px;
45+
background: #161616;
46+
border-radius: 5px;
47+
margin: 0 2.5px;
48+
}
49+
50+
.buttons {
51+
display: flex;
52+
align-items: flex-start;
53+
gap: 15px;
54+
margin-top: 15px;
55+
}
56+
57+
.button {
58+
display: flex;
59+
justify-content: center;
60+
align-items: center;
61+
gap: 10px;
62+
padding: 7.5px 22px;
63+
border-radius: 5px;
64+
border: 1px solid #242424;
65+
background: transparent;
66+
font-size: 15px;
67+
font-weight: 500;
68+
line-height: 24px;
69+
letter-spacing: -0.09px;
70+
text-decoration: none;
71+
cursor: pointer;
72+
transition: 0.25s;
73+
}
74+
75+
.button:hover,
76+
.button:focus,
77+
.button.active {
78+
background: #2c2c2c;
79+
border-color: #393939;
80+
text-decoration: none;
81+
}
82+
83+
main {
84+
display: flex;
85+
padding: min(100px, 10vh) 0;
86+
flex-direction: column;
87+
align-items: flex-start;
88+
justify-content: center;
89+
gap: 10px;
90+
width: -webkit-fill-available;
91+
height: calc(100vh - 50px - (2 * (min(100px, 10vh))));
92+
background: #111111;
93+
border-radius: 15px;
94+
overflow-y: scroll;
95+
position: relative;
96+
transition: 0.25s;
97+
98+
> .fixed {
99+
position: absolute;
100+
bottom: 25px;
101+
left: 30px;
102+
}
103+
104+
.inner {
105+
display: flex;
106+
flex-direction: column;
107+
align-items: flex-start;
108+
justify-content: center;
109+
align-self: center;
110+
gap: 10px;
111+
width: 80%;
112+
max-width: 1000px;
113+
height: 100%;
114+
position: relative;
115+
transition-timing-function: linear;
116+
117+
> img {
118+
width: 50px;
119+
}
120+
}
121+
}
122+
123+
@keyframes out {
124+
0% {
125+
margin-left: 0%;
126+
opacity: 1;
127+
}
128+
100% {
129+
margin-left: -50%;
130+
opacity: 0;
131+
}
132+
}
133+
134+
@keyframes in {
135+
0% {
136+
margin-right: -50%;
137+
opacity: 0;
138+
}
139+
100% {
140+
margin-right: 0%;
141+
opacity: 1;
142+
}
143+
}
144+
145+
main.out .inner {
146+
animation: out 0.75s forwards;
147+
}
148+
149+
main.in .inner {
150+
animation: in 0.5s forwards;
151+
}
152+
153+
@media screen and (max-width: 950px) {
154+
.buttons,
155+
.button {
156+
width: -webkit-fill-available;
157+
}
158+
159+
.buttons {
160+
flex-direction: column;
161+
gap: 10px;
162+
}
163+
}

0 commit comments

Comments
 (0)