mirror of
https://github.com/OneUptime/oneuptime
synced 2024-11-21 22:59:07 +00:00
add tailwind
This commit is contained in:
Simon Larsen
parent
3171d0589e
commit
73f082a364
@ -1,58 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta charSet='utf-8' />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<meta name="slack-app-id" content="ACVBMTPJQ">
|
||||
<meta name="description" content="This is the login page for OneUptime Dashboard">
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Web site created using create-react-app" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta charSet='utf-8' />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<meta name="slack-app-id" content="ACVBMTPJQ">
|
||||
<meta name="description" content="This is the login page for OneUptime Dashboard">
|
||||
|
||||
|
||||
<!-- Google Tag Manager -->
|
||||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','GTM-PKQD5WH');</script>
|
||||
<!-- Google Tag Manager -->
|
||||
<script>(function (w, d, s, l, i) {
|
||||
w[l] = w[l] || []; w[l].push({
|
||||
'gtm.start':
|
||||
new Date().getTime(), event: 'gtm.js'
|
||||
}); var f = d.getElementsByTagName(s)[0],
|
||||
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
|
||||
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
|
||||
})(window, document, 'script', 'dataLayer', 'GTM-PKQD5WH');</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
|
||||
<link rel="manifest" href="/accounts/assets/img/favicons/ma">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/accounts/assets/img/favicons/apple-touch-icon.png">
|
||||
<link rel="shortcut icon" href="/accounts/assets/img/favicons/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/accounts/assets/img/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="194x194" href="/accounts/assets/img/favicons/favicon-194x194.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/accounts/assets/img/favicons/android-chrome-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/accounts/assets/img/favicons/favicon-16x16.png">
|
||||
<link rel="mask-icon" href="/accounts/assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#121212">
|
||||
<meta name="msapplication-TileImage" content="/accounts/assets/img/favicons/mstile-144x144.png">
|
||||
<meta name="theme-color" content="#121212">
|
||||
<script src="/accounts/env.js"></script>
|
||||
<link rel="manifest" href="/accounts/assets/img/favicons/ma">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/accounts/assets/img/favicons/apple-touch-icon.png">
|
||||
<link rel="shortcut icon" href="/accounts/assets/img/favicons/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/accounts/assets/img/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="194x194" href="/accounts/assets/img/favicons/favicon-194x194.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/accounts/assets/img/favicons/android-chrome-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/accounts/assets/img/favicons/favicon-16x16.png">
|
||||
<link rel="mask-icon" href="/accounts/assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#121212">
|
||||
<meta name="msapplication-TileImage" content="/accounts/assets/img/favicons/mstile-144x144.png">
|
||||
<meta name="theme-color" content="#121212">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
<script src="/accounts/env.js"></script>
|
||||
|
||||
|
||||
<title>OneUptime Accounts</title>
|
||||
<title>OneUptime Accounts</title>
|
||||
|
||||
|
||||
<!-- Preload light, regular, medium and bold, which are fonts that are used on home -->
|
||||
<link rel="preload" href="/accounts/assets/fonts/camphor/font1.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/accounts/assets/fonts/camphor/font2.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/accounts/assets/fonts/camphor/font3.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/accounts/assets/fonts/camphor/font4.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<!-- Preload light, regular, medium and bold, which are fonts that are used on home -->
|
||||
<link rel="preload" href="/accounts/assets/fonts/camphor/font1.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/accounts/assets/fonts/camphor/font2.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/accounts/assets/fonts/camphor/font3.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/accounts/assets/fonts/camphor/font4.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
|
||||
|
||||
<!--
|
||||
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<!--
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
@ -61,16 +64,17 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>OneUptime | Account</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PKQD5WH"
|
||||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<title>OneUptime | Account</title>
|
||||
</head>
|
||||
|
||||
<body class="h-full bg-gray-50">
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PKQD5WH" height="0" width="0"
|
||||
style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
@ -80,6 +84,18 @@
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
<script src="/accounts/dist/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<script src="/accounts/dist/bundle.js"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#000000'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
969
CommonUI/package-lock.json
generated
969
CommonUI/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,23 +1,213 @@
|
||||
import React, { FunctionComponent, ReactElement } from 'react';
|
||||
import { Disclosure, Menu, Transition } from '@headlessui/react'
|
||||
import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
|
||||
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
|
||||
|
||||
export interface ComponentProps {
|
||||
leftComponents?: undefined | Array<ReactElement> | ReactElement;
|
||||
rightComponents?: undefined | Array<ReactElement> | ReactElement;
|
||||
}
|
||||
// export interface ComponentProps {
|
||||
// leftComponents?: undefined | Array<ReactElement> | ReactElement;
|
||||
// rightComponents?: undefined | Array<ReactElement> | ReactElement;
|
||||
// }
|
||||
|
||||
const Header: FunctionComponent<ComponentProps> = (
|
||||
props: ComponentProps
|
||||
): ReactElement => {
|
||||
// const Header: FunctionComponent<ComponentProps> = (
|
||||
// props: ComponentProps
|
||||
// ): ReactElement => {
|
||||
// return (
|
||||
// <React.Fragment>
|
||||
// <header id="page-topbar">
|
||||
// <div className="navbar-header">
|
||||
// <div className="d-flex">{props.leftComponents}</div>
|
||||
// <div className="d-flex">{props.rightComponents}</div>
|
||||
// </div>
|
||||
// </header>
|
||||
// </React.Fragment>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default Header;
|
||||
|
||||
|
||||
const user = {
|
||||
name: 'Tom Cook',
|
||||
email: 'tom@example.com',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||
}
|
||||
const navigation = [
|
||||
{ name: 'Dashboard', href: '#', current: true },
|
||||
{ name: 'Team', href: '#', current: false },
|
||||
{ name: 'Projects', href: '#', current: false },
|
||||
{ name: 'Calendar', href: '#', current: false },
|
||||
]
|
||||
const userNavigation = [
|
||||
{ name: 'Your Profile', href: '#' },
|
||||
{ name: 'Settings', href: '#' },
|
||||
{ name: 'Sign out', href: '#' },
|
||||
]
|
||||
|
||||
function classNames(...classes) {
|
||||
return classes.filter(Boolean).join(' ')
|
||||
}
|
||||
|
||||
export default function Example() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<header id="page-topbar">
|
||||
<div className="navbar-header">
|
||||
<div className="d-flex">{props.leftComponents}</div>
|
||||
<div className="d-flex">{props.rightComponents}</div>
|
||||
<Disclosure as="header" className="bg-white shadow">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="mx-auto max-w-7xl px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:px-8">
|
||||
<div className="relative flex h-16 justify-between">
|
||||
<div className="relative z-10 flex px-2 lg:px-0">
|
||||
<div className="flex flex-shrink-0 items-center">
|
||||
<img
|
||||
className="block h-8 w-auto"
|
||||
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt="Your Company"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
<div className="relative z-0 flex flex-1 items-center justify-center px-2 sm:absolute sm:inset-0">
|
||||
<div className="w-full sm:max-w-xs">
|
||||
<label htmlFor="search" className="sr-only">
|
||||
Search
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<MagnifyingGlassIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
</div>
|
||||
<input
|
||||
id="search"
|
||||
name="search"
|
||||
className="block w-full rounded-md border border-gray-300 bg-white py-2 pl-10 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
|
||||
placeholder="Search"
|
||||
type="search"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative z-10 flex items-center lg:hidden">
|
||||
{/* Mobile menu button */}
|
||||
<Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
|
||||
<span className="sr-only">Open menu</span>
|
||||
{open ? (
|
||||
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
|
||||
) : (
|
||||
<Bars3Icon className="block h-6 w-6" aria-hidden="true" />
|
||||
)}
|
||||
</Disclosure.Button>
|
||||
</div>
|
||||
<div className="hidden lg:relative lg:z-10 lg:ml-4 lg:flex lg:items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
<span className="sr-only">View notifications</span>
|
||||
<BellIcon className="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
{/* Profile dropdown */}
|
||||
<Menu as="div" className="relative ml-4 flex-shrink-0">
|
||||
<div>
|
||||
<Menu.Button className="flex rounded-full bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
|
||||
<span className="sr-only">Open user menu</span>
|
||||
<img className="h-8 w-8 rounded-full" src={user.imageUrl} alt="" />
|
||||
</Menu.Button>
|
||||
</div>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
{userNavigation.map((item) => (
|
||||
<Menu.Item key={item.name}>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href={item.href}
|
||||
className={classNames(
|
||||
active ? 'bg-gray-100' : '',
|
||||
'block py-2 px-4 text-sm text-gray-700'
|
||||
)}
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="hidden lg:flex lg:space-x-8 lg:py-2" aria-label="Global">
|
||||
{navigation.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={classNames(
|
||||
item.current ? 'bg-gray-100 text-gray-900' : 'text-gray-900 hover:bg-gray-50 hover:text-gray-900',
|
||||
'rounded-md py-2 px-3 inline-flex items-center text-sm font-medium'
|
||||
)}
|
||||
aria-current={item.current ? 'page' : undefined}
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<Disclosure.Panel as="nav" className="lg:hidden" aria-label="Global">
|
||||
<div className="space-y-1 px-2 pt-2 pb-3">
|
||||
{navigation.map((item) => (
|
||||
<Disclosure.Button
|
||||
key={item.name}
|
||||
as="a"
|
||||
href={item.href}
|
||||
className={classNames(
|
||||
item.current ? 'bg-gray-100 text-gray-900' : 'text-gray-900 hover:bg-gray-50 hover:text-gray-900',
|
||||
'block rounded-md py-2 px-3 text-base font-medium'
|
||||
)}
|
||||
aria-current={item.current ? 'page' : undefined}
|
||||
>
|
||||
{item.name}
|
||||
</Disclosure.Button>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-t border-gray-200 pt-4 pb-3">
|
||||
<div className="flex items-center px-4">
|
||||
<div className="flex-shrink-0">
|
||||
<img className="h-10 w-10 rounded-full" src={user.imageUrl} alt="" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<div className="text-base font-medium text-gray-800">{user.name}</div>
|
||||
<div className="text-sm font-medium text-gray-500">{user.email}</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
|
||||
>
|
||||
<span className="sr-only">View notifications</span>
|
||||
<BellIcon className="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-3 space-y-1 px-2">
|
||||
{userNavigation.map((item) => (
|
||||
<Disclosure.Button
|
||||
key={item.name}
|
||||
as="a"
|
||||
href={item.href}
|
||||
className="block rounded-md py-2 px-3 text-base font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-900"
|
||||
>
|
||||
{item.name}
|
||||
</Disclosure.Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
)
|
||||
}
|
||||
|
||||
1
CommonUI/src/Images/logos/OneUptimeSVG/3-transparent.svg
Normal file
1
CommonUI/src/Images/logos/OneUptimeSVG/3-transparent.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
62739
Dashboard/package-lock.json
generated
62739
Dashboard/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -3,6 +3,8 @@
|
||||
"version": "0.1.0",
|
||||
"private": false,
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.7.7",
|
||||
"@heroicons/react": "^2.0.13",
|
||||
"@stripe/react-stripe-js": "^1.15.0",
|
||||
"@stripe/stripe-js": "^1.44.1",
|
||||
"Common": "file:../Common",
|
||||
|
||||
@ -34,6 +34,8 @@
|
||||
<meta name="msapplication-TileColor" content="#121212">
|
||||
<meta name="msapplication-TileImage" content="/dashboard/assets/img/favicons/mstile-144x144.png">
|
||||
<meta name="theme-color" content="#121212">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
<script src="/dashboard/env.js"></script>
|
||||
|
||||
|
||||
@ -79,5 +81,10 @@
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
<script src="/dashboard/dist/bundle.js"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user