File size: 8,828 Bytes
5d020ff
 
 
 
 
 
 
 
 
 
 
 
 
54dc3b7
 
 
5d020ff
 
 
 
 
 
54dc3b7
 
 
5d020ff
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54dc3b7
5d020ff
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54dc3b7
 
 
 
 
 
5d020ff
54dc3b7
 
 
 
 
 
5d020ff
54dc3b7
 
5d020ff
54dc3b7
 
5d020ff
54dc3b7
 
 
 
 
 
 
 
 
5d020ff
54dc3b7
 
5d020ff
54dc3b7
 
 
 
 
 
 
 
 
5d020ff
54dc3b7
 
5d020ff
 
 
54dc3b7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5d020ff
54dc3b7
5d020ff
54dc3b7
 
 
 
 
 
 
5d020ff
54dc3b7
5d020ff
54dc3b7
5d020ff
54dc3b7
 
 
 
 
5d020ff
54dc3b7
5d020ff
54dc3b7
5d020ff
 
 
 
54dc3b7
 
5d020ff
 
 
 
 
 
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Graphical Abstract - Pickering Emulsions with Andiroba Oil</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
        
        body {
            font-family: 'Roboto', sans-serif;
            height: 100vh;
            padding: 0;
            margin: 0;
        }
        
        .graphical-abstract {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            height: calc(100vh - 2rem);
            display: flex;
            flex-direction: column;
        }
        
        .flow-step {
            position: relative;
        }
        
        .flow-step:not(:last-child):after {
            content: "";
            position: absolute;
            right: -30px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background-color: #3b82f6;
            clip-path: polygon(0 50%, 100% 0, 100% 100%);
        }
        
        .image-placeholder {
            background-color: #f3f4f6;
            border: 2px dashed #9ca3af;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;
            font-size: 0.75rem;
        }
        
        .emulsion-visualization {
            background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
            border-radius: 8px;
            box-shadow: inset 0 0 15px rgba(0,0,0,0.05);
        }
        
        .rheometer {
            background: linear-gradient(145deg, #e5e7eb, #f3f4f6);
            border-radius: 50%;
            box-shadow: 5px 5px 15px rgba(0,0,0,0.1), 
                        -5px -5px 15px rgba(255,255,255,0.8);
        }
    </style>
</head>
<body class="p-4">
    <div class="graphical-abstract mx-auto w-full max-w-6xl">
        <div class="p-4">
            <h1 class="text-2xl font-bold text-center text-gray-800">Graphical Abstract</h1>
            <h2 class="text-lg text-center text-gray-600">Stable Pickering Emulsions with Amazonian Andiroba Oil</h2>
        </div>
        
        <!-- Flowchart section -->
        <div class="flex flex-col md:flex-row justify-between items-center px-4 py-2 flex-grow">
            <!-- Oil characterization -->
            <div class="flow-step w-full md:w-1/4 p-4 bg-white rounded-lg shadow-md text-center h-full flex flex-col">
                <div class="bg-amber-100 text-amber-800 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-oil-can text-xl"></i>
                </div>
                <h3 class="font-bold text-gray-800 mb-1">Andiroba Oil</h3>
                <p class="text-xs text-gray-600 mb-2">Rich in bioactive compounds with therapeutic properties</p>
                
                <div class="image-placeholder w-full flex-grow mt-2">
                    [FTIR/TG analysis]
                </div>
            </div>
            
            <!-- Veegum characterization -->
            <div class="flow-step w-full md:w-1/4 p-4 bg-white rounded-lg shadow-md text-center h-full flex flex-col mt-4 md:mt-0">
                <div class="bg-blue-100 text-blue-800 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-atom text-xl"></i>
                </div>
                <h3 class="font-bold text-gray-800 mb-1">Veegum® Stabilizer</h3>
                <p class="text-xs text-gray-600 mb-2">Magnesium aluminum silicate particles</p>
                
                <div class="image-placeholder w-full flex-grow mt-2">
                    [Particle characterization]
                </div>
            </div>
            
            <!-- Emulsion formation -->
            <div class="flow-step w-full md:w-1/4 p-4 bg-white rounded-lg shadow-md text-center h-full flex flex-col mt-4 md:mt-0">
                <div class="bg-green-100 text-green-800 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-flask text-xl"></i>
                </div>
                <h3 class="font-bold text-gray-800 mb-1">Emulsion Design</h3>
                <p class="text-xs text-gray-600 mb-2">Optimized through experimental design</p>
                
                <div class="image-placeholder w-full flex-grow mt-2">
                    [Microscopy image]
                </div>
            </div>
            
            <!-- Rheology -->
            <div class="flow-step w-full md:w-1/4 p-4 bg-white rounded-lg shadow-md text-center h-full flex flex-col mt-4 md:mt-0">
                <div class="bg-purple-100 text-purple-800 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-tachometer-alt text-xl"></i>
                </div>
                <h3 class="font-bold text-gray-800 mb-1">Stability Analysis</h3>
                <p class="text-xs text-gray-600 mb-2">Excellent physical stability</p>
                
                <div class="image-placeholder w-full flex-grow mt-2">
                    [Rheology data]
                </div>
            </div>
        </div>
        
        <!-- Key findings section -->
        <div class="bg-white rounded-lg shadow-md p-4 mx-4 mb-4">
            <h3 class="font-bold text-lg text-gray-800 mb-2 text-center">Key Findings</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-amber-50 p-3 rounded-lg">
                    <div class="flex items-center mb-1">
                        <div class="bg-amber-100 text-amber-800 w-8 h-8 rounded-full flex items-center justify-center mr-2">
                            <i class="fas fa-chart-line text-sm"></i>
                        </div>
                        <h4 class="font-semibold text-gray-800 text-sm">Optimized Formulation</h4>
                    </div>
                    <p class="text-xs text-gray-600">14% Veegum® with 3.2% Andiroba oil showed superior stability</p>
                </div>
                
                <div class="bg-blue-50 p-3 rounded-lg">
                    <div class="flex items-center mb-1">
                        <div class="bg-blue-100 text-blue-800 w-8 h-8 rounded-full flex items-center justify-center mr-2">
                            <i class="fas fa-shield-alt text-sm"></i>
                        </div>
                        <h4 class="font-semibold text-gray-800 text-sm">Enhanced Stability</h4>
                    </div>
                    <p class="text-xs text-gray-600">Solid particles prevent coalescence effectively</p>
                </div>
                
                <div class="bg-green-50 p-3 rounded-lg">
                    <div class="flex items-center mb-1">
                        <div class="bg-green-100 text-green-800 w-8 h-8 rounded-full flex items-center justify-center mr-2">
                            <i class="fas fa-spa text-sm"></i>
                        </div>
                        <h4 class="font-semibold text-gray-800 text-sm">Therapeutic Potential</h4>
                    </div>
                    <p class="text-xs text-gray-600">Preserved bioactive compounds for dermatological applications</p>
                </div>
            </div>
        </div>
        
        <!-- Footer -->
        <div class="text-center text-xs text-gray-500 p-2">
            <p>Taynara R.A Xavier et al. | Laboratory of Pharmaceutical and Cosmetic R&D, Federal University of Pará, Brazil</p>
            <p class="mt-1">ACS Journal Submission - Pickering Emulsions with Andiroba Oil</p>
        </div>
    </div>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=diasfernanda15/grafico-acs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>