Settings Menu Roblox GUI Template with Volume & Toggle Options

1--[[
2    Settings Menu - Client Side
3    A settings panel with volume sliders, toggles, and clean UIListLayout
4    Features: Animated sliders, toggle switches, tab navigation, auto-save
5]]
6
7-- Services
8local Players = game:GetService("Players")
9local TweenService = game:GetService("TweenService")
10local ReplicatedStorage = game:GetService("ReplicatedStorage")
11local SoundService = game:GetService("SoundService")
12local UserInputService = game:GetService("UserInputService")
13local RunService = game:GetService("RunService")
14local Lighting = game:GetService("Lighting")
15
16local player = Players.LocalPlayer
17local playerGui = player:WaitForChild("PlayerGui")
18
19-- Constants
20local SETTINGS_SIZE = UDim2.new(0, 560, 0, 480)
21local SETTINGS_POSITION = UDim2.new(0.5, -280, 0.5, -240)
22local SLIDER_WIDTH = 220
23local SLIDER_HEIGHT = 8
24local KNOB_SIZE = 20
25local TOGGLE_WIDTH = 50
26local TOGGLE_HEIGHT = 26
27local TWEEN_DURATION = 0.25
28local SECTION_PADDING = 16
29
30-- Colors
31local COLOR_BG = Color3.fromRGB(25, 25, 35)
32local COLOR_HEADER = Color3.fromRGB(35, 38, 50)
33local COLOR_ACCENT = Color3.fromRGB(100, 150, 255)
34local COLOR_ACCENT_HOVER = Color3.fromRGB(120, 170, 255)
35local COLOR_TEXT_PRIMARY = Color3.fromRGB(255, 255, 255)
36local COLOR_TEXT_SECONDARY = Color3.fromRGB(160, 165, 180)
37local COLOR_TEXT_MUTED = Color3.fromRGB(100, 105, 120)
38local COLOR_ROW_BG = Color3.fromRGB(35, 38, 50)
39local COLOR_ROW_HOVER = Color3.fromRGB(45, 48, 62)
40local COLOR_SLIDER_BG = Color3.fromRGB(50, 52, 65)
41local COLOR_SLIDER_FILL = Color3.fromRGB(100, 150, 255)
42local COLOR_TOGGLE_OFF = Color3.fromRGB(60, 62, 75)
43local COLOR_TOGGLE_ON = Color3.fromRGB(100, 150, 255)
44local COLOR_TAB_ACTIVE = Color3.fromRGB(100, 150, 255)
45local COLOR_TAB_INACTIVE = Color3.fromRGB(60, 65, 80)
46local COLOR_SAVE = Color3.fromRGB(50, 180, 80)
47local COLOR_RESET = Color3.fromRGB(180, 80, 60)
48
49-- Tween presets
50local tweenInfoStandard = TweenInfo.new(TWEEN_DURATION, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
51local tweenInfoSpring = TweenInfo.new(TWEEN_DURATION * 1.2, Enum.EasingStyle.Back, Enum.EasingDirection.Out)
52local tweenInfoBounce = TweenInfo.new(TWEEN_DURATION, Enum.EasingStyle.Elastic, Enum.EasingDirection.Out)
53
54-- Default settings
55local DEFAULT_SETTINGS = {
56    VolumeMaster = 80,
57    VolumeMusic = 70,
58    VolumeSFX = 85,
59    VolumeVoice = 60,
60    Fullscreen = false,
61    ShowFPS = false,
62    GraphicsQuality = 7,
63    Language = "English",
64    Difficulty = "Normal",
65    ShowTutorial = true,
66    TextSize = 100,
67    ColorblindMode = "None",
68    ReduceMotion = false,
69}
70
71-- Current settings (loaded from defaults or server)
72local currentSettings = {}
73for key, value in pairs(DEFAULT_SETTINGS) do
74    currentSettings[key] = value
75end
76
77-- GUI References
78local settingsGui, settingsFrame, contentContainer, tabContainer
79local sections = {}
80local activeTab = "Audio"
81local isVisible = false
82
83-- Slider drag state
84local draggingSlider = nil
85local sliderConnections = {}
86
87-----------------------------------------------------------
88-- Helper Functions
89-----------------------------------------------------------
90
91local function Create(className, props)
92    local instance = Instance.new(className)
93    for key, value in pairs(props or {}) do
94        instance[key] = value
95    end
96    return instance
97end
98
99local function Tween(instance, properties, tweenInfoOverride)
100    local info = tweenInfoOverride or tweenInfoStandard
101    local tween = TweenService:Create(instance, info, properties)
102    tween:Play()
103    return tween
104end
105
106local function FormatPercentage(value)
107    return tostring(math.floor(value)) .. "%"
108end
109
110-----------------------------------------------------------
111-- UI Construction
112-----------------------------------------------------------
113
114local function BuildUI()
115    -- ScreenGui
116    settingsGui = Create("ScreenGui", {
117        Name = "SettingsGui",
118        ResetOnSpawn = false,
119        ZIndexBehavior = Enum.ZIndexBehavior.Sibling,
120        Parent = playerGui,
121    })
122
123    -- Main Settings Frame
124    settingsFrame = Create("Frame", {
125        Name = "SettingsFrame",
126        Size = SETTINGS_SIZE,
127        Position = UDim2.new(0.5, 0, 0.4, 0),
128        AnchorPoint = Vector2.new(0.5, 0.5),
129        BackgroundColor3 = COLOR_BG,
130        BorderSizePixel = 0,
131        Visible = false,
132        ZIndex = 10,
133        Parent = settingsGui,
134    })
135
136    Create("UICorner", {
137        CornerRadius = UDim.new(0, 14),
138        Parent = settingsFrame,
139    })
140
141    Create("UIGradient", {
142        Color = ColorSequence.new({
143            ColorSequenceKeypoint.new(0, Color3.fromRGB(28, 28, 40)),
144            ColorSequenceKeypoint.new(1, Color3.fromRGB(22, 22, 32)),
145        }),
146        Rotation = 90,
147        Parent = settingsFrame,
148    })
149
150    -- Shadow
151    Create("ImageLabel", {
152        Name = "Shadow",
153        Size = UDim2.new(1, 40, 1, 40),
154        Position = UDim2.new(0, -20, 0, -20),
155        BackgroundTransparency = 1,
156        Image = "rbxassetid://5554236805",
157        ImageColor3 = Color3.fromRGB(0, 0, 0),
158        ImageTransparency = 0.65,
159        ScaleType = Enum.ScaleType.Slice,
160        SliceCenter = Rect.new(23, 23, 277, 277),
161        ZIndex = 9,
162        Parent = settingsFrame,
163    })
164
165    -- Header
166    local headerFrame = Create("Frame", {
167        Name = "HeaderFrame",
168        Size = UDim2.new(1, 0, 0, 60),
169        BackgroundColor3 = COLOR_HEADER,
170        BorderSizePixel = 0,
171        ZIndex = 11,
172        Parent = settingsFrame,
173    })
174
175    Create("UICorner", {
176        CornerRadius = UDim.new(0, 14),
177        Parent = headerFrame,
178    })
179
180    local headerFix = Create("Frame", {
181        Size = UDim2.new(1, 0, 0, 14),
182        Position = UDim2.new(0, 0, 1, -14),
183        BackgroundColor3 = COLOR_HEADER,
184        BorderSizePixel = 0,
185        ZIndex = 11,
186        Parent = headerFrame,
187    })
188
189    Create("TextLabel", {
190        Name = "TitleLabel",
191        Size = UDim2.new(0.5, 0, 0, 30),
192        Position = UDim2.new(0, 20, 0, 10),
193        BackgroundTransparency = 1,
194        Text = "Settings",
195        TextColor3 = COLOR_TEXT_PRIMARY,
196        TextSize = 22,
197        Font = Enum.Font.GothamBold,
198        TextXAlignment = Enum.TextXAlignment.Left,
199        ZIndex = 12,
200        Parent = headerFrame,
201    })
202
203    local closeButton = Create("TextButton", {
204        Name = "CloseButton",
205        Size = UDim2.new(0, 70, 0, 30),
206        Position = UDim2.new(1, -90, 0, 15),
207        BackgroundColor3 = COLOR_ROW_BG,
208        Text = "Close",
209        TextColor3 = COLOR_TEXT_PRIMARY,
210        TextSize = 12,
211        Font = Enum.Font.GothamSemibold,
212        AutoButtonColor = false,
213        ZIndex = 12,
214        Parent = headerFrame,
215    })
216
217    Create("UICorner", {
218        CornerRadius = UDim.new(0, 8),
219        Parent = closeButton,
220    })
221
222    closeButton.MouseEnter:Connect(function()
223        Tween(closeButton, {BackgroundColor3 = COLOR_ROW_HOVER})
224    end)
225    closeButton.MouseLeave:Connect(function()
226        Tween(closeButton, {BackgroundColor3 = COLOR_ROW_BG})
227    end)
228    closeButton.MouseButton1Click:Connect(function()
229        ToggleSettings(false)
230    end)
231
232    -- Tab Container
233    tabContainer = Create("Frame", {
234        Name = "TabContainer",
235        Size = UDim2.new(1, -40, 0, 40),
236        Position = UDim2.new(0, 20, 0, 68),
237        BackgroundTransparency = 1,
238        ZIndex = 11,
239        Parent = settingsFrame,
240    })
241
242    local tabLayout = Create("UIListLayout", {
243        Padding = UDim.new(0, 8),
244        FillDirection = Enum.FillDirection.Horizontal,
245        SortOrder = Enum.SortOrder.LayoutOrder,
246        Parent = tabContainer,
247    })
248
249    -- Content Container
250    contentContainer = Create("Frame", {
251        Name = "ContentContainer",
252        Size = UDim2.new(1, -40, 1, -(60 + 40 + 50)),
253        Position = UDim2.new(0, 20, 0, 112),
254        BackgroundColor3 = COLOR_ROW_BG,
255        BorderSizePixel = 0,
256        ZIndex = 11,
257        Parent = settingsFrame,
258    })
259
260    Create("UICorner", {
261        CornerRadius = UDim.new(0, 10),
262        Parent = contentContainer,
263    })
264
265    -- Footer
266    local footerFrame = Create("Frame", {
267        Name = "FooterFrame",
268        Size = UDim2.new(1, 0, 0, 44),
269        Position = UDim2.new(0, 0, 1, -44),
270        BackgroundColor3 = COLOR_HEADER,
271        BorderSizePixel = 0,
272        ZIndex = 11,
273        Parent = settingsFrame,
274    })
275
276    Create("UICorner", {
277        CornerRadius = UDim.new(0, 14),
278        Parent = footerFrame,
279    })
280
281    local footerFix = Create("Frame", {
282        Size = UDim2.new(1, 0, 0, 14),
283        Position = UDim2.new(0, 0, 0, 0),
284        BackgroundColor3 = COLOR_HEADER,
285        BorderSizePixel = 0,
286        ZIndex = 11,
287        Parent = footerFrame,
288    })
289
290    local resetButton = Create("TextButton", {
291        Name = "ResetButton",
292        Size = UDim2.new(0, 80, 0, 28),
293        Position = UDim2.new(0, 20, 0, 8),
294        BackgroundColor3 = COLOR_RESET,
295        Text = "Reset",
296        TextColor3 = COLOR_TEXT_PRIMARY,
297        TextSize = 12,
298        Font = Enum.Font.GothamSemibold,
299        AutoButtonColor = false,
300        ZIndex = 12,
301        Parent = footerFrame,
302    })
303
304    Create("UICorner", {
305        CornerRadius = UDim.new(0, 6),
306        Parent = resetButton,
307    })
308
309    local saveButton = Create("TextButton", {
310        Name = "SaveButton",
311        Size = UDim2.new(0, 80, 0, 28),
312        Position = UDim2.new(1, -100, 0, 8),
313        BackgroundColor3 = COLOR_SAVE,
314        Text = "Save",
315        TextColor3 = COLOR_TEXT_PRIMARY,
316        TextSize = 12,
317        Font = Enum.Font.GothamSemibold,
318        AutoButtonColor = false,
319        ZIndex = 12,
320        Parent = footerFrame,
321    })
322
323    Create("UICorner", {
324        CornerRadius = UDim.new(0, 6),
325        Parent = saveButton,
326    })
327
328    local statusLabel = Create("TextLabel", {
329        Name = "StatusLabel",
330        Size = UDim2.new(0, 200, 0, 28),
331        Position = UDim2.new(0.5, -100, 0, 8),
332        BackgroundTransparency = 1,
333        Text = "",
334        TextColor3 = COLOR_TEXT_SECONDARY,
335        TextSize = 12,
336        Font = Enum.Font.Gotham,
337        TextXAlignment = Enum.TextXAlignment.Center,
338        ZIndex = 12,
339        Parent = footerFrame,
340    })
341
342    -- Button handlers
343    resetButton.MouseEnter:Connect(function()
344        Tween(resetButton, {BackgroundColor3 = Color3.fromRGB(200, 90, 70)})
345    end)
346    resetButton.MouseLeave:Connect(function()
347        Tween(resetButton, {BackgroundColor3 = COLOR_RESET})
348    end)
349    resetButton.MouseButton1Click:Connect(ResetSettings)
350
351    saveButton.MouseEnter:Connect(function()
352        Tween(saveButton, {BackgroundColor3 = Color3.fromRGB(60, 200, 90)})
353    end)
354    saveButton.MouseLeave:Connect(function()
355        Tween(saveButton, {BackgroundColor3 = COLOR_SAVE})
356    end)
357    saveButton.MouseButton1Click:Connect(SaveSettings)
358
359    -- Settings Open Button
360    local settingsButton = Create("TextButton", {
361        Name = "SettingsButton",
362        Size = UDim2.new(0, 50, 0, 50),
363        Position = UDim2.new(1, -70, 0, 20),
364        BackgroundColor3 = COLOR_HEADER,
365        Text = "S",
366        TextColor3 = COLOR_ACCENT,
367        TextSize = 24,
368        Font = Enum.Font.GothamBold,
369        AutoButtonColor = false,
370        ZIndex = 5,
371        Parent = settingsGui,
372    })
373
374    Create("UICorner", {
375        CornerRadius = UDim.new(1, 0),
376        Parent = settingsButton,
377    })
378
379    settingsButton.MouseEnter:Connect(function()
380        Tween(settingsButton, {BackgroundColor3 = COLOR_ROW_HOVER})
381        Tween(settingsButton, {Size = UDim2.new(0, 54, 0, 54)})
382        settingsButton.Position = UDim2.new(1, -74, 0, 18)
383    end)
384    settingsButton.MouseLeave:Connect(function()
385        Tween(settingsButton, {BackgroundColor3 = COLOR_HEADER})
386        Tween(settingsButton, {Size = UDim2.new(0, 50, 0, 50)})
387        settingsButton.Position = UDim2.new(1, -70, 0, 20)
388    end)
389    settingsButton.MouseButton1Click:Connect(function()
390        ToggleSettings(true)
391    end)
392end
393
394-----------------------------------------------------------
395-- Slider Component
396-----------------------------------------------------------
397
398local function CreateSlider(parent, settingKey, label, min, max, defaultValue)
399    local container = Create("Frame", {
400        Name = settingKey .. "Container",
401        Size = UDim2.new(1, -SECTION_PADDING * 2, 0, 50),
402        BackgroundTransparency = 1,
403        Parent = parent,
404    })
405
406    -- Label
407    local labelText = Create("TextLabel", {
408        Name = "Label",
409        Size = UDim2.new(0, 160, 0, 24),
410        Position = UDim2.new(0, 0, 0, 0),
411        BackgroundTransparency = 1,
412        Text = label,
413        TextColor3 = COLOR_TEXT_PRIMARY,
414        TextSize = 14,
415        Font = Enum.Font.GothamSemibold,
416        TextXAlignment = Enum.TextXAlignment.Left,
417        ZIndex = 13,
418        Parent = container,
419    })
420
421    -- Value label
422    local valueLabel = Create("TextLabel", {
423        Name = "ValueLabel",
424        Size = UDim2.new(0, 50, 0, 24),
425        Position = UDim2.new(1, -50, 0, 0),
426        BackgroundTransparency = 1,
427        Text = FormatPercentage(defaultValue),
428        TextColor3 = COLOR_ACCENT,
429        TextSize = 14,
430        Font = Enum.Font.GothamBold,
431        TextXAlignment = Enum.TextXAlignment.Right,
432        ZIndex = 13,
433        Parent = container,
434    })
435
436    -- Slider background
437    local sliderBg = Create("Frame", {
438        Name = "SliderBackground",
439        Size = UDim2.new(1, 0, 0, SLIDER_HEIGHT),
440        Position = UDim2.new(0, 0, 0, 30),
441        BackgroundColor3 = COLOR_SLIDER_BG,
442        BorderSizePixel = 0,
443        ZIndex = 13,
444        Parent = container,
445    })
446
447    Create("UICorner", {
448        CornerRadius = UDim.new(0, 4),
449        Parent = sliderBg,
450    })
451
452    -- Slider fill
453    local sliderFill = Create("Frame", {
454        Name = "SliderFill",
455        Size = UDim2.new((defaultValue - min) / (max - min), 0, 1, 0),
456        BackgroundColor3 = COLOR_SLIDER_FILL,
457        BorderSizePixel = 0,
458        ZIndex = 14,
459        Parent = sliderBg,
460    })
461
462    Create("UICorner", {
463        CornerRadius = UDim.new(0, 4),
464        Parent = sliderFill,
465    })
466
467    -- Slider knob
468    local knob = Create("Frame", {
469        Name = "Knob",
470        Size = UDim2.new(0, KNOB_SIZE, 0, KNOB_SIZE),
471        Position = UDim2.new((defaultValue - min) / (max - min), -KNOB_SIZE/2, 0.5, -KNOB_SIZE/2),
472        AnchorPoint = Vector2.new(0, 0),
473        BackgroundColor3 = COLOR_TEXT_PRIMARY,
474        BorderSizePixel = 0,
475        ZIndex = 15,
476        Parent = sliderBg,
477    })
478
479    Create("UICorner", {
480        CornerRadius = UDim.new(1, 0),
481        Parent = knob,
482    })
483
484    -- Knob glow
485    local knobGlow = Create("UIStroke", {
486        Color = COLOR_ACCENT,
487        Thickness = 2,
488        Transparency = 0.5,
489        Parent = knob,
490    })
491
492    -- Interactivity
493    local isDragging = false
494
495    local function UpdateSlider(input)
496        local sliderPos = sliderBg.AbsolutePosition.X
497        local sliderWidth = sliderBg.AbsoluteSize.X
498        local inputX = input.Position.X
499
500        local percent = math.clamp((inputX - sliderPos) / sliderWidth, 0, 1)
501        local value = min + (percent * (max - min))
502
503        -- Update visual
504        sliderFill.Size = UDim2.new(percent, 0, 1, 0)
505        knob.Position = UDim2.new(percent, -KNOB_SIZE/2, 0.5, -KNOB_SIZE/2)
506        valueLabel.Text = FormatPercentage(value)
507
508        -- Update setting
509        currentSettings[settingKey] = value
510
511        -- Apply live
512        ApplySetting(settingKey, value)
513
514        return value
515    end
516
517    sliderBg.InputBegan:Connect(function(input)
518        if input.UserInputType == Enum.UserInputType.MouseButton1 or
519           input.UserInputType == Enum.UserInputType.Touch then
520            isDragging = true
521            draggingSlider = settingKey
522            UpdateSlider(input)
523            -- Enlarge knob
524            Tween(knob, {Size = UDim2.new(0, 26, 0, 26)})
525            Tween(knobGlow, {Thickness = 3, Transparency = 0.2})
526        end
527    end)
528
529    knob.InputBegan:Connect(function(input)
530        if input.UserInputType == Enum.UserInputType.MouseButton1 or
531           input.UserInputType == Enum.UserInputType.Touch then
532            isDragging = true
533            draggingSlider = settingKey
534            Tween(knob, {Size = UDim2.new(0, 26, 0, 26)})
535            Tween(knobGlow, {Thickness = 3, Transparency = 0.2})
536        end
537    end)
538
539    -- Store slider reference for global input handling
540    sliderConnections[settingKey] = {
541        Update = UpdateSlider,
542        Knob = knob,
543        KnobGlow = knobGlow,
544    }
545
546    return container
547end
548
549-----------------------------------------------------------
550-- Toggle Component
551-----------------------------------------------------------
552
553local function CreateToggle(parent, settingKey, label, defaultValue)
554    local container = Create("Frame", {
555        Name = settingKey .. "Container",
556        Size = UDim2.new(1, -SECTION_PADDING * 2, 0, 44),
557        BackgroundTransparency = 1,
558        Parent = parent,
559    })
560
561    -- Label
562    Create("TextLabel", {
563        Name = "Label",
564        Size = UDim2.new(0, 200, 1, 0),
565        BackgroundTransparency = 1,
566        Text = label,
567        TextColor3 = COLOR_TEXT_PRIMARY,
568        TextSize = 14,
569        Font = Enum.Font.GothamSemibold,
570        TextXAlignment = Enum.TextXAlignment.Left,
571        ZIndex = 13,
572        Parent = container,
573    })
574
575    -- Toggle background
576    local toggleBg = Create("TextButton", {
577        Name = "ToggleBackground",
578        Size = UDim2.new(0, TOGGLE_WIDTH, 0, TOGGLE_HEIGHT),
579        Position = UDim2.new(1, -TOGGLE_WIDTH, 0.5, -TOGGLE_HEIGHT/2),
580        BackgroundColor3 = defaultValue and COLOR_TOGGLE_ON or COLOR_TOGGLE_OFF,
581        Text = "",
582        AutoButtonColor = false,
583        ZIndex = 13,
584        Parent = container,
585    })
586
587    Create("UICorner", {
588        CornerRadius = UDim.new(0, TOGGLE_HEIGHT/2),
589        Parent = toggleBg,
590    })
591
592    -- Toggle knob
593    local toggleKnob = Create("Frame", {
594        Name = "ToggleKnob",
595        Size = UDim2.new(0, TOGGLE_HEIGHT - 4, 0, TOGGLE_HEIGHT - 4),
596        Position = defaultValue and UDim2.new(1, -(TOGGLE_HEIGHT - 2), 0.5, -(TOGGLE_HEIGHT - 4)/2)
597                               or UDim2.new(0, 2, 0.5, -(TOGGLE_HEIGHT - 4)/2),
598        BackgroundColor3 = COLOR_TEXT_PRIMARY,
599        BorderSizePixel = 0,
600        ZIndex = 14,
601        Parent = toggleBg,
602    })
603
604    Create("UICorner", {
605        CornerRadius = UDim.new(1, 0),
606        Parent = toggleKnob,
607    })
608
609    -- State label
610    local stateLabel = Create("TextLabel", {
611        Name = "StateLabel",
612        Size = UDim2.new(0, 60, 0, 20),
613        Position = UDim2.new(1, -TOGGLE_WIDTH - 65, 0.5, -10),
614        BackgroundTransparency = 1,
615        Text = defaultValue and "ON" or "OFF",
616        TextColor3 = defaultValue and COLOR_TOGGLE_ON or COLOR_TEXT_MUTED,
617        TextSize = 12,
618        Font = Enum.Font.GothamBold,
619        TextXAlignment = Enum.TextXAlignment.Right,
620        ZIndex = 13,
621        Parent = container,
622    })
623
624    -- Toggle click handler
625    toggleBg.MouseButton1Click:Connect(function()
626        local newValue = not currentSettings[settingKey]
627        currentSettings[settingKey] = newValue
628
629        -- Animate toggle
630        if newValue then
631            Tween(toggleBg, {BackgroundColor3 = COLOR_TOGGLE_ON})
632            Tween(toggleKnob, {
633                Position = UDim2.new(1, -(TOGGLE_HEIGHT - 2), 0.5, -(TOGGLE_HEIGHT - 4)/2)
634            })
635            stateLabel.Text = "ON"
636            Tween(stateLabel, {TextColor3 = COLOR_TOGGLE_ON})
637        else
638            Tween(toggleBg, {BackgroundColor3 = COLOR_TOGGLE_OFF})
639            Tween(toggleKnob, {
640                Position = UDim2.new(0, 2, 0.5, -(TOGGLE_HEIGHT - 4)/2)
641            })
642            stateLabel.Text = "OFF"
643            Tween(stateLabel, {TextColor3 = COLOR_TEXT_MUTED})
644        end
645
646        ApplySetting(settingKey, newValue)
647    end)
648
649    toggleBg.MouseEnter:Connect(function()
650        Tween(toggleBg, {BackgroundTransparency = 0.1})
651    end)
652    toggleBg.MouseLeave:Connect(function()
653        Tween(toggleBg, {BackgroundTransparency = 0})
654    end)
655
656    return container
657end
658
659-----------------------------------------------------------
660-- Dropdown Component
661-----------------------------------------------------------
662
663local function CreateDropdown(parent, settingKey, label, options, defaultValue)
664    local container = Create("Frame", {
665        Name = settingKey .. "Container",
666        Size = UDim2.new(1, -SECTION_PADDING * 2, 0, 44),
667        BackgroundTransparency = 1,
668        Parent = parent,
669    })
670
671    -- Label
672    Create("TextLabel", {
673        Name = "Label",
674        Size = UDim2.new(0, 160, 1, 0),
675        BackgroundTransparency = 1,
676        Text = label,
677        TextColor3 = COLOR_TEXT_PRIMARY,
678        TextSize = 14,
679        Font = Enum.Font.GothamSemibold,
680        TextXAlignment = Enum.TextXAlignment.Left,
681        ZIndex = 13,
682        Parent = container,
683    })
684
685    -- Dropdown button
686    local dropdownBtn = Create("TextButton", {
687        Name = "DropdownButton",
688        Size = UDim2.new(0, 140, 0, 32),
689        Position = UDim2.new(1, -140, 0.5, -16),
690        BackgroundColor3 = COLOR_ROW_BG,
691        Text = "  " .. defaultValue .. "  v",
692        TextColor3 = COLOR_TEXT_PRIMARY,
693        TextSize = 13,
694        Font = Enum.Font.Gotham,
695        TextXAlignment = Enum.TextXAlignment.Left,
696        AutoButtonColor = false,
697        ZIndex = 13,
698        Parent = container,
699    })
700
701    Create("UICorner", {
702        CornerRadius = UDim.new(0, 8),
703        Parent = dropdownBtn,
704    })
705
706    local dropdownOpen = false
707    local dropdownMenu = nil
708
709    dropdownBtn.MouseButton1Click:Connect(function()
710        dropdownOpen = not dropdownOpen
711
712        if dropdownOpen then
713            dropdownBtn.Text = "  " .. currentSettings[settingKey] .. "  ^"
714
715            -- Create dropdown menu
716            dropdownMenu = Create("Frame", {
717                Name = "DropdownMenu",
718                Size = UDim2.new(0, 140, 0, #options * 32),
719                Position = UDim2.new(1, -140, 0, 36),
720                BackgroundColor3 = COLOR_ROW_HOVER,
721                BorderSizePixel = 0,
722                ZIndex = 20,
723                Parent = dropdownBtn,
724            })
725
726            Create("UICorner", {
727                CornerRadius = UDim.new(0, 8),
728                Parent = dropdownMenu,
729            })
730
731            for i, option in ipairs(options) do
732                local optionBtn = Create("TextButton", {
733                    Name = "Option_" .. option,
734                    Size = UDim2.new(1, 0, 0, 30),
735                    Position = UDim2.new(0, 0, 0, (i-1) * 32 + 1),
736                    BackgroundColor3 = option == currentSettings[settingKey] and COLOR_ACCENT or COLOR_ROW_HOVER,
737                    Text = "  " .. option,
738                    TextColor3 = COLOR_TEXT_PRIMARY,
739                    TextSize = 12,
740                    Font = Enum.Font.Gotham,
741                    TextXAlignment = Enum.TextXAlignment.Left,
742                    AutoButtonColor = false,
743                    ZIndex = 21,
744                    Parent = dropdownMenu,
745                })
746
747                optionBtn.MouseEnter:Connect(function()
748                    Tween(optionBtn, {BackgroundColor3 = COLOR_ACCENT})
749                end)
750                optionBtn.MouseLeave:Connect(function()
751                    if option ~= currentSettings[settingKey] then
752                        Tween(optionBtn, {BackgroundColor3 = COLOR_ROW_HOVER})
753                    end
754                end)
755
756                optionBtn.MouseButton1Click:Connect(function()
757                    currentSettings[settingKey] = option
758                    dropdownBtn.Text = "  " .. option .. "  v"
759                    dropdownOpen = false
760                    if dropdownMenu then
761                        dropdownMenu:Destroy()
762                        dropdownMenu = nil
763                    end
764                    ApplySetting(settingKey, option)
765                end)
766            end
767        else
768            dropdownBtn.Text = "  " .. currentSettings[settingKey] .. "  v"
769            if dropdownMenu then
770                dropdownMenu:Destroy()
771                dropdownMenu = nil
772            end
773        end
774    end)
775
776    return container
777end
778
779-----------------------------------------------------------
780-- Section Construction
781-----------------------------------------------------------
782
783local function CreateSection(name, title)
784    local section = Create("Frame", {
785        Name = name .. "Section",
786        Size = UDim2.new(1, 0, 1, 0),
787        BackgroundTransparency = 1,
788        Visible = false,
789        ZIndex = 12,
790        Parent = contentContainer,
791    })
792
793    -- Scrollable content
794    local scrollingFrame = Create("ScrollingFrame", {
795        Name = "ScrollingContent",
796        Size = UDim2.new(1, 0, 1, 0),
797        BackgroundTransparency = 1,
798        BorderSizePixel = 0,
799        ScrollBarThickness = 4,
800        ScrollBarImageColor3 = COLOR_ACCENT,
801        ScrollBarImageTransparency = 0.5,
802        CanvasSize = UDim2.new(0, 0, 0, 300),
803        ZIndex = 12,
804        Parent = section,
805    })
806
807    Create("UIListLayout", {
808        Padding = UDim.new(0, 8),
809        SortOrder = Enum.SortOrder.LayoutOrder,
810        Parent = scrollingFrame,
811    })
812
813    Create("UIPadding", {
814        PaddingTop = UDim.new(0, SECTION_PADDING),
815        PaddingBottom = UDim.new(0, SECTION_PADDING),
816        PaddingLeft = UDim.new(0, SECTION_PADDING),
817        PaddingRight = UDim.new(0, SECTION_PADDING),
818        Parent = scrollingFrame,
819    })
820
821    sections[name] = { Frame = section, Scroll = scrollingFrame }
822    return scrollingFrame
823end
824
825local function CreateTabButton(name, displayName, icon)
826    local btn = Create("TextButton", {
827        Name = name .. "Tab",
828        Size = UDim2.new(0, 0, 1, 0),
829        AutomaticSize = Enum.AutomaticSize.X,
830        BackgroundColor3 = (name == activeTab) and COLOR_TAB_ACTIVE or COLOR_TAB_INACTIVE,
831        Text = "  " .. (icon or "") .. " " .. displayName .. "  ",
832        TextColor3 = (name == activeTab) and COLOR_TEXT_PRIMARY or COLOR_TEXT_SECONDARY,
833        TextSize = 13,
834        Font = Enum.Font.GothamSemibold,
835        AutoButtonColor = false,
836        ZIndex = 12,
837        Parent = tabContainer,
838    })
839
840    Create("UICorner", {
841        CornerRadius = UDim.new(0, 8),
842        Parent = btn,
843    })
844
845    btn.MouseButton1Click:Connect(function()
846        SwitchTab(name)
847    end)
848
849    btn.MouseEnter:Connect(function()
850        if name ~= activeTab then
851            Tween(btn, {BackgroundColor3 = COLOR_ROW_HOVER})
852        end
853    end)
854    btn.MouseLeave:Connect(function()
855        if name ~= activeTab then
856            Tween(btn, {BackgroundColor3 = COLOR_TAB_INACTIVE})
857        end
858    end)
859
860    return btn
861end
862
863-----------------------------------------------------------
864-- Tab Switching
865-----------------------------------------------------------
866
867local tabButtons = {}
868
869function SwitchTab(tabName)
870    if tabName == activeTab then return end
871    activeTab = tabName
872
873    -- Update tab button visuals
874    for name, btn in pairs(tabButtons) do
875        if name == tabName then
876            Tween(btn, {BackgroundColor3 = COLOR_TAB_ACTIVE})
877            btn.TextColor3 = COLOR_TEXT_PRIMARY
878        else
879            Tween(btn, {BackgroundColor3 = COLOR_TAB_INACTIVE})
880            btn.TextColor3 = COLOR_TEXT_SECONDARY
881        end
882    end
883
884    -- Switch sections with animation
885    for name, section in pairs(sections) do
886        if name == tabName then
887            section.Frame.Visible = true
888            section.Frame.BackgroundTransparency = 1
889            Tween(section.Frame, {BackgroundTransparency = 1}, tweenInfoStandard)
890        else
891            section.Frame.Visible = false
892        end
893    end
894end
895
896-----------------------------------------------------------
897-- Visibility Toggle
898-----------------------------------------------------------
899
900function ToggleSettings(show)
901    isVisible = show
902
903    if show then
904        settingsFrame.Visible = true
905        Tween(settingsFrame, {
906            Position = SETTINGS_POSITION,
907            BackgroundTransparency = 0,
908        }, tweenInfoSpring)
909    else
910        Tween(settingsFrame, {
911            Position = UDim2.new(0.5, 0, 0.35, 0),
912            BackgroundTransparency = 1,
913        }, tweenInfoStandard)
914        task.delay(TWEEN_DURATION, function()
915            if not isVisible then
916                settingsFrame.Visible = false
917            end
918        end)
919    end
920end
921
922-----------------------------------------------------------
923-- Settings Application
924-----------------------------------------------------------
925
926function ApplySetting(key, value)
927    if string.sub(key, 1, 6) == "Volume" then
928        -- Apply volume settings
929        local category = string.sub(key, 7)
930        category = string.lower(category)
931        if category == "master" then
932            SoundService.Volume = value / 100
933        elseif category == "music" then
934            local musicGroup = SoundService:FindFirstChild("MusicGroup")
935            if musicGroup then
936                musicGroup.Volume = value / 100
937            end
938        elseif category == "sfx" then
939            local sfxGroup = SoundService:FindFirstChild("SFXGroup")
940            if sfxGroup then
941                sfxGroup.Volume = value / 100
942            end
943        elseif category == "voice" then
944            local voiceGroup = SoundService:FindFirstChild("VoiceGroup")
945            if voiceGroup then
946                voiceGroup.Volume = value / 100
947            end
948        end
949    elseif key == "ShowFPS" then
950        -- Toggle FPS counter visibility
951        _G.ShowFPSCounter = value
952    elseif key == "GraphicsQuality" then
953        -- Apply graphics quality
954        UserSettings():GetService("UserGameSettings").SavedQualityLevel = math.floor(value)
955    elseif key == "TextSize" then
956        -- Apply text size scaling
957        local scale = value / 100
958        for _, gui in ipairs(playerGui:GetChildren()) do
959            if gui:IsA("ScreenGui") then
960                for _, obj in ipairs(gui:GetDescendants()) do
961                    if obj:IsA("TextLabel") or obj:IsA("TextButton") or obj:IsA("TextBox") then
962                        -- Scale from base size
963                    end
964                end
965            end
966        end
967    end
968
969    -- Update status label
970    local footer = settingsFrame:FindFirstChild("FooterFrame")
971    if footer then
972        local label = footer:FindFirstChild("StatusLabel")
973        if label then
974            label.Text = "Setting updated: " .. key
975            task.delay(2, function()
976                if label then
977                    label.Text = ""
978                end
979            end)
980        end
981    end
982end
983
984-----------------------------------------------------------
985-- Save and Reset
986-----------------------------------------------------------
987
988function SaveSettings()
989    -- Send to server
990    local SettingsEvents = ReplicatedStorage:FindFirstChild("SettingsEvents")
991    if SettingsEvents then
992        local SaveSettingsRemote = SettingsEvents:FindFirstChild("SaveSettings")
993        if SaveSettingsRemote then
994            local success = pcall(function()
995                SaveSettingsRemote:FireServer(currentSettings)
996            end)
997            if success then
998                ShowStatus("Settings saved successfully!", COLOR_SAVE)
999            else
1000                ShowStatus("Failed to save settings.", COLOR_RESET)
1001            end
1002        end
1003    else
1004        ShowStatus("Settings saved locally!", COLOR_SAVE)
1005    end
1006end
1007
1008function ResetSettings()
1009    -- Reset to defaults
1010    for key, value in pairs(DEFAULT_SETTINGS) do
1011        currentSettings[key] = value
1012        ApplySetting(key, value)
1013    end
1014
1015    -- Rebuild UI to reflect defaults
1016    BuildSettingsContent()
1017    ShowStatus("Settings reset to defaults.", COLOR_ACCENT)
1018end
1019
1020function ShowStatus(message, color)
1021    local footer = settingsFrame:FindFirstChild("FooterFrame")
1022    if footer then
1023        local label = footer:FindFirstChild("StatusLabel")
1024        if label then
1025            label.Text = message
1026            label.TextColor3 = color or COLOR_TEXT_SECONDARY
1027            task.delay(3, function()
1028                if label then
1029                    label.Text = ""
1030                    label.TextColor3 = COLOR_TEXT_SECONDARY
1031                end
1032            end)
1033        end
1034    end
1035end
1036
1037-----------------------------------------------------------
1038-- Build Settings Content
1039-----------------------------------------------------------
1040
1041function BuildSettingsContent()
1042    -- Clear existing
1043    for _, section in pairs(sections) do
1044        section.Frame:Destroy()
1045    end
1046    sections = {}
1047    for _, btn in pairs(tabButtons) do
1048        btn:Destroy()
1049    end
1050    tabButtons = {}
1051
1052    -- Create sections
1053    local audioSection = CreateSection("Audio", "Audio")
1054    local displaySection = CreateSection("Display", "Display")
1055    local gameplaySection = CreateSection("Gameplay", "Gameplay")
1056    local accessibilitySection = CreateSection("Accessibility", "Accessibility")
1057
1058    -- Create tab buttons
1059    tabButtons["Audio"] = CreateTabButton("Audio", "Audio", "")
1060    tabButtons["Display"] = CreateTabButton("Display", "Display", "")
1061    tabButtons["Gameplay"] = CreateTabButton("Gameplay", "Gameplay", "")
1062    tabButtons["Accessibility"] = CreateTabButton("Accessibility", "Accessibility", "")
1063
1064    -- ─── Audio Section ───────────────────────────────────
1065    CreateSlider(audioSection, "VolumeMaster", "Master Volume", 0, 100, currentSettings.VolumeMaster)
1066    CreateSlider(audioSection, "VolumeMusic", "Music Volume", 0, 100, currentSettings.VolumeMusic)
1067    CreateSlider(audioSection, "VolumeSFX", "SFX Volume", 0, 100, currentSettings.VolumeSFX)
1068    CreateSlider(audioSection, "VolumeVoice", "Voice Volume", 0, 100, currentSettings.VolumeVoice)
1069
1070    -- ─── Display Section ─────────────────────────────────
1071    CreateToggle(displaySection, "Fullscreen", "Fullscreen Mode", currentSettings.Fullscreen)
1072    CreateToggle(displaySection, "ShowFPS", "Show FPS Counter", currentSettings.ShowFPS)
1073    CreateSlider(displaySection, "GraphicsQuality", "Graphics Quality", 1, 10, currentSettings.GraphicsQuality)
1074
1075    -- ─── Gameplay Section ────────────────────────────────
1076    CreateDropdown(gameplaySection, "Language", "Language", {"English", "Spanish", "French", "German", "Japanese", "Korean", "Chinese"}, currentSettings.Language)
1077    CreateDropdown(gameplaySection, "Difficulty", "Difficulty", {"Easy", "Normal", "Hard", "Expert"}, currentSettings.Difficulty)
1078    CreateToggle(gameplaySection, "ShowTutorial", "Show Tutorials", currentSettings.ShowTutorial)
1079
1080    -- ─── Accessibility Section ───────────────────────────
1081    CreateSlider(accessibilitySection, "TextSize", "Text Size", 50, 150, currentSettings.TextSize)
1082    CreateDropdown(accessibilitySection, "ColorblindMode", "Colorblind Mode", {"None", "Deuteranopia", "Protanopia", "Tritanopia"}, currentSettings.ColorblindMode)
1083    CreateToggle(accessibilitySection, "ReduceMotion", "Reduce Motion", currentSettings.ReduceMotion)
1084
1085    -- Show active tab
1086    SwitchTab(activeTab)
1087end
1088
1089-----------------------------------------------------------
1090-- Global Input Handling for Sliders
1091-----------------------------------------------------------
1092
1093local function SetupGlobalInput()
1094    UserInputService.InputChanged:Connect(function(input)
1095        if draggingSlider and sliderConnections[draggingSlider] then
1096            if input.UserInputType == Enum.UserInputType.MouseMovement or
1097               input.UserInputType == Enum.UserInputType.Touch then
1098                sliderConnections[draggingSlider].Update(input)
1099            end
1100        end
1101    end)
1102
1103    UserInputService.InputEnded:Connect(function(input)
1104        if input.UserInputType == Enum.UserInputType.MouseButton1 or
1105           input.UserInputType == Enum.UserInputType.Touch then
1106            if draggingSlider and sliderConnections[draggingSlider] then
1107                -- Reset knob size
1108                Tween(sliderConnections[draggingSlider].Knob, {Size = UDim2.new(0, KNOB_SIZE, 0, KNOB_SIZE)})
1109                Tween(sliderConnections[draggingSlider].KnobGlow, {Thickness = 2, Transparency = 0.5})
1110            end
1111            draggingSlider = nil
1112        end
1113    end)
1114end
1115
1116-----------------------------------------------------------
1117-- Keyboard Shortcuts
1118-----------------------------------------------------------
1119
1120local function SetupKeyboardShortcuts()
1121    UserInputService.InputBegan:Connect(function(input, gameProcessed)
1122        if gameProcessed then return end
1123        if input.KeyCode == Enum.KeyCode.Escape then
1124            if isVisible then
1125                ToggleSettings(false)
1126            end
1127        end
1128    end)
1129end
1130
1131-----------------------------------------------------------
1132-- Initialization
1133-----------------------------------------------------------
1134
1135local function Initialize()
1136    BuildUI()
1137    BuildSettingsContent()
1138    SetupGlobalInput()
1139    SetupKeyboardShortcuts()
1140
1141    -- Load saved settings from server
1142    task.spawn(function()
1143        local SettingsEvents = ReplicatedStorage:WaitForChild("SettingsEvents", 5)
1144        if SettingsEvents then
1145            local LoadSettings = SettingsEvents:WaitForChild("LoadSettings", 5)
1146            if LoadSettings then
1147                local success, savedSettings = pcall(function()
1148                    return LoadSettings:InvokeServer()
1149                end)
1150                if success and savedSettings then
1151                    for key, value in pairs(savedSettings) do
1152                        if currentSettings[key] ~= nil then
1153                            currentSettings[key] = value
1154                            ApplySetting(key, value)
1155                        end
1156                    end
1157                    BuildSettingsContent()
1158                end
1159            end
1160        end
1161    end)
1162
1163    print("[Settings] Settings Menu initialized. Use settings button or Escape key.")
1164end
1165
1166Initialize()