From 254db1ab99fb7e8d5feda3792b3f973ddd36c7dc Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sat, 18 Jan 2020 15:11:29 +0700
Subject: [PATCH] Add watermark pattern

---
 client/constants/Pattern.ts           |   1 +
 client/pages/ExplorePage.tsx          |   1 +
 client/patterns/watermark/Cover.tsx   |  38 ++++++++
 client/patterns/watermark/Details.tsx | 132 ++++++++++++++++++++++++++
 public/sitemap.xml                    |   1 +
 5 files changed, 173 insertions(+)
 create mode 100644 client/patterns/watermark/Cover.tsx
 create mode 100644 client/patterns/watermark/Details.tsx

diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index ca1f16d..4056de7 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -90,6 +90,7 @@ enum Pattern {
     UploadButton = 'Upload button',
     ValidationIcon = 'Validation icon',
     VideoBackground = 'Video background',
+    Watermark = 'Watermark',
     Wizard = 'Wizard',
 }
 
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index db33d99..d534478 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -186,6 +186,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Teardrop} />
                         <CoverCard pattern={Pattern.Timeline} />
                         <CoverCard pattern={Pattern.VideoBackground} />
+                        <CoverCard pattern={Pattern.Watermark} />
                     </div>
                 </section>
 
diff --git a/client/patterns/watermark/Cover.tsx b/client/patterns/watermark/Cover.tsx
new file mode 100644
index 0000000..44abda8
--- /dev/null
+++ b/client/patterns/watermark/Cover.tsx
@@ -0,0 +1,38 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        color: 'rgba(0, 0, 0, 0.3)',
+                        fontWeight: 'bold',
+                        textTransform: 'uppercase',
+                        transform: 'rotate(-45deg)',
+                    }}
+                >
+                    Draft
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/watermark/Details.tsx b/client/patterns/watermark/Details.tsx
new file mode 100644
index 0000000..85a1665
--- /dev/null
+++ b/client/patterns/watermark/Details.tsx
@@ -0,0 +1,132 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Watermark">
+            <Helmet>
+                <meta name="description" content="Create a watermask with CSS" />
+                <meta name="keywords" content="css watermask" />
+            </Helmet>
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    border: '1px solid rgba(0, 0, 0, 0.3)',
+                                    padding: '16px',
+                                    position: 'relative',
+                                    width: '300px',
+                                }}
+                            >
+                                <div
+                                    style={{
+                                        alignItems: 'center',
+                                        display: 'flex',
+                                        height: '100%',
+                                        justifyContent: 'center',
+                                        left: 0,
+                                        position: 'absolute',
+                                        top: 0,
+                                        width: '100%',
+                                    }}
+                                >
+                                    <div
+                                        style={{
+                                            color: 'rgba(0, 0, 0, 0.2)',
+                                            fontSize: '3rem',
+                                            fontWeight: 'bold',
+                                            textTransform: 'uppercase',
+                                            transform: 'rotate(-45deg)',
+                                            userSelect: 'none',
+                                        }}
+                                    >
+                                        Draft
+                                    </div>
+                                </div>
+
+                                <div style={{ marginBottom: '8px' }}>
+                                    <Block numberOfBlocks={20} />
+                                </div>
+
+                                <div style={{ marginBottom: '8px' }}>
+                                    <Block numberOfBlocks={15} />
+                                </div>
+
+                                <div style={{ marginBottom: '8px' }}>
+                                    <Block numberOfBlocks={10} />
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Used to position the watermark */
+    position: relative;
+">
+    <!-- Watermark container -->
+    <div style="
+        /* Center the content */
+        align-items: center;
+        display: flex;
+        justify-content: center;
+
+        /* Absolute position */
+        left: 0px;
+        position: absolute;
+        top: 0px;
+
+        /* Take full size */
+        height: 100%;
+        width: 100%;
+    ">
+        <!-- The watermark -->
+        <div style="
+            /* Text color */
+            color: rgba(0, 0, 0, 0.2);
+
+            /* Text styles */
+            font-size: 3rem;
+            font-weight: bold;
+            text-transform: uppercase;
+
+            /* Rotate the text */
+            transform: rotate(-45deg);
+
+            /* Disable the selection */
+            user-select: none;
+        ">
+            Draft
+        </div>
+    </div>
+
+    <!-- Other content -->
+    ...
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/public/sitemap.xml b/public/sitemap.xml
index e04d9a7..92a7f08 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -86,5 +86,6 @@
     <url><loc>https://csslayout.io/patterns/upload-button</loc></url>
     <url><loc>https://csslayout.io/patterns/validation-icon</loc></url>
     <url><loc>https://csslayout.io/patterns/video-background</loc></url>
+    <url><loc>https://csslayout.io/patterns/watermark</loc></url>
     <url><loc>https://csslayout.io/patterns/wizard</loc></url>
 </urlset>
\ No newline at end of file