diff --git a/index.html b/index.html new file mode 100644 index 0000000..4f5f362 --- /dev/null +++ b/index.html @@ -0,0 +1,118 @@ + + + + + + + HE Technology Page + + + + + + +
+
+ +
+

PTFI

+

Privacy Technologies For Financial Intelligence

+
+
+
+ + + + + +
+ + +
+
+

Suspect Matching List

+
+
+ +
+ + + +
+
+
+ + +
+
+ + +
+
+ +
+
+
+
+ + +
+
+

Result:

+
+ +
+
+ + +
+
+

Generate CSV Data

+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+
+
+ + + +
+ + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..7e03a64 --- /dev/null +++ b/style.css @@ -0,0 +1,179 @@ +/* Global Styles */ +body { + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; + color: #333; +} + +/* Header Section */ +header { + background-color: #0A1F44; + /* Dark blue color */ + padding: 30px 0; + /* Adjust padding for top and bottom */ + border-bottom: 1px solid #ccc; + display: flex; + align-items: center; + justify-content: space-between; + /* Ensure content is spaced between the left and right */ +} + +.header-container { + display: flex; + align-items: center; + width: 100%; + max-width: 1200px; + margin: 0 auto; +} + +.logo { + max-width: 200px; + /* Size of the logo */ + margin-right: 20px; + /* Space between logo and text */ +} + +.header-text { + text-align: center; + width: 100%; + /* Allow text to be centered within the remaining space */ + color: white; +} + +.header-text h1 { + margin: 0; + font-size: 2.5em; + /* Larger font size for "PTFI" */ + font-weight: bold; + letter-spacing: 1px; +} + +.header-text p { + margin: 5px 0 0 0; + font-size: 1.2em; + /* Smaller font size for the tagline */ + letter-spacing: 0.5px; +} + + +/* Navigation Bar */ +.main-nav { + background-color: #333; + text-align: center; + padding: 10px; + border-bottom: 1px solid #ccc; +} + +.main-nav a { + color: white; + padding: 10px 20px; + text-decoration: none; + display: inline-block; +} + +.main-nav a:hover { + background-color: #555; +} + +/* Form Section */ +.form-section { + margin: 20px auto; + max-width: 600px; + /* Centered and with a max width */ +} + +/* Form Box */ +.form-box { + background-color: #f9f9f9; + /* Light grey background for the boxes */ + padding: 30px; + /* Increased padding for better spacing */ + border: 1px solid #ddd; + border-radius: 10px; + margin-bottom: 20px; + /* Margin between boxes */ + box-sizing: border-box; +} + +/* Form Group */ +.form-group { + margin-bottom: 20px; +} + +.form-group label { + font-weight: bold; + display: block; + margin-bottom: 10px; +} + +.options { + margin-bottom: 20px; +} + +.options label { + margin-right: 15px; +} + +.match-button, +.save-button, +.generate-button { + padding: 10px 20px; + background-color: #333; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 1em; + margin-top: 20px; + margin-bottom: 20px; + /* Add space below the buttons */ +} + +.match-button:hover, +.save-button:hover, +.generate-button:hover { + background-color: #555; +} + +/* Result Section */ +.result-display { + background-color: #eee; + padding: 20px; + margin: 20px 0; + border-radius: 5px; + min-height: 100px; + border: 1px solid #ccc; +} + +/* Footer Section */ +footer { + background-color: #333; + color: white; + text-align: center; + padding: 20px 0; + border-top: 1px solid #ccc; +} + +/* Social Media Icons */ +.social-media { + margin-top: 20px; +} + +.social-media a { + margin: 0 10px; + display: inline-block; +} + +.social-icon { + width: 30px; + /* Adjust size as needed */ + height: 30px; + transition: transform 0.3s ease; +} + +.social-icon:hover { + transform: scale(1.2); + /* Slightly enlarge the icon on hover */ +} \ No newline at end of file