hackAI/Main.html at main · pmekala01/hackAI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>resAI</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="popup.js" defer></script>
    <style>
        /* Button CSS */
        #filter-btn {
            box-sizing: border-box;
            position: absolute;
            top: 16px;
            right: 16px;
            width: 196px;
            height: 62px;
            background: #465362;
            border: 1px solid #000000;
            border-radius: 30px;
            color: #FFFFFF;
            font-size: 18px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        /* Bubble CSS */
        .bubble-container {
            position: relative;
            width: 587px;
            height: 80px;
            margin-top: 24px;
            background-color: #FFFFFF;
            border: 1px solid #E0E0E0;
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 16px;
            font-family: 'Spartan', sans-serif;
            font-size: 16px;
            line-height: 30px;
            color: #120101;
        }

        .bubble-title {
            position: absolute;
            top: 16px;
            left: 16px;
            width: 587px;
            height: 30px;
            background-color: #465362;
            color: #FFFFFF;
            font-family: 'Space Mono', monospace;
            font-size: 20px;
            font-weight: 700;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .icon {
            position: absolute;
            height: 50%;
            right: 20px;
        }

        .icon img {
             height: 50%;
             display: inline-block;
        }

        .bubble-caption {
            position: absolute;
            top: 52px;
            left: 16px;
            right: 16px;
            bottom: 16px;
            overflow: auto;
            text-overflow: clip;
            white-space: nowrap;
        }
    </style>
</head>
<body style="min-width:300px;">
    <button id="filter-btn">FILTERS</button>
    <div class="bubble-container">
        <div class="bubble-title">Title 1</div>
        <div class="icon">
            <img src="picture.png" alt="H">
            <img src="picture2.png" alt="G">
        </div>
        <div class="bubble-caption">
            This is a sample caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod ligula in augue hendrerit, sed cursus sapien bibendum. Donec non eros eget sapien molestie sollicitudin at ac nisi. Pellentesque in ligula vel nibh elementum semper.
            <span class="bubble-read-more">Read more</span>
        </div>
    </div>
    <div class="bubble-container">
        <div class="bubble-title">Title 2</div>
        <div class="icon">
            <img src="picture.png" alt="H">
            <img src="picture2.png" alt="G">
        </div>
        <div class="bubble-caption">
            This is another sample caption. Duis laoreet diam a diam bibendum imperdiet. Aliquam eget tristique nulla. Vivamus eu ultricies velit. Nunc a neque vel nisi pharetra faucibus. Morbi non arcu sapien. Ph
            <span class="bubble-read-more">Read more</span>
        </div>
    </div>
    <div class="bubble-container">
        <div class="bubble-title">Title 3</div>
        <div class="icon">
            <img src="picture.png" alt="H">
            <img src="picture2.png" alt="G">
        </div>
        <div class="bubble-caption">
            This is another sample caption. Duis laoreet diam a diam bibendum imperdiet. Aliquam eget tristique nulla. Vivamus eu ultricies velit. Nunc a neque vel nisi pharetra faucibus. Morbi non arcu sapien. Ph
        </div>
    </div>
</body>
</html>