Skip to content

主题开发规范

Jump to bottom
Goby edited this page Nov 11, 2021 · 3 revisions

Name
 Variable Scenes to be used
Main color Main
Brand color： Global use of the website; used for: page module background color/clickable or partly brightened text/button/line selected state
1.Background (color)
  • Startup page background
  • Scan results page:
    • Main navigation bar background
    • Upper right side: background colors of 4 modules (Asset, Active IP, Port, Vulnerability)
    • Middle right: The background color of the pie chart (Hardware, Software)
  • Report page , Preview page:
    • Task Information Module: Data statistics background color
    • Asset analysis module: Pie chart color
    • Preview page: Cover background
    • Menu expand displayed at the top of the background color
  • IP details page: IP banner (Port:Protocol , application name)
  • Function option: New Scan button+Sub-tabs of this tab
  • Version update pop-up: Top title bar
  • IP address library: Navigation bar
2.Button
  • Current page number
  • Scan button
  • Report page
    • Option menu on the right catalog
    • Edit button (For example: Edit the report name, Edit the task name)
  • Search button hovered (For example: the search button at the top left of the Extensions tab)
  • Confirm button / Start (scan) button/ Save button / Custom Scan Configuration(Advanced)button / Port Info / Note info display / Error info display
  • IP details page:
    • IP banner links
    • Add the certificate
    • Feedback
  • Scan Configuration Custom Port drop-down (Before that, you need to add the port list through Port Combination): Custom Port List - Edit+Delete
  • Web finder：
    • Export button
    • Website screenshot icon + link icon
  • Application license: Copy
  • List of vulnerabilities: Vulnerability name filter
  • IP Lib Tab: Start button + layout style (For example: Force-oriented layout, Circular layout, Radial layout etc) + Update button + Download button
  • Error log - Update、Later、Repair、Install
3.Text
  • Clickable part - Back (to the previous page)
  • Clickable part - Asset Tab : All Assets
  • Clickable part - Asset Tab: Tab to switch to select color text and underline (For example: Support System, Network Device, Sofware System)
  • Clickable part - Scan Tab : Historical Task hovered
  • The part that can be highlighted - Acknowledgements name in the About Goby page (For example: (Beta 1.7.186) @q1n9:Identify the version of products)
  • Clickable part - Scan configuration page : Advanced collapse (For example:Vulnerability (The scope of POC), Order (Asests First)(Simultaneously), Task name)
  • Clickable part - Apply/Import license
  • Vulnerability Update - vulnerability name
4.Get the line of the form after the mouse focus:
  • Search box form
  • New frame form/Settings form/Customize POC (For example: Title, Query Rule, Level)/Customize dict/Apply for license form
Font color primaryFont
PrimaryFont： : For heavyweight text information in the Goby GUI.
1.Text
  • Headline: Startup page (For example : Welcome to Goby) / Vulnerability Tab (For example : Vulnerability) / Headline on the right side of all pages / Report statistics page : Report name (For example : 20210919084510) / License: User Name / Company name
  • Subtitle: Scanning result page: Title of each module (For example: Summary, Risk Analysis, Asset Analysis) / Title of all forms / Vulnerability management: Name of histogram in the upper left corner (For example: IP, Port, Asset, Protocol) / Title of prompt box / Report page: Secondary title / List of vulnerabilities / Title of error log
  • List: IP list, Product list, Vendor list / Vulnerability list / Universal POC list / Brute force cracking list / IP pop-up list / Asset pop-up list / Port pop-up list / IP list: Port list + Protocol list + ( more ) ip list + Custom port list / Web Finder: IP list + Port list / Historical task pop-up window: IP and port list + vulnerability list + session list / Vulnerability upgrade: update content list
  • Page turning: Page number / clickable translation arrow
  • Input text: Enter text in the input box selected in the page search result page / All forms input text
  • Drop-down list: search drop-down / drop-down list of all form options
  • Subject content of all tables
  • Details: Vulnerability details page - introduction details / About Goby details page (For example: A big Thank You! the following folks that helped to make Goby even better)
  • Content: Apply for a license - Content
2.Button
  • Historical Tasks: Delete Button
Font Color secondaryFont
secondaryFont： Used for general text information in the Goby GUI and title text color.
1.Text
  • Start page: subtitle (For exmaple: Attack surface mapping) / IP segment to the right of the scan button / Historical time / Header text color of part of the table
  • List: Scanning result page - Content list of each module / Scan history tasks / Assets - Asset list on the left / Vulnerability: Brute force + General poc list on the left / Settings page - Assert list on the left / The statistics of each asset after the asset list is opened Vulnerability management: IP list expansion / Vulnerability list / Web Finder - server and name list / White list, Black list
  • Title of statistics: Asset List - Bar Chart Name in the Lower Left Corner / Vulnerability Management - Pie Chart Name in the Lower Left Corner / Settings Page - Assets, Vulnerabilities, Port Names
  • Drop-down default: the default text of all form drop-down options
  • Details page: Banner details and certificate details / Port pop-up details / Prompt box details / Report page - Detailed text, Statistics-related text, List text / Dialog page: expiration time text / Stimulus button text in the pop-up window
  • Asset List: Product-Product Name
  • tab: Add POC - Tab selected and default text / Dialog page: Tab selected and default text
  • Error log: time display
Font Color level3Font
level3Font Used to assist secondary text information in the interface.
1.Text
  • Title: Top page title of all pages / About Goby page title / Vulnerability upgrade: Update information
  • All tab switching unselected text: (Asset list / Add POC)
  • Page turning: text / default non-clickable arrow
  • Prompt text: Search prompt text / Component - no component text by default / Default font color in the form
  • Statistical text: Scanning result page - Statistical text of each module content / Product - Statistical name / Manufacturer - Statistical name / List of assets: Assets, Vulnerabilities, Ports, IP statistical text, Asset statistics on the left, Lower left corner histogram statistics text, Vulnerabilities list - histogram statistics and andproportion text in the upper left corner, IP details page top statistics / Web Finder: Port and IP statistics
  • Vulnerability page: Brute force cracking + General poc graying list
  • license：MID
2.Button
  • Scanning history task: Historical task - gray operation button (export, report, delete) / Universal poc and brute force cracking list cannot be clicked / Pop-up close button hoverd / Scan button
Border color primaryBorder
primaryBorder： Primary border color: the default color of the form border
Border color secondaryBorder
secondaryBorder： Secondary border color: the color of the form border after it is selected
Other Color PrimaryBackground
PrimaryBackground： Primary background color: the overall background color of the page
Other Color Secondarybackground
Secondarybackground： Secondary background color: content module background color
Other Color Level3background
Level3background： Three-level background color: pop-up window, drop-down background color
Other Color Level4background
Level4background： Four-level background color: the color of the drop-down option background after being hovered / the background color of the statistical graph / the color of the tab table header
Other Color navBackground
Navigation bar background color
Other Color navFont
The color of the text in the left navigation bar
Other Color navHoverFont
The color of the text in the left navigation bar after being selected
Other Color scanResTopMainFont
The color of the large text in the top 4 small navigation modules on the right on Goby GUI
Other Color scanResTopSubFont
The color of the small text in the top 4 small navigation modules on the right on Goby GUI
Other Color scanResTopIcon
The color of the 4 small navigation module icons on the top right side
Other Color navOtherFont
The color of the text in the lower left corner and upper left corner of the left navigation
Other Color PrimaryIcon The color of the module's decorative icons
Other Color chartColors The background color of various statistical graphs
Other Color navSelectBackground The color of the navigation after being hovered

theme.png

Clone this wiki locally