mirror of
https://github.com/plausible/analytics.git
synced 2024-12-23 17:44:43 +03:00
New landing page (#47)
* Fix typo * Update landing page with components from TailwindUI * Update copy * Update FAQ and testimonials * Add feature section * Update copy for integration * Implement feedback * Remove github button JS * Update headings * Update gray values * Update CTA section * Add copy
This commit is contained in:
Uku Taht
GitHub
parent
41e04d9594
commit
c40d532880
@ -95,7 +95,7 @@ class DatePicker extends React.Component {
|
||||
renderArrow(period, prevDate, nextDate) {
|
||||
return (
|
||||
<div className="flex rounded shadow bg-white mr-4 cursor-pointer">
|
||||
<Link to={{search: this.queryWithPeriod(period, {date: prevDate})}} className="flex items-center px-2 border-r border-gray-400">
|
||||
<Link to={{search: this.queryWithPeriod(period, {date: prevDate})}} className="flex items-center px-2 border-r border-gray-300">
|
||||
<svg className="fill-current h-4 w-4">
|
||||
<use xlinkHref="#feather-chevron-left" />
|
||||
</svg>
|
||||
|
||||
@ -35,7 +35,7 @@ export default class Conversions extends React.Component {
|
||||
return (
|
||||
<div className="flex items-center justify-between my-2 text-sm" key={goal.name}>
|
||||
<div className="w-full h-8" style={{maxWidth: 'calc(100% - 6rem)'}}>
|
||||
<Bar count={goal.count} all={this.state.goals} bg="bg-red-100" />
|
||||
<Bar count={goal.count} all={this.state.goals} bg="bg-red-50" />
|
||||
<Link to={{search: query.toString(), state: {scrollTop: true}}} style={{marginTop: '-26px'}} className="hover:underline block px-2">{ goal.name }</Link>
|
||||
</div>
|
||||
<span className="font-medium">{numberFormatter(goal.count)}</span>
|
||||
|
||||
@ -64,7 +64,7 @@ class ScreenSizes extends React.Component {
|
||||
return (
|
||||
<div className="flex items-center justify-between my-1 text-sm" key={size.name}>
|
||||
<div className="w-full h-8" style={{maxWidth: 'calc(100% - 4rem)'}}>
|
||||
<Bar count={size.count} all={this.state.sizes} bg="bg-green-100" />
|
||||
<Bar count={size.count} all={this.state.sizes} bg="bg-green-50" />
|
||||
<span className="block px-2" style={{marginTop: '-26px'}}>{iconFor(size.name)} {size.name}</span>
|
||||
</div>
|
||||
<span className="font-medium">{size.percentage}%</span>
|
||||
@ -126,7 +126,7 @@ class Browsers extends React.Component {
|
||||
return (
|
||||
<div className="flex items-center justify-between my-1 text-sm" key={browser.name}>
|
||||
<div className="w-full h-8" style={{maxWidth: 'calc(100% - 4rem)'}}>
|
||||
<Bar count={browser.count} all={this.state.browsers} bg="bg-green-100" />
|
||||
<Bar count={browser.count} all={this.state.browsers} bg="bg-green-50" />
|
||||
<span className="block px-2" style={{marginTop: '-26px'}}>{browser.name}</span>
|
||||
</div>
|
||||
<span className="font-medium">{browser.percentage}%</span>
|
||||
@ -188,7 +188,7 @@ class OperatingSystems extends React.Component {
|
||||
return (
|
||||
<div className="flex items-center justify-between my-1 text-sm" key={os.name}>
|
||||
<div className="w-full h-8" style={{maxWidth: 'calc(100% - 4rem)'}}>
|
||||
<Bar count={os.count} all={this.state.operatingSystems} bg="bg-green-100" />
|
||||
<Bar count={os.count} all={this.state.operatingSystems} bg="bg-green-50" />
|
||||
<span className="block px-2" style={{marginTop: '-26px'}}>{os.name}</span>
|
||||
</div>
|
||||
<span className="font-medium">{os.percentage}%</span>
|
||||
@ -248,12 +248,12 @@ export default class Devices extends React.Component {
|
||||
|
||||
renderPill(name, mode) {
|
||||
const isActive = this.state.mode === mode
|
||||
const extraClass = name === 'OS' ? '' : ' border-r border-gray-400'
|
||||
const extraClass = name === 'OS' ? '' : ' border-r border-gray-300'
|
||||
|
||||
if (isActive) {
|
||||
return <span className={"inline-block shadow-inner text-sm font-bold py-1 px-4" + extraClass}>{name}</span>
|
||||
} else {
|
||||
return <span className={"inline-block cursor-pointer bg-gray-200 text-sm font-bold py-1 px-4" + extraClass} onClick={this.setMode(mode)}>{name}</span>
|
||||
return <span className={"inline-block cursor-pointer bg-gray-100 text-sm font-bold py-1 px-4" + extraClass} onClick={this.setMode(mode)}>{name}</span>
|
||||
}
|
||||
}
|
||||
|
||||
@ -263,7 +263,7 @@ export default class Devices extends React.Component {
|
||||
<div className="bg-white shadow-xl rounded p-4 relative" style={{height: '436px'}}>
|
||||
<h3 className="font-bold">Devices</h3>
|
||||
|
||||
<div className="rounded border border-gray-400 absolute" style={{top: '1rem', right: '1rem'}}>
|
||||
<div className="rounded border border-gray-300 absolute" style={{top: '1rem', right: '1rem'}}>
|
||||
{ this.renderPill('Size', 'size') }
|
||||
{ this.renderPill('Browser', 'browser') }
|
||||
{ this.renderPill('OS', 'os') }
|
||||
|
||||
@ -35,7 +35,7 @@ export default class Pages extends React.Component {
|
||||
return (
|
||||
<div className="flex items-center justify-between my-1 text-sm" key={page.name}>
|
||||
<div className="w-full h-8 truncate" style={{maxWidth: 'calc(100% - 4rem)'}}>
|
||||
<Bar count={page.count} all={this.state.pages} bg="bg-orange-100" />
|
||||
<Bar count={page.count} all={this.state.pages} bg="bg-orange-50" />
|
||||
<span className="block px-2" style={{marginTop: '-26px'}}>{page.name}</span>
|
||||
</div>
|
||||
<span className="font-medium">{numberFormatter(page.count)}</span>
|
||||
|
||||
@ -38,7 +38,7 @@ export default class Referrers extends React.Component {
|
||||
return (
|
||||
<div className="flex items-center justify-between my-1 text-sm" key={referrer.name}>
|
||||
<div className="w-full h-8" style={{maxWidth: 'calc(100% - 4rem)'}}>
|
||||
<Bar count={referrer.count} all={this.state.referrers} bg="bg-blue-100" />
|
||||
<Bar count={referrer.count} all={this.state.referrers} bg="bg-blue-50" />
|
||||
<Link className="hover:underline block px-2" style={{marginTop: '-26px'}} to={`/${encodeURIComponent(this.props.site.domain)}/referrers/${referrer.name}${window.location.search}`}>
|
||||
<img src={`https://icons.duckduckgo.com/ip3/${referrer.url}.ico`} className="inline h-4 w-4 mr-2 align-middle -mt-px" />
|
||||
{ referrer.name }
|
||||
|
||||
54
assets/package-lock.json
generated
54
assets/package-lock.json
generated
@ -1069,6 +1069,26 @@
|
||||
"purgecss": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"@tailwindcss/custom-forms": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz",
|
||||
"integrity": "sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q==",
|
||||
"requires": {
|
||||
"lodash": "^4.17.11",
|
||||
"mini-svg-data-uri": "^1.0.3",
|
||||
"traverse": "^0.6.6"
|
||||
}
|
||||
},
|
||||
"@tailwindcss/ui": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/ui/-/ui-0.1.3.tgz",
|
||||
"integrity": "sha512-ggEEFj0N6YY6fFjHtoGArv9j7wr5nj+TswpGzEezN2l15jHJK1NZ+Lnt0XKsbJy2zWFSNy/KKpPCbh3d6/66tw==",
|
||||
"requires": {
|
||||
"@tailwindcss/custom-forms": "^0.2.1",
|
||||
"hex-to-rgba": "^2.0.1",
|
||||
"postcss-selector-parser": "^6.0.2"
|
||||
}
|
||||
},
|
||||
"@types/color-name": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
|
||||
@ -1452,7 +1472,7 @@
|
||||
},
|
||||
"util": {
|
||||
"version": "0.10.3",
|
||||
"resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
|
||||
"resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
|
||||
"integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@ -2786,8 +2806,7 @@
|
||||
"cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
|
||||
},
|
||||
"cssnano": {
|
||||
"version": "4.1.10",
|
||||
@ -4644,6 +4663,11 @@
|
||||
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
|
||||
"dev": true
|
||||
},
|
||||
"hex-to-rgba": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/hex-to-rgba/-/hex-to-rgba-2.0.1.tgz",
|
||||
"integrity": "sha512-5XqPJBpsEUMsseJUi2w2Hl7cHFFi3+OO10M2pzAvKB1zL6fc+koGMhmBqoDOCB4GemiRM/zvDMRIhVw6EkB8dQ=="
|
||||
},
|
||||
"history": {
|
||||
"version": "4.10.1",
|
||||
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
|
||||
@ -4838,8 +4862,7 @@
|
||||
"indexes-of": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
|
||||
"integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
|
||||
"dev": true
|
||||
"integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
|
||||
},
|
||||
"infer-owner": {
|
||||
"version": "1.0.4",
|
||||
@ -5262,7 +5285,7 @@
|
||||
"dependencies": {
|
||||
"json5": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
|
||||
"resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
|
||||
"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
|
||||
"dev": true
|
||||
}
|
||||
@ -5281,8 +5304,7 @@
|
||||
"lodash": {
|
||||
"version": "4.17.15",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
|
||||
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
|
||||
"dev": true
|
||||
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
|
||||
},
|
||||
"lodash.memoize": {
|
||||
"version": "4.1.2",
|
||||
@ -5472,6 +5494,11 @@
|
||||
"webpack-sources": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"mini-svg-data-uri": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.1.3.tgz",
|
||||
"integrity": "sha512-EeKOmdzekjdPe53/GdxmUpNgDQFkNeSte6XkJmOBt4BfWL6FQ9G9RtLNh+JMjFS3LhdpSICMIkZdznjiecASHQ=="
|
||||
},
|
||||
"minimalistic-assert": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
|
||||
@ -8050,7 +8077,6 @@
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
|
||||
"integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cssesc": "^3.0.0",
|
||||
"indexes-of": "^1.0.1",
|
||||
@ -8538,7 +8564,7 @@
|
||||
"dependencies": {
|
||||
"jsesc": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
|
||||
"resolved": "http://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
|
||||
"integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
|
||||
"dev": true
|
||||
}
|
||||
@ -9582,6 +9608,11 @@
|
||||
"shapefile": "0.3"
|
||||
}
|
||||
},
|
||||
"traverse": {
|
||||
"version": "0.6.6",
|
||||
"resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
|
||||
"integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc="
|
||||
},
|
||||
"tslib": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
|
||||
@ -9730,8 +9761,7 @@
|
||||
"uniq": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
|
||||
"integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
|
||||
"dev": true
|
||||
"integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
|
||||
},
|
||||
"uniqs": {
|
||||
"version": "2.0.0",
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
"watch": "webpack --mode development --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/ui": "^0.1.3",
|
||||
"autoprefixer": "^9.7.4",
|
||||
"chart.js": "^2.9.3",
|
||||
"datamaps": "^0.5.9",
|
||||
|
||||
@ -4,7 +4,7 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
|
||||
'../lib/plausible_web/templates/**/*.html.eex',
|
||||
],
|
||||
|
||||
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
|
||||
defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || []
|
||||
})
|
||||
|
||||
module.exports = {
|
||||
|
||||
1
assets/static/images/icon/ghost.svg
Normal file
1
assets/static/images/icon/ghost.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg class="ghost-svg" viewBox="0 0 493 161" xmlns="http://www.w3.org/2000/svg"><title>Ghost Logo</title><g fill="none" fill-rule="evenodd"><path d="M328.52 37.36c-27.017 0-40.97 19.323-40.97 43.16 0 23.837 13.61 43.162 40.97 43.162s40.968-19.325 40.968-43.163c0-23.84-13.954-43.16-40.97-43.16zm20.438 43.237c-.02 15.328-5.126 27.743-20.44 27.743-15.312 0-20.42-12.414-20.435-27.743v-.078c.016-15.33 5.124-27.74 20.437-27.74 15.312 0 20.42 12.41 20.438 27.74v.07zM207.553 5.19c0-1.103.885-2.124 1.984-2.282 0 0 13.577-1.95 14.784-2.115 1.37-.187 3.19.798 3.19 2.744v44.236c3.23-3.105 6.79-5.608 10.66-7.515 3.88-1.906 8.43-2.86 13.66-2.86 4.53 0 8.53.776 12.03 2.33 3.5 1.55 6.43 3.73 8.77 6.533 2.34 2.81 4.12 6.16 5.33 10.05 1.21 3.9 1.82 8.19 1.82 12.87v51.35c0 1.1-.89 2-2 2h-15.95c-1.1 0-2-.9-2-1.99V69.18c0-5.118-1.17-9.08-3.51-11.888-2.35-2.804-5.86-4.207-10.544-4.207-3.45 0-6.677.79-9.69 2.37-3.02 1.58-5.87 3.73-8.564 6.46v58.617c0 1.102-.894 2-2.002 2h-15.94c-1.11 0-2.005-.895-2.005-2V5.188zm244.007 95.327v-43.68h-13.482c-1.1 0-1.742-.87-1.443-1.916l3-10.49c.262-.9.942-1.87 2.308-2.07l9.597-1.35 3.508-23.49c.163-1.09 1.18-2.1 2.274-2.26 0 0 9.192-1.31 10.963-1.58 1.673-.25 3.19.97 3.19 2.81v24.52h17.565c1.106 0 2.002.9 2.002 2.01v11.82c0 1.11-.89 2.01-2.002 2.01h-17.566v43.08c0 6.02 3.623 8.32 7.095 8.32 2.12 0 5.02-1.14 7.19-2.16 1.34-.62 3.41-.16 3.95 1.73l2.45 8.65c.3 1.07-.25 2.37-1.23 2.86 0 0-7.29 4.37-17.06 4.37-13.73 0-22.33-8.08-22.33-23.16zm-44.584-47.74c-7.084 0-12.657 2.476-12.657 8.433 0 7.44 12.01 9.606 20.23 12.64 5.49 2.027 20.24 5.98 20.24 22.016 0 19.48-16 27.807-33.06 27.807-17.06 0-25.4-5.465-25.4-5.465-.96-.527-1.5-1.822-1.2-2.89 0 0 2.1-7.52 2.64-9.386.48-1.68 2.41-2.27 3.64-1.792 4.39 1.712 12.32 4.092 21.28 4.092 9.07 0 13.46-2.803 13.46-8.777 0-7.95-12.26-10.38-20.36-12.967-5.59-1.78-20.36-5.93-20.36-23.566 0-17.373 15.08-25.524 31.2-25.524 13.64 0 23.5 4.69 23.5 4.69 1.01.427 1.58 1.635 1.28 2.698l-2.658 9.357c-.488 1.74-1.898 2.537-3.666 1.957-3.89-1.277-11.2-3.322-18.15-3.322zm-210.313-15.28c-6.695.775-11.472 3.962-14.562 6.93-6.06-4.81-14.49-7.106-23.94-7.106-18.95 0-33.76 9.26-33.76 29.43 0 11.58 4.88 19.56 12.62 24.26-5.75 2.75-9.57 8.59-9.57 14.34 0 9.61 7.5 12.61 7.5 12.61s-13.11 6.44-13.11 19.32c0 16.49 15.01 23.16 33.34 23.16 26.43 0 44.61-11.04 44.61-31.31 0-12.47-9.44-19.36-30.01-20.18-12.2-.48-20.11-.93-22.07-1.58-2.59-.87-3.86-2.96-3.86-5.28 0-2.55 2.08-4.98 5.35-6.65 2.86.516 5.87.768 8.99.768 18.97 0 33.76-9.223 33.76-29.425 0-4.897-.87-9.15-2.46-12.78 2.79-1.506 8.34-2.25 8.34-2.25 1.09-.17 1.975-1.21 1.974-2.31V40.3c0-1.88-1.59-2.955-3.1-2.78zm-49.13 85.132s9.954.38 19.9.84c11.172.52 14.654 2.96 14.654 8.81 0 7.15-9.71 14.1-23.28 14.1-12.88 0-19.314-4.54-19.314-12.08 0-4.33 2.26-9.18 8.04-11.69zm10.66-40.54c-8.978 0-15.983-4.83-15.983-15.35 0-10.53 7.01-15.35 15.983-15.35 8.974 0 15.984 4.81 15.984 15.34 0 10.53-7.002 15.34-15.984 15.34z" fill="#2D3134"/><g opacity=".6" transform="translate(0 36)" fill="#2E3134"><rect x=".209" y="69.017" width="33.643" height="17.014" rx="4"/><rect x="50.672" y="69.017" width="33.622" height="17.014" rx="4"/><rect x=".184" y="34.99" width="84.121" height="17.014" rx="4"/><rect x=".209" y=".964" width="50.469" height="17.013" rx="4"/><rect x="67.494" y=".964" width="16.821" height="17.013" rx="4"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
BIN
assets/static/images/icon/google_sc.png
Normal file
BIN
assets/static/images/icon/google_sc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
assets/static/images/icon/squarespace.png
Normal file
BIN
assets/static/images/icon/squarespace.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
assets/static/images/screenshot-countries.png
Normal file
BIN
assets/static/images/screenshot-countries.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
BIN
assets/static/images/screenshot.png
Normal file
BIN
assets/static/images/screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
@ -4,49 +4,20 @@ module.exports = {
|
||||
center: true,
|
||||
padding: '1rem',
|
||||
},
|
||||
margin: (theme, { negative }) => ({
|
||||
auto: 'auto',
|
||||
'44': '11rem',
|
||||
...theme('spacing'),
|
||||
...negative(theme('spacing')),
|
||||
}),
|
||||
width: theme => ({
|
||||
auto: 'auto',
|
||||
...theme('spacing'),
|
||||
'1/2': '50%',
|
||||
'1/3': '33.333333%',
|
||||
'31percent': '31%',
|
||||
'2/3': '66.666667%',
|
||||
'1/4': '25%',
|
||||
'2/4': '50%',
|
||||
'3/4': '75%',
|
||||
'1/5': '20%',
|
||||
'2/5': '40%',
|
||||
'3/5': '60%',
|
||||
'4/5': '80%',
|
||||
'1/6': '16.666667%',
|
||||
'2/6': '33.333333%',
|
||||
'3/6': '50%',
|
||||
'4/6': '66.666667%',
|
||||
'5/6': '83.333333%',
|
||||
'1/12': '8.333333%',
|
||||
'2/12': '16.666667%',
|
||||
'3/12': '25%',
|
||||
'4/12': '33.333333%',
|
||||
'5/12': '41.666667%',
|
||||
'6/12': '50%',
|
||||
'7/12': '58.333333%',
|
||||
'8/12': '66.666667%',
|
||||
'9/12': '75%',
|
||||
'10/12': '83.333333%',
|
||||
'11/12': '91.666667%',
|
||||
full: '100%',
|
||||
screen: '100vw',
|
||||
}),
|
||||
extend: {
|
||||
spacing: {
|
||||
'44': '11rem'
|
||||
},
|
||||
width: {
|
||||
'31percent': '31%',
|
||||
}
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
textColor: ['responsive', 'hover', 'focus', 'group-hover']
|
||||
},
|
||||
corePlugins: {},
|
||||
plugins: [],
|
||||
plugins: [
|
||||
require('@tailwindcss/ui')
|
||||
],
|
||||
}
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<%= form_for @conn, "/login", [class: "w-full max-w-md mx-auto bg-white shadow-md rounded px-8 py-6 mt-8"], fn f -> %>
|
||||
<h1 class="text-xl font-black"><%= get_flash(@conn, :login_title) || "Enter your email and password" %></h1>
|
||||
<%= if get_flash(@conn, :login_instructions) do %>
|
||||
<p class="text-gray-600 text-sm mt-1 mb-2"><%= get_flash(@conn, :login_instructions) %></p>
|
||||
<p class="text-gray-500 text-sm mt-1 mb-2"><%= get_flash(@conn, :login_instructions) %></p>
|
||||
<% end %>
|
||||
<%= if @conn.assigns[:error] do %>
|
||||
<div class="text-red-500 text-xs italic mt-4"><%= @conn.assigns[:error] %></div>
|
||||
<% end %>
|
||||
<div class="my-4 mt-8">
|
||||
<%= label f, :email, class: "block text-gray-700 text-sm font-bold mb-2" %>
|
||||
<%= email_input f, :email, class: "bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "user@example.com" %>
|
||||
<%= email_input f, :email, class: "bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "user@example.com" %>
|
||||
</div>
|
||||
<div class="my-4">
|
||||
<%= label f, :password, class: "block text-gray-700 text-sm font-bold mb-2" %>
|
||||
<%= password_input f, :password, class: "transition bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300" %>
|
||||
<%= password_input f, :password, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300" %>
|
||||
<p class="text-gray-600 text-xs my-2">Forgot password? <a href="/password/request-reset" class="underline text-gray-800">Click here</a> to reset it.</p>
|
||||
</div>
|
||||
<%= submit "Login →", class: "button mt-4 w-full" %>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<h2 class="text-xl font-black">Set your password</h2>
|
||||
<div class="my-4">
|
||||
<p class="text-gray-600 text-sm mt-1 mb-2">Min 6 characters</p>
|
||||
<%= password_input f, :password, class: "transition bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300" %>
|
||||
<%= password_input f, :password, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300" %>
|
||||
<%= if @conn.assigns[:changeset] do %>
|
||||
<%= error_tag @changeset, :password %>
|
||||
<% end %>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<h2 class="text-xl font-black">Reset your password</h2>
|
||||
<div class="my-4">
|
||||
<p class="text-gray-600 text-sm mt-1 mb-2">Min 6 characters</p>
|
||||
<%= password_input f, :password, class: "transition bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300" %>
|
||||
<%= password_input f, :password, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300" %>
|
||||
<%= if @conn.assigns[:changeset] do %>
|
||||
<%= error_tag @changeset, :password %>
|
||||
<% end %>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<h1 class="text-xl font-black">Reset your password</h1>
|
||||
<div class="mt-4">Enter your email so we can send a password reset link</div>
|
||||
<div class="my-4 mt-8">
|
||||
<%= email_input f, :email, class: "transition bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "user@example.com" %>
|
||||
<%= email_input f, :email, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "user@example.com" %>
|
||||
</div>
|
||||
<%= if @conn.assigns[:error] do %>
|
||||
<div class="text-red-500 text-xs italic my-2"><%= @conn.assigns[:error] %></div>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
We have sent an email with password reset instructions to <b><%= @email %></b> if it exists in our database.
|
||||
</div>
|
||||
<div class="mt-8 text-sm">
|
||||
Didn't recieve an email?
|
||||
Didn't receive an email?
|
||||
</div>
|
||||
<div class="mt-2 text-sm text-gray-600 leading-tight">
|
||||
Please check your spam folder and contact <a href="mailto:uku@plausible.io">uku@plausible.io</a> if the problem persists
|
||||
|
||||
@ -8,13 +8,13 @@
|
||||
<h2 class="text-xl font-black">Enter your details</h2>
|
||||
<div class="my-4">
|
||||
<%= label f, :name, "Full name", class: "block text-gray-700 text-sm font-bold mb-2" %>
|
||||
<%= text_input f, :name, class: "transition bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "Jane Doe" %>
|
||||
<%= text_input f, :name, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "Jane Doe" %>
|
||||
<%= error_tag f, :name %>
|
||||
</div>
|
||||
<div class="my-4">
|
||||
<%= label f, :email, class: "block text-gray-700 text-sm font-bold mb-2" %>
|
||||
<p class="text-gray-600 text-xs mt-1 mb-2">No spam, guaranteed.</p>
|
||||
<%= email_input f, :email, class: "transition bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "example@email.com" %>
|
||||
<%= email_input f, :email, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "example@email.com" %>
|
||||
<%= error_tag f, :email %>
|
||||
</div>
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="mt-4 border-b border-gray-400"></div>
|
||||
|
||||
<div class="flex flex-col items-center sm:flex-row sm:items-start justify-between mt-8">
|
||||
<div class="text-center bg-gray-200 py-4 px-2 rounded h-32 my-4" style="width: 11.75rem;">
|
||||
<div class="text-center bg-gray-100 py-4 px-2 rounded h-32 my-4" style="width: 11.75rem;">
|
||||
<h4 class="font-black">Current plan</h4>
|
||||
<%= if @subscription do %>
|
||||
<div class="text-xl py-2 font-medium"><%= subscription_name(@subscription) %></div>
|
||||
@ -14,7 +14,7 @@
|
||||
<%= link("Upgrade", to: "/billing/upgrade", class: "text-sm text-indigo-500 font-medium") %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="text-center bg-gray-200 py-4 px-2 rounded h-32 my-4" style="width: 11.75rem;">
|
||||
<div class="text-center bg-gray-100 py-4 px-2 rounded h-32 my-4" style="width: 11.75rem;">
|
||||
<h4 class="font-black">Next bill amount</h4>
|
||||
<%= if @subscription do %>
|
||||
<div class="text-xl py-2 font-medium">$<%= @subscription.next_bill_amount %></div>
|
||||
@ -25,7 +25,7 @@
|
||||
<div class="text-xl py-2 font-medium">$0</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="text-center bg-gray-200 py-4 px-2 rounded h-32 my-4" style="width: 11.75rem;">
|
||||
<div class="text-center bg-gray-100 py-4 px-2 rounded h-32 my-4" style="width: 11.75rem;">
|
||||
<h4 class="font-black">Next bill date</h4>
|
||||
|
||||
<%= if @subscription && @subscription.next_bill_date do %>
|
||||
@ -58,12 +58,12 @@
|
||||
<%= form_for @changeset, "/settings", [class: "max-w-sm"], fn f -> %>
|
||||
<div class="my-4">
|
||||
<%= label f, :name, class: "block text-gray-700 text-sm font-bold mb-2" %>
|
||||
<%= text_input f, :name, class: "transition bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:border-gray-300" %>
|
||||
<%= text_input f, :name, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:border-gray-300" %>
|
||||
<%= error_tag f, :name %>
|
||||
</div>
|
||||
<div class="my-4">
|
||||
<%= label f, :email, class: "block text-gray-700 text-sm font-bold mb-2" %>
|
||||
<%= email_input f, :email, class: "transition bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:border-gray-300" %>
|
||||
<%= email_input f, :email, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:border-gray-300" %>
|
||||
<%= error_tag f, :email %>
|
||||
</div>
|
||||
<%= submit "Save changes", class: "button mt-4" %>
|
||||
@ -80,7 +80,7 @@
|
||||
<p>Deleting your account removes all sites and stats you've collected</p>
|
||||
|
||||
<%= if @subscription && @subscription.status == "active" do %>
|
||||
<span class="button bg-gray-500 mt-6 hover:shadow-none">Delete my account</span>
|
||||
<span class="button bg-gray-300 mt-6 hover:shadow-none">Delete my account</span>
|
||||
<p class="text-gray-600 text-sm mt-2">Your account cannot be deleted because you have an active subscription. If you want to delete your account, please cancel your subscription first.</p>
|
||||
<% else %>
|
||||
<%= link "Delete my account ", to: "/me", method: :delete, class: "button bg-red-600 mt-6", data: [confirm: "Deleting your account cannot be reversed. Are you sure?"] %>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.3/flatpickr.min.css">
|
||||
<%= render("_tracking.html", assigns) %>
|
||||
</head>
|
||||
<body class="flex flex-col h-full bg-gray-100">
|
||||
<body class="flex flex-col h-full bg-gray-50">
|
||||
<%= render("_svg_icons.html") %>
|
||||
<nav class="container flex items-center justify-between flex-wrap py-8">
|
||||
<div class="flex items-center flex-shrink-0">
|
||||
@ -38,9 +38,9 @@
|
||||
<svg style="height: 18px; transform: translateY(2px); fill: #606f7b;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 640" enable-background="new 0 0 512 512" xml:space="preserve"><g><circle cx="256" cy="52.8" r="50.8"/><circle cx="256" cy="256" r="50.8"/><circle cx="256" cy="459.2" r="50.8"/></g></svg>
|
||||
</div>
|
||||
|
||||
<div data-dropdown style="top: 42px; right: 0px; width: 185px;" class="dropdown-content hidden absolute right-0 bg-white border border-gray-400 rounded shadow-md z-10">
|
||||
<%= link("Settings", to: "/settings", class: "block py-2 px-2 border-b border-gray-400 hover:bg-gray-200") %>
|
||||
<%= link("Log out", to: "/logout", method: :post, class: "block py-2 px-2 hover:bg-gray-200") %>
|
||||
<div data-dropdown style="top: 42px; right: 0px; width: 185px;" class="dropdown-content hidden absolute right-0 bg-white border border-gray-300 rounded shadow-md z-10">
|
||||
<%= link("Settings", to: "/settings", class: "block py-2 px-2 border-b border-gray-300 hover:bg-gray-100") %>
|
||||
<%= link("Log out", to: "/logout", method: :post, class: "block py-2 px-2 hover:bg-gray-100") %>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@ -48,8 +48,12 @@
|
||||
<% true -> %>
|
||||
<ul class="flex">
|
||||
<li>
|
||||
<%= link("Login", to: "/login", class: "font-bold rounded py-2 px-3 hover:bg-gray-200", style: "line-height: 33px;") %>
|
||||
<%= link("Start free trial", to: "/register", class: "button button-md hidden sm:inline") %>
|
||||
<div class="inline-flex rounded">
|
||||
<%= link("Login", to: "/login", class: "inline-flex items-center justify-center px-5 py-2 border border-transparent text-base leading-6 font-medium rounded-md hover:bg-gray-200 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out") %>
|
||||
</div>
|
||||
<div class="inline-flex rounded shadow ml-3">
|
||||
<%= link("Start free trial", to: "/register", class: "inline-flex items-center justify-center px-5 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out") %>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<% end %>
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
<%= form_for @conn, "/contact", [class: "bg-white shadow-md rounded px-8 py-6 mb-4 mt-16"], fn f -> %>
|
||||
<h1 class="text-xl font-black">Contact us</h1>
|
||||
<p class="text-gray-600 mt-2">Please get in touch with any questions and thoughts, we'll get back to you as soon as possible!</p>
|
||||
<%= textarea f, :text, rows: 4, class: "transition bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300 text-xs mt-4" %>
|
||||
<%= textarea f, :text, rows: 4, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300 text-xs mt-4" %>
|
||||
<%= if @conn.assigns[:current_user] do %>
|
||||
<%= hidden_input f, :email, value: @conn.assigns[:current_user].email %>
|
||||
<% else %>
|
||||
<div class="my-4">
|
||||
<%= label f, :email, "Your email (optional)", class: "block text-gray-700 text-sm font-bold mb-2" %>
|
||||
<%= email_input f, :email, class: "transition bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "example@email.com" %>
|
||||
<%= email_input f, :email, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "example@email.com" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= submit "Send", class: "button mt-4 w-full" %>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -7,10 +7,10 @@
|
||||
<div class="overflow-hidden bg-white rounded max-w-xl w-full shadow-md leading-normal">
|
||||
<%= for site <- @sites do %>
|
||||
<div class="w-full relative">
|
||||
<a href="/<%= URI.encode_www_form(site.domain) %>" class="block hover:bg-gray-200 group p-4 border-b no-underline flex justify-between transition">
|
||||
<a href="/<%= URI.encode_www_form(site.domain) %>" class="block hover:bg-gray-100 group p-4 border-b no-underline flex justify-between transition">
|
||||
<p class="w-full font-bold text-lg mb-1 text-gray-800"><%= site.domain %></p>
|
||||
</a>
|
||||
<%= link(to: "/#{URI.encode_www_form(site.domain)}/settings", class: "flex absolute hover:bg-gray-200 transition rounded py-2 px-5", style: "top: 12px; right: 6px;") do %>
|
||||
<%= link(to: "/#{URI.encode_www_form(site.domain)}/settings", class: "flex absolute hover:bg-gray-100 transition rounded py-2 px-5", style: "top: 12px; right: 6px;") do %>
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings -mt-px"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||||
</div>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
</p>
|
||||
|
||||
<div class="relative">
|
||||
<%= textarea f, :domain, id: "snippet_code", class: "transition overflow-hidden bg-gray-200 appearance-none border border-transparent rounded w-full p-2 pr-6 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300 text-xs mt-4 resize-none", value: snippet(@site), rows: 2, readonly: "readonly" %>
|
||||
<%= textarea f, :domain, id: "snippet_code", class: "transition overflow-hidden bg-gray-100 appearance-none border border-transparent rounded w-full p-2 pr-6 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300 text-xs mt-4 resize-none", value: snippet(@site), rows: 2, readonly: "readonly" %>
|
||||
<a onclick="var textarea = document.getElementById('snippet_code'); textarea.focus(); textarea.select(); document.execCommand('copy');" href="javascript:void(0)" class="no-underline text-indigo-500 text-sm hover:underline">
|
||||
<svg class="absolute text-indigo-500" style="top: 24px; right: 12px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
||||
</a>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="my-6">
|
||||
<%= label f, :domain, class: "block text-gray-700 text-sm font-bold" %>
|
||||
<p class="text-gray-600 text-xs mt-1 mb-2">Just the naked domain without <code>www</code> or <code>https://</code></p>
|
||||
<%= text_input f, :domain, class: "transition bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-400", placeholder: "example.com" %>
|
||||
<%= text_input f, :domain, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-400", placeholder: "example.com" %>
|
||||
<%= error_tag f, :domain %>
|
||||
</div>
|
||||
<div class="my-6">
|
||||
@ -11,7 +11,7 @@
|
||||
<p class="text-gray-600 text-xs mt-1 mb-2">To make sure we agree on what 'today' means</p>
|
||||
|
||||
<div class="inline-block relative w-full">
|
||||
<%= select f, :timezone, Plausible.Timezones.options(), id: "tz-select", selected: "Etc/Greenwich", class: "block appearance-none w-full bg-gray-200 text-gray-700 cursor-pointer hover:border-gray-500 p-2 pr-8 rounded leading-normal focus:outline-none" %>
|
||||
<%= select f, :timezone, Plausible.Timezones.options(), id: "tz-select", selected: "Etc/Greenwich", class: "block appearance-none w-full bg-gray-100 text-gray-700 cursor-pointer hover:border-gray-500 p-2 pr-8 rounded leading-normal focus:outline-none" %>
|
||||
<div class="pointer-events-none absolute top-0 right-0 flex items-center px-2 text-red">
|
||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</div>
|
||||
<div class="my-4">
|
||||
<%= label f, :domain, class: "block text-sm font-bold" %>
|
||||
<%= text_input f, :domain, class: "transition mt-3 bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "stats.[yourdomain].com" %>
|
||||
<%= text_input f, :domain, class: "transition mt-3 bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "stats.[yourdomain].com" %>
|
||||
<%= error_tag f, :domain %>
|
||||
</div>
|
||||
|
||||
|
||||
@ -2,18 +2,18 @@
|
||||
<h2 class="text-xl font-black">Add goal for <%= @site.domain %></h2>
|
||||
<div class="mt-6 text-sm font-bold">Goal trigger</div>
|
||||
<div class="my-3 w-full flex rounded border border-gray-300">
|
||||
<div class="w-1/2 text-center py-2 border-r border-gray-400 shadow-inner font-bold bg-gray-200 cursor-pointer" id="pageview-tab">Pageview</div>
|
||||
<div class="w-1/2 text-center py-2 bg-gray-200 cursor-pointer" id="event-tab">Custom event</div>
|
||||
<div class="w-1/2 text-center py-2 border-r border-gray-300 shadow-inner font-bold bg-gray-100 cursor-pointer" id="pageview-tab">Pageview</div>
|
||||
<div class="w-1/2 text-center py-2 bg-gray-100 cursor-pointer" id="event-tab">Custom event</div>
|
||||
</div>
|
||||
<div class="my-6">
|
||||
<div id="pageview-fields">
|
||||
<%= label f, :page_path, class: "block text-sm font-bold" %>
|
||||
<%= text_input f, :page_path, class: "transition mt-3 bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "/success" %>
|
||||
<%= text_input f, :page_path, class: "transition mt-3 bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "/success" %>
|
||||
<%= error_tag f, :page_path %>
|
||||
</div>
|
||||
<div id="event-fields" class="hidden">
|
||||
<%= label f, :event_name, class: "block text-sm font-bold" %>
|
||||
<%= text_input f, :event_name, class: "transition mt-3 bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "Signup" %>
|
||||
<%= text_input f, :event_name, class: "transition mt-3 bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "Signup" %>
|
||||
<%= error_tag f, :event_name %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</div>
|
||||
<div class="my-6">
|
||||
<%= label f, :password, "Password (optional)", class: "block text-sm font-bold" %>
|
||||
<%= password_input f, :password, class: "transition mt-3 bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300" %>
|
||||
<%= password_input f, :password, class: "transition mt-3 bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300" %>
|
||||
<%= error_tag f, :password %>
|
||||
</div>
|
||||
|
||||
|
||||
@ -12,13 +12,13 @@
|
||||
<%= form_for @changeset, "/#{URI.encode_www_form(@site.domain)}/settings", [class: "max-w-xs"], fn f -> %>
|
||||
<div class="my-4">
|
||||
<%= label f, :domain, class: "block text-gray-700 text-sm font-bold mb-2" %>
|
||||
<%= text_input f, :domain, class: "transition bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:border-gray-300 ", disabled: "disabled" %>
|
||||
<%= text_input f, :domain, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:border-gray-300 ", disabled: "disabled" %>
|
||||
<%= error_tag f, :domain %>
|
||||
</div>
|
||||
<div class="my-4">
|
||||
<%= label f, :timezone, "Reporting Timezone", class: "block text-gray-700 text-sm font-bold mb-2" %>
|
||||
<div class="inline-block relative w-full">
|
||||
<%= select f, :timezone, Plausible.Timezones.options(), class: "block appearance-none w-full bg-gray-200 text-gray-700 cursor-pointer hover:border-gray-500 p-2 pr-8 rounded leading-normal focus:outline-none" %>
|
||||
<%= select f, :timezone, Plausible.Timezones.options(), class: "block appearance-none w-full bg-gray-100 text-gray-700 cursor-pointer hover:border-gray-500 p-2 pr-8 rounded leading-normal focus:outline-none" %>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-pink-500">
|
||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
|
||||
</div>
|
||||
@ -35,7 +35,7 @@
|
||||
<%= if @site.public do %>
|
||||
Stats for <%= @site.domain %> are currently <b>public</b>. Anyone with the following link can view the stats:
|
||||
<div class="relative text-sm mt-4">
|
||||
<input type="text" id="public-link" value="https://plausible.io/<%= URI.encode_www_form(@site.domain) %>" class="transition bg-gray-200 appearance-none border border-transparent rounded w-full p-2 pr-16 text-gray-700 appearance-none focus:outline-none" />
|
||||
<input type="text" id="public-link" value="https://plausible.io/<%= URI.encode_www_form(@site.domain) %>" class="transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 pr-16 text-gray-700 appearance-none focus:outline-none" />
|
||||
<a onclick="var input = document.getElementById('public-link'); input.focus(); input.select(); document.execCommand('copy');" href="javascript:void(0)" class="absolute right-0 text-indigo-700 font-bold p-2">
|
||||
<svg class="feather-sm"><use xlink:href="#feather-copy" /></svg>
|
||||
</a>
|
||||
@ -61,11 +61,11 @@
|
||||
|
||||
<%= for link <- @shared_links do %>
|
||||
<div class="flex relative w-full mt-2 text-sm">
|
||||
<input type="text" id="<%= link.slug %>" readonly="readonly" value="<%= shared_link_dest(link) %>" class="transition bg-gray-200 appearance-none border border-transparent rounded rounded-r-none w-full p-2 text-gray-700 appearance-none focus:outline-none focus:border-gray-300" />
|
||||
<button onclick="var input = document.getElementById('<%= link.slug %>'); input.focus(); input.select(); document.execCommand('copy');" href="javascript:void(0)" class="py-2 px-4 bg-gray-200 text-indigo-800 rounded-none border-r border-gray-300">
|
||||
<input type="text" id="<%= link.slug %>" readonly="readonly" value="<%= shared_link_dest(link) %>" class="transition bg-gray-100 appearance-none border border-transparent rounded rounded-r-none w-full p-2 text-gray-700 appearance-none focus:outline-none focus:border-gray-300" />
|
||||
<button onclick="var input = document.getElementById('<%= link.slug %>'); input.focus(); input.select(); document.execCommand('copy');" href="javascript:void(0)" class="py-2 px-4 bg-gray-100 text-indigo-800 rounded-none border-r border-gray-300">
|
||||
<svg class="feather-sm"><use xlink:href="#feather-copy" /></svg>
|
||||
</button>
|
||||
<%= button(to: "/sites/#{URI.encode_www_form(@site.domain)}/shared-links/#{link.slug}", method: :delete, class: "py-2 px-4 bg-gray-200 text-red-600 rounded-l-none", data: [confirm: "Are you sure you want to delete this shared link? The stats will not be accessible with this link anymore."]) do %>
|
||||
<%= button(to: "/sites/#{URI.encode_www_form(@site.domain)}/shared-links/#{link.slug}", method: :delete, class: "py-2 px-4 bg-gray-100 text-red-600 rounded-l-none", data: [confirm: "Are you sure you want to delete this shared link? The stats will not be accessible with this link anymore."]) do %>
|
||||
<svg class="feather-sm"><use xlink:href="#feather-trash-2" /></svg>
|
||||
<% end %>
|
||||
</div>
|
||||
@ -119,7 +119,7 @@
|
||||
<%= form_for Plausible.Site.GoogleAuth.changeset(@site.google_auth), "/#{URI.encode_www_form(@site.domain)}/settings/google", [class: "max-w-xs"], fn f -> %>
|
||||
<div class="my-6">
|
||||
<div class="inline-block relative w-full">
|
||||
<%= select f, :property, @search_console_domains, prompt: "(Choose property)", class: "block appearance-none w-full bg-gray-200 text-gray-700 cursor-pointer hover:border-gray-500 p-2 pr-8 rounded leading-normal focus:outline-none" %>
|
||||
<%= select f, :property, @search_console_domains, prompt: "(Choose property)", class: "block appearance-none w-full bg-gray-100 text-gray-700 cursor-pointer hover:border-gray-500 p-2 pr-8 rounded leading-normal focus:outline-none" %>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-pink-500">
|
||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
|
||||
</div>
|
||||
@ -158,14 +158,14 @@
|
||||
<div class="text-sm text-gray-700 mt-6">
|
||||
<h4 class="font-bold my-2">Weekly report recipients</h4>
|
||||
<%= for recipient <- @weekly_report.recipients do %>
|
||||
<div class="p-2 flex justify-between bg-gray-200 rounded my-2 max-w-md">
|
||||
<div class="p-2 flex justify-between bg-gray-100 rounded my-2 max-w-md">
|
||||
<span><svg class="feather mr-1"><use xlink:href="#feather-mail" /></svg><%= recipient %></span>
|
||||
<%= button("❌", to: "/sites/#{URI.encode_www_form(@site.domain)}/weekly-report/recipients/#{recipient}", method: :delete) %>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= form_for @conn, "/sites/#{URI.encode_www_form(@site.domain)}/weekly-report/recipients", fn f -> %>
|
||||
<div class="flex justify-between my-2 max-w-md">
|
||||
<%= email_input f, :recipient, class: "transition bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:border-gray-300", style: "flex-grow: 2", placeholder: "recipient@example.com" %>
|
||||
<%= email_input f, :recipient, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:border-gray-300", style: "flex-grow: 2", placeholder: "recipient@example.com" %>
|
||||
<%= submit "Add recipient", class: "button rounded-l-none whitespace-no-wrap" %>
|
||||
</div>
|
||||
<% end %>
|
||||
@ -188,14 +188,14 @@
|
||||
<div class="text-sm text-gray-700 mt-6">
|
||||
<h4 class="font-bold my-2">Monthly report recipients</h4>
|
||||
<%= for recipient <- @monthly_report.recipients do %>
|
||||
<div class="p-2 flex justify-between bg-gray-200 rounded my-2 max-w-md">
|
||||
<div class="p-2 flex justify-between bg-gray-100 rounded my-2 max-w-md">
|
||||
<span><svg class="feather mr-1"><use xlink:href="#feather-mail" /></svg><%= recipient %></span>
|
||||
<%= button("❌", to: "/sites/#{URI.encode_www_form(@site.domain)}/monthly-report/recipients/#{recipient}", method: :delete) %>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= form_for @conn, "/sites/#{URI.encode_www_form(@site.domain)}/monthly-report/recipients", fn f -> %>
|
||||
<div class="flex justify-between my-2 max-w-md">
|
||||
<%= email_input f, :recipient, class: "transition bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:border-gray-300", style: "flex-grow: 2", placeholder: "recipient@example.com" %>
|
||||
<%= email_input f, :recipient, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:border-gray-300", style: "flex-grow: 2", placeholder: "recipient@example.com" %>
|
||||
<%= submit "Add recipient", class: "button rounded-l-none whitespace-no-wrap" %>
|
||||
</div>
|
||||
<% end %>
|
||||
@ -222,7 +222,7 @@
|
||||
<div class="my-4">
|
||||
<p>Include this snippet in the <code><head></code> of your website.</p>
|
||||
<div class="relative">
|
||||
<%= textarea f, :domain, id: "snippet_code", class: "transition overflow-hidden bg-gray-200 appearance-none border border-transparent rounded w-full p-2 pr-6 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300 text-xs mt-2 resize-none", value: snippet(@site), rows: 2 %>
|
||||
<%= textarea f, :domain, id: "snippet_code", class: "transition overflow-hidden bg-gray-100 appearance-none border border-transparent rounded w-full p-2 pr-6 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300 text-xs mt-2 resize-none", value: snippet(@site), rows: 2 %>
|
||||
<a onclick="var textarea = document.getElementById('snippet_code'); textarea.focus(); textarea.select(); document.execCommand('copy');" href="javascript:void(0)" class="no-underline text-indigo-500 text-sm hover:underline">
|
||||
<svg class="absolute text-indigo-500" style="top: 24px; right: 12px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
||||
</a>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<p>Paste this snippet in the <code><head></code> of your website.</p>
|
||||
|
||||
<div class="relative">
|
||||
<%= textarea f, :domain, id: "snippet_code", class: "transition overflow-hidden bg-gray-200 appearance-none border border-transparent rounded w-full p-2 pr-6 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-400 text-xs mt-4 resize-none", value: snippet(@site), rows: 2, readonly: "readonly" %>
|
||||
<%= textarea f, :domain, id: "snippet_code", class: "transition overflow-hidden bg-gray-100 appearance-none border border-transparent rounded w-full p-2 pr-6 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-400 text-xs mt-4 resize-none", value: snippet(@site), rows: 2, readonly: "readonly" %>
|
||||
<a onclick="var textarea = document.getElementById('snippet_code'); textarea.focus(); textarea.select(); document.execCommand('copy');" href="javascript:void(0)" class="no-underline text-indigo-500 text-sm hover:underline">
|
||||
<svg class="absolute text-indigo-500" style="top: 24px; right: 12px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
||||
</a>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
<div class="my-6">
|
||||
<%= label f, :password, "Password", class: "block text-sm font-bold" %>
|
||||
<%= password_input f, :password, class: "transition mt-3 bg-gray-200 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300" %>
|
||||
<%= password_input f, :password, class: "transition mt-3 bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300" %>
|
||||
|
||||
<%= if @conn.assigns[:error] do %>
|
||||
<div class="text-red-500 text-xs italic mt-4"><%= @conn.assigns[:error] %></div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user